How To Create Your Very First Website With HTML and CSS
4.4 (203 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.
5,103 students enrolled
Wishlisted Wishlist

Please confirm that you want to add How To Create Your Very First Website With HTML and CSS to your Wishlist.

Add to Wishlist

How To Create Your Very First Website With HTML and CSS

Build Your First Mobile Responsive Website with HTML5 and CSS. For Complete Beginners With Step by Step lessons
4.4 (203 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.
5,103 students enrolled
Created by Robin Haney
Last updated 9/2017
English [Auto-generated]
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 10 Articles
  • 28 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Design a Website From Scratch that is Mobile Responsive
  • Work with HTML
  • Work with CSS
View Curriculum
  • No knowledge is required in HTML or CSS

This course is part of Learn How To Become a Front-End Web Developer From Scratch. If you would like to get all my Udemy courses in one, check it out that course.

Join over 39,340 students and start your web development career right now!

If you have always wanted to learn how to code and build websites online then this course is exactly what you need. You will learn how to create your very first website with only HTML and CSS from complete scratch. You will then upload your website online and will be able to showcase your work to everyone in the world.

This course is perfect for beginners and anyone who knows absolutely nothing about HTML and CSS or web developing in general. This course is also a great review and refresher for those who need a little bit of helping just piecing everything together to design a website from start to finish.

In this course we will pretend that a client hired you to build an online portfolio for her hair styling business. You as a web developer have been hired and you have a job to do. You have to build a website that is mobile responsive and looks great. Don't worry, I know you will do a good job.

Let's get started.

Who is the target audience?
  • Anyone that would like to know how to build websites online
  • Those wanting to learn HTML
  • Those wanting to learn CSS
  • This course is beginner friendly!
Students Who Viewed This Course Also Viewed
Curriculum For This Course
46 Lectures
Introduction To The Course
7 Lectures 09:51

Welcome to the course! In this course you will be building a beautiful hairstylist blog for a client. We will first get started with some basics in HTML, then we will work on planning the final outcome of our website.

Once we have an idea of what we are going to build we can then go about making our website come to life with CSS. At the end of this course you will also learn how to put your website online as well as optimize your website for mobile responsiveness.

Thank you for enrolling in this course, You are going to learn a lot in the course, I look forward to seeing you in the next few lectures!

Preview 01:24

In this very first lecture you are going to learn how to create your very first web-page online! Although this is just something small, feel proud because everyone has to start somewhere. In this lesson you will learn how to create and save a document as an html file.

You are also going to learn how to use the <h1> element to create a level one headline.

Preview 02:07

There are many different types of coding editors out there that you can use to make writing code a lot easier to do. In this lesson I am going to talk a little bit about Notepad++ and why its a good idea that you download it for the rest of the course.

There is a link in the external files section where you can download Notepad++ for free.

Preview 01:39

In this lecture I am going to show you a few different ways that you can ask for help if you are stuck. Also, I am going to show you how to access the external files for each lecture that you can download for reference.

Preview 01:02

A quick quiz that will cover what you have learned so far in HTML. 

Introductory To HTML Quiz
3 questions
HTML Basics
8 Lectures 16:43

In this lesson we are going to talk a little bit about the history of HTML and a few basic facts about the very first language that was used to build websites online. 

Preview 01:25

What is HTML (Text Transcript)

Creating a Wireframe For Our Project

Designing a Wireframe For Our Website

In this lesson we will cover the basics of adding structure to  a webpage. This will cover the sytnax of HTML as well as learning all about what purpose each HTML serves in our document.

Creating The Structure of a Webpage

Creating The Structure of a Webpage

Let's learn about the <section> tag and how we can use it to add content to our webpages. The primary content of our webpage will go inside this <section> element. 

HTML Content Containers

Creating Our Websites Content Containers

A summary of the basics of HTML and everything that you have learned so far.

HTML Basics Quiz
4 questions
Creating The Content of Our Website
5 Lectures 17:29

The navigation section of a website is very important. It helps guide the user and shows them how to access important pages on your website. 

In this lesson we will start building out our navigation and learn how we can use the <nav> tag to do so.

Preview 04:35

Creating Our Websites Navigation

Our portfolio page is going to be the most complicated page for our website. In this video we are going to get started with creating the foundation of our clients portfolio as well as learn how to add an image to a webpage. 

Building Our Portfolio Page

Now lets go ahead and add the rest of the images to our portfolio page as well. Now our images do not look very pretty but we will be adding CSS later on to our website to style of portfolio page according to our wireframe we created earlier.

Adding Images To Our Portfolio Page

The footer section of our website is sort of similar to the <header> except that content that we want to add less emphasis to will go here. Our footer is created with the <footer> tag and we will be adding some social media links as well as some copyright information to our website here.

Building out our Footer

The final quiz in this course regarding HTML.

Summary of HTML
3 questions
Getting Started With CSS
9 Lectures 39:13

In this lesson you are going to get an introductory to CSS and what Cascading Style Sheets can do. We will start off with adding some basics styles to some of the elements of our webpage with internal CSS.

In the next lesson you will learn how to use external CSS to organize your code a little bit better and keep things organized. 

Preview 06:36

External CSS is located in a file that is separate from our HTML content. This allows us to easily read and keep our CSS nice and tidy. 

In this lesson you will learn how to link an external CSS file to an HTML document.

External and Internal CSS

In this lesson you are going to learn how to create ID's and target them in CSS to add styling to them. We are going to start off by creating a div for our wrapper. After we create our div we are going to target it with an ID selector with our CSS and add some styling to our wrapper.

What are ID selectors

In this lecture we are going to be working on the wrapper for our website. We are going to center our websites wrapper on our page and add a little bit of padding to the elements inside our wrapper. We are also going to set a max-width for our wrapper to make our website a little bit more mobile friendly.

Centering our Website Wrapper

In this lesson we are going to take a mobile friendly approach to designing our website. It's a lot easier to create the mobile version first and expand our website to a desktop layout later on then to take a complex website and try to downscale it.

In this lesson we are going to start working on the mobile version of our website. Once the mobile version is complete we will work on the desktop layout for our clients website.

Lets Take a Mobile Friendly Approach

This quiz will test you on what you have learned so far in CSS.

CSS Basics Quiz
4 questions

In this lesson you are going to learn how to add some basic color to our website as well as how to use Hex color codes to really open up the spectrum of color options. 

We are going to be styling the link and header colors of our website.

Styling Our Website With Some Color

Classes are a little bit more powerful then ID's and in this lesson you will learn how we can use them to speed up the process of styling some of our elements with CSS.

What are CSS Classes

Adding comments to your CSS will allow you to organize your code so that if you come back to an older project at a later date you will still have a good idea what is going on with the styling of your website.

In this lesson I will show you how you can add comments to your CSS.

How To Add Comments To Your CSS

Fonts and text sizes can drastically change the way your website looks and feels. In this lesson we are going to link an external Google font to our project and change the way our text is displayed on our website with some HTML and CSS.

Adding Fonts To Our Website and Adjusting Text Size

In this quiz you will be tested on everything you have learned so far in CSS in this section of the course.

Summary of CSS
4 questions
Styling The Rest of Our Website
3 Lectures 11:22

Our portfolio is looking a little bit plain, its now time to fix it up and add a little bit more styling to it.

Preview 04:52

So far our navigation is a vertical list of links, its now time to change that and create a horizontal navigation instead.

Creating a Horizontal Navigation

A few changes that we need to make to the header and footer of our website.

Fixing Up our Footer and Navigation
Adding More Pages To Our Website
5 Lectures 26:30

It's now time to start adding more content to our website in the form of other pages.

Preview 05:22

Let's do a little bit of styling to our newly created about page.

Styling Our About Page

Our contact page will allow visitors to contact our client with any questions or concerns that they may have.

Create a Contact Page

It's now time to add a blog page to our website.

Creating a Blog Page

The last page that we are going to be adding to our website is our Portfolio page.

Creating Our Portfolio Page
Responsive Web Design
4 Lectures 13:11

Up until this point our portfolio page has been a single column layout but its now time to change that. Let's take our portfolio and change it into a 2 and 3 column layout that looks great and is mobile responsive.

Preview 04:30

It's now time to review our about page and make any final adjustments that need some fixing up.

Final Adjustments To Our About Page

It's now time to review our Header and Footer and make any final adjustments that need some fixing up.

Final Adjustments To Our Header and Footer

It's now time to review our portfolio page and make any final adjustments that need some fixing up.

Finishing Up Our Portfolio Page
Uploading Your Website Online
5 Lectures 12:46

Setting up a domain name is pretty straightforward. You have to find a domain name provider and find a domain name that currently isn't registered by anyone else. In our case we are going grab our domain name from Godaddy.

Finding a Domain Name

Finding a hosting account for your website should be an easy task as there are many out there. In our example I'm going to continue with Godaddy and use their hosting package for now.

Finding a Web-host for your Domain Name

You now have a domain name and a hosting account set-up on Godaddy. Now its time to connect the two accounts together so that our website will be live on the internet!

Connecting Your Domain Name to Your Hosting Account

Join My Web Developing FaceBook Group!

Congrats! You have now completed the course! Feel proud of yourself you just went through something that is very hard. The next step is to continue educating yourself in web development.

Grab All My Web Developing Courses Together For The Price of One
About the Instructor
Robin Haney
4.3 Average rating
3,566 Reviews
61,358 Students
20 Courses
Professional Freelance Web Developer and Instructor


My name is Robin Haney, I am a professional Web Developer and blogger. I have been designing and building websites for over 5+ years. I work completely from home as a freelance web developer and I love it!

I'm also a best selling author on Amazon and have written a few programming books that have done really well. If you prefer a more hands on approach to learning then my video courses on Udemy will be perfect for you.

I'm here to show you how you can do the same. I've designed and created a lot of websites and I know its hard work but don't worry I've created my courses so that even beginners can easily follow along and work with me.

I've started my own online business at a young age and after being a best selling instructor on Udemy I am very proud of my courses. If you are just starting out then I'd recommend you look over my FREE courses first and then continue to my paid courses when you are ready.

Please enroll today and I look forward to seeing you!