Skip to content

Commit 3765cdf

Browse files
mirmak4mirmak4
committed
Did a trick to Center web page inside web browser window. By creating a container div inside body with defined width, and horizontal margins auto.
1 parent 3a593c3 commit 3765cdf

File tree

2 files changed

+154
-140
lines changed

2 files changed

+154
-140
lines changed

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

Lines changed: 147 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -16,151 +16,158 @@ <h5>The Basic Language of the Web: HTML</h5>
1616
<h6>The Basic Language of the Web: HTML</h6>
1717
-->
1818

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

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

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@ body {
1111
border-top: 10px solid #1098ad;
1212
}
1313

14+
.container {
15+
width: 800px;
16+
/* margin-left: auto;
17+
margin-right: auto; */
18+
margin: 0 auto;
19+
}
20+
1421
.main-header {
1522
background-color: #f7f7f7;
1623
/* padding: 20px;

0 commit comments

Comments
 (0)