This document introduces a beginner HTML and CSS class aimed at providing accessible software education through mentorship. It covers foundational topics such as the structure of a website, the purpose of HTML tags, and basic coding concepts, while emphasizing that learning to code is a process that requires patience and practice. The document also highlights important resources and tools, including web browsers and text editors, for web development.

1. Beginning HTML & CSS Class 1

2. Howdy! Here is the beginning of some
slides I am working on to potentially
use in a Girl Develop it Class in
Orlando, FL. Please check out this
amazing company. I have adapted this
from their slides.

3. WELCOME!
Girl Develop It is here to provide
affordable and accessible programs to
learn software through mentorship and
hands-on instruction.

4. Some "rules"
● We are here for you!
● Every question is important
● Help each other
● Have fun

5. Tell us about yourself.
● Who are you?
● What do you hope to get out of the class?
● Share 1 thing about yourself.

6. Goal Today: Learn the basic code to
build a site from scratch

7. HTML/CSS
They are not
● Mysterious
● Black magic

8. Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website
Anatomy of a Website

9. Coding:
Learning to embrace being uncomfortable.
Feeling a bit overwhelmed by all the stuff out
there is just part of the learning process these
days.
Learning This Stuff

10. Learning This Stuff
It will feel like we are
learning a foreign
language.

11. Learning This Stuff
It’s a process.
We learn a few words at a time
and then use them in an specific
structure.

12. IMPORTANT!
Everyone starts somewhere
It’s easy to assume the best have always been that way,
but they once had no experience too. But your level
isn’t important. It’s that you keep trying that matters.

13. “Everyone thinks they’re an imposter. Everyone. Get
over it. Share what you know and connect with people
around you in your industry. Surround yourself with
what’s going on in the industry, even if you don’t
quite understand it yet.”
Andi Graham Big Sea Design, GDI TampaBay

14. Connections
How does your computer
connect to a website?

15. Connections
Web servers are computers that store all
webpages and when you type in a URL, it
receives your request and sends the webpage
back to your computer to display it.

16. The Internet
Connected computers
sharing information

17. Tools To Get Started
Browsers
Developer Tools
Text Editor

18. Browsers
Software on your computer.
Connects to websites to get web
pages and then shows them to you.

19. Browsers
Today we are using Chrome but there are
many web browsers.
● They are like cars but different models.
● But just like different models of cars,
they offer different options and
preferences.

20. Developer Tools
Chrome - Inspector
Examine, edit, and debug
HTML, CSS, and JavaScript
(*under the hood)

21. Text Editor
All HTML and CSS files that we create
for web development are simply plain
text files.
Sublime Text - Mac and Windows

22. History of HTML
Developed by Tim Berners-Lee in the early 1990s
HTML History

23. What is HTML?
HyperText Markup Language
● Describes the structure of web pages using
tags.
● Browsers read the tags and then display the
web pages.

24. HyperText
Creates links between web pages
and other resources such as images,
videos, etc.

25. Markup with HTML Tags
HTML tags surround, or “mark up,” your
content so browsers knows what each piece
of text means and how to represent it.

26. “Markup is not the same as code. Often, people incorrectly refer
to markup as code, but code goes beyond the basic abilities of
markup. With code, you can create programs, and make your
web page more dynamic, while markup simply deals with the
page's structure. So, if you want to impress your friends and
relatives, refer to it as markup rather than code.” — Ian Lloyd

28. Why Tags?
Top 3 highest box-office
movies
These 3 movies account for
more than 6 billion dollars
total.
Avatar
Titanic
The Avengers
Top 3 highest box-office movies These 3 movies
account for more than 6 billion dollars total. Avatar
Titanic The Avengers

29. Why Tags?
<h1>Top 3 highest box-
office movies</h1>
<p>These 3 movies account
for more than 6 billion
dollars total.</p>
<ol>
<li>Avatar</li>
<li>Titanic</li>
<li>The Avengers</li>
</ol>
Top 3 highest box-office movies
These 3 movies account for more than 6 billion dollars total.
1. Avatar
2. Titanic
3. The Avengers

30. DOCTYPE
<!DOCTYPE html>
Tells the browser that the file is an
HTML document, instead of some
other type of markup.

31. HTML Tag
<!DOCTYPE html>
<html>
•••
</html>

32. Head Tag
The <head> tag contains the
<title> of the page as well
as other optional tags.

33. Title Tag Example

34. Body Tag
<body>
The page content here.
</body>

35. Beginning Tags
<!DOCTYPE html>
<html>
<head>
<title>Girl Develop It</title>
</head>
<body>The page content here.
</body>
</html>

36. Let’s Develop It!
Let's get our webpage set up.
● doctype
● html
● head
● title
● body
Later we'll add some content to it!