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.6 (96 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
2,344 students enrolled
$19
$40
52% off
Take This Course
  • Lectures 31
  • Length 4 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2015 English

Course Description

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.

What are the requirements?

  • Basic computer skills such as downloading and installing software.
  • Ability to create, save, rename files and folders etc on a computer.

What am I going to get from this course?

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

What is the target audience?

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction & Getting started
02:51

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.

02:36
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.
7 pages

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.

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


1 page

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

04:01

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.

09:38

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.
06:25

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

Section Quiz
3 questions
Section 2: Project 1- MyRecipe Website
11:23

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.

16:52

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

09:01

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

14:54

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.

03:22

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

05:35

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.

Section Quiz
3 questions
Section 3: Project 2- MyCollege Website
Download Images for Project 2
1 page
13:25

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.

09:56

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.

16:46

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.

12:51

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.

05:02

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

10:47

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.

10:12

This video introduces CSS3 Media Queries or 'Breakpoints'. We create a media query to apply CSS only when the screen size reacher 600px wide or bigger.

09:52

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

07:18

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.

Section Quiz
2 questions
Section 4: Project 3- MyHotel Website
Download Images for Project 3
1 page
05:34

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.

06:12

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.

08:29

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

07:38

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.

Section 5: Thank You and What Now?
00:42

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.

Keep on learning
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Chris Dixon, Web Developer and teacher at Core Web Training

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.

Thanks for taking an interest and I look forward to you joining me.

Chris

Ready to start learning?
Take This Course