HTML & CSS for absolute beginners : Simple and step-by-step
4.8 (5 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.
30 students enrolled

HTML & CSS for absolute beginners : Simple and step-by-step

Learn how to build websites from scratch using HTML & CSS in a completely practical way. No coding experience required!
4.8 (5 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.
30 students enrolled
Created by Shruti Balasa
Last updated 6/2020
English
English
Price: $24.99
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 15 articles
  • 35 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
  • Create web pages using HTML
  • Make web pages look beautiful & elegant by using simple CSS
  • Build a simple neat website from scratch using HTML & CSS
  • Confidently move on to learning more languages / frameworks of web development (like Bootstrap, JavaScript, jQuery, PHP, .NET)
Requirements
  • Basics of computer usage, like saving a file, creating a folder or using an application
  • Knowledge of browsing the internet
  • A computer with internet connection
  • Chrome web browser and Brackets editor (Installation of both these is covered in the course)
Description

Learn how to build websites from scratch using HTML & CSS in a completely practical way. No previous coding experience required!

My name is Shruti Balasa and I will be leading you through the course. I began my career as an Intern at Microsoft & then a quality analyst at Citrix, but very soon quit my job to become a web designer & then a web developer. I have 7+ years of experience designing web apps, blogs, social networking sites, android apps, multiple back-end modules and many websites for clients. Currently I am a freelancer and also a web development mentor on OpenClassrooms International platform.

This course is for beginners trying to learn HTML & CSS practically, without having to go through unnecessary technical details. By the end of this course, you will be able to build a simple neat website using these languages & make the website go live.

You will begin by learning basic HTML and some simple CSS properties. And then deeper concepts of both these languages simultaneously. This learning process is more effective than learning HTML completely and then beginning with CSS. It also helps you stay motivated throughout the course, along with enough real-life practical activities and exercises at every step.

In the last section, we will use all this knowledge to build a complete website. I will take you through the whole process step-by-step.

The ideal student for this course is someone with a very basic knowledge of computers wanting to design simple websites. Most of the courses found online are too elaborate for beginners. It's easy to get bogged down with so much content. Here, you'll only learn the most essential and most used concepts.

There are not many requirements for this course. You just need to have a laptop or a desktop with a decent internet connection, and a good learning attitude.

Take a look at the course curriculum & preview the course. I look forward to see you inside.

Who this course is for:
  • Anyone willing to learn HTML & CSS practically without having to go through unnecessary technical terms or jargons
  • This course is for someone who wants to learn HTML & CSS to build simple websites.
  • Someone who has tried learning these languages, but failed to do so because most courses available for these topics are too elaborate - they give up thinking it's too hard for them
Course content
Expand all 70 lectures 04:41:29
+ Introduction
4 lectures 07:01

This lecture covers what you will learn in this course & what you will be able to do by the end of the course.

Preview 01:15

Some tips to get the best out of this course. Optional lecture, but recommended.

How to make the best of this course
02:11

We need a browser and a code editor to get started. This lecture demonstrates the installation of Chrome browser & Brackets editor.

Setting up the tools needed
03:07

Ready. Get Set. Go. This beginning is not just about setting up tools, it's also about  setting your mind strong on completing this course successfully.

Getting started
00:28
+ Create a Web Page using HTML
13 lectures 37:19

You will learn what HTML means in layman's terms.

What is HTML?
00:56

This lecture will get you familiar with what HTML looks like. You will learn what HTML tags are.

What does HTML look like?
02:21

This lecture covers the basic HTML skeleton that we need to include in every HTML file that we create

HTML skeleton
04:33

One of the most used and simplest elements of HTML are headings & paragraphs. We will learn how to create them, in this lecture.

Headings & paragraphs
05:14

A quick activity to boost your confidence in learning web design. You will edit a HTML code to make your own simple, but beautiful introduction page.

Quick Win : Create your intro page
02:08

We will learn how to use the <img> tag to add images to our webpage

Add images
07:32

This is an activity demonstration that uses the HTML elements learned so far in the course.

Preview 05:06

So far we've learned to create a basic HTML skeleton, create headings & paragraphs and add images. It's now time to put this knowledge to use.

Activity : My Gallery
00:30
Create links
05:17

Here's an activity that will help you reinforce your knowledge of  creating a web page with headings, paragraphs, images and links using HTML.

Activity : Birds in the park
00:27

Block like elements are used to organize content in webpages where lot of content needs to be displayed. In this lecture we'll learn about the most-used block-level element <div>

Blocks
02:27

A quick summary of basic HTML skeleton, HTML tags and attributes that we have learned so far in our course.

Article : HTML cheat sheet
00:08

Test your knowledge about the HTML tags you've learned so far.

Know your tags - Level 1
4 questions

You have learnt sufficient amount of HTML to create your own web page now. Choose any topic and go for it!

Preview 00:40
+ Style your Web Page using CSS
17 lectures 39:20

You will learn what CSS is capable of.

What is CSS?
00:35

You will learn CSS syntax and how to write CSS.

What does CSS look like?
01:09

In this lecture, we'll use some simple CSS styles in our code and see it in action. A practical session before we go into little more theory.

See CSS in action
02:27

In this lecture we will learn the 3 ways of adding CSS to our web pages.

Preview 03:13

We will learn the different color properties in CSS and the kind of values that can be defined.

Colors
01:20

We'll learn about the width and height properties which are used to define width & height for images and block-level elements

Width & height
03:24

Here comes a simple activity that uses your knowledge about CSS colors and width and height properties that you just learnt.

Activity : Color bands
00:21

In this lecture we will learn how to change fonts, font sizes, colors, text alignment, text decoration and line height.

Styling text
06:07

We will learn about the margin & padding properties that are used to create spaces around and within elements.

Margin & padding
05:16

Understanding of the "CSS Box Model" is important while setting the width, padding and margin for block-level elements like paragraphs and divs on a web page.

CSS box model
01:37

Here's an activity to create some blocks using HTML and style them using CSS.

Activity demo : Boxes
05:38

An activity that uses your knowledge of <div> elements and CSS properties of margin, padding, text styling and so on.

Activity : Top movie of 2019
00:33

We will learn about the four types of web page layouts and why they exist.

Web page layouts
02:32

In this lecture, we learn about the traditional static web page layout, also known as fixed-width or fixed web page layout

Static web page layout
04:03

Quick summary of how to add styles to your web page & some basic CSS styles that we have learned so far in our course.

Article : CSS cheat sheet
00:09

Test your knowledge about CSS you've learned so far.

Know your styles - Level 1
5 questions

Use your latest learned knowledge of CSS to style a web page of  your own in your own ways.

Activity : Style your own web page
00:23

The little of HTML & CSS that you have learnt so far can be used to create simple elegant web pages like the screenshot attached here.

Activity : HTML & CSS together
00:32
+ Adding richer content & styling better
23 lectures 02:02:17

There are some more HTML elements, attributes & very important CSS properties required to build real world websites. This section is dedicated to those.

Some more HTML & CSS
00:47

There are few tags in HTML for making text bold, italic, and so on. We'll explore them in this lecture.

Text formatting
03:35

A fun activity that tests your knowledge on text formatting tags.

Activity : Can you format this one?
00:19

Comments are statements that explain the code to whoever is reading your code. We will learn how to add HTML & CSS comments in this lecture

Add comments
03:31

In this lecture, you will learn how to create lists with numbers / alphabets and lists with bullet points.

Create lists
04:23

Apart from the common styles like background color, margin, padding etc., you'll learn about two CSS properties that are unique to lists and how to use them.

Styling lists
03:32

An activity that uses your knowledge of creating & styling lists, and text formatting

Activity : To-do List
00:33

HTML tables are used for displaying content in a structured way. In this lecture you will learn how to create a table using HTML

Create tables
05:43

In this lecture you will learn the most important CSS properties used for styling tables.

Styling tables
04:30

Test your knowledge about the HTML tags & CSS styles you've learned so far in this section

Know your tags & styles - Level 2
6 questions

An activity demonstrating the creation a web page with work schedule for a day - using HTML headings, paragraphs & tables, and required CSS styles.

Activity demo : Work Schedule
07:42

Here is an interesting activity to help you implement much of your HTML & CSS knowledge - by creating your own resume. This activity also gives you an idea of how some simple styles and right choices of fonts and placement can make a very simple design look beautiful & elegant.

Activity : Resume
01:31

We can attach an identity to each element or group similar elements into classes. We can use these to separate the CSS styles from HTML, and much more.

IDs & Classes
06:09

With the CSS border property, you can set the border style, border color & border width. We'll learn them practically in this lecture.

Borders
11:38

In this lecture we'll see how to add background images.

Backgrounds
05:42

You will learn the most important uses of background images through this demo. Along with that, we'll use other elements & styles that we have learnt in our previous lectures. So this lecture serves as a good revision.

Activity demo : Part of home page
10:09

Instead of the normal flow of HTML elements one below the other in the page, we can stack elements next to each other. Best way to do that is using the 'float property' - which we'll learn here.

The 'float' property
05:34

It's difficult to understand the 'float' property concept with just one example. We'll see more in this one

More examples using 'float' property
04:00

An activity to create a simple standard blog post page.

Activity demo : Blog post
12:28

Here is an activity that mainly uses your knowledge of 'float' property, 'border' property along with other CSS properties and HTML elements.

Activity : Team profiles
00:39

Using the CSS position property, you can create those sticky chat boxes that remain at the right bottom corner, and those navigation menus that appear to be fixed at the top always, and more.

Positions
11:28

In this lecture we'll learn about few more HTML elements which are used as best practices.

Few more important HTML elements
01:42

There's a little bit more about CSS that you need to know before we close this section. I've combined all of it into one single lecture.

Some more CSS selectors & the cascading effect
09:02

In this lecture, we will learn to design a fluid layout.

Fluid web page layout
07:39
+ Creating a Website
12 lectures 01:15:09

You're now ready to put all your knowledge to use by building a complete website. Let's see what we are going to do in this section.

Building a website
01:21

We are going to build a website for an imaginary company. Let's see what our finished product looks like.

Website mock-up
02:42

In this lecture, we get the basic files and folder structure ready for our project.

Creating the basic structure
02:37

Here, we will learn how to select the right images for our website and get them ready for use.

Getting the images ready
04:18

In this lecture, we start building our home page.

Home page - Part 1
15:26

Continuing from where we left in the previous lecture, we will complete designing our home page here.

Home page - Part 2
07:02
Other pages template
04:25

In this lecture we develop the "About Us" page of the website

About page
06:49

In this lecture we create the "Services" page of our website

Services page
06:55

We will create the last and final page of our website - Contact Us

Contact page
05:09

We give some finishing touches to our code in this lecture and get it ready for launch

Finishing touches
13:15

We will host our website to share it with the world

Going live with your website
05:10
+ Conclusion
1 lecture 00:20

This document is going to help you decide what you can get your hands dirty with next.

What next?
00:20