html/css crash course (april 4 2017)
TRANSCRIPT
© 2017 Thinkful. All Rights Reserved. 2
About me
David Coulter
Frontend developer and product manager for 10 years at National Geographic, NGP Van, Arcadia Power
Mentor @ Thinkful
© 2017 Thinkful. All Rights Reserved. 3
About you
Why are you here? Do you want to work better with developers? Do you want to start working in tech? Do you have an idea that you want to build?
Programming experience? First lines of code will be written tonight? Been self teaching for 1-3 months? Been at this for 3+ months
© 2017 Thinkful. All Rights Reserved. 4
Goals
Learn core concepts of HTML/CSS to build websites
Complete drills to put those concepts into practice
Build your first website
Get comfortable with the feeling of learning programming, especially struggling with a concept
Take home challenges to keep going
© 2017 Thinkful. All Rights Reserved. 5
How the web works
Type a URL from a client (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
© 2017 Thinkful. All Rights Reserved. 6
Client / Server
ClientFrontend Developer
ServerBackend Developer
© 2017 Thinkful. All Rights Reserved. 7
Client / Server
Request
Response
Client - UI Logic Server - Business Logic
Database Servers
© 2017 Thinkful. All Rights Reserved. 8
Example: Facebook
HTML, CSS, & Javascript render
interactive newsfeed
Algorithm determines what’s in your feed
Request
Get data about your friends and their posts
Open browser and navigate to
facebook.com
Business Logic
Database Servers
Response
© 2017 Thinkful. All Rights Reserved. 9
How that relates to what we’re doing
When we write HTML & CSS today, we are creating those files that are stored on a server, sent through a series of tubes, and then rendered by your browser
© 2017 Thinkful. All Rights Reserved. 10
Setup
Normally, developers use a text editor to write code
Today, we’re using a tool called Codepen Codepen lets you write HTML/CSS and instantly see the results of your work Create an account: http://bit.ly/codepen-account On second page, skip all the profile information and just click the big green button at the bottom of the page Create a new “pen”
© 2017 Thinkful. All Rights Reserved. 11
Your first website
Copy this (don’t worry if you don’t yet understand):
<html> <body>
<h1>Hello world!</h1> </body>
</html>
© 2017 Thinkful. All Rights Reserved. 12
What is HTML?
HTML is the content and
structure of a webpage
© 2017 Thinkful. All Rights Reserved. 15
What is HTML?
HTML is the content and structure of a webpage
Three key concepts: Tags Elements Attributes
© 2017 Thinkful. All Rights Reserved. 16
HTML Tags
Every tag starts with a “less than” sign and ends with a “greater than” sign
<html> This is an HTML tag <body> This is a body tag
<h1>Hello world!</h1> This line has two H1 tags, one opening and one closing
</body> </html>
© 2017 Thinkful. All Rights Reserved. 17
HTML Tags
There are opening tags and closing tags. Closing tags have a backslash before the tag name.
HTML tags have become more semantic with HTML5 (or, the word signals the purpose of the tag). We’ll review some common tags shortly.
© 2017 Thinkful. All Rights Reserved. 18
HTML Elements
HTML elements usually consist of an opening tag, closing tag, and some content.
<html> <body> This element starts here and ends two lines below
<h1>Hello world!</h1> This is an HTML element </body>
</html>
Some consist of just a self-closing tag
<img src=“http://i.imgur.com/Th5404r.jpg">
© 2017 Thinkful. All Rights Reserved. 19
HTML Elements
A non-exhaustive list of HTML elements: <html> HTML tags wrap your entire page <head> Head tags <body> Body tags <h1> H1 tags signify the largest headline. H2 signifies subhead… through h6 <p> Paragraph tags wrap a paragraph of writing
© 2017 Thinkful. All Rights Reserved. 20
HTML Elements
<section> Section tags help you organize different sections of your layout <div> Div tags are generic/non-semantic container tags for anything that needs a container <a> Anchor tags are for setting some text to be a link <ul> <li> / <ol><li> Unordered list and ordered lists are for lists of items, containing list item elements <button> This is a button
© 2017 Thinkful. All Rights Reserved. 21
HTML Attributes
HTML attributes set properties on an element. They belong in the opening tag. Here are three common attributes:
<a href=“https://somewhere.com">This is a link</a> href is an attribute for setting the destination of a link <h1 class=“headline”>This is a headline</h1> class is an attribute that doesn’t show up in the rendered webpage, but will be important when we start talking about CSS <h1 id=“headline”>This is a headline</h1> id is an attribute that doesn’t show up in the rendered webpage, but will be important when we start talking about CSS
© 2017 Thinkful. All Rights Reserved. 22
About me website
bit.ly/codepen-about-me
Let’s walk through the starter code together
Drill: Add another paragraph about yourself
Drill: Add another section to the website similar to the “About me” section called “About my family” with a paragraph of lorem ipsum below it
© 2017 Thinkful. All Rights Reserved. 23
HTML Drills
Link here, link there: bit.ly/codepen-link
Images 101: bit.ly/codepen-images
Creating headers: bit.ly/codepen-headers
Add a header element inside of the body (but before the main content). Inside the header, add a title ("Lorem Ipsum") on one line, followed by a subtitle on the next ("Holding places since the 1st century BCE"). The subtitle text should be smaller than the title text.
Link here, link there solution: bit.ly/codepen-link-solution Images 101 solution: bit.ly/codepen-images-solution Creating headers: bit.ly/codepen-headers-solution
© 2017 Thinkful. All Rights Reserved. 24
HTML review
What is HTML?
Tags
Elements
Attributes
Googling HTML elements
© 2017 Thinkful. All Rights Reserved. 25
What is CSS?
Cascading Style Sheets determine the visual presentation of your HTML webpages
© 2017 Thinkful. All Rights Reserved. 26
What is CSS?
Key concepts:
Selectors Property Value
Two problems we solve with CSS:
Presentation of specific elements Layout
© 2017 Thinkful. All Rights Reserved. 28
CSS Selectors
CSS selectors determine which HTML elements are targeted for specific styles:
p This selects all paragraph tags .header This selects HTML elements with the class “header” #navigation This selects HTML elements with the ID navigation p.header This selects paragraph tags with the header class
Selectors can be combined.
© 2017 Thinkful. All Rights Reserved. 29
CSS Properties
CSS properties determine what about the appearance you’re setting:
color This determines the font color font-family This lets you set the typeface as well as backup typefaces background-image This lets you set a background image for an element height This lets you set the height of an element
© 2017 Thinkful. All Rights Reserved. 30
CSS Properties
Each property has a default value for a given element. When you write CSS, you over-ride that default value with a new value.
For a full list, see: http://www.htmldog.com/references/css/properties/
© 2017 Thinkful. All Rights Reserved. 31
CSS Values
Each property has a set of acceptable values that you can set:
color: red, blue, green, #CCCCCC These are all acceptable values for the color property font-family: helvetica, arial, sans-serif These are all acceptable values for the font-family property background-image: url("imageFile.jpg") This property looks for a URL value that points to a specific image file height: 40px 50% Height can be set as an explicit width or as a percentage of the containing box
Click on a property to see the acceptable values: http://www.htmldog.com/references/css/properties/
© 2017 Thinkful. All Rights Reserved. 32
CSS Example
h1 {
color: red;
font-size: 36px;
}
This is a declaration block, containing two declarations:
© 2017 Thinkful. All Rights Reserved. 33
CSS Target Practice
Classes drill: Add classes to the two divs to create a blue box and a red box, as described in the code comments and paragraphs in the codepen. You’ll need to use background-color, margin-bottom, and border.
bit.ly/codepen-classes
Selector drill: write one ruleset for sections that gives them a margin-bottom of 90px, and a second ruleset for header elements that sets font-family to Helvetica
bit.ly/codepen-selectors
© 2017 Thinkful. All Rights Reserved. 34
Linking CSS to HTML
We don’t have to deal with this thanks to Codepen
Normally you’d have one HTML file for each webpage (for example, home.html and profile.html), and a single CSS file for the whole website’s styles (styles.css)
To link your stylesheet to your HTML, you’d insert the following line into the <head> section of your HTML webpage:
<link rel="stylesheet" type="text/css" href="theme.css">
© 2017 Thinkful. All Rights Reserved. 35
CSS Layout
CSS layout determines how elements are arranged around each other. For example, Facebook wrote styles to make the nav bar stick to the top, have the pages and favorites section on the left and the news feed run down the center:
© 2017 Thinkful. All Rights Reserved. 36
CSS Layout
Key concepts: Display: inline vs display: block The box model Position property
© 2017 Thinkful. All Rights Reserved. 37
In-line vs block
Every element has a display property set to in-line or block.
A block-level element always starts on a new line and stretches to the full width available An inline element does not start on a new line and only takes up as much width as necessary
Every element has a default value, and that value can be over-ridden by setting an explicit value.
© 2017 Thinkful. All Rights Reserved. 38
In-line vs block
For a full list 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
© 2017 Thinkful. All Rights Reserved. 39
The box model & position property
Elements are boxes. We use the position property to organize these elements/boxes around each other. The position property has four values:
Static: normal flow. Block 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.
© 2017 Thinkful. All Rights Reserved. 40
Static positioning
Example: bit.ly/codepen-static
© 2017 Thinkful. All Rights Reserved. 41
Fixed positioning
Example: bit.ly/codepen-fixed
© 2017 Thinkful. All Rights Reserved. 42
Relative positioning
Example: bit.ly/codepen-relative
What happens if I change relative to static?
© 2017 Thinkful. All Rights Reserved. 43
Absolute positioning
Example: bit.ly/codepen-absolute
You’ll be tempted to use absolute positioning to jerry-rig a design. Don’t do this. Only use it when you’re working within a small div that’s not going to change a lot.
© 2017 Thinkful. All Rights Reserved. 44
Positioning exercise
Note: we likely will not have time for this tonight.
Build this layout:
© 2017 Thinkful. All Rights Reserved. 46
Positioning exercise: Reasoning about Layout
Images can be downloaded from here: bit.ly/catdog-images
Steps:
Break the page down into its components Pick one to start with (top to bottom, left to right) List the elements inside of a component Identify if a given element should be inline or block, and pick the most appropriate HTML element Code the first element (once again, top to bottom, left to right)
Trick: put a 1px red box around every element with “* {border: 1px solid red; }”. That will let you visualize the boxes of elements more effectively.
© 2017 Thinkful. All Rights Reserved. 47
Where to go from here
More practice… especially with layout
Forms and input
Responsive design
Developer tools
JavaScript for interactivity
© 2017 Thinkful. All Rights Reserved. 48
Learn to learn
Google is your friend
Practice at the edge of your abilities For HTML/CSS, that usually means picking a webpage and copying it Don’t know where to start? Start with Craigslist. Then do Reddit. Then do Twitter.
For HTML/CSS you don’t need tons of tutorials.
Ignore the hot new thing. Once you’ve started building something, see it through.
© 2017 Thinkful. All Rights Reserved. 49
Take-home challenges
Finish the positioning exercise
Build a resume with semantic HTML
Take this page and code your own version of it: https://thinkful-ed.github.io/gregs-list/
© 2017 Thinkful. All Rights Reserved. 50
More about Thinkful
Work 1-on-1 with a mentor (like me!) in a 6-month part-time program or 5-month full-time program
Learn Full stack web development and computer science fundamentals, and then work with a career coach during the job search phase
Go beyond the basics by building projects for your own portfolio
© 2017 Thinkful. All Rights Reserved. 51
You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all with 1-on-1 feedback from a mentor
More about Thinkful
© 2017 Thinkful. All Rights Reserved. 53
Special promo
Try the 6-month program for two weeks for $50
Learn HTML/CSS and JavaScript
Continue into web development bootcamp
Talk to me or Dan (or email either of us) to gain access