The document outlines an agenda for a frontend crash course on HTML and CSS taught by TJ Stalcup at Thinkful. The agenda includes introducing the instructor and Thinkful, discussing learning strategies, covering key HTML and CSS concepts, reviewing assignments, doing challenges with support, and discussing next steps for continued learning. The course aims to teach students the basics of how the web works, HTML structure and tags, CSS selectors, properties and values, and assignments include practicing these skills.
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Frontend Crash Course
1. Frontend Crash CourseFrontend Crash Course
2018
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-coursehttp://bit.ly/frontend-course
1
2. Instructor
TJ Stalcup
Lead DC Mentor @Thinkful
API Evangelist @540
Pokemon Master
Wi : MakeOf ces 5Ghz
Password: Internet!23
TAs
http://bit.ly/frontend-course
2
3. About you
What's your name?
What brought you here today?
What is your programming experience?
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
3
4. About Thinkful
Thinkful helps people become developers or data scientists
through 1-on-1 mentorship and project-based learning
These workshops are built using this approach.
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
4
5. Suggestions for learning
Don't get discouraged, struggle leads to mastery
Don't be shy, take full advantage of our support
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
5
6. Agenda
Learn key HTML and CSS concepts (30 min)
Go over the assignments (10 min)
Complete challenges with support (30 min)
Steps to continue learning (10 min)
http://bit.ly/html-crash-course
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
6
7. How the web works
Type a URL from a client (e.g. google.com)
Browser sends an HTTP request asking for speci c les
Browser receives those les and renders them as a website
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
7
8. Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
8
9. Example: facebook.com
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
Javascript render
newsfeed
Request
Response
Algorithm
determines
content of feed.
Sends back
HTML, CSS,
Javascript les
Application Logic
Initial request
Following response
http://bit.ly/html-crash-course 9
http://bit.ly/frontend-course
Wi : MakeOf ces 5Ghz
Password: Internet!23
10. How this relates to today
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
Javascript render
newsfeed
Request
Response
Algorithm
determines
content of feed.
Sends back
HTML, CSS,
Javascript les
Application LogicInitial request
Following response
We'll be writing
these les that the
brower will render
http://bit.ly/html-crash-course
10
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
11. HTML - (HyperText Markup Language)
<h1 class="intro">Hi there!</h1>
Attribute
Opening
section tag
h1
element
Closing
section tag
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
11
12. HTML - structure
<html>
<body>
<h1 class="title">Hello world!</h1
</body>
</html>
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
12
13. HTML tags, elements, attributes
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
13
14. HTML, by itself, is boring
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
14
15. Assignments for tonight
Go to: http://bit.ly/tf-html-classroom
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
15
16. CSS - (Cascading Style Sheets)
h1 {
color: blue;
}
Value
Property
Selector
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
16
17. CSS selectors, properties, values
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
17
18. CSS has lots of properties and values
p {
color: #CCCCCC;
font-family: helvetica;
border: 5px solid blue;
}
div {
background-image: url("imageFile.jpg");
width: 50%;
height: 70%;
}
.loginButton {
border: none;
background-color: rgba(34, 124, 45, 0.5);
}
Lots of properties:
http://www.htmldog.com/references/css/properties/
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
18
19. Margin, border, and padding
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
19
20. Margin, border, and padding
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
20
21. Real developers use Google... a lot
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
21
22. Assignments for tonight
Go to: http://bit.ly/tf-html-classroom
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
22
