top of page
Robotics Engineers

html 201

We use HTML to create webpages. That's why it is the language of the internet.

​

Learn HTML and get your ticket to the world of web development!

AI is here.
What this mean for developers.

​

​

 

 

 

 

​

 

What is the difference between HTML, CSS, and Javascript?

​

HTML represents the structure of the page.

CSS represents the skin of the page.

Javascript represents the muscles of the page.

​

​

​

 

 

​

​

​

​

​

​

​

​

How do you get started?

​

HTML is simple! All you need is a text editor and a browser. Today, we are going to do this in Replit.

​

Droid Commander
html.png

Replit Live Demo

​

  1. Go to Replit.

  2. Create an HTML Replit.

  3. Create base template page in browser.

Base template

​

<!DOCTYPE html>

<html>

  <head>

    <title>My first HTML page</title>

  </head>

  <body>

    <h1>Welcome to my first HTML page!</h1>

    <p>I'm learning how to create web pages with HTML.</p>

 

    <!-- Your code here START -->

​

    <!-- Your code here END -->

 

  </body>

</html>

Exercise #1: HTML Review

​

  1. HTML has opening and ending tags.​

    Example:
    <h1> (open tag)
    </h1> (end tag)

    This is how you would say "hello friends!"
    using an h1 ("h" stands for Headline) tag.

    <h1>Hello friends!</h1>

  2. Create the following text in your HTML page.

    (p tag) "There once was a chicken named Sue,"
    (h3 tag) "Who had a most peculiar shoe."
    (h2 tag) "It was made of green silk,"
    (h1 tag) "And caused quite a milk spill."

    * Notice the size difference based on the tag!

  3. Add this text to your html page.
    * Note: The main thing to accomplish is the size difference. Don't worry about getting the exact tag right.



    Why was the math book sad?
    --------------------------------------
    Because it had too many problems.

Exercise #2: Lists

​

  1. Add this code to create a list on your page.

    <ul>
        <li>John</li>
        <li>Susie</li>
        <li>Sarah</li>
    </ul>

  2. Update your code to create a numbered list on your page.

    <ol>
        <li>John</li>
        <li>Susie</li>
        <li>Sarah</li>
    </ol>

  3. Create this Christmas wishlist. Notice the colors and links!

    1. iPhone (link to apple)
    2. New headphones (link to Bose)
    3. Animal Crossing for switch (link to Nintendo)

THANKS FOR JOINING US!

Coding is the new literacy.

​

To learn to read and write code is to learn to read and write the language of the future. It lets you create things with a different kind of language, one of technology.

​

Book a free class and make your mark in the 21st century.

bottom of page