Skip to content

Commit 58bf3e1

Browse files
rahilsamarahilsama
committed
centering the page
1 parent c6a3218 commit 58bf3e1

File tree

2 files changed

+143
-126
lines changed

2 files changed

+143
-126
lines changed

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

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

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,13 @@ aside {
8585
width: 500px;
8686
}
8787

88+
.container {
89+
width: 700px;
90+
/* margin-left: auto;
91+
margin-right: auto; */
92+
margin: 0 auto;
93+
}
94+
8895
.main-header {
8996
background-color: #f7f7f7;
9097
padding: 20px;
@@ -164,3 +171,8 @@ a:active {
164171
nav {
165172
font-size: 18px;
166173
}
174+
175+
.post-pic {
176+
width: 100%;
177+
height: auto;
178+
}

0 commit comments

Comments
 (0)