Skip to content

Commit 2926a67

Browse files
jamesacox53jamesacox53
committed
Completed Centering our Page
1 parent ea2e454 commit 2926a67

File tree

2 files changed

+154
-139
lines changed

2 files changed

+154
-139
lines changed

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

Lines changed: 140 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -7,143 +7,147 @@
77
</head>
88

99
<body>
10-
<header class="main-header">
11-
<h1 class="title-text">📘 The Code Magazine</h1>
12-
13-
<nav>
14-
<a href="blog.html" target="_blank">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 class="product-article">
22-
<header>
23-
<h2 class="article-header">The Basic Language of the Web: HTML</h2>
24-
25-
<img
26-
class="author-image"
27-
src="images/laura-jones.jpg"
28-
alt="Photo of Laura Jones"
29-
width="50"
30-
/>
31-
32-
<p class="author">
33-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
34-
</p>
35-
36-
<img
37-
class="article-image"
38-
src="images/post-img.jpg"
39-
alt="HTML code on a screen"
40-
/>
10+
<div class="container">
11+
<header class="main-header">
12+
<h1 class="title-text">📘 The Code Magazine</h1>
13+
14+
<nav>
15+
<a href="blog.html" target="_blank">Blog</a>
16+
<a href="#">Challenges</a>
17+
<a href="#">Flexbox</a>
18+
<a href="#">CSS Grid</a>
19+
</nav>
4120
</header>
4221

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

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
* {
22
margin: 0;
3-
padding: 0 3px;
3+
padding: 0;
4+
}
5+
6+
.container {
7+
width: 700px;
8+
margin: 0 auto;
9+
}
10+
11+
.article-content {
12+
margin: 0 15px;
413
}
514

615
body {
@@ -19,8 +28,9 @@ body {
1928
background-color: #f7f7f7;
2029
border-top: 5px solid #1098ad;
2130
border-bottom: 5px solid #1098ad;
22-
padding: 10px 0;
23-
width: 500px;
31+
padding: 10px 0 0 0;
32+
width: 100%;
33+
margin: 0 auto;
2434
}
2535

2636
h1,
@@ -88,6 +98,7 @@ li:last-child {
8898

8999
.related {
90100
list-style: none;
101+
margin: 0 25px 5px 25px;
91102
}
92103

93104
a:link {

0 commit comments

Comments
 (0)