Girl develop It Orlando HTML Remix
-
Upload
holly-akers -
Category
Technology
-
view
45 -
download
2
Transcript of Girl develop It Orlando HTML Remix
![Page 1: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/1.jpg)
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.
![Page 2: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/2.jpg)
Beginning HTML & CSS Class 1
![Page 3: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/3.jpg)
WELCOME!Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
![Page 4: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/4.jpg)
Some "rules"
● We are here for you!● Every question is important● Help each other● Have fun
![Page 5: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/5.jpg)
Tell us about yourself.● Who are you?● What do you hope to get out of the class?● Share 1 thing about yourself.
![Page 6: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/6.jpg)
Goal Today: Learn the basic code to build a site from scratch
![Page 7: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/7.jpg)
HTML/CSS
They are not● Mysterious ● Black magic
![Page 8: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/8.jpg)
Your Content+ HTML: Structure+ CSS: Presentation
= Your Website
Anatomy of a Website
![Page 9: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/9.jpg)
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
![Page 10: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/10.jpg)
Learning This Stuff
It will feel like we are learning a foreignlanguage.
![Page 11: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/11.jpg)
Learning This Stuff
It’s a process.
We learn a few words at a time and then use them in an specific structure.
![Page 12: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/12.jpg)
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.
![Page 13: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/13.jpg)
“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
![Page 14: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/14.jpg)
Connections
How does your computer connect to a website?
![Page 15: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/15.jpg)
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.
![Page 16: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/16.jpg)
The Internet
Connected computers sharing information
![Page 17: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/17.jpg)
Tools To Get Started
BrowsersDeveloper Tools
Text Editor
![Page 18: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/18.jpg)
Browsers
Software on your computer.
Connects to websites to get web pages and then shows them to you.
![Page 19: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/19.jpg)
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.
![Page 20: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/20.jpg)
Developer Tools
Chrome - Inspector
Examine, edit, and debugHTML, CSS, and JavaScript
(*under the hood)
![Page 21: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/21.jpg)
Text EditorAll HTML and CSS files that we create for web development are simply plain text files.
Sublime Text - Mac and Windows
![Page 22: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/22.jpg)
History of HTML
Developed by Tim Berners-Lee in the early 1990s
HTML History
![Page 23: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/23.jpg)
What is HTML?
HyperText Markup Language
● Describes the structure of web pages using tags.
● Browsers read the tags and then display the web pages.
![Page 24: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/24.jpg)
HyperText
Creates links between web pages and other resources such as images, videos, etc.
![Page 25: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/25.jpg)
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.
![Page 26: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/26.jpg)
“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
![Page 27: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/27.jpg)
![Page 28: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/28.jpg)
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
![Page 29: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/29.jpg)
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
![Page 30: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/30.jpg)
DOCTYPE
<!DOCTYPE html>Tells the browser that the file is an HTML document, instead of some other type of markup.
![Page 31: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/31.jpg)
HTML Tag
<!DOCTYPE html>
<html>
•••
</html>
![Page 32: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/32.jpg)
Head Tag
The <head> tag contains the <title> of the page as well as other optional tags.
![Page 33: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/33.jpg)
Title Tag Example
![Page 34: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/34.jpg)
Body Tag
<body>The page content here.</body>
![Page 35: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/35.jpg)
Beginning Tags<!DOCTYPE html><html> <head>
<title>Girl Develop It</title> </head> <body>The page content here. </body>
</html>
![Page 36: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/36.jpg)
Let’s Develop It!Let's get our webpage set up.
● doctype● html● head● title● body
Later we'll add some content to it!
![Page 37: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/37.jpg)
Folder Structure
sitename
images index.html styles.cssHTML CSS
![Page 38: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/38.jpg)
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.
![Page 39: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/39.jpg)
Content StructureTags
![Page 40: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/40.jpg)
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
![Page 41: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/41.jpg)
Heading
● Heading number indicates hierarchy, not size.
● Separate your document into titled sections
● Think: Outlines from high school papers.
![Page 42: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/42.jpg)
Heading
The AvengersPlot
A team of superheroes…
CharactersThor
A demigod from Asguard…
Iron Man
![Page 43: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/43.jpg)
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.
![Page 44: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/44.jpg)
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
![Page 45: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/45.jpg)
<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.
![Page 46: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/46.jpg)
<p>“Just <em>do</em> it already!" </p>
![Page 47: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/47.jpg)
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
![Page 48: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/48.jpg)
<strong>
Warning! This is very dangerous."
Speak the text differently—with emphasis
![Page 49: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/49.jpg)
<strong>
<strong>"Warning!</strong> This is <strong>very dangerous."</strong>
![Page 50: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/50.jpg)
<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.
![Page 51: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/51.jpg)
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.
![Page 52: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/52.jpg)
Header
<header>Tag to separate your document into titled sections.
![Page 53: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/53.jpg)
Header
<header>
<h1>Maggie Smith</h1><h2>Web Designer</h2>
</header>
Maggie SmithWeb Designer
![Page 54: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/54.jpg)
Nesting
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
Tags often contain other tags.
![Page 55: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/55.jpg)
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
![Page 56: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/56.jpg)
Nav
Home About FAQ Contact
![Page 57: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/57.jpg)
Lists
You can make 2 kinds of lists.
Ordered lists
Unordered Lists
![Page 58: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/58.jpg)
Ordered List
<ol> <li>Avatar</li> <li>Titanic</li> <li>The Avengers</li></ol>
1. Avatar2. Titanic3. The Avengers
![Page 59: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/59.jpg)
Unordered Lists
<ul> <li>Avatar</li> <li>Titanic</li> <li>The Avengers</li></ul>
● Avatar● Titanic● The Avengers
![Page 60: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/60.jpg)
Let’s Develop it!Let's add some content to the site!
● header ● nav● heading● paragraph● em & strong● lists
![Page 61: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/61.jpg)
Meta Info
![Page 62: Girl develop It Orlando HTML Remix](https://reader030.fdocuments.in/reader030/viewer/2022020208/55bec18fbb61eb267b8b4722/html5/thumbnails/62.jpg)
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.