HTML & CSS Tutorial and Projects Course
4.7 (1,193 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.
5,776 students enrolled

HTML & CSS Tutorial and Projects Course

Web Development for Absolute Beginners.Learn HTML5 and CSS3 from scratch.​ Build Amazing Real World Projects.
4.7 (1,193 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.
5,779 students enrolled
Created by John Smilga
Last updated 8/2020
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 54 hours on-demand video
  • 27 articles
  • 278 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
  • Learn HTML5 from scratch.
  • Learn CSS3 from scratch.
  • Create responsive real world projects from scratch.
  • Learn CSS Grid and Flexbox Layout Modules.
  • Learn where to get free images, custom fonts.
  • Learn how to work with font-awesome icons
  • Learn where to get custom color palettes.
Course content
Expand all 485 lectures 54:06:11
+ HTML Tutorial
39 lectures 02:41:32
HTML Intro
02:46
Google Chrome and Visual Studio Code
00:48
Download Google Chrome
03:10
Download Visual Studio Code
01:49
Visual Studio Code Overview
04:09
Create A Project
02:24
First Webpage
04:48
Basic HTML Document Structure
02:34
Implement HTML Document Structure
03:19
Live Server Extension Setup
05:58
Extra Settings and Emmet
07:19
Heading Elements
04:09
Paragraph Element
01:52
White Space Collapsing
01:24
Lorem Ipsum
03:14
Image Basics
03:49
Multiple Images
04:21
External Images
03:25
Nice Images
04:03
Width and Height
03:21
Crop Images
03:00
Comments and Line Breaks
05:44
External Links
05:15
Internal Links
04:34
Links - Within a Page
06:23
Image Links - Empty Links
03:57
Sup and Sub Elements
02:32
STRONG and EM Elements
02:59
Special Characters
03:23
Unordered Lists
03:57
Ordered Lists
01:04
Nested Lists
01:44
Table Element
02:52
Forms - Input Elements and Submit Elements
13:36
Forms - Textarea, Radio,Checkboxes, Select
11:36
Install Prettier Code Formatter
05:07
Keyboard Shortcuts
10:15
Head Element - External Resources
04:49
+ HTML Coffee Project
10 lectures 39:33
Intro
03:16
Setup
03:12
Project Assets
00:04
Download Images
02:30
Logo, Heading, Navbar
03:02
Home Page
13:10
About
03:05
Numbers
06:07
Contact
05:03
Complete Project
00:03
+ CSS Tutorial
18 lectures 01:21:07
CSS Intro
01:29
Workspace Setup
03:00
Text Editor Setup
05:47
Video Resources
00:03
Inline CSS
04:05
Internal CSS
02:22
External CSS
09:57
Power Struggle
04:57
Basic CSS Syntax
07:35
Element Selectors
02:39
Grouping Selectors
02:01
ID Selectors
04:40
Class Selectors
04:41
ID and Class Selector Summary
01:52
DIV and SPAN Elements
07:58
Inheritance in CSS
05:33
Inheritance More Info
02:49
Last Rule, Specificity and Universal Selector
09:39
+ CSS Colors
8 lectures 34:32
Colors Intro
00:27
Color and Background-color Properties
04:16
Color Names
02:47
RGB
06:27
RGBA
09:45
HEX Values
06:08
VS-Code Color Options
02:50
External Resources
01:52
+ CSS Units
9 lectures 55:47
Units Intro
00:29
Pixels, Font-Size, Width, Height
05:43
Percent Units
04:57
Em Units
05:45
Rem Units
03:01
Vh and Vw
06:17
Default Browser Styles and Chrome DevTools
12:04
Calc Function
07:00
Min-height, Max-height
10:31
+ Typography
7 lectures 34:05
Typography Intro
00:22
Font-family
02:36
Font-Stack Generic Fonts
02:55
Google Fonts
06:48
Font-weight Font-style
07:07
Text-align Text-indent
02:59
More Text Properties
11:18
+ CSS Box Model
6 lectures 36:52
Box-Model Intro
00:15
CSS Box Model - Padding
09:32
CSS Box Model - Margin
06:48
CSS Box Model - Border
06:28
Border-radius Negative Margin
04:38
Outline Property
09:11
+ Display Property
7 lectures 44:35
Display Property Intro
00:16
Display Property
07:40
Basic Horizontal Centering
04:17
Mobile Navbar Example
12:46
Box-sizing : border-box
07:29
Display inline-block
03:33
Display:none, Opacity, Visibility
08:34
+ Background Images
10 lectures 56:54
Intro
00:50
Setup
02:49
Background Images Basics
04:34
background-repeat
07:24
background-size
03:17
background-position
04:33
background-attachment
06:30
Linear Gradients
12:54
Background Image Overlay
10:26
Colorzilla
03:37
Requirements
  • No programming/coding experience as we will start from absolute scratch
  • Any computer - Mac, PC.
  • Any Text Editor. We will download Brackets Text Editor but will be able follow along with any text editor.
  • Any Web Browser. Chrome,Firefox.(Chrome is requirement only if wants to use Brackets Live Preview).
  • All required software is free!!!!
Description

If you want to start your career in Web Development, HTML and CSS are essential skills to have because they are foundational languages of the web.

HTML stands for Hyper Text Markup Language. In short HTML is a markup language that is used developing web pages.

CSS stands for Cascading Style Sheets. In short CSS is a language responsible for layout and styling of the web pages.

In this course we will cover both languages from the scratch and by the end of the course become HTML and CSS ninjas by building Responsive Real World Projects.

Why you should take this course?

Reason Number ONE - You Will Understand the Web Better.

Knowing the HTML and CSS and how they are used to create web pages is essential for web developer as they are building blocks of every web page.

Reason Number TWO - You Will be able to Create Websites.

Once you will know HTML and CSS you will be able to create a personal,unique web page for yourself.

Reason Number THREE - Start a Web Career.

For anybody who wants to pursue a career in Web Development knowledge of HTML and CSS is required. 

Reason Number FOUR - You Will Progress to Another Programming Languages with Greater Ease.

Once you know the fundamentals of HTML and CSS you will be able to pick up languages like Javascript with greater ease.

Reason Number FIVE - We Will Learn HTML and CSS from Scratch and Will Use it to Build Responsive Real Life Projects.

Not only we will learn the theory of HTML and CSS step by step. We also will apply our knowledge by building Real Life Projects.

Who this course is for:
  • Anyone who wants to learn Web Development from scratch.