HTML and CSS Masterclass

Web development requires these skills. Learn HTML5 and CSS 3 as well as Bootstrap and XHTML!

mm
Robert Gioia
(216 reviews)
Take this course
1859114_5c8d.jpg

Are you someone who’s interested in web design and development but have no idea where to begin?

Perhaps you have heard of HTML and CSS, and it’s been on your mind to learn them and enhance future career options.

Maybe you are learning another language or framework and have found that it assumes knowledge of HTML and CSS, and you need to get up to speed with these technologies – fast.

Or possibly you have your own or a client’s website, and want to make it more appealing by creating interactive web page content using creative elements.

Whatever your reason is, you have arrived at the right page!

In this course, you will learn how to use HTML 5, CSS 3, Bootstrap, and XHTML to build interactive web pages and develop exciting web-based content.

Why learn HTML and CSS?

HTML and CSS  are the foundation of every web page and web application. Many other languages and frameworks depend on having a solid foundation in HTML and CSS.

This course is going to teach you the step by step process of web development using HTML and CSS.

Why enrolling in this course is the best decision you can make.

  • We know that your time is valuable and in this course, there’s no beating around the bush. It jumps right into development and keeps up a solid pace the whole time.

  • This HTML and CSS course is very hands-on; anyone can type the code the instructor writes in the lectures and see the result in a browser.

  • The course covers most of the elements, attributes and properties that exist in HTML and CSS that are used by web developers.

  • The course is beginner-friendly and not intimidating. It’s logically organized and presented so that beginners build their skills progressively.

  • Anyone with previous programming experience will also benefit as they can quickly skip to specific sections of the course as required.

  • It covers useful and practical extras like XHTML, debugging HTML and CSS (common errors), using an HTML and CSS validator, CSS Entities, and Bootstrap.

  • And finally, this course focuses on the intricacies of each language; their history, latest versions, best practices, syntax, new features, and common pitfalls to avoid.

The Key Topics covered in this course are:

  • Basics of HTML and CSS

  • Embedding Media into Webpages

  • Animating elements using CSS

  • Working with text on webpages

  • Displaying data using data, tables, lists, etc.

  • Learn several ways to color elements using HTML and CSS

  • Advanced HTML and CSS coverage and of course Bootstrap

Adding HTML and CSS as well as Bootstrap to your résumé will not only help you in developing and designing interactive web pages and websites, it will also make you more marketable and a more well-rounded developer.

The reality is, many other technologies such as the Spring Framework (to name but one) assume knowledge of HTML and CSS.  These technologies are skills that most software developers should learn.

This course will equip you with the necessary skills to assist you anywhere these skills are required.

Are you ready to get started?

Click the Signup button to sign up for the course!

Requirements

  • A computer (Windows, Linux or Mac) is required.
  • Your enthusiasm and willingness to learn HTML 5 and CSS 3 and then to showcase it on your website and resume!
  • No prior knowledge of programming is required.

What you will learn

  • After completing this course, you will have solid HTML and CSS skills
  • Learn how to embed media and graphics into your webpages
  • Master working with HTML events like mouse, keyboard, and drag events
  • Build a full hands-on website using HTML 5 and stylize it using CSS 3
  • Learn how to debug your HTML code and how to use an HTML validator to find and fix errors
  • Use CSS 3 to do 2D and 3D animation for web design
  • Master CSS debugging and learn to find and fix common CSS errors
  • Understand the bootstrap framework and how to use it to build websites
  • Master XHTML - the eXtensible HyperText Markup Language
  • Learn about the HTML Canvas and how to work with graphics and interactive media
  • Obtain the foundation of skills you need to start a career in web development
  • Learn advanced CSS programming like gradients, shadows and effects, and blend modes

Who should attend

  • Anyone wanting to learn HTML and CSS programming language.
  • Developers who need to add HTML 5 CSS 3, and Bootstrap to their résumé

Is available on google app?

Yes

Is available on ios?

Yes

Course Features

  • Lectures 181
  • Quizzes 14
  • Exercises 14
  • Duration 10.5 total hours
  • Skill level All Levels
  • Students 1745
  • Last Updated June, 2023

  • Introduction 05:58

    • Lecture
      Course Introduction 05:58

  • Setup of IDE 19:59

    • Lecture
      Section 2 Introduction 01:25
    • Lecture
      Downloading and Installing Visual Studio Code 06:14
    • Lecture
      Customizing the IDE 07:46
    • Lecture
      Running Code in a Web Browser 03:11
    • Lecture
      Recap of Section 2 01:23

  • HTML Fundamentals 58:51

    • Lecture
      Section 3 Introduction 01:42
    • Lecture
      What is HTML? 01:54
    • Lecture
      HTML Tags 06:06
    • Quiz
      Adding an input field to HTML code 1 question
    • Lecture
      Format of an HTML Document 02:41
    • Lecture
      Structure of HTML Code 03:42
    • Lecture
      Page Title and Headings 03:14
    • Quiz
      Adding a title and heading to an HTML Webpage 1 question
    • Lecture
      Paragraphs and Text 08:07
    • Quiz
      Hello World in HTML 1 question
    • Lecture
      Style Attribute and Style Tag 06:30
    • Quiz
      Using the style tag to stylize an HTML element 1 question
    • Lecture
      Formatting Text in HTML 03:42
    • Quiz
      Formatting HTML text 1 question
    • Lecture
      Hyperlinks in HTML 03:29
    • Quiz
      Adding a HyperLink to HTML code 1 question
    • Lecture
      Images in HTML 04:06
    • Lecture
      Buttons in HTML 05:28
    • Quiz
      Creating a button in HTML 1 question
    • Lecture
      Comments in HTML 02:22
    • Lecture
      Recap of Section 3 05:48

  • Displaying Data in HTML 34:33

    • Lecture
      Section 4 Introduction 01:52
    • Lecture
      Lists in HTML 05:16
    • Quiz
      Create an ordered list using HTML code 1 question
    • Quiz
      Create an unordered list using HTML code 1 question
    • Lecture
      Tables in HTML 05:52
    • Quiz
      Create a table using HTML code 1 question
    • Lecture
      Layouts in HTML 05:49
    • Quiz
      Creating a layout in HTML 1 question
    • Lecture
      Divs and Spans 03:54
    • Quiz
      Creating a div in HTML 1 question
    • Quiz
      Creating a span in HTML 1 question
    • Lecture
      Forms in HTML 09:40
    • Quiz
      Creating a form in HTML 1 question
    • Lecture
      Recap of Section 4 02:10

  • Colors in HTML 13:19

    • Lecture
      Section 5 Introduction 01:00
    • Lecture
      Color in HTML 04:00
    • Lecture
      Coloring Elements in HTML 05:57
    • Lecture
      Recap of Section 5 02:22

  • Embedding Media and Graphics in HTML 32:36

    • Lecture
      Section 6 Introduction 01:21
    • Lecture
      More on Images in HTML 06:00
    • Lecture
      Embedding Video in HTML 07:00
    • Lecture
      Embedding Audio in HTML 03:09
    • Lecture
      Embedding other Webpages 01:30
    • Lecture
      HTML Canvas 05:42
    • Lecture
      Scalable Vector Graphics (SVGs) 04:02
    • Lecture
      Recap of Section 6 03:52

  • More on HTML Tags 24:36

    • Lecture
      Section 7 Introduction 00:58
    • Lecture
      Formatting Tags 07:22
    • Lecture
      Metadata Tags 07:47
    • Lecture
      New Tags to HTML 5 05:09
    • Lecture
      Section 7 Recap 03:20

  • HTML Global Attributes 10:44

    • Lecture
      Section 8 Introduction 00:57
    • Lecture
      Global Attributes 03:49
    • Lecture
      HTML 5 Specific Global Attributes 04:16
    • Lecture
      Section 8 Recap 01:42

  • Events in HTML 15:33

    • Lecture
      Section 9 Introduction 01:35
    • Lecture
      Keyboard Events 02:10
    • Lecture
      Mouse Events 03:27
    • Lecture
      Drag Events 03:34
    • Lecture
      Clipboard Events 01:38
    • Lecture
      Section 9 Recap 03:09

  • Layouts and Webpages in HTML 33:12

    • Lecture
      Section 10 Introduction 01:22
    • Lecture
      Dynamic Images and Text 01:56
    • Lecture
      Menus and Header Bars 02:48
    • Lecture
      Intro to Bootstrap 02:07
    • Lecture
      Positioning in Bootstrap 03:54
    • Lecture
      Menus and UI in Bootstrap 02:45
    • Lecture
      Images in Bootstrap 04:53
    • Lecture
      Text in Bootstrap 04:21
    • Lecture
      Other Bootstrap Elements 04:17
    • Lecture
      Section 10 Recap 04:49

  • HTML Hands-On Practice 27:22

    • Lecture
      Section 11 Introduction 01:38
    • Lecture
      Starting our Webpage 02:18
    • Lecture
      Creating the Header Bar 03:58
    • Lecture
      Creating the Home Page 02:35
    • Lecture
      Creating the About Page 03:54
    • Lecture
      Creating the Menu Page 06:59
    • Lecture
      Creating the Contact Page 04:29
    • Lecture
      Section 11 Recap 01:31

  • XHTML 06:29

    • Lecture
      Section 12 Introduction 01:05
    • Lecture
      What is XHTML? 01:08
    • Lecture
      XHTML Syntax 00:56
    • Lecture
      Converting HTML to XHTML 02:31
    • Lecture
      Section 12 Recap 00:49

  • Debugging HTML 12:04

    • Lecture
      Section 13 Introduction 01:08
    • Lecture
      What is Debugging? 01:53
    • Lecture
      Common Errors and How to Fix Them 03:01
    • Lecture
      Using An HTML Validator 04:16
    • Lecture
      Section 13 Recap 01:46

  • CSS Basics 24:59

    • Lecture
      Section 14 Introduction 02:00
    • Lecture
      Creating a CSS Stylesheet 02:18
    • Lecture
      Importing Stylesheet vs. Using Style Tag 02:25
    • Lecture
      CSS Syntax 04:54
    • Lecture
      Cascading Order 01:57
    • Lecture
      Box Model 01:21
    • Lecture
      Paddings and Margins 05:51
    • Lecture
      Section 14 Recap 04:13

  • Modifying Text Using CSS 31:05

    • Lecture
      Section 15 Introduction 01:19
    • Lecture
      Text Styling Concepts 09:24
    • Lecture
      Basic Text Effects 06:46
    • Lecture
      Fonts 06:47
    • Lecture
      Text Properties 03:41
    • Lecture
      Section 15 Recap 03:08

  • Colors in CSS 29:10

    • Lecture
      Section 16 Introduction 01:13
    • Lecture
      What Can I Color? 05:01
    • Lecture
      Specifying Colors 07:31
    • Lecture
      Saturation 04:54
    • Lecture
      Opacity 02:04
    • Lecture
      Filters 04:54
    • Lecture
      Section 16 Recap 03:33

  • CSS Properties 50:41

    • Lecture
      Section 17 Introduction 01:29
    • Lecture
      Background Properties 06:38
    • Lecture
      Border Properties 11:20
    • Lecture
      Box Properties 07:10
    • Lecture
      Outline Properties 05:07
    • Lecture
      Positioning Properties 05:53
    • Lecture
      Clipping and Masking Properties 03:56
    • Lecture
      Other Properties 04:59
    • Lecture
      Section 17 Recap 04:09

  • CSS Tables 14:42

    • Lecture
      Section 18 Introduction 01:01
    • Lecture
      Table Style and Display 04:06
    • Lecture
      Table Alignment 04:40
    • Lecture
      Cool Effects 02:18
    • Lecture
      Section 18 Recap 02:37

  • CSS Lists 10:01

    • Lecture
      Section 19 Introduction 00:53
    • Lecture
      List Properties 05:39
    • Lecture
      Coloring Lists 01:11
    • Lecture
      Section 19 Recap 02:18

  • CSS Animations 22:45

    • Lecture
      Section 20 Introduction 01:33
    • Lecture
      Transition Properties 05:22
    • Lecture
      Animation Properties 08:14
    • Lecture
      2D Animation 02:41
    • Lecture
      3D Animation 02:15
    • Lecture
      Section 20 Recap 02:40

  • Animation Properties in CSS 18:37

    • Lecture
      Section 21 Introduction 00:51
    • Lecture
      Background 04:01
    • Lecture
      Border 02:01
    • Lecture
      Column 01:31
    • Lecture
      Font 01:14
    • Lecture
      Margin 01:04
    • Lecture
      Height and Width 01:23
    • Lecture
      Text 01:23
    • Lecture
      Padding 01:04
    • Lecture
      Word-Spacing and Letter-Spacing 01:25
    • Lecture
      Section 21 Recap 02:40

  • CSS Buttons 11:22

    • Lecture
      Section 22 Intro 01:20
    • Lecture
      :hover and :active State 02:24
    • Lecture
      Advanced Styling 03:06
    • Lecture
      Animation 02:47
    • Lecture
      Section 22 Recap 01:45

  • CSS Pseduo-Classes and Selectors 23:49

  • CSS At-Rules 04:58

  • Advanced CSS 32:01

  • CSS Hands-On Practice 16:44

  • Debugging CSS 05:05

  • Useful CSS Specifics 18:48

  • Course Summary and Wrap-Up 05:41

  • Extra Information - Source code, and other stuff 09

Robert Gioia
Senior Solutions Architect | Android | iOS | Game Dev | C# My name is Rob and I currently work as a Senior Solutions Architect. I've also worked as a Mobile App Developer using Unity and the C# programming language to create… View Profile
Tim Buchalka's Learn Programming Academy
Professional Programmers and Teachers - 323,000+ students The Learn Programming Academy was created by Tim Buchalka, a software developer with 35 years experience, who is also an instructor on Udemy, with over 335,000 students in his courses… View Profile

Student Feedback

4.3
216 Average ratings
50%
29%
14%
5%
3%

  • 2 weeks ago

    Corinne Waldon

    As a beginner in HTML and CSS, this course did a good job explaining and giving examples of things in a clear and concise teaching manner. I'm glad I knew a bit of Javascript so that I could understand generally what was going on when javascript was used, otherwise I might have been a little lost in those circumstances.

  • 7 months ago

    Ryan Shelton

    Gives you the majority of the HTML and CSS material, and while it may not cover everything, it gives you the mindset needed in order for you to be able to understand what wasn't.

  • 7 months ago

    Joao Rolo

    Very complete explanation on colour values.

  • 1 year ago

    Peter Ndajah

    The teacher is good

  • 1 year ago

    Dustin Birch

    A pretty straight forward approach. Not too much in depth with some things but its exactly what I wanted to see. A great intro into HTML and CSS. I don't think there is anything that was missed. The only thing I miss is the coding exercises we had at the beginning. Other than that I like how it is presented. It all makes sense and if I have to, I will replay the section I need to and mess around with it so I understand. Great course, and thank you.

  • 1 year ago

    Csaba Vadasz

    Totaly understandable, helpful. Thx for your efforts to teach us! well done!

  • 1 year ago

    Beth Lisa Hashkes

    The download worked!

  • 1 year ago

    Guido Bussani

    This course is very interesting, useful and very well organized! The explanations are clear, understandable and accompanied by practical examples. I enjoyed following the course! Compliments!

  • 1 year ago

    Veronica Hana Smigielski

    I know HTML so the beginning pieces went very quickly.

  • 2 years ago

    Jacob Aaron Crawford

    thank you for the help setting up IDE

Take this course
Take this course

Related Courses

    3 Comments

  1. mm
    graliontorile
    November 4, 2022
    Reply

    I like what you guys are up also. Such clever work and reporting! Carry on the superb works guys I’ve incorporated you guys to my blogroll. I think it will improve the value of my site :).

  2. mm
    yygepdkoyz
    November 23, 2022
    Reply

    HTML and CSS Masterclass • The Learn Programming Academy
    [url=http://www.g8pmt58ubfgn50fb706z301w01b262ass.org/]uyygepdkoyz[/url]
    yygepdkoyz http://www.g8pmt58ubfgn50fb706z301w01b262ass.org/
    ayygepdkoyz

  3. mm
    Fridge Storage Box With Good Price
    November 23, 2022
    Reply

    http://www.xcopy88.com/30810111.html
    Fiber Transparent Glass
    Fridge Storage Box With Good Price

Leave A Reply

Your email address will not be published. Required fields are marked *

Message modal