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.
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
-
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> -
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! -
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
-
Add this code to create a list on your page.
<ul>
<li>John</li>
<li>Susie</li>
<li>Sarah</li>
</ul> -
Update your code to create a numbered list on your page.
<ol>
<li>John</li>
<li>Susie</li>
<li>Sarah</li>
</ol> -
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)
