This document provides an introduction and overview of front end development using HTML and CSS. It discusses how browsers work by requesting files from servers to display websites. It explains the roles of front end developers and back end developers, and provides examples using Facebook. It then covers HTML structure and tags, and how CSS is used to style elements with selectors, properties, and values. Assignments are provided for students to start learning HTML and CSS, and options for continuing education are presented.
4. Type a URL from a client (e.g. google.com)
Browser sends an HTTP request asking for specific files
Browser receives those files and renders them as a website
How
the
Web
Works
5. Client
vs
Server
The client sends requests.
Frontend Developers
manage what users see.
The server sends responses.
Backend Developers
manage what the app does.
6. Example:
facebook
Client Server
Open browser
and navigate
to
facebook.com
HTML, CSS, &
JavaScript
render
newsfeed
Initial Request
Following Response
Algorithm
determines
content of
feed
Sends back
HTML, CSS,
JavaScript
files
Request
Response
7. Example:
facebook
Client Server
Open browser
and navigate
to
facebook.com
HTML, CSS, &
JavaScript
render
newsfeed
Initial Request
Following Response
Algorithm
determines
content of
feed
Sends back
HTML, CSS,
JavaScript
files
Request
Response
We’ll be writing these files
that the browser will render
21. ➔ Free trial of Full Stack Flex
online program
➔ Start with HTML, CSS and JavaScript
➔ Personal Program Manager
➔ Unlimited Q&A Sessions
➔ Student Slack Community
➔ bit.ly/freetrial-webdev
Thinkful
Two-Week
Free
Trial