Coding Basic Websites With Html And Css For Kids Beginners

  1. Home
  2. Html
  3. Coding Basic Websites With Html And Css For Kids Beginners

Tags: HTML

Begin learning the in demand skill of programming using HTML 5 and CSS 3. Don't wait, start learning HTML and CSS today!

Last updated 2022-01-10 | 4.6

- 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.

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.

* 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.

Course content

5 sections • 47 lectures

Introduction 1 lectures

Course requirements and setup Preview 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.

Let's learn HTML 19 lectures

HTML overview Preview 01:25

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

What is HTML?

3 quick questions about the HTML overview.

Basic HTML structure Preview 04:39

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>

Nav tags Preview 00:44

In this lecture you will learn:

  • the use of <nav> tags

H1 to H6 - heading tags Preview 03:33

In this lecture you will learn:

  • H1 to H6 heading tags
  • Their level of importance

Paragraph tags Preview 03:15

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

Basic HTML structure

Creating a line break Preview 02:13

In this lecture you will learn:

  • <br> tag
  • not all tags have an ending tag

Adding a link Preview 05:08

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

Adding an image Preview 05:37

In this lecture you will learn:

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

Creating an image with a link Preview 02:30

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

Add an image with a link

Using the div tag Preview 03:27

In this lecture you will learn:

  • The <div> tag
  • why we use it

Creating unordered and ordered lists Preview 05:19

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)

Forms Preview 04:17

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

Tables Preview 04:55

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

  • <table>
  • <tr>
  • <th>
  • <td>

Create an unordered list with your favorite movies

Creating comments in HTML Preview 04:26

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

Review HTML elements

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.

Let's learn CSS 21 lectures

CSS overview Preview 00:58

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

What is CSS?

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

CSS syntax Preview 02:03

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

  • selector and declaration block
  • property and value

Background color Preview 05:15

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

  • syntax
  • web safe colors

Creating an ID Preview 05:10

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

  • syntax
  • naming rules

Creating classes Preview 02:05

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

  • syntax
  • naming rules

Create a border Preview 03:11

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

  • syntax

Border radius Preview 05:01

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

  • syntax

  • shorthand property

  • top, right, bottom, left

Padding Preview 05:24

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

  • syntax
  • individual sides

Creating a border

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

Margin Preview 03:26

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

  • syntax
  • individual sides

Font size Preview 02:05

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

  • syntax
  • pixels, percentages, small, medium, large

Font weight Preview 02:21

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

  • syntax

  • normal, bold, bolder, lighter

  • numbers 100 - 900

Text transform Preview 01:38

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

  • syntax
  • uppercase, lowercase, capitalize, none

Text color Preview 01:15

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

  • syntax
  • web safe colors

Aligning the text Preview 02:56

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

  • syntax
  • left, right, center, justified

Changing the look of our text

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

Font family Preview 02:20

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

  • syntax
  • web fonts
  • fallback fonts
  • family name vs generic name

Font style Preview 01:15

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

  • syntax
  • normal, italic, oblique

Changing our font

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

CSS comments Preview 03:43

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

Final Project 3 lectures

Project overview Preview 00:59

*Please view the attached document.

Review CSS properties

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.

Conclusion and next steps Preview 00:59

BONUS 3 lectures

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

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.

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

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

Changing the Mouse Highlight Color with CSS ::selection Preview 01:26

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