1 of 32

Intro to HTML

Lesson 1.1

Skills Bootcamp in Front-End Web Development

1

2 of 32

WELCOME

2

3 of 32

Today’s Objectives

By the end of the lesson today you will be able to:

Utilize basic Terminal/Bash commands.

Prove you have completed all required prework (software and tools installation).

Create a basic HTML page.

3

4 of 32

Prework

4

5 of 32

Software Checklist

At this point, you should have all of these installed:

Slack

Visual Studio Code

Git

Git Bash (Windows) or Terminal (Mac)

Google Chrome

5

6 of 32

Accounts Checklist

You should also have accounts for:

GitHub (with SSH Integration)

Stack Overflow

6

7 of 32

Confirm Prework Installed

30 minutes

Time to Code

Suggested Time:

7

8 of 32

Self-Check

Let’s do some quick checks of the following:

Visual Studio Code Check

Git Bash/Terminal Check

Git Check

8

9 of 32

9

10 of 32

Let’s Get Crackin’—Introduction to Console/Bash

10

11 of 32

Let’s Get Crackin’—Introduction to Console/Bash

Instructor Demonstration

11

12 of 32

Let’s Get Crackin’—Introduction to Console/Bash

cd	Changes directory	rm <FILENAME>	Deletes file
cd ~	Changes to home directory	rm -r <FOLDERNAME>	Deletes a folder, note the -r
cd ..	Moves up one directory	open .	Opens the current folder. MAC SPECIFIC
ls	Lists files in folder	open <FILENAME>	opens a specific file—MAC SPECIFIC
pwd	Shows current directory	explorer <FILENAME>	Opens the specific file—BASH SPECIFIC
mkdir <FOLDERNAME>	Creates new directory	explorer .	Opens the current folder—BASH SPECIFIC
touch <FILENAME>	Creates a file

12

13 of 32

Activity: Console Commands

From the Terminal/Console and using only the command line, create the following:

A new folder with the name of first_day_stuff
A new HTML file with the name of first-day.html

Open the current folder containing the new HTML file.

BONUS:

Create multiple directories/folders with the names one_folder and second_folder in one command.
Create multiple files with the names one.html and two.html in one command in the first_day_stuff directory.

15 minutes

Suggested Time:

13

14 of 32

Time’s Up! Let’s Review.

14

15 of 32

Webpages

15

16 of 32

What Webpages Really Look Like

Instructor Demonstration

16

17 of 32

HTML stands for Hypertext Markup Language. While not technically a coding language, it determines what content and elements are displayed on a webpage.

17

18 of 32

CSS

HTML

(structure)

CSS

(presentation)

18

19 of 32

CSS

CSS is technically a selector language, which means it is used to select HTML elements in order to style them.

HTML elements

CSS rules

“Selector”

19

20 of 32

HTML, CSS, JavaScript

HTML	CSS	JavaScript
Used to write content.	Used to format content.	Used to create dynamic web applications that take in user inputs, change what’s displayed to users, animate elements, and much more.

20

21 of 32

Activity: Examining Wikipedia

In this activity, you'll take a moment to examine/modify a Wikipedia page using �Chrome’s inspector tool.

Navigate to any page on Wikipedia and open up the Chrome Inspector tool.
Using Inspector, locate the header for the article.
Change the header! You can edit it and write something else (please keep it clean).
Attempt to find some of the written content on the page and change it around.

5 minutes

Suggested Time:

21

22 of 32

Time’s Up! Let’s Review.

22

23 of 32

Hello, HTML

Instructor Demonstration

23

24 of 32

Activity: My First HTML Page

Time to put these new skills to the test! In this activity, you'll create a new HTML �page from scratch.

Create a new HTML document called FirstHTML.html.
Give your HTML page the title “My First HTML Page.”
Add some text so that your HTML page renders the words “Woohoo! �I just created my first web page!” to the browser.

10 minutes

Suggested Time:

24

25 of 32

Time’s Up! Let’s Review.

25

26 of 32

A Body of Content

Instructor Demonstration

26

27 of 32

Important Common Tags

Headings:		Containers:		Others:
<h1> </h1>	Heading 1 (Largest heading)	<html> </html>	Wraps the entire page	<strong>	bold
<h2> </h2>	Heading 2 (Next largest heading)	<head> </head>	Wraps the header of the page	<em>	emphasis
<h3> </h3>	Heading 3	<body> </body>	Wraps the main content	<img>	images
...		<div> </div>	Logical container	<a href>	links
<h6> </h6>	Heading 6 (Smallest heading, rarely ever used)	<p> </p>	Wraps individual paragraphs	<li>	list items
		<ul> </ul>	Defines an unordered list	<title>	title
		<ol> </ol>	Defines an ordered list	<br>	line break
				<table>	tables
				<!-- -->	comments

27

28 of 32

Image Types

JPEG	The JPEG file format is a type of image compression that works best with photographs and complex images. JPEGs are great multipurpose files, although designers can run into issues when working with different browser screen sizes. We'll primarily be using JPEGs in our program.
PNG	PNGs support variable transparency. In other words, users can control the degree to which the image is transparent. These can be useful when planning or designing website and application interfaces. But they are less common.
SVG	SVG files allow you to create very high-quality graphics and animations that do not lose detail as their size increases. This means that, with an SVG file, you could create one graphic that looked great on a tiny mobile phone screen or on a 60-inch computer monitor. On the downside, these files can be very large.
GIF	You know what these are! GIFs have the unique ability to display a sequence of images, similar to videos. These are called animated GIFs, in which a series of separate GIF images that are linked together to create motion (animation).

28

29 of 32

Building Up HTML

15 minutes

Time to Code

Suggested Time:

29

30 of 32

Time’s Up! Let’s Review.

30

31 of 32

Questions?

31

32 of 32

32