Code Your First Website with HTML & CSS for Kids & Beginners
4.6 (366 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.
1,111 students enrolled

Code Your First Website with HTML & CSS for Kids & Beginners

Begin learning the in demand skill of programming using HTML 5 and CSS 3. Don't wait, start learning HTML and CSS today!
Highest Rated
4.6 (366 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.
1,111 students enrolled
Created by Kevin Kennedy
Last updated 6/2019
English
English [Auto-generated]
Current price: $126.99 Original price: $194.99 Discount: 35% off
4 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 5 downloadable resources
  • 3 coding exercises
  • 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
  • Code the basic HTML 5 structure used by every website on the web.
  • Style website elements with introductory CSS 3 concepts.
  • Create their own unique website using HTML and CSS.
Course content
Expand all 37 lectures 01:50:53
+ Introduction
1 lecture 01:06

Prepare for this course by having an up to date web browser ready. I recommend using Google Chrome, which you can download for free.

Preview 01:06
+ Let's learn HTML
14 lectures 51:28

In this lecture you will learn a brief overview of HTML, including the following:

  • What HTML stands for
  • What "hyper text" is
  • Who sets the standards for HTML
  • Beginning and ending tags
Preview 01:25

3 quick questions about the HTML overview.

What is HTML?
3 questions

In this lecture you will learn how to spot errors in the text editor.  Then, you'll learn the basic structure of HTML including the following tags:

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>
  • <body>
  • <footer>
Preview 04:39

In this lecture you will learn:

  • the use of <nav> tags
Preview 00:44

In this lecture you will learn:

  • H1 to H6 heading tags
  • Their level of importance
Preview 03:33

In this lecture, you will learn how to define a paragraph.

Preview 03:15
Basic HTML structure
1 question

In this lecture you will learn:

  • <br> tag
  • not all tags have an ending tag
Creating a line break
02:13

In this lecture you will learn

  • how to add links to the navigation
  • what "href" means
  • some items a link can direct to
  • # as a placeholder
Preview 05:08

In this lecture you will learn:

  • The <img> tag
  • "Src" attribute
  • "Alt" attribute
  • How to set height and width of an image
Adding an image
05:37

In this lecture, we will build upon the last two.  You will learn how to create an image that acts as a link.

Creating an image with a link
02:30
Add an image with a link
1 question

In this lecture you will learn:

  • The <div> tag
  • why we use it
Using the div tag
03:27

In this lecture you will learn:

  • How to create an ordered list (1, 2, 3, etc...)
  • How to create an un-ordered list (bullet points)
Creating unordered and ordered lists
05:19

In this lecture, you will learn how to create a form for a name/email submission.

Forms
04:17

In this lecture you will learn how to create a table, including the following tags:

  • <table>
  • <tr>
  • <th>
  • <td>
Tables
04:55
Create an unordered list with your favorite movies
1 question

In this lecture, you will learn how to create a comment for:

  • reminding yourself something

  • letting a friend know something about your code

  • saving part of the code for later

Creating comments in HTML
04:26

A 19 question quiz covering all the HTML elements in this section. It is highly recommended that students be able to pass this quiz before moving on to the next section.

Review HTML elements
19 questions
+ Let's learn CSS
17 lectures 50:06

In this lecture you will learn a brief overview of CSS, including the following:

  • What CSS stands for
  • Overview of what CSS can do
  • How it works with HTML
Preview 00:58

3 quick questions about the CSS overview, and how it's loaded into HTML.

What is CSS?
1 question

In this lecture you will learn the basics of CSS syntax including the following:

  • selector and declaration block
  • property and value
Preview 02:03

In this lecture you will learn the background color property including the following:

  • syntax
  • web safe colors
Background color
05:15

In this lecture you will learn how to create an id including the following:

  • syntax
  • naming rules
Creating an ID
05:10

In this lecture you will learn how to create a class including the following:

  • syntax
  • naming rules
Creating classes
02:05

In this lecture you will learn the border color property including the following:

  • syntax
Create a border
03:11

In this lecture you will learn the border-radius property including the following:

  • syntax

  • shorthand property

  • top, right, bottom, left

Border radius
05:01

In this lecture you will learn the padding property including the following:

  • syntax
  • individual sides
Padding
05:24

A 3 question quiz covering all the CSS properties related to creating a border.

Creating a border
3 questions

In this lecture you will learn the margin property including the following:

  • syntax
  • individual sides
Margin
03:26

In this lecture you will learn the font size property including the following:

  • syntax
  • pixels, percentages, small, medium, large
Font size
02:05

In this lecture you will learn the font-weight property including the following:

  • syntax

  • normal, bold, bolder, lighter

  • numbers 100 - 900

Font weight
02:21

In this lecture you will learn the text transform property including the following:

  • syntax
  • uppercase, lowercase, capitalize, none
Text transform
01:38

In this lecture you will learn the text color property including the following:

  • syntax
  • web safe colors
Text color
01:15

In this lecture you will learn the text align property including the following:

  • syntax
  • left, right, center, justified
Aligning the text
02:56

A 5 question quiz covering all the CSS properties that allow us to change the look of our text.

Changing the look of our text
5 questions

In this lecture you will learn the font family property including the following:

  • syntax
  • web fonts
  • fallback fonts
  • family name vs generic name
Font family
02:20

In this lecture you will learn the font style property including the following:

  • syntax
  • normal, italic, oblique
Font style
01:15

A 2 question quiz covering the CSS properties that allow us to change our fonts.

Changing our font
2 questions

In this lecture you will learn how to create comments in CSS including the following:

  • syntax
  • why you should write comments
  • how browsers treat them
CSS comments
03:43
+ Final Project
2 lectures 01:58

*Please view the attached document.

Project overview
00:59

A 19 question quiz covering all the CSS properties covered in this section. It is highly recommended that students be able to pass this quiz before moving on to the final project.

Review CSS properties
19 questions
Conclusion and next steps
00:59
+ BONUS
3 lectures 06:15

Using jsbin.com

If you use jsbin.com, which I use in the course tutorials, you will not have to link your CSS to your HTML document - because it automatically does it for you!

Using a text editor app

If you decide to use a free text editor, such as Brackets (brackets.io), then you'll have to link your CSS document to the HTML document. In this video I'll show you the 3 attributes required to link your CSS to your HTML.

Linking a CSS style guide to your HTML document
02:55

In this bonus tutorial, learn how to create awesome button hover effects using only HTML and CSS.

Using the CSS :hover Selector to change website button effects and more!
01:54

In this bonus tutorial, learn how to change the mouse highlight color on your website using the CSS ::selection property.

Changing the Mouse Highlight Color with CSS ::selection
01:26
Requirements
  • You should be able to use a computer at a beginner level (navigate your web browser and type).
  • You should be able to write a complete sentence in English (example: Coding websites with HTML and CSS is fun!).
  • A kid, adult, or beginner that is looking to learn a rewarding skillset.
Description

Are you ready to build your very first website in 2019 with HTML and CSS? 

This is the perfect course to start with. This course is designed for beginners like you that are ready to learn HTML and CSS without any coding experience required.

I've had students from 9 years to 58 years old complete my course. It's never too early or too late to learn HTML and CSS!

HTML and CSS is the perfect tool to add to your skillset!

MESSAGE TO PARENTS

Why should your child learn to code? Well... coding is the new literacy and it’s rapidly growing! HTML and CSS are used by every website in the world, and it's a great place to start!

There are so many benefits - becoming fluent in technology, critical thinking skills, problem-solving skills, great career paths and more.

Computers are a big part of our future and every child should learn basic coding, not just those seeking a career in software development. Even celebrities, CEOs, and those alike are finally recognizing the benefits of children learning how to code. Here's what just a few of them are saying:

"Computers are going to be a big part of our future...and that future is yours to shape." -Former President, Barack Obama

"Learning to write programs stretches your mind, and helps you think better, creates a way of thinking about things that I think is helpful in all domains." -Co-Founder Microsoft, Bill Gates

"You can be good at technology and like fashion and art. You can be good at technology and be a jock. You can be good at technology and be a mom. You can do it your way, on your terms." -Former CEO Yahoo!, Marissa Mayer

Become fluent in technology

Interacting with technology is part of everyday life. Coding with HTML and CSS helps children create technology, express themselves in new ways.
It also helps them understand how many online businesses and services work.

Programmers are in high demand

Employment is expected to grow 17% by 2024 (via BLS)
According to the Bureau Labor of Statistics (BLS), the average salary for a software developer is $102,280 per year.

Learn to think and problem solve

Programming teaches children (and adults) how to solve large problems by breaking them down into small achievable steps. 
These critical thinking skills can be cross-utilized in many areas of life.

Why learn from me?

I've been building HTML and CSS websites for many years. In college, I used to build HTML and CSS websites (along with WordPress websites) for local businesses, in order to pay for my expenses.

I love how simple HTML and CSS can be when it's broken down into achievable steps!

I still remember the first HTML and CSS website that I built for myself. It was a real struggle just to get it to look the way I wanted. I've kept everything in mind while creating this course. I'll explain each item step by step in its own video. I'll also be happy to answer any HTML and CSS questions you may have in the student forum for this course (available to enrolled students only).

COURSE CONTENT

  • You will learn the basic HTML structure used by every website!

  • You will know how to organize your HTML code.

  • You will learn how to style your HTML elements using CSS.

  • You will learn how to change text color, font size, background color, and more!

  • You will learn how to leave comments in your HTML and CSS code.

  • You will know how to create links, images, menus, and more!

  • You will know how to change fonts with CSS

  • You will know how to create padding and margin with CSS.

DESIGN AND BUILD YOUR FIRST HTML AND CSS SITE

No matter what your goal is with learning HTML and CSS, I want to make sure you're able to achieve it. If you have any questions or run into any roadblocks, then I'm here to help!

Who is this HTML and CSS course for?

This course is for kids and beginners trying to learn how to code with HMTL and CSS. This course is NOT for learning WordPress or prebuilt website builders. If you are interested in WordPress then please check out my other course.

With Udemy's 30-day 100% money-back guarantee, there's no reason to hesitate. Enroll now, try it out, and see if you like the course!

I can't wait to help you build your very first website with HTML and CSS!

Cheers,
Kevin Kennedy, Product Design Online

Who this course is for:
  • New coders who want to learn the essential elements of HTML 5 & CSS 3.
  • Those looking to learn a rewarding skillset in a rapidly growing job market.
  • Anyone looking to re-learn the most common elements of HTML 5 & CSS 3.
  • Those interested in building their own websites, or looking to gain a better understanding of how websites are built with HTML and CSS.
  • Those who have struggled grasping HTML and CSS concepts from free courses on Khan Academy.