HTML & CSS for beginners: Build your first website

Beginning front-end web development
5.0 (2 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.
9 students enrolled
$50
Take This Course
  • Lectures 66
  • Length 3.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
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/2016 English

Course Description

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.

What are the requirements?

  • You'll need a computer (Mac, Windows, Linux etc).
  • You'll need to download and install Google Chrome https://www.google.com/chrome/browser/desktop/
  • You'll need to download and install Atom Editor https://atom.io/
  • No prior knowledge of HTML or CSS required.

What am I going to get from this course?

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

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

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
07:11

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 https://www.google.com/chrome/browser/desktop/

2) Atom Editor https://atom.io/

Where to find the exercise files
Preview
00:31
Section 2: Setting up your project & structuring your HTML
HTML tags explained
00:48
Setting up your HTML with a doctype
01:53
01:40

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

Syntax highlighting in Atom
01:09
Structuring your HTML
03:33
HTML title tag
02:34
Adding comments to your code
02:24
Meta tags: Adding a site description
03:11
Meta tags: Setting up for responsive design
02:11
Section 3: Adding content with HTML (Part 1)
Adding content to the body with the header tag
02:42
Adding an h1
02:07
Adding a logo with the image tag
04:06
Creating your site navigation
05:17
Adding new content using the section tag
03:09
Wrapping content with the div tag
01:17
04:17

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

Section 4: Adding content with HTML (Part 2)
Dividing up your content
02:11
02:18

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

Adding content for the second post
01:59
Dividing up content for the second post
01:19
02:57

https://www.youtube.com/watch?v=9CxkQCvyxmI

HTML iframe attributes
01:03
02:43

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

05:16

https://twitter.com/munchblog

https://www.facebook.com/munchblog?_rdr=p

https://www.instagram.com/munchblog/

Section 5: Styling your content with CSS (Part 1)
Setting up your CSS
01:31
Linking your CSS files to your HTML
01:06
CSS syntax: Testing your links
02:00
Using Google fonts
03:45
Applying CSS rules to the body
02:39
Defining general font rules for your site
04:15
Constraining content on your page
01:19
Centering content on your page
02:13
The Box model
01:38
Setting the text and background colour
02:05
Section 6: Styling your content with CSS (Part 2)
Styling the header
03:21
Styling the h1
01:10
Styling the navigation
06:33
Creating hover effects
01:44
Styling the post section
07:07
CSS classes: Creating a "post-content" class
05:53
Creating and styling a "post-details" class
07:54
Styling the footer
04:03
Section 7: Responsive design
Introducing responsive design
03:26
Creating a fluid width
01:46
Creating fluid images
02:48
Resizing the iframe
Preview
03:11
Reducing padding and margin for mobile screens
03:57
Display properties: Making your navigation stack
05:52
Section 8: Creating a second page & adding a form
Creating a contact page
01:15
Recap : Boilerplate HTML
06:12
Creating the header for the contact page
05:39
Embedding a map from Google
03:42
Creating content for the contact page
01:32
Introducing forms: Creating a name input field
02:05
Adding an email input field
01:41
Adding a drop-down select box
02:12
Adding a multi-line text field
01:42
Adding a submit button
02:11
Adding a footer to the contact page
04:43
Section 9: Styling up your form
CSS styles for the contact page - styling the form
05:14
Styling the form input fields
06:52
Styling the textarea
03:01
Styling the submit button
04:27
01:40

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

http://css-tricks.com/

http://tympanus.net/codrops/

https://developer.mozilla.org/en-US/


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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Steer Systems Ltd, 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.

Ready to start learning?
Take This Course