**HTML/CSS**

This is an introduction lesson/workshop on HTML and CSS. Through these lesson files, you'll learn the foundations of what a webpage is made up of and how to create a basic webpage.

There are two sections: 
1) HTML
2) CSS

Within each section, there is a blurb explaining what this section is about. Then, there are instructions on what to do with these lesson files, so you can have a beginner-level understanding of these fundamentals to webpages.

Going through these sections will give you an in-depth dive into HTML and CSS, similar to the in-person lesson/workshop that was given on 2026-04-01, 18:00-19:00 MST.

-----------------------------------------------------------------------

However, if you believe you don't go this in-depth or already know some HTML, but would like a refresher, you can still go through these learning files:
'For each section, delete the comment tags around code (leave it around normal text), and complete the TODOs.'

-----------------------------------------------------------------------


# HTML

An HTML file is very much like a Google Doc/Microsoft Word Doc. Really, any webpage (at the HTML level) is just a document with a lot of decorations to it. So, if you're familiar with Google Docs/Microsoft Word Docs, you'll pick up HTML really fast.


1) Double-Click '/Lesson_HTML,CSS/HTML/ICWV-HTML.html'
	- This is will open up the webpage on your default browser (you can also choose a specific browser to open the webpage through 'Right-Clicking' on the .html file and opening through your preferred browser)
	- This is the webpage that you'll be working on when working through this HTML section. This is a diary within a webpage.
	
2) Open '/Lesson_HTML,CSS/HTML/ICWV-HTML.html' through Notepad, Notepad++, VSCode, or any other text editor
	- This will allow you to see the code that makes the webpage!
	
3) Let's read the code
	- On the 1st line, you'll see '<!DOCTYPE html>', this is indicating to the computer that the file is an HTML page
	- Moving on a couple lines down, you'll see the next line with text is '<html>,' with a bunch of text below it indented, then ending off with '</html>' all the way down.
		- This is supposed to indicate to the computer that it should read all of the text between these 'tags' and interpret it to the point where it's shown on a webpage
	- Immediately below the '<html>' tag, you'll see '<!-- Side Note: This is a comment. Anything within these arrows will be ignored when the code runs! -->'
		- As indicated, this is a comment and the computer will ignore this line of code. This is meant for you or others reading the code, so they know what exactly is going on without having to wrap your/their head around something is complicated to read.
		- To make a comment, follow this syntax: '<!-- [add text here] -->'

4) Looking at Section 1
	- This is just a template section, mostly for you to look at and learn about some of the elements that make up an HTML page.
	- Looking at the first set of tags: '<head>...</head>' is where some of the behind-the-scenes are set up for the HTML Page
		- One of those elements are encapsulated within the '<title>...</title>' tags in which this names the tab that you'll see in your browser
	- Next set of tags are the '<body>...</body>' (the ending part of the tag is near the end of the file)
		- The computer will read all of the code here and display it on the webpage
	- Continuing on will let way for you to see the '<h1>...</h1>' and '<h2>...</h2>' tags, which are similar to the 'H1' and 'H2'	Headers in Google Docs/Microsoft Word Docs
	- Finally, the '<p>...</p>' tags just act as your normal text
		- Specifically, 'Times New Roman, 16px font size'
	
5) Within Section 2, delete the comment tags "<!--" and "-->" surrounding the '<h2>...</h2>' tags

6) Complete the TODO for Section 2

7) Within Section 3, delete the comment tags "<!--" and "-->" surrounding the '<h2>...</h2>' and '<p>...</p>' tags

8) Complete the TODO for Section 3

9) Within Section 4, delete the comment tags "<!--" and "-->" surrounding the '<h2>...</h2>', '<p>...</p>', '<li>...</li>', '<ol>...</ol>'and '<ul>...</ul>' tags

10) Complete the TODO for Section 4

11) Within Section 5, delete the comment tags "<!--" and "-->" surrounding the '<h2>...</h2>', '<table>...</table>' and '<p>...</p>' tags

12) Complete the TODO for Section 5

13) Within Section 4, delete the comment tags "<!--" and "-->" surrounding the '<h2>...</h2>', '<p>...</p>' and <img> tags

14) Complete the TODO for Section 6

15) Within Section 5, delete the comment tags "<!--" and "-->" surrounding the '<h2>...</h2>', '<p>...</p>' and '<a>...</a>' tags

16) Complete the TODO for Section 7




# CSS

	
		

	