diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..308aeddfb --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +theory-lectures-v2-BEST.pdf +theory-lectures-v2-SMALLER.pdf \ No newline at end of file diff --git a/README.md b/README.md index 88e3430a5..3f6fd18fd 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,6 @@ -# Course Material and FAQ for "Build Responsive Real-World Websites with HTML and CSS" +## Inspiration web design website -This repo contains starter files and final code for all sections and projects contained in the course. - -Use starter code to start each section, and **final code to compare it with your own code whenever something doesn't work**! - -👇 **_Please read the following Frequently Asked Questions (FAQ) carefully before starting the course_** 👇 - -## FAQ - -### Q1: How do I download the files? - -**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. - -### Q2: I'm stuck! Where do I get help? - -**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. - -### Q3: What VSCode theme are you using? What about extensions and settings? - -**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). - -### Q4: Can I see the final version of the Omnifood project? - -**A:** Sure! Here you go: [Omnifood](https://www.omnifood.dev). - -### Q5: Where can I find the coding challenge solutions? - -**A:** They are all on codepen, in [this collection](https://codepen.io/collection/7b5e288cb64df1ecc5da8d7a0e78c007?grid_type=list). - -### Q6: Where is the resources page you keep mentioning? - -**A:** It's on my website at . You can subscribe for updates 😉 - -### Q7: Videos don't load, can you fix it? - -**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). - -### Q8: Videos are blurred / have low quality, can you fix it? - -**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). - -### Q9: I want to put these projects in my portfolio. Is that allowed? - -**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! - -### Q10: I love your courses and want to get updates on new courses. How? - -**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 🔥 - -### Q11: How do I get my certificate of completion? - -**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). - -### Q12: Can you add subtitles in my language? - -**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. - -### Q13: Do you accept pull requests? - -**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. +- https://land-book.com/ +- https://onepagelove.com/ +- https://www.awwwards.com/ +- https://pageflows.com/ diff --git a/all-design-guidelines.pdf b/all-design-guidelines.pdf new file mode 100644 index 000000000..486d122c6 Binary files /dev/null and b/all-design-guidelines.pdf differ diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..2097d11c0 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Go Back to Home + + diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..805fa574f --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,116 @@ + + + + + The Basic Language of the WebL: HTML + + + + +
+

📘 The Code Magazine

+ +
+ +
+
+

The Basic Language of the WebL: HTML

+ author image +

Posted by Laura Jones on Monday, June 21st 2027

+ HTML code on a screen +
+

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all about, + and why you too should learn it. +

+ +

What is HTML?

+

+ HTML stands for Hyper Text + Markup Language. It's a markup language that web + developers use to structure and describe the content of a webpage (not a + programming language). +

+ +

+ 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. +

+ +

Why should you learn HTML?

+ +

+ 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). +

+ +

+ 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. +

+ +

In HTML, each element is made up of 3 parts:

+ + +
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+ +

+ You can learn more at the + MDN Web Docs. +

+

Why should you learn HTML?

+

+ There are countless reasons for learning the fundamental language of the + web. Here are 5 of them: +

+ + +

Hopefully you learned something new here. See you next time!

+
+ + + + diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..0c5c168c9 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -3,6 +3,8 @@ The Basic Language of the Web: HTML + + " @@ -15,132 +17,149 @@
The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> -
-

📘 The Code Magazine

- - -
- -
-
-

The Basic Language of the Web: HTML

- - Headshot of Laura Jones - -

Posted by Laura Jones on Monday, June 21st 2027

- - HTML code on a screen +
+
+

📘 The Code Magazine

+
-

- All modern websites and web applications are built using three - fundamental - technologies: HTML, CSS and JavaScript. These are the languages of the - web. -

- -

- In this post, let's focus on HTML. We will learn what HTML is all about, - and why you too should learn it. -

- -

What is HTML?

-

- 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). -

-

- 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. -

-

In HTML, each element is made up of 3 parts:

- -
    -
  1. The opening tag
    2. -
  2. The closing tag
    3. -
  3. The actual element
    4. -
- -

- You can learn more at - MDN Web Docs. -

- -

Why should you learn HTML?

- -

- There are countless reasons for learning the fundamental language of the - web. Here are 5 of them: -

- -
    -
  • To be able to use the fundamental web dev language
    • -
  • - To hand-craft beautiful websites instead of relying on tools like - Worpress or Wix -
    • -
  • To build web applications
    • -
  • To impress friends
    • -
  • To have fun 😃
    • -
- -

Hopefully you learned something new here. See you next time!

-
- - - + + + +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

+ +

What is HTML?

+

+ 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). +

+

+ 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. +

+

In HTML, each element is made up of 3 parts:

+ +
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ + + +

Hopefully you learned something new here. See you next time!

+ + + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..d01bb90ae --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,289 @@ +/* * Universal styles*/ + +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; +} + +/* PAGE SECTIONS */ +body { + color: #444; + font-family: sans-serif; + border-top: 10px solid #1098ad; + /* * Parent's of child with position: absolute */ + position: relative; +} + +.container { + width: 800px; + /* * Making this page have the same space for both left and right side !!! */ + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; + /* position: relative; */ +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +aside { + background-color: #f7f7f7; + border: 5px solid #1098ad; + /* padding-top: 50px; + padding-bottom: 50px; */ + padding: 50px 0px; + width: 500px; +} + +/* SMALLER ELEMENTS */ +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; + /* * Convert the nav lin to Inline-Level elements */ + /* display: inline; */ +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 22px; + margin-bottom: 10px; + /* * Convert the nav lin to Inline-Level elements */ + /* display: inline; */ +} + +li:last-child { + margin-bottom: 0px; +} + +/* * Descendent Selecter */ +/* footer p { + font-size: 16px; +} */ +/* article header p { + font-style: italic; +} */ + +/* * ID Selector: (Don't use this) */ +#author { + font-style: italic; + font-size: 18px; +} +#copyright { + font-size: 16px; +} + +/* * Class Selector: (Use this instead) */ +.related-author { + font-size: 18px; + font-weight: bold; +} +.related { + list-style: none; +} + +/* body { + background-color: blue; +} +*/ + +/* * Pseudo Class */ +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + color: grey; +} + +/* * Just don't use on Descendent selectors */ +/* article p:first-child { + color: red; +} */ + +/* article p:last-child { + color: red; +} */ + +/* a { + color: red; +} */ + +a:link { + color: #1098ad; + /* * Make link have no underline */ + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: olive; + font-weight: bold; + /* text-decoration: underline dotted orangered; */ + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +#copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green; +} + +/* * Already is a inline-block box element*/ +.post-img { + /* * Responsive Size*/ + width: 100%; + height: auto; + /* margin-top: 100px; */ +} + +/* * Convert the nav link to Block-Level elements */ +/* nav a:link { + background-color: orangered; + margin: 20px; + padding: 20px; + display: block; +} */ + +/* * Convert the nav link to Inline-Block Level elements */ +nav a:link { + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0px; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + /* *Position 50px from the top and 50px from the left*/ + /* top: 50px; + left: 50px; */ + /* *Position 50px from the bottom and 50px from the right*/ + bottom: 50px; + right: 50px; +} + +/* * Pseudo Element (use double colon "::" */ +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +/* p::first-line { + color: red; +} */ + +/* * Adjacent sibling selector: + * is the selector of the element that share the same parent. +*/ +h3 + p::first-line { + color: red; +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +/* * Pseudo element: first child element of the parent "h2" */ +h2::before { +} + +/* * Pseudo element: last child element of the parent "h2" */ +h2::after { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + /* * Negative Length: + * It will move to the opposite direction of specify attributes. + * */ + top: -10px; + right: -25px; +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..e52ed5b8b 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -40,6 +40,61 @@ margin: 40px; /* CSS GRID */ + display: grid; + + /* Make all items have width proportions as follows */ + /* grid-template-columns: 2fr 2fr 1fr auto; */ + + /* Create 4 columns, each have the same width "1fr" */ + grid-template-columns: repeat(4, 1fr); + + /* * 2 rows */ + /* grid-template-rows: 300px 200px; */ + + /* Create 2 rows, + both rows have height "1fr", + which is equal to 150px (inherited from element ".el--3" which is the tallest element) + */ + grid-template-rows: 1fr 1fr; + + /* Create 2 rows, + 1) second row have heght "auto", + whcih is only take the space it need for its content. + 2) first row will the leftover height "1fr", + which will filled the entire container. + */ + /* grid-template-rows: 1fr auto; */ + + /* gap: 20px; */ + column-gap: 30px; + row-gap: 40px; + /* Set the proper container height */ + /* height: 500px; */ + display: none; + } + + .el--8 { + grid-column: 2/3; + /* Span to other rows */ + grid-row: 1 / span 2; + grid-row: 1/3; + } + + .el--2 { + /* Same as 1 / span 3 */ + /* grid-column: 1/4; */ + /* grid-column: 1 / span 3; */ + + /* Span 4 columns */ + /* grid-column: 1 / span 4; */ + + /* Span until the end of the grid */ + grid-column: 1 / -1; + grid-row: 2; + } + + .el--6 { + /* grid-row: 3 / 6; */ } .container--2 { @@ -53,6 +108,24 @@ height: 600px; /* CSS GRID */ + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px 100px; + gap: 50px; + /* Aligning tracks inside container */ + justify-content: center; + /* justify-content: space-between; */ + align-content: center; + + /* Aligning items inside grid cells */ + align-items: center; + justify-items: center; + } + + /* Override align-tem and justify-items properties from parent's container */ + .el--3 { + align-self: end; + justify-self: end; } @@ -64,7 +137,7 @@
(4) are
(5) amazing
(6) languages
-
(7) to
+
(8) learn
diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..c38b806fa 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -38,9 +38,54 @@ background-color: #ddd; font-size: 40px; margin: 40px; - + display: flex; + align-items: center; + justify-content: flex-start; + gap: 30px; /* FLEXBOX */ } + + /* *!!! Use 'gap' instead */ + /* .el { + margin-right: 30px; + } */ + + .el { + /* DEFAULTS: + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; */ + + /* * Not make the child elements shrink + flex-basis: 400px; + flex-shrink: 0; + = + flex: 0 0 400px; + */ + + flex-basis: 100px; + /* flex-grow: 1; */ + flex: 1; + } + + .el--1 { + /* Make this element vertically at the top of the container */ + align-self: flex-start; + + flex-grow: 2; + } + + .el--5 { + /* Stretch this element vertically to the same height as the container */ + align-self: stretch; + /* Move this element to after default position (more than zero) */ + order: 1; + } + + .el--6 { + /* Move this element to before default position (less than zero) */ + order: -1; + } diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..04454aed0 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -25,25 +25,30 @@

📘 The Code Magazine

Blog Challenges - Flexbox - CSS Grid + Flexbox + CSS Grid + + - + +

The Basic Language of the Web: HTML

+
+ Headshot of Laura Jones - Headshot of Laura Jones - -

- Posted by Laura Jones on Monday, June 21st 2027 -

+

+ Posted by Laura Jones on Monday, June 21st 2027 +

+

Why should you learn HTML?

Related posts

- +