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)
