HTML and CSS Tutorial for Beginners with Website Projects

John Smilga

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
187 Videos (17h 53m)
    • HTML Tutorial For Beginners - Intro

      3:24
    • HTML Tutorial For Beginners - Downloading Brackets Text Editor

      1:12
    • HTML Tutorial For Beginners - Adding Projects To Brackets

      3:53
    • HTML Tutorial For Beginners - First Webpage

      7:04
    • HTML Tutorial For Beginners - Headings

      4:24
    • HTML Tutorial For Beginners - Paragraphs

      1:46
    • HTML Tutorial For Beginners - Code Hints

      1:41
    • HTML Tutorial For Beginners - Images

      5:24
    • HTML Tutorial For Beginners - External Images

      2:28
    • HTML Tutorial For Beginners - Height and Width Attribute

      2:43
    • HTML Tutorial For Beginners - Crop Images

      3:20
    • HTML Tutorial For Beginners - Nice Images

      3:58
    • HTML Tutorial For Beginners - Path to Images

      3:02
    • HTML Tutorial For Beginners - Figure element and Figcaption

      1:39
    • HTML Tutorial For Beginners - Website PRoject Nr.1

      9:38
    • HTML Tutorial For Beginners - Comments and Line Breaks

      6:34
    • HTML Tutorial For Beginners - Customize Brackets Text Editor

      7:51
    • HTML Tutorial For Beginners - Brackets Extensions

      4:24
    • HTML Tutorial For Beginners - Sup and Sub

      0:58
    • HTML Tutorial For Beginners - Italic and Strong Elements

      2:36
    • HTML Tutorial For Beginners - Special Characters

      2:24
    • HTML Tutorial For Beginners - Blockquote Element

      1:04
    • HTML Tutorial For Beginners - Website Project Nr.2

      2:19
    • HTML Tutorial For Beginners - Links External

      2:35
    • HTML Tutorial For Beginners - Links Internal

      1:06
    • HTML Tutorial For Beginners - Links the Same Page

      4:57
    • HTML Tutorial For Beginners - Image and Empty Links

      2:33
    • HTML Tutorial For Beginners - Lists Unordered

      1:38
    • HTML Tutorial For Beginners - Lists Ordered

      0:45
    • HTML Tutorial For Beginners - Lists and Nested Links

      2:26
    • HTML Tutorial For Beginners - Website Project Nr.3

      11:01
    • HTML Tutorial For Beginners - Website Project Nr.4

      7:25
    • HTML Tutorial For Beginners - Simple Iframe

      3:05
    • HTML Tutorial For Beginners - Iframe Links

      5:01
    • HTML Tutorial For Beginners - Website Project Nr.5

      5:43
    • HTML Tutorial For Beginners - Forms

      29:03
    • HTML Tutorial For Beginners - Website Project Nr.6

      19:40
    • Css 0 intro

      0:53
    • CSS Tutorial For Beginners - Inline CSS

      2:22
    • CSS Tutorial For Beginners - Internal CSS

      2:45
    • CSS Tutorial For Beginners - External CSS

      4:36
    • CSS Tutorial For Beginners - CSS Syntax

      1:55
    • CSS Tutorial For Beginners - Selector,Comments,Grouping

      5:54
    • CSS Tutorial For Beginners - Div Span

      2:22
    • CSS Tutorial For Beginners - Class in CSS

      7:54
    • CSS Tutorial For Beginners - Id Selectors

      4:40
    • CSS Tutorial For Beginners - Attribute Selectors

      7:09
    • CSS Tutorial For Beginners - Last Rule, Inheritance, Specificity

      5:42
    • CSS Tutorial For Beginners - Default Styles

      4:59
    • CSS Tutorial For Beginners - Pixels in CSS

      2:39
    • CSS Tutorial For Beginners - em values

      4:28
    • CSS Tutorial For Beginners - vh vw

      4:11
    • CSS Tutorial For Beginners - rgb and rgba

      10:16
    • CSS Tutorial For Beginners - hex colors

      6:22
    • CSS Tutorial For Beginners - font family

      3:57
    • CSS Tutorial For Beginners - google fonts

      3:13
    • CSS Tutorial For Beginners - font weight, font size, font style

      3:29
    • CSS Tutorial For Beginners - text align, text indent

      3:22
    • CSS Tutorial For Beginners - more text properties

      6:48
    • CSS Tutorial For Beginners - css box model

      12:24
    • CSS Tutorial For Beginners - display property

      13:27
    • CSS Tutorial For Beginners - display example

      4:58
    • CSS Tutorial For Beginners - box sizing percentage width

      7:43
    • CSS Tutorial For Beginners - border radius negative margin

      3:38
    • CSS Tutorial For Beginners - hsla colors

      12:18
    • CSS Tutorial For Beginners - colors options

      4:18
    • CSS Tutorial For Beginners - Pseudo Class Selectors

      3:33
    • CSS Tutorial For Beginners - selectors - attribute selectors

      5:42
    • CSS Tutorial For Beginners - selectors - not selector

      3:41
    • CSS Tutorial For Beginners - selectors - before and after

      2:39
    • CSS Tutorial For Beginners - selectors first line first letter

      1:38
    • CSS Tutorial For Beginners - selectors target snot

      3:43
    • CSS Tutorial For Beginners - selectors first child

      5:21
    • CSS Tutorial For Beginners - selectors first of type

      3:14
    • CSS Tutorial For Beginners - selectors only of type only child

      4:16
    • CSS Tutorial For Beginners - background images

      6:49
    • CSS Tutorial For Beginners - background repeat

      4:54
    • CSS Tutorial For Beginners - background size

      4:43
    • CSS Tutorial For Beginners - background position

      3:34
    • CSS Tutorial For Beginners - background attachment fixed

      8:37
    • CSS Tutorial For Beginners - gradients

      8:10
    • CSS Tutorial For Beginners - gradients in real life

      7:09
    • CSS Tutorial For Beginners - float and clear

      6:34
    • CSS Tutorial For Beginners - css position static

      2:20
    • CSS Tutorial For Beginners - css relative positioning

      3:18
    • CSS Tutorial For Beginners - position absolute

      6:32
    • CSS Tutorial For Beginners - position fixed

      1:29
    • CSS Tutorial For Beginners - Media Queries

      8:10
    • CSS Tutorial For Beginners - transform translate

      4:50
    • CSS Tutorial For Beginners - transform scale

      1:41
    • CSS Tutorial For Beginners - transform rotate

      1:48
    • CSS Tutorial For Beginners - transform skew

      0:53
    • CSS Tutorial For Beginners - transition property

      1:49
    • CSS Tutorial For Beginners - multiple transitions

      2:34
    • CSS Tutorial For Beginners - transition delay+transition

      1:49
    • CSS Tutorial For Beginners - transform

      11:30
    • CSS Tutorial For Beginners - transition timing function

      8:30
    • CSS Tutorial For Beginners - Animate in CSS

      5:15
    • CSS Tutorial For Beginners - animation continued

      5:30
    • Brackets Extensions- intro

      3:43
    • Brackets Extensions-beatify

      2:44
    • Brackets Extensions- emmet

      5:22
    • Brackets Extensions- bracket icons

      1:03
    • Brackets Extensions-html skeleton

      1:41
    • Brackets Extensions-bootstrap skeleton

      2:09
    • Brackets Extensions- snippets by edc

      8:22
    • Brackets Extensions-indent guides

      4:25
    • Brackets Extensions-minimap

      1:52
    • CSS FLEXBOX - Intro

      0:40
    • CSS FLEXBOX - Browser Support and Vendor Prefixes

      1:56
    • CSS FLEXBOX - Starting with CSS Flexbox

      5:08
    • CSS FLEXBOX - flex direction

      3:46
    • CSS FLEXBOX - flex wrap

      4:30
    • CSS FLEXBOX - justify content

      3:18
    • CSS FLEXBOX - align items

      5:02
    • CSS FLEXBOX - center example

      9:32
    • CSS FLEXBOX - align content

      2:55
    • CSS FLEXBOX - main axis cross axis

      4:50
    • CSS FLEXBOX - order

      5:13
    • CSS FLEXBOX - align self

      2:34
    • CSS FLEXBOX - flex grow

      6:26
    • CSS FLEXBOX - flex shrink

      3:37
    • CSS FLEXBOX - flex basis

      4:27
    • CSS FLEXBOX - first example

      10:07
    • CSS FLEXBOX - icon navbar

      14:35
    • CSS FLEXBOX - simple sidebar

      6:59
    • CSS FLEXBOX - holy grail layout

      13:02
    • CSS FLEXBOX WEBSITE PROJECT -Intro

      9:56
    • CSS FLEXBOX WEBSITE PROJECT - banner html

      6:48
    • CSS FLEXBOX WEBSITE PROJECT -banner nav css

      26:15
    • CSS FLEXBOX WEBSITE PROJECT -header nav responsive

      11:35
    • CSS FLEXBOX WEBSITE PROJECT -banner css

      11:40
    • CSS FLEXBOX WEBSITE PROJECT - skills html

      5:21
    • CSS FLEXBOX WEBSITE PROJECT - skills css

      7:07
    • CSS FLEXBOX WEBSITE PROJECT -title styling

      4:09
    • CSS FLEXBOX WEBSITE PROJECT -skills responsive

      8:30
    • CSS FLEXBOX WEBSITE PROJECT -about html

      3:57
    • CSS FLEXBOX WEBSITE PROJECT - about css

      5:46
    • CSS FLEXBOX WEBSITE PROJECT - about responsive

      2:28
    • CSS FLEXBOX WEBSITE PROJECT - services html

      6:19
    • CSS FLEXBOX WEBSITE PROJECT -services css

      6:00
    • CSS FLEXBOX WEBSITE PROJECT -services responsive

      3:30
    • CSS FLEXBOX WEBSITE PROJECT -portfolio html

      5:46
    • CSS FLEXBOX WEBSITE PROJECT - portfolio css

      16:55
    • CSS FLEXBOX WEBSITE PROJECT -portfolio responsive

      2:38
    • CSS FLEXBOX WEBSITE PROJECT -numbers html

      3:41
    • CSS FLEXBOX WEBSITE PROJECT - numbers css

      2:40
    • CSS FLEXBOX WEBSITE PROJECT - numbers responsive

      2:10
    • CSS FLEXBOX WEBSITE PROJECT -team html

      5:34
    • CSS FLEXBOX WEBSITE PROJECT - team css

      7:57
    • CSS FLEXBOX WEBSITE PROJECT -team responsive

      3:39
    • CSS FLEXBOX WEBSITE PROJECT -customer html

      2:41
    • CSS FLEXBOX WEBSITE PROJECT - customer css

      3:05
    • CSS FLEXBOX WEBSITE PROJECT - customer responsive

      2:40
    • CSS FLEXBOX WEBSITE PROJECT -form html

      7:09
    • CSS FLEXBOX WEBSITE PROJECT - form css

      5:43
    • CSS FLEXBOX WEBSITE PROJECT -form responsive

      2:14
    • CSS Grid Tutorial -intro

      0:41
    • CSS Grid Tutorial - browser support and vendor prefixes

      1:18
    • CSS Grid Tutorial - template columns rows

      12:50
    • CSS Grid Tutorial - order in css grid

      7:15
    • CSS Grid Tutorial - naming grid lines

      5:43
    • CSS Grid Tutorial - grid gap

      3:20
    • CSS Grid Tutorial - order property

      1:42
    • CSS Grid Tutorial - grid template areas

      9:26
    • CSS Grid Tutorial - repeat and fr

      5:14
    • CSS Grid Tutorial - grid mini project

      17:18
    • CSS Grid Tutorial - minimax

      3:53
    • CSS Grid Tutorial - justify content

      4:31
    • CSS Grid Tutorial - align content

      4:23
    • CSS Grid Tutorial - working with grid items

      5:27
    • CSS Grid Tutorial - grid column and rows and span

      4:02
    • CSS Grid Tutorial - auto columns and rows

      4:17
    • CSS Grid Tutorial - Holy Grail Project

      34:25
    • CSS Flexbox and Grid Project - Intro

      4:01
    • CSS Flexbox and Grid Project - setup

      6:22
    • CSS Flexbox and Grid Project - navbar

      15:29
    • CSS Flexbox and Grid Project - banner

      10:41
    • CSS Flexbox and Grid Project - skills

      11:35
    • CSS Flexbox and Grid Project - services html

      7:10
    • CSS Flexbox and Grid Project - services css

      20:41
    • CSS Flexbox and Grid Project - projects html

      4:22
    • CSS Flexbox and Grid Project - projects css

      12:20
    • CSS Flexbox and Grid Project - filler

      7:38
    • CSS Flexbox and Grid Project - posts html

      4:43
    • CSS Flexbox and Grid Project - posts css

      10:14
    • CSS Flexbox and Grid Project - footer

      6:11

About This Class

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.

3cfb8d1f

1 of 1 students recommendSee All

15

Students

--

Projects

Technology Web Development CSS3 HTML5 Flexbox