Frontend Crash Course: HTML and CSS

Frontend Crash Course: HTML & CSS

Wifi network: CrossCamp.us Events

http://bit.ly/html-css-la

© 2017 Thinkful. All Rights Reserved. 2

About us

We train developers and data scientists through 1-on-1 mentorship and career prep


About me

Noel Duarte

Los Angeles Area General Manager

UC Berkeley ’15 — worked primarily with R for population genetics analysis, at Thinkful since January 2016


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


Goals

Understand core concepts of using HTML/CSS to build websites

Complete drills to put those concepts into practice

Build your first website

Learn to learn programming, especially the feeling of struggling with a concept

Take home challenges to keep going


Not goals

Exhaustive coverage of HTML elements / CSS selectors

JavaScript programming for interactivity

Using developer tools


What is Programming?

Programming is writing instructions for a computer to execute



Programming is problem-solving



Programming is a process:

1. Defining problems

2. Finding solutions to those problems

3. Implementing those solutions in a language your computer can understand


Why learn frontend development

Job opportunities

Everyone needs a website. You can build them

Good starting place to see if coding is for you

Medium of expression

http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek


How the web works

You type a URL: facebook.com (your computer is the client)

The browser communicates with the DNS server to find the IP address

The browser sends an HTTP ( Hypertext Transfer Protocol) to the server (which it finds using that IP address) asking for specific files

The browser receives those files and renders them as a website

http://facebook.com


Client / Server

Front-end developer Back-end developer

Client Server


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


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: https://codepen.io/accounts/signup On second page, fill out your info you want to save your work Create a new “pen”

https://codepen.io/accounts/signup


Your first website

Copy this (don’t worry if you don’t yet understand):

<html> <body>

<h1>Hello world!</h1> </body>

</html>


What is HTML?

HTML is the content and

structure of a webpage


What is HTML?


What is HTML?

HTML is the content and structure of a webpage

Three key concepts: Tags Elements Attributes


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>


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.


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">


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


HTML Elements

<p> Paragraph tags wrap a paragraph of writing <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


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


About me website

http://codepen.io/danfriedman9/pen/pEOWZA

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

http://codepen.io/danfriedman9/pen/pEOWZA


HTML Drills

Link here, link there: http://codepen.io/team/thinkful/pen/qNOGmP

Images 101: http://codepen.io/team/thinkful/pen/gMaJvq

Creating headers: http://codepen.io/team/thinkful/pen/JKGPdW

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: http://codepen.io/team/thinkful/pen/aZNGdP Images 101 solution :http://codepen.io/team/thinkful/pen/OXNZXR Creating headers: http://codepen.io/team/thinkful/pen/KMzRzy

http://codepen.io/team/thinkful/pen/qNOGmP

http://codepen.io/team/thinkful/pen/gMaJvq

http://codepen.io/team/thinkful/pen/JKGPdW

http://codepen.io/team/thinkful/pen/aZNGdP

http://codepen.io/team/thinkful/pen/OXNZXR

http://codepen.io/team/thinkful/pen/KMzRzy


HTML review

What is HTML?

Tags

Elements

Attributes

Googling HTML elements


What is CSS?

Cascading Style Sheets determine the visual presentation of your HTML webpages


What is CSS?

Key concepts:

Selectors Property Value Declaration / Declaration block

Two problems we solve with CSS:

Presentation of specific elements Layout


CSS Example

h1 {

color: red;

font-size: 36px;

}


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.


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


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/

http://www.htmldog.com/references/css/properties/


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/

http://www.htmldog.com/references/css/properties/


CSS Example

h1 {

color: red;

font-size: 36px;

}

This is a declaration block, containing two declarations:


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.

http://codepen.io/team/thinkful/pen/jrWKKO

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

http://codepen.io/team/thinkful/pen/ZOLmyN

http://codepen.io/team/thinkful/pen/jrWKKO

http://codepen.io/team/thinkful/pen/ZOLmyN


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">


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 in the center:


CSS Layout

Key concepts: Display: inline vs display: block The box model Position property


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.


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

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements


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.


Static positioning

Example: http://codepen.io/team/thinkful/pen/WxGLrr

http://codepen.io/team/thinkful/pen/WxGLrr


Fixed positioning

Example: http://codepen.io/team/thinkful/pen/OXRrbJ

http://codepen.io/team/thinkful/pen/OXRrbJ


Relative positioning

Example: http://codepen.io/team/thinkful/pen/MejZQE

What happens if I change relative to static?

http://codepen.io/team/thinkful/pen/MejZQE


Absolute positioning

Example: http://codepen.io/team/thinkful/pen/vKXPrr

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.

http://codepen.io/team/thinkful/pen/vKXPrr


About You Page!

Using what we’ve learned today, let’s set up a simple about me page that includes:

Headline with your name

Small paragraph about you

Image of yourself, or something that you like

Then, we’ll style it using some of the tools we learned. Some ideas are:

Unique font-family, size, color

Positioning of elements, particularly the photo


Topics we’re not covering / Where to go from here

More practice… especially with layout

Forms and input

Responsive design

Developer tools

JavaScript for interactivity


Take-home challenges

Expand on your About Me page

Build a resume with semantic HTML

Finish the positioning exercise at end of page


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.


More about Thinkful

You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor


Mentors have, on average, 10+ years of experience

Our mentors


Job Titles after GraduationMonths until Employed

Our results


Try the program for two weeks, includes six mentor sessions - $50

Learn HTML/CSS/JavaScript

Option to continue onto web development bootcamp

Come talk to me if you’re interested (or email me at [email protected])

Try us out!

mailto:[email protected]


How did everyone find out about tonight’s event?

Meetup, Eventbrite, Facebook, etc.

Would you have traveled to Santa Monica for tonight’s workshop? 🚗 🚙 🚕

Quick poll

Thank you! Email me with questions or suggestions:

[email protected]

April 2017

mailto:[email protected]


Positioning exercise

Note: we likely will not have time for this tonight.

Build this layout:


Positioning exercise


Positioning exercise: Reasoning about Layout

Images can be downloaded from here: https://github.com/Thinkful-Ed/css_layout_exercises/tree/solutions/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.

https://github.com/Thinkful-Ed/css_layout_exercises/tree/solutions/images

Frontend Crash Course: HTML and CSS

Education

Transcript of Frontend Crash Course: HTML and CSS