HTML & CSS for beginners: Build your first website
4.5 (4 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.
13 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML & CSS for beginners: Build your first website to your Wishlist.

Add to Wishlist

HTML & CSS for beginners: Build your first website

Beginning front-end web development
4.5 (4 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.
13 students enrolled
Created by Steer Systems Ltd
Last updated 1/2016
Price: $50
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
What Will I Learn?
  • Build a responsive website from scratch using HTML and CSS.
  • Learn the fundamental concepts of web development.
  • Understand the latest industry standards and best tools available for building websites.
View Curriculum
  • You'll need a computer (Mac, Windows, Linux etc).
  • You'll need to download and install Google Chrome
  • You'll need to download and install Atom Editor
  • No prior knowledge of HTML or CSS required.

Learn how to build a responsive website from scratch!

I'm an instructor at Steer - code school based in London. At Steer, we believe in project-based learning and design-led programming courses. This course is suitable for complete beginners to code.

On the course I’ll lead you through each step needed to create beautiful, bespoke websites of your own.

You’ll build a single column site that'll introduce you to the basics of HTML. Together we’ll look at elements like html, head, body & section, and work out where each of these should be used to correctly structure your content.

Once we’ve covered all of that we'll move on to CSS, looking at selectors, classes, properties and more.

Finally we'll look at making your site responsive - showing you how to make sites look good across different screen sizes.

By the end of this course you'll have a beautiful food-blog style site which you can use as a template for your own projects. This course will ensure you have all the knowledge you need to take your first steps as a web developer.

What am I going to get from this course?

  • 65 lectures and over 3.5 hours of video content!
  • Learn how to make beautiful websites using HTML & CSS.
  • Tried-and-tested methods of teaching and accelerated learning.
  • Get access to our exercise files & specially created assets.
  • Help from our instructors, whenever you need it.
Who is the target audience?
  • This course is for complete beginners to code who want to learn how to build websites.
  • No prior experience or knowledge of code is necessary.
  • The course is also suitable if you have some HTML and CSS experience, but need to refresh your knowledge or learn to build websites from the ground up.
  • This course is popular with entrepreneurs and designers looking to add to their skill-set.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
66 Lectures
2 Lectures 07:42

Find out what you'll learn on this course and check out the project you'll build - 'Munch'!

In this lecture I'll show you the tools you'll need and where to get started. We'll use 'Hello World' as an example of displaying text in the browser.

Download the following free tools to your computer to follow along:

1) Google Chrome

2) Atom Editor

Preview 07:11

Setting up your project & structuring your HTML
9 Lectures 19:23
HTML tags explained

Setting up your HTML with a doctype

In this lecture you'll learn about the <html> element and see how to write opening and closing tags.

Opening and closing HTML tags

Syntax highlighting in Atom

Structuring your HTML

HTML title tag

Adding comments to your code

Meta tags: Adding a site description

Meta tags: Setting up for responsive design
Adding content with HTML (Part 1)
7 Lectures 22:55
Adding content to the body with the header tag

Adding an h1

Adding a logo with the image tag

Creating your site navigation

Adding new content using the section tag

Wrapping content with the div tag

Paragraph One:

This homemade granola recipe will keep you stocked up for a while and, most importantly, it tastes delicious! I like to eat it layered with yogurt, fruit compote, pistachios and pomegranate (I love coconut yogurt but any thick style yogurt is great). The joy of having delicious homemade granola on tap is that it acts as the perfect base to add the topping of your[...]

Creating a hierarchy of content
Adding content with HTML (Part 2)
8 Lectures 19:46
Dividing up your content

Paragraph Two:

This braised pork with thickened soy gravy and pak choi is the perfect fit if you are craving comfort food. For this recipe I used flat noodles, perfect for soaking up all that delicious gravy, but if they’re not your bag then you can easily substitute in something else. This dish is rich and warming whilst remaining fresh tasting, thanks to the pak [...]

Setting up a second post

Adding content for the second post

Dividing up content for the second post

Embedding a YouTube video

HTML iframe attributes

Paragraph Three:

This warm pan fried rainbow trout & fennel pasta salad has the benefit of looking luxurious and tasting amazing whilst being quick and easy to make. In this specific instance, I used Mafaldine pasta which looks beautiful on a plate but it tastes just as good with other pasta shapes. This is a great one, ideal for a midweek pick-me-up or even [...]

Adding final content to the last post

Adding a footer
Styling your content with CSS (Part 1)
10 Lectures 22:31
Setting up your CSS

Linking your CSS files to your HTML

CSS syntax: Testing your links

Using Google fonts

Applying CSS rules to the body

Defining general font rules for your site

Constraining content on your page

Centering content on your page

The Box model

Setting the text and background colour
Styling your content with CSS (Part 2)
8 Lectures 37:45
Styling the header

Styling the h1

Styling the navigation

Creating hover effects

Styling the post section

CSS classes: Creating a "post-content" class

Creating and styling a "post-details" class

Styling the footer
Responsive design
6 Lectures 21:00
Introducing responsive design

Creating a fluid width

Creating fluid images

Reducing padding and margin for mobile screens

Display properties: Making your navigation stack
Creating a second page & adding a form
11 Lectures 32:54
Creating a contact page

Recap : Boilerplate HTML

Creating the header for the contact page

Embedding a map from Google

Creating content for the contact page

Introducing forms: Creating a name input field

Adding an email input field

Adding a drop-down select box

Adding a multi-line text field

Adding a submit button

Adding a footer to the contact page
Styling up your form
5 Lectures 21:14
CSS styles for the contact page - styling the form

Styling the form input fields

Styling the textarea

Styling the submit button

In this lecture we take a look back on what you've learnt and suggest the following sites to help you progress further:

Congratulations on completing the course! Don't forget to add a rating :)

What you've learnt
About the Instructor
Steer Systems Ltd
4.5 Average rating
4 Reviews
13 Students
1 Course
Making technology education accessible

Steer is a code school based in London. Over the past 3 years, we've taught over 1000 people to code on practical courses. Amongst our students, we’ve seen many designers, entrepreneurs, and people from great companies like Apple, IDEO and Samsung.

Whoever you are, wherever you’re from, diving into a new skill can be tricky. Our courses focus on a hands-on approach to learning, so that you’re putting things into context from the word go.

Now, we’re bringing our classroom online. We’re combining the same teaching ethos that has helped thousands of people take their first step with code, with the flexibility of learning when you want, where you want.

Whether you’re looking to become a web developer, have an idea for a great new website, or simply want to learn a new skill, our courses can help you get to where you want to be.