girl develop it orlando html remix
TRANSCRIPT
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.
Beginning HTML & CSS Class 1
WELCOME!Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
Some "rules"
● We are here for you!● Every question is important● Help each other● Have fun
Tell us about yourself.● Who are you?● What do you hope to get out of the class?● Share 1 thing about yourself.
Goal Today: Learn the basic code to build a site from scratch
HTML/CSS
They are not● Mysterious ● Black magic
Your Content+ HTML: Structure+ CSS: Presentation
= Your Website
Anatomy of a Website
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
Learning This Stuff
It will feel like we are learning a foreignlanguage.
Learning This Stuff
It’s a process.
We learn a few words at a time and then use them in an specific structure.
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.
“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
Connections
How does your computer connect to a website?
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.
The Internet
Connected computers sharing information
Tools To Get Started
BrowsersDeveloper Tools
Text Editor
Browsers
Software on your computer.
Connects to websites to get web pages and then shows them to you.
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.
Developer Tools
Chrome - Inspector
Examine, edit, and debugHTML, CSS, and JavaScript
(*under the hood)
Text EditorAll HTML and CSS files that we create for web development are simply plain text files.
Sublime Text - Mac and Windows
History of HTML
Developed by Tim Berners-Lee in the early 1990s
HTML History
What is HTML?
HyperText Markup Language
● Describes the structure of web pages using tags.
● Browsers read the tags and then display the web pages.
HyperText
Creates links between web pages and other resources such as images, videos, etc.
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.
“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
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
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 moviesThese 3 movies account for more than 6 billion dollars total.
1. Avatar2. Titanic3. The Avengers
DOCTYPE
<!DOCTYPE html>Tells the browser that the file is an HTML document, instead of some other type of markup.
HTML Tag
<!DOCTYPE html>
<html>
•••
</html>
Head Tag
The <head> tag contains the <title> of the page as well as other optional tags.
Title Tag Example
Body Tag
<body>The page content here.</body>
Beginning Tags<!DOCTYPE html><html> <head>
<title>Girl Develop It</title> </head> <body>The page content here. </body>
</html>
Let’s Develop It!Let's get our webpage set up.
● doctype● html● head● title● body
Later we'll add some content to it!
Folder Structure
sitename
images index.html styles.cssHTML CSS
File Naming
File names are case sensitive and should NOT include spaces or special characters except hyphens which are commonly used to separate words.Best Practice: Make your filenames all lowercase.
Content StructureTags
Headings
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
Heading 1Heading 2Heading 3Heading 4Heading 5
Heading 6
Heading
● Heading number indicates hierarchy, not size.
● Separate your document into titled sections
● Think: Outlines from high school papers.
Heading
The AvengersPlot
A team of superheroes…
CharactersThor
A demigod from Asguard…
Iron Man
Paragraph
<p>Paragraph 1</p><p>Paragraph 2</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
The browser does not care about whitespace in your HTML. Hitting return multiple times WILL NOT add extra space between your paragraphs in the webpage. Use CSS for that.
Emphasis
<em>● Stress emphasis of its contents
● Text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice
<em>Examples:
“Just do it already!" "We had to do something about it".
A person or software reading the text would pronounce the words in italics with an emphasis.
<p>“Just <em>do</em> it already!" </p>
Strong Emphasis
<strong>● Strong importance, seriousness, or urgency for its
contents● Can be used to mark up a warning or caution
notice● Denote contents that the user needs to see sooner
than other parts of the document
<strong>
Warning! This is very dangerous."
Speak the text differently—with emphasis
<strong>
<strong>"Warning!</strong> This is <strong>very dangerous."</strong>
<b> <i> VS <em> <strong>
● <b> and <i> refer to styles.● Strong is a logical state, and bold is a physical
state.● An italicized word can imply a title of a movie
or book where em is adding emphasis.
Terms
Semantics - Meaning. Helps people & computers to work together. To communicate.Syntax - Spelling and grammar of a programming language. Each program defines its own rules that control which words the computer understandsBest practices - Adhering to web standards and the guidelines for accessibility.
Header
<header>Tag to separate your document into titled sections.
Header
<header>
<h1>Maggie Smith</h1><h2>Web Designer</h2>
</header>
Maggie SmithWeb Designer
Nesting
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
Tags often contain other tags.
Nav
The nav tag represents a section of a page that links to other pages or to parts within the page: a section with navigation links
Main website navigation
Nav
Home About FAQ Contact
Lists
You can make 2 kinds of lists.
Ordered lists
Unordered Lists
Ordered List
<ol> <li>Avatar</li> <li>Titanic</li> <li>The Avengers</li></ol>
1. Avatar2. Titanic3. The Avengers
Unordered Lists
<ul> <li>Avatar</li> <li>Titanic</li> <li>The Avengers</li></ul>
● Avatar● Titanic● The Avengers
Let’s Develop it!Let's add some content to the site!
● header ● nav● heading● paragraph● em & strong● lists
Meta Info
Girl Develop It materials are built by our community, which is made up of industry-leading technologists, instructors, and leaders. All curriculum developed by GDI can be licensed under fair use Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0). You are free to share and adapt these materials.