HTML & CSS for beginners: Build 3 projects from scratch
4.3 (302 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,922 students enrolled

HTML & CSS for beginners: Build 3 projects from scratch

Learn to build websites from scratch in this project based course. Also covers responsive web design and Bootstrap.
4.3 (302 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,922 students enrolled
Created by Chris Dixon
Last updated 1/2018
English [Auto-generated]
Current price: $12.99 Original price: $19.99 Discount: 35% off
9 minutes left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 2 articles
  • 12 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build websites confidently using the fundamental web skills HTML and CSS.
  • Use the Bootstrap framework to speed up the development process.
  • Create fully responsive websites using media queries, both by hand coding and by using Bootstrap.
  • Set up web projects correctly and link to javascript files to improve cross browser compatibility.
  • Apply a technique to serve different size images to different devices, meaning improved loading times on mobile devices and clearer images.
  • Build a great looking and functional website for personal, business use or to kick start a new career.
Course content
Expand all 32 lectures 03:49:50
+ Introduction & Getting started
8 lectures 25:31

A brief introduction to the course and a quick look at the 3 projects we will be building. This video gives you an idea of what can be achieved by using the HTML & CSS techniques used in this course and how you will be on your way to building 3 websites.

This video shows what you can achieve in web design with just a few hours of dedication.

Preview 02:51
This video is for students new to Udemy. We look over the Udemy screenshot and emphasise using the HD button to get clearer, sharper HD video on this course.
Finding your way around

All tools and software used in this course is completely free and easy to download. All that is needed is a computer with internet connection, a text editor and a web browser. This course uses Brackets as the text editor and Chrome for the web browser. Everything you need to begin web design.

Tools Required
7 pages

At the end of this slideshow you will learn:

  • What HTML is and how we use HTML elements to structure a webpage.
  • How HTML attributes are used in tags to provide more information.
  • How to nest HTML elements.
  • What CSS is used for.
  • How CSS allows us to keep our styling separate from our content.
  • You will discover CSS syntax.
  • The 3 ways to add CSS to our web pages.
The main thing to take away from this slide show is:

HTML is for the Content and Structure, CSS is for the Styling and Layout.

What is HTML & CSS?
8 pages

All images are provided for the projects to follow along with the course.

Download Images for Project 1
1 page

This video will teach you how to correctly set up your project.

You will learn how to arrange you html pages, css files, javascript folders and project images.

File & Folder Structure

This video teaches students how to set up a basic HTML structure. You will learn:

  • How to include the html doctype.
  • Setting the html tags and including the page language.
  • Including the head and body section.
  • How to set the page title.
  • Using the head section to include meta tags such as the character set.
  • How to link stylesheets.
  • Why we need the HTML5 Shiv and how to include it in our projects.
Basic HTML Structure

A quick look at some useful resources which may help you when building websites using HTML & CSS.

Useful Resources
Section Quiz
3 questions
+ Project 1- MyRecipe Website
6 lectures 01:01:07

This video looks at adding the HTML for our header section of our MyRecipe website.

This video is the first of the 3 web design / development projects.

HTML5 Header Section

Now the HTML for the header is finished we look at styling the header section using CSS.

Preview 16:52

This video is all about moving on from the header section and adding the HTML for the main content section.

HTML- Main content area

Lets now add our CSS styling for the content area. We provide styling for the main images, you will also learn about floating images and absolute/relative positioning.

Styling the main content

In this video we move onto adding the HTML for the footer section.

HTML- Adding the footer

The final video in the section is all about finishing off your website by adding CSS styling for the footer section.

This lecture also has the project source code available as a download to compare if you encounter any errors or typos.

Styling the footer
Section Quiz
3 questions
+ Project 2- MyCollege Website
10 lectures 01:36:09
Download Images for Project 2
1 page

Welcome to the second web design / development project.

In this video we will set up Project 2, a college themed website which is fully responsive. We will create the responsive website from scratch, using no frameworks to really give you a better understanding of how media queries and responsive design works.

We will set up the basic HTML, like our css file and download and link our website to Picturefill, which is a Javascript 'polyfill' to allow us to use responsive images.

Setting up our responsive project

Now we have our website set up we will add the header section. This section involves using the srcset attribute to provide correctly scaled images for different size devices.

HTML Header- Adding the menu and responsive images

In this video we finish all the HTML for the project. We move down through the rows carefully setting up our sections to make sure they can respond correctly on all size devices.

Adding the final HTML

Great work, all our HTML is now in place so we can move on to the CSS. We begin work on the mobile first and global CSS and also add the clearfix.

Mobile first styling- Header section

This video continues on with the remaining header and menu section of the mobile first css styling.

Mobile first styling- Header section continued

In this video we wrap up the remaining CSS for the mobile view. We move on from the header & menu section and continue with the styling and layout for the main content and footer section.

Final CSS for mobile view

This video introduces CSS3 Media Queries or 'Breakpoints'.

We create a media query to apply CSS only when a certain condition is met.

For example, we may want to change the CSS layout to be the full width of the screen for smaller devices, and then a new set of CSS rules as there is more screen space available.

Media Queries can also be taken much further too, to apply different rules, styling or layout based on the device orientation (landscape, portrait), width, height or resolution to name a few.

Preview 10:12

We continue with the remaining CSS for the tablet view over 600px.

Tablet styling continued

Our website is now looking good on mobile and tablet size devices. This final video of the 'MyCollege' project introduces one final CSS3 Media Query. This allows us to apply specific css when the users viewport is over 900px wide.

This lecture also has the project source code available as a download to compare if you encounter any errors or typos.

Final CSS for larger devices and desktops
Section Quiz
2 questions
+ Project 3- MyHotel Website
6 lectures 28:04
Important update
Download Images for Project 3
1 page

Welcome to the third web design / development project.

This is the final project of this course, MyHotel. This video introduces the popular Bootstrap framework. Bootstrap is a fully responsive front end framework for building websites in HTML, CSS and Javascript.

We will set up our project by downloading Bootstrap and setting up the basic skeleton of the website.

Introduction to Bootstrap & Setting up

We begin our home page by creating the responsive navigation bar. This includes drop down menus and also shows you how to include Glyphicons into your design.

Adding the responsive navigation bar

This video focuses on creating the Javascript rotating carousel and marketing areas.

Including the sliding carousel & marketing area

Welcome to the final part of this project. The project is finished off by adding the 'featurettes' section and footer. You will also learn how to add your own stylesheet to override the Bootstrap css.

This lecture also has the project source code available as a download to compare if you encounter any errors or typos.

Finishing off with the featured area and footer
+ Thank You and What Now?
2 lectures 00:58

Well done, hopefully you will now be comfortable building websites. You should now have the confidence and skills to build you own personal or business website. Or even begin persuing a career in web design. Either way I hope you have enjoyed the course and thank you.

Thank you and what now?
Keep on learning
  • Basic computer skills such as downloading and installing software.
  • Ability to create, save, rename files and folders etc on a computer.

Now includes support for CSS Flexbox and the Picture element.

Sign up now risk free: comes with a 30 day Udemy backed money back guarantee!


Learn how to build websites from scratch using the essential ingredients, HTML and CSS.

By the end of this course you will have the confidence and ability to create beautiful, functional websites. This course is project based so you be jumping into building your first website in no time. Don't worry if you have little or no experience, I will take it easy and try to clearly explain what we are doing and learn as we build.

I believe this is the best way to learn, you will be able to apply what you are learning to a real project and instantly see the results.

What you will be building:

  • Project 1-

Begin by creating static recipe website from scratch, learn the fundamentals of HTML & CSS by hand coding your first website.

  • Project 2-

Building on the skills you have learned, we will now step it up by creating a fully responsive College website, again from scratch which looks great on any device. You will learn new techniques such as media queries and how to set different size images to different size devices to improve download times and image quality.

  • Project 3-

You should now have a good understanding of how websites are build after building 2 websites from scratch. We will now move on to use the popular Bootstrap framework, this will allow us to build great looking, responsive websites faster and easier. You will be introduced to many of Bootstraps great features as we build the third and final project, a hotel website.

This final website will be packed with great features such as drop down navigation bars, glyphicons, a sliding carousel and a mobile first grid system.

This course is ideal if you want to save money and build a website for personal use, for your business, or maybe you want to launch a new career.

Who this course is for:
  • This course is intended for beginners. No experience is necessary however if you have some experience this may be a good refresher on the core concepts of building websites (HTML & CSS).
  • If you have some experience of HTML and CSS, you may find this course useful to begin learning responsive design or how to use the Bootstrap framework.
  • You probably should not take this course if you are looking for a intermediate or advanced course, no server side or scripting languages are discussed in any detail.