Skip to content

Commit e1e6150

Browse files
avatarsinavatarsin
committed
centering our page and adding dimensions
1 parent 57c0d82 commit e1e6150

File tree

2 files changed

+147
-130
lines changed

2 files changed

+147
-130
lines changed

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

Lines changed: 137 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -15,141 +15,148 @@ <h4>The Basic Language of the Web: HTML</h4>
1515
<h5>The Basic Language of the Web: HTML</h5>
1616
<h6>The Basic Language of the Web: HTML</h6>
1717
-->
18-
19-
<header class="main-header">
20-
<h1>📘 The Code Magazine</h1>
21-
22-
<nav>
23-
<a href="blog.html">Blog</a>
24-
<a href="#">Challenges</a>
25-
<a href="#">Flexbox</a>
26-
<a href="#">CSS Grid</a>
27-
</nav>
28-
</header>
29-
30-
<article>
31-
<header class="post-header">
32-
<h2>The Basic Language of the Web: HTML</h2>
33-
34-
<img
35-
src="img/laura-jones.jpg"
36-
alt="Headshot of Laura Jones"
37-
height="50"
38-
width="50"
39-
/>
40-
41-
<p id="author">
42-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
43-
</p>
44-
45-
<img
46-
src="img/post-img.jpg"
47-
alt="HTML code on a screen"
48-
width="500"
49-
height="200"
50-
/>
18+
<div class="container">
19+
<header class="main-header">
20+
<h1>📘 The Code Magazine</h1>
21+
22+
<nav>
23+
<a href="blog.html">Blog</a>
24+
<a href="#">Challenges</a>
25+
<a href="#">Flexbox</a>
26+
<a href="#">CSS Grid</a>
27+
</nav>
5128
</header>
5229

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

‎starter/03-CSS-Fundamentals/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,18 @@ body {
99
border-top: 10px solid #1098ad;
1010
}
1111

12+
.container {
13+
width: 700px;
14+
margin: 0 auto;
15+
}
1216
.main-header {
1317
background-color: #f7f7f7;
1418
/* padding: 20px;
1519
padding-left: 40px;
1620
padding-right: 40px; */
1721
padding: 20px 40px;
1822
margin-bottom: 60px;
23+
height: 80px;
1924
}
2025

2126
nav {
@@ -35,6 +40,7 @@ aside {
3540
border-top: 5px solid #1098ad;
3641
border-bottom: 5px solid #1098ad;
3742
padding: 50px 0;
43+
width: 500px;
3844
}
3945

4046
h1,
@@ -156,6 +162,10 @@ a:active {
156162
background-color: purple;
157163
}
158164

165+
.post-img {
166+
width: 100%;
167+
height: auto;
168+
}
159169
/* Resolving conflicts */
160170

161171
/* #copyright {

0 commit comments

Comments
 (0)