Skip to content

Commit 0a31060

Browse files
jonasschmedtmannjonasschmedtmann
committed
First commit 🚀
0 parents  commit 0a31060

File tree

333 files changed

+14427
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

333 files changed

+14427
-0
lines changed

‎README.md

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Course Material and FAQ for "Build Responsive Real-World Websites with HTML and CSS"
2+
3+
This repo contains starter files and final code for all sections and projects contained in the course.
4+
5+
Use starter code to start each section, and **final code to compare it with your own code whenever something doesn't work**!
6+
7+
👇 **_Please read the following Frequently Asked Questions (FAQ) carefully before starting the course_** 👇
8+
9+
## FAQ
10+
11+
### Q1: How do I download the files?
12+
13+
**A:** If you're new to GitHub and just want to download the entire code, hit the green button saying "Code", and then choose the "Download ZIP" option. If you can't see the button (on mobile), use [this link](https://github.com/jonasschmedtmann/html-css-course/archive/master.zip) instead.
14+
15+
### Q2: I'm stuck! Where do I get help?
16+
17+
**A:** Have you actually tried to fix the problem on your own? Have you compared your code to the final code? If you failed fixing your problem, please **post a detailed description of the problem to the Q&A area of that video over at Udemy**, along with a [codepen](https://codepen.io/pen/) containing your code. You will get help there.
18+
19+
### Q3: What VSCode theme are you using? What about extensions and settings?
20+
21+
**A:** I use [One Monokai](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai) in this course. [Here is the complete VS Code setup for this course](vscode-setup.md).
22+
23+
### Q4: Can I see the final version of the Omnifood project?
24+
25+
**A:** Sure! Here you go: [Omnifood](https://www.omnifood.dev).
26+
27+
### Q5: Where can I find the coding challenge solutions?
28+
29+
**A:** They are all on codepen, in [this collection](https://codepen.io/collection/7b5e288cb64df1ecc5da8d7a0e78c007?grid_type=list).
30+
31+
### Q6: Where is the resources page you keep mentioning?
32+
33+
**A:** It's on my website at <http://codingheroes.io/resources>. You can subscribe for updates 😉
34+
35+
### Q7: Videos don't load, can you fix it?
36+
37+
**A:** Unfortunately, there is nothing I can do about it. The course is hosted on Udemy, and sometimes they have technical issues like this. Please just come back a bit later or [contact their support team](https://support.udemy.com/hc/en-us).
38+
39+
### Q8: Videos are blurred / have low quality, can you fix it?
40+
41+
**A:** Please open video settings and change the quality from 'Auto' to another value, for example 720p. If that doesn't help, please [contact the Udemy support team](https://support.udemy.com/hc/en-us).
42+
43+
### Q9: I want to put these projects in my portfolio. Is that allowed?
44+
45+
**A:** Absolutely! Just make sure you actually built them yourself by following the course, and that you understand what you did. What is **not allowed** is that you create your own course/videos/articles based on this course's content!
46+
47+
### Q10: I love your courses and want to get updates on new courses. How?
48+
49+
**A:** First, you can subscribe to my email list [at my website](http://codingheroes.io/resources). Plus, I make important announcements on twitter [@jonasschmedtman](https://twitter.com/jonasschmedtman), so you should definitely follow me there 🔥
50+
51+
### Q11: How do I get my certificate of completion?
52+
53+
**A:** A certificate of completion is provided by Udemy after you complete 100% of the course. After completing the course, just click on the "Your progress" indicator in the top right-hand corner of the course page. If you want to change your name on the certificate, please [contact the Udemy support team](https://support.udemy.com/hc/en-us).
54+
55+
### Q12: Can you add subtitles in my language?
56+
57+
**A:** No. I provide professional English captions, but Udemy is responsible for subtitles in all other languages (automatic translations). So please [contact the Udemy support team](https://support.udemy.com/hc/en-us) to request your own language.
58+
59+
### Q13: Do you accept pull requests?
60+
61+
**A:** No, for the simple reason that I want this repository to contain the _exact_ same code that is shown in the videos. However, please feel free to add an issue if you found one.

‎final/02-HTML-Fundamentals/blog.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>BLOG</title>
5+
</head>
6+
<body>
7+
<h2>BLOG</h2>
8+
<a href="index.html">Back to home</a>
9+
</body>
10+
</html>

‎final/02-HTML-Fundamentals/content.txt

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
📘 The Code Magazine
2+
3+
The Basic Language of the Web: HTML
4+
5+
Posted by Laura Jones on Monday, June 21st 2027
6+
7+
All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web.
8+
9+
In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.
10+
11+
What is HTML?
12+
13+
HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language).
14+
15+
HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites.
16+
17+
In HTML, each element is made up of 3 parts:
18+
19+
The opening tag
20+
The closing tag
21+
The actual element
22+
You can learn more at the MDN Web Docs.
23+
24+
Why should you learn HTML?
25+
26+
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
27+
28+
To be able to use the fundamental web dev language
29+
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
30+
To build web applications
31+
To impress friends
32+
To have fun 😃
33+
34+
Hopefully you learned something new here. See you next time!

‎final/02-HTML-Fundamentals/img/challenges.jpg

120 KB
Loading

‎final/02-HTML-Fundamentals/img/laura-jones.jpg

6.64 KB
Loading

‎final/02-HTML-Fundamentals/img/post-img.jpg

53.4 KB
Loading

‎final/02-HTML-Fundamentals/img/related-1.jpg

50.2 KB
Loading

‎final/02-HTML-Fundamentals/img/related-2.jpg

33 KB
Loading

‎final/02-HTML-Fundamentals/img/related-3.jpg

43.5 KB
Loading

‎final/02-HTML-Fundamentals/index.html

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

‎final/03-CSS-Fundamentals/blog.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>BLOG</title>
5+
</head>
6+
<body>
7+
<h2>BLOG</h2>
8+
<a href="index.html">Back to home</a>
9+
</body>
10+
</html>

‎final/03-CSS-Fundamentals/content.txt

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
📘 The Code Magazine
2+
3+
The Basic Language of the Web: HTML
4+
5+
Posted by Laura Jones on Monday, June 21st 2027
6+
7+
All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web.
8+
9+
In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.
10+
11+
What is HTML?
12+
13+
HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language).
14+
15+
HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites.
16+
17+
In HTML, each element is made up of 3 parts:
18+
19+
The opening tag
20+
The closing tag
21+
The actual element
22+
You can learn more at the MDN Web Docs.
23+
24+
Why should you learn HTML?
25+
26+
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
27+
28+
To be able to use the fundamental web dev language
29+
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
30+
To build web applications
31+
To impress friends
32+
To have fun 😃
33+
34+
Hopefully you learned something new here. See you next time!

‎final/03-CSS-Fundamentals/img/challenges.jpg

120 KB
Loading

‎final/03-CSS-Fundamentals/img/laura-jones.jpg

6.64 KB
Loading

‎final/03-CSS-Fundamentals/img/post-img.jpg

53.4 KB
Loading

‎final/03-CSS-Fundamentals/img/related-1.jpg

50.2 KB
Loading

‎final/03-CSS-Fundamentals/img/related-2.jpg

33 KB
Loading

‎final/03-CSS-Fundamentals/img/related-3.jpg

43.5 KB
Loading

0 commit comments

Comments
 (0)