(e.g. google.com) Browser communicates with DNS server to find IP address Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website
determines what’s in your feed Request Get data about your friends’s and their posts Open browser and navigate to facebook.com Business Logic Database Servers Response
and ends with a “greater than” sign <html> #this is an HTML opening tag <body> #this is a body opening tag <h1>Hello world!</h1> #this is set of H1 tags </body> #this is a body closing tag </html> #this is an HTML closing tag
tags — closing tags have a backslash before the tag name (</html> versus <html>) • Tags instruct a browser about the structure of our website • There are hundreds of built-in tags though you’ll use the same few a lot
your entire page • <head> #head tags holds info about the page • <body> #body tags wrap around your content • <h1> #signifies the largest headline (through h6) • <p> #wraps a paragraph of writing • <div> #div tags are generic container tags • <a> #anchor tags for text to be a link • <ul><li> #unordered list of items • <button> #this is a button
closing tag, and some content <html> #html element starts here <body> #body element starts here <h1>Hello world!</h1> #this is an HTML element </body> #body element ends here </html> #html element ends here
sections of our site. This will allow for sophisticated styling. It’s a good habit to “wrap” most sections into a <div> <div> <h1>Hello world!</h1> </div>
the are attached in the opening tag <a href=“https://somewhere.com">This is a link</a> href is an attribute that sets the destination of a link <h1 class=“headline”>This is a headline</h1> class is one attribute that identifies element (for CSS & Javascript) <h1 id=“headline”>This is a headline</h1> id is another attribute that identifies element (for CSS & Javascript)
and lets walk through it together • Drill — Add another section of your choosing • Drill — Add a title and a paragraph in that section • Drill — Try and add an image underneath “About Me”
change • color (set the font color) • font-family (sets main typeface and backup typefaces) • background-image (sets background image) • height (sets the height of an element)
value — when you write CSS, you override that default with a new value • There are lots of CSS properties! For a full list see http://www.htmldog.com/references/css/properties/
wish to change • color: red, blue, green, #CCCCCC acceptable values for the color property • font-family: helvetica, arial, sans-serif acceptable values for the font-family property • background-image: url(“imageFile.jpg") looks for a URL value for image file • height: 40px, 50% set in pixels or percentage of container height
text editor) • Create a new folder (“First Website”) • Create a new HTML file in First Website folder (index.html) • Copy & paste your Codepen HTML into this file • Create a new css file in First Website folder (index.css) • Copy & paste your Codepen CSS into this file • Add link to your CSS in your HTML <head> section • Save both files • Double-click & open your index.html file
of inline elements, see: https://developer.mozilla.org/ en-US/docs/Web/HTML/Inline_elements • For a full list of block-level elements, see: https:// developer.mozilla.org/en-US/docs/Web/HTML/Block- level_elements
stack on top of each other. Inline elements are as large as the content they contain. • Fixed: outside of normal flow. Stays in same place no matter what. • Relative: normal flow. Unlike static, can use left, right, top, bottom properties to move the elements around relative to where they’d otherwise sit. • Absolute: outside of normal flow. Stays in a specific spot on a page.
sessions • Covers HTML/CSS, Javascript, jQuery, Responsive Design • Option to continue into web development bootcamp • Prep course costs $500 (can apply to cost of full bootcamp) • Talk to me (or email me) about special offer
thinkful
daikikanemitsu
hirutas
ham0215
shinrinakamura
daitak
8maki
macloud
akkie76
sansantech
maimyyym
osyoyu
phaya72
chrislema
keithpitt
jonyablonski
eileencodes
cassininazir
trallard
yeseniaperezcruz
addyosmani
chriscoyier
matthewcrist
nonsquared
frogandcode
![October 2015 Questions? email me at [email protected] or schedule a](https://files.speakerdeck.com/presentations/de657e83a2384ca3bfbb357fa3eeaa05/slide_53.jpg){kind=link}