Learn HTML & CSS by Examples

Complete three projects to understand what is HTML and CSS and how they work.

Project 1: Create your own digital business card

In the first project, I will explain the basics of HTML and CSS, I will show you how you can publish your final work for free on GitHub Pages so it's accessible by anyone.

I will walk you through the whole process of creating your first HTML file and explain how to set up email form using a free web service called Formspree.

I will also explain how to make your digital business card responsive so it will look great even on mobile devices.

Project 2: Create a responsive blog header

In this project, we will build upon the knowledge from the first project and cover these topics:

1. How to use HTML header
2. How to create navigation links properly with unordered lists
3. How to use external CSS files
4. How to style the header
5. How to style navigation links and hide bullet points
6. How to create a responsive design using viewport and media queries
7. How to work with color transparency
8. How to use Javascript and jQuery

Project 3: Create a digital restaurant menu!

1. How to use DIVs and background images
2. How to properly position elements
3. What is the difference between block and inline elements
4. How to use gradients in CSS
5. How to use third-party fonts on your web page
6. How to create a responsive design using viewport and media queries
7. How to use Javascript and jQuery

Anyone who wants to learn how to create HTML pages.

1. This is great. It teaches something that more applicable, and useful for daily use and it helps me a lot. I like learning by example. I have learned a great deal about the css from here. I was struggling with positioning elements and gradients before taking this course. Now, I have a clear picture of it. Designing responsive design and media queries are also something that helped me a lot. I know how to use background image more clearly, and I have garnered a lot by making further researches, all inspired by this course. For now, I'm super happy with the content of your course and the style of teaching (learning by example) ~ K Elemo
2. The structure of this course is amazing! The flow of new facts you're familiarising yourself with is at the same time gentle and motivating. Project-based examples are the way to learn concepts in development because they give students the possibility of coming up with their own ones. Jan is very experienced in this field and explains everything he's doing (even the backstory) so your understanding of how things work is always complete. It's done in a very engaging way, also. Therefore, you'll never feel left out of the loop or confused ~ P Witt
3. This course is brilliant and the instructor is amazing. The basics are cleared and a solid foundation is made. I just completed the course and was able to make my business card, blog and a website. Thanks Jan you are amazing ~ S Bhardwaj
4. Wow! Short, Sweet, Simple, and just a well overview of coding websites in general. I never seen such an overview like this. Most would take hours to cover what he dose! Thanks! ~ Dudley
5. Jan is an excellent teacher. This course is a very effective and fast way to take land on web design. If you're short of time to get hands on Sublime Text 3, this course if for you ~ G Martín
6. It was really insightful while going through the course. I enjoyed the course thoroughly and learnt a batch of new things at the same time. And I think, nobody could have put these lessons better than Mr. Zavrel as an instructor ~ V Bhageria
7. Really, it was very good, understood concepts clearly which i was trying hard to understand. In future,I would like to see more lessons about responsive websites with more concepts with real world applications ~ P Singh
8. This is a very good course specially for freshers like me. This course encourage me to learn HTML and CSS in detail. Thank for creating the course like this. Thanks again ~ S Kumar

1. The basics of HTML and CSS
2. How to use GitHub Pages
3. How to use Formspree for creating free email forms
4. How to create a responsive design using viewport and media queries
5. How to create navigation links with unordered lists
6. How to work with color transparency
7. How to properly position elements
8. How to use gradients in CSS
9. How to use third-party fonts on your website

You should be curious to learn new things, the rest is my responsibility as a teacher.