Skip to content

Commit 94d9ad7

Browse files
UribouzUribouz
committed
feat: centering out page
1 parent fc85007 commit 94d9ad7

File tree

2 files changed

+145
-130
lines changed

2 files changed

+145
-130
lines changed

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

Lines changed: 136 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -17,141 +17,147 @@ <h5>The Basic Language of the Web: HTML</h5>
1717
<h6>The Basic Language of the Web: HTML</h6>
1818
-->
1919

20-
<header class="main-header">
21-
<h1>📘 The Code Magazine</h1>
22-
23-
<nav>
24-
<!-- <strong>This is the navigation</strong> -->
25-
<a href="blog.html">Blog</a>
26-
<a href="#">Challenges</a>
27-
<a href="#">Flexbox</a>
28-
<a href="#">CSS Grid</a>
29-
</nav>
30-
</header>
31-
32-
<article>
33-
<p>Test</p>
34-
<header class="post-header">
35-
<h2>The Basic Language of the Web: HTML</h2>
36-
37-
<img
38-
src="img/laura-jones.jpg"
39-
alt="Headshot of Laura Jones"
40-
height="50"
41-
width="50"
42-
/>
43-
44-
<p id="author">
45-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
46-
</p>
47-
48-
<img
49-
src="img/post-img.jpg"
50-
alt="HTML code on a screen"
51-
width="500"
52-
height="200"
53-
class="post-img"
54-
/>
20+
<div class="container">
21+
<header class="main-header">
22+
<h1>📘 The Code Magazine</h1>
23+
<nav>
24+
<!-- <strong>This is the navigation</strong> -->
25+
<a href="blog.html">Blog</a>
26+
<a href="#">Challenges</a>
27+
<a href="#">Flexbox</a>
28+
<a href="#">CSS Grid</a>
29+
</nav>
5530
</header>
5631

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

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,15 @@ body {
1111
font-family: sans-serif;
1212
border-top: 10px solid #1098ad;
1313
}
14+
15+
.container {
16+
width: 800px;
17+
/* * Making this page have the same space for both left and right side !!! */
18+
/* margin-left: auto;
19+
margin-right: auto; */
20+
margin: 0 auto;
21+
}
22+
1423
.main-header {
1524
background-color: #f7f7f7;
1625
/* padding: 20px;

0 commit comments

Comments
 (0)