Skip to content

Commit 4cc740a

Browse files
andreituicuandreituicu
committed
Section 3 - CSS Fundamentals. part 2.
1 parent ecf7be5 commit 4cc740a

13 files changed

+325
-144
lines changed

‎slides/03-CSS-Fundamentals/1-css-priority.png

646 KB
Loading

‎slides/03-CSS-Fundamentals/2-css-box-model.png

1.33 MB
Loading

‎slides/03-CSS-Fundamentals/3-css-box-model-analogy.png

2.09 MB
Loading

‎slides/03-CSS-Fundamentals/4-css-box-model-width-height-calculation.png

1.31 MB
Loading

‎slides/03-CSS-Fundamentals/5-css-block-level-elements.png

2.04 MB
Loading

‎slides/03-CSS-Fundamentals/6-css-inline-elements.png

891 KB
Loading

‎slides/03-CSS-Fundamentals/7-css-boxtypes-comparison.png

342 KB
Loading

‎slides/03-CSS-Fundamentals/8-css-positioning.png

384 KB
Loading

‎slides/03-CSS-Fundamentals/9-css-absolute-positioning.png

378 KB
Loading

‎starter/03-CSS-Fundamentals/index.html

Lines changed: 134 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -7,140 +7,145 @@
77
</head>
88

99
<body>
10-
<header class="main-header">
11-
<h1>📘 The Code Magazine</h1>
12-
13-
<nav>
14-
<a href="blog.html">Blog</a>
15-
<a href="#">Challenges</a>
16-
<a href="#">Flexbox</a>
17-
<a href="#">CSS Grid</a>
18-
</nav>
19-
</header>
20-
21-
<article>
22-
<header>
23-
<h2>The Basic Language of the Web: HTML</h2>
24-
25-
<img
26-
src="img/laura-jones.jpg"
27-
alt="Headshot of Laura Jones"
28-
width="50"
29-
height="50"
30-
/>
31-
<p id="author">
32-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
33-
</p>
34-
35-
<img
36-
src="img/post-img.jpg"
37-
alt="HTML code on a screen"
38-
width="500"
39-
height="200"
40-
/>
10+
<div class="container">
11+
<header class="main-header">
12+
<h1>📘 The Code Magazine</h1>
13+
14+
<nav>
15+
<a href="blog.html">Blog</a>
16+
<a href="#">Challenges</a>
17+
<a href="#">Flexbox</a>
18+
<a href="#">CSS Grid</a>
19+
</nav>
20+
21+
<button>❤️ Like</button>
4122
</header>
4223

43-
<p>
44-
All modern websites and web applications are built using three
45-
<em>fundamental</em>
46-
technologies: HTML, CSS and JavaScript. These are the languages of the
47-
web.
48-
</p>
49-
50-
<p>
51-
In this post, let's focus on HTML. We will learn what HTML is all about,
52-
and why you too should learn it.
53-
</p>
54-
55-
<h3>What is HTML?</h3>
56-
57-
<p>
58-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
59-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
60-
language that web developers use to structure and describe the content
61-
of a webpage (not a programming language).
62-
</p>
63-
64-
<p>In HTML, each element is made up of 3 parts:</p>
65-
66-
<p>
67-
HTML consists of elements that describe different types of content:
68-
paragraphs, links, headings, images, video, etc. Web browsers understand
69-
HTML and render HTML code as websites.
70-
</p>
71-
72-
<ol>
73-
<li>The opening tag</li>
74-
<li>The closing tag</li>
75-
<li>The actual element</li>
76-
</ol>
77-
78-
<p>
79-
You can learn more at the
80-
<a
81-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
82-
target="_blank"
83-
>
84-
MDN Web Docs</a
85-
>.
86-
</p>
87-
88-
<h3>Why should you learn HTML?</h3>
89-
90-
<p>
91-
There are countless reasons for learning the fundamental language of the
92-
web. Here are 5 of them:
93-
</p>
94-
95-
<ul>
96-
<li>To be able to use the fundamental web dev language</li>
97-
<li>
98-
To hand-craft beautiful websites instead of relying on tools like
99-
Worpress or Wix
100-
</li>
101-
<li>To build web applications</li>
102-
<li>To impress friends</li>
103-
<li>To have fun 😃</li>
104-
</ul>
105-
106-
<p>Hopefully you learned something new here. See you next time!</p>
107-
</article>
108-
109-
<aside>
110-
<h4>Related posts</h4>
111-
112-
<ul class="related">
113-
<li>
24+
<article>
25+
<header class="post-header">
26+
<h2>The Basic Language of the Web: HTML</h2>
27+
11428
<img
115-
src="img/related-1.jpg"
116-
alt="Person Coding"
117-
width="75"
118-
height="75"
29+
src="img/laura-jones.jpg"
30+
alt="Headshot of Laura Jones"
31+
width="50"
32+
height="50"
11933
/>
120-
<a href="#" target="_blank">How to Learn Web Development</a>
121-
<p class="related-author">By Jonas Schmedmann</p>
122-
</li>
123-
<li>
34+
<p id="author">
35+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
36+
</p>
37+
12438
<img
125-
src="img/related-2.jpg"
126-
alt="Lightning strike"
127-
width="75"
128-
height="75"
39+
class="post-img"
40+
src="img/post-img.jpg"
41+
alt="HTML code on a screen"
42+
width="500"
43+
height="200"
12944
/>
130-
<a href="#" target="_blank">The Unknown Powers of CSS</a>
131-
<p class="related-author">By Jim Dillion</p>
132-
</li>
133-
<li>
134-
<img src="img/related-3.jpg" alt="JS Code" width="75" height="75" />
135-
<a href="#" target="_blank">Why JavaScript is Awesome</a>
136-
<p class="related-author">By Matilda</p>
137-
</li>
138-
</ul>
139-
</aside>
140-
<footer>
141-
<p id="copyright" class="copyright text">
142-
Copyright &copy; 2027 The Code Magazine
143-
</p>
144-
</footer>
45+
</header>
46+
47+
<p>
48+
All modern websites and web applications are built using three
49+
<em>fundamental</em>
50+
technologies: HTML, CSS and JavaScript. These are the languages of the
51+
web.
52+
</p>
53+
54+
<p>
55+
In this post, let's focus on HTML. We will learn what HTML is all
56+
about, and why you too should learn it.
57+
</p>
58+
59+
<h3>What is HTML?</h3>
60+
61+
<p>
62+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
63+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
64+
language that web developers use to structure and describe the content
65+
of a webpage (not a programming language).
66+
</p>
67+
68+
<p>In HTML, each element is made up of 3 parts:</p>
69+
70+
<p>
71+
HTML consists of elements that describe different types of content:
72+
paragraphs, links, headings, images, video, etc. Web browsers
73+
understand HTML and render HTML code as websites.
74+
</p>
75+
76+
<ol>
77+
<li>The opening tag</li>
78+
<li>The closing tag</li>
79+
<li>The actual element</li>
80+
</ol>
81+
82+
<p>
83+
You can learn more at the
84+
<a
85+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
86+
target="_blank"
87+
>
88+
MDN Web Docs</a
89+
>.
90+
</p>
91+
92+
<h3>Why should you learn HTML?</h3>
93+
94+
<p>
95+
There are countless reasons for learning the fundamental language of
96+
the web. Here are 5 of them:
97+
</p>
98+
99+
<ul>
100+
<li>To be able to use the fundamental web dev language</li>
101+
<li>
102+
To hand-craft beautiful websites instead of relying on tools like
103+
Worpress or Wix
104+
</li>
105+
<li>To build web applications</li>
106+
<li>To impress friends</li>
107+
<li>To have fun 😃</li>
108+
</ul>
109+
110+
<p>Hopefully you learned something new here. See you next time!</p>
111+
</article>
112+
113+
<aside>
114+
<h4>Related posts</h4>
115+
116+
<ul class="related">
117+
<li>
118+
<img
119+
src="img/related-1.jpg"
120+
alt="Person Coding"
121+
width="75"
122+
height="75"
123+
/>
124+
<a href="#" target="_blank">How to Learn Web Development</a>
125+
<p class="related-author">By Jonas Schmedmann</p>
126+
</li>
127+
<li>
128+
<img
129+
src="img/related-2.jpg"
130+
alt="Lightning strike"
131+
width="75"
132+
height="75"
133+
/>
134+
<a href="#" target="_blank">The Unknown Powers of CSS</a>
135+
<p class="related-author">By Jim Dillion</p>
136+
</li>
137+
<li>
138+
<img src="img/related-3.jpg" alt="JS Code" width="75" height="75" />
139+
<a href="#" target="_blank">Why JavaScript is Awesome</a>
140+
<p class="related-author">By Matilda</p>
141+
</li>
142+
</ul>
143+
</aside>
144+
<footer>
145+
<p id="copyright" class="copyright text">
146+
Copyright &copy; 2027 The Code Magazine
147+
</p>
148+
</footer>
149+
</div>
145150
</body>
146151
</html>

‎starter/03-CSS-Fundamentals/product-component.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
16
article {
27
font-family: sans-serif;
38
line-height: 1.4;
@@ -6,13 +11,31 @@ article {
611
/* PRODUCT */
712
.product {
813
border: 4px solid black;
14+
width: 825px;
15+
margin: 50px auto;
16+
position: relative;
17+
}
18+
19+
.sale-label {
20+
background-color: #ec2f2f;
21+
color: #fff;
22+
font-size: 12px;
23+
text-transform: uppercase;
24+
font-weight: bold;
25+
padding: 7px 15px;
26+
display: inline-block;
27+
position: absolute;
28+
top: -17px;
29+
left: -38px;
30+
letter-spacing: 2px;
931
}
1032

1133
.product-title {
1234
text-align: center;
1335
font-size: 22px;
1436
text-transform: uppercase;
1537
background-color: #f7f7f7;
38+
padding: 15px;
1639
}
1740

1841
/* PRODUCT INFORMATION */
@@ -25,26 +48,68 @@ article {
2548
text-transform: uppercase;
2649
font-weight: bold;
2750
color: #777;
51+
margin-bottom: 20px;
2852
}
2953

3054
.more-info:link,
3155
.more-info:visited {
3256
color: black;
57+
margin-bottom: 30px;
58+
display: inline-block;
3359
}
3460

3561
.more-info:hover,
3662
.more-info:active {
3763
text-decoration: none;
3864
}
3965

66+
/* PRODUCT VARIATIONS */
67+
.variation-color {
68+
display: inline-block;
69+
height: 22px;
70+
width: 22px;
71+
margin-right: 10px;
72+
}
73+
74+
.variation-color-black {
75+
background-color: #000;
76+
}
77+
78+
.variation-color-blue {
79+
background-color: #2f6ee2;
80+
}
81+
82+
.variation-color-red {
83+
background-color: #ec2f2f;
84+
}
85+
86+
.variation-color-yellow {
87+
background-color: #f0bf1e;
88+
}
89+
90+
.variation-color-green {
91+
background-color: #90cc20;
92+
}
93+
94+
.variation-color-brown {
95+
background-color: #885214;
96+
}
97+
4098
/* PRODUCT DETAILS */
4199
.details-title {
42100
text-transform: uppercase;
43101
font-size: 16px;
102+
margin-bottom: 15px;
103+
margin-top: 30px;
44104
}
45105

46106
.details-list {
47107
list-style: square;
108+
margin-left: 20px;
109+
}
110+
111+
.details-list li {
112+
margin-bottom: 10px;
48113
}
49114

50115
/* BUTTON */
@@ -55,6 +120,9 @@ article {
55120
font-size: 20px;
56121
text-transform: uppercase;
57122
cursor: pointer;
123+
width: 100%;
124+
padding: 15px;
125+
border-top: 4px solid black;
58126
}
59127

60128
.add-cart:hover {

0 commit comments

Comments
 (0)