Intro to Web Development

Course Objectives

Introduce the fundamentals of HTML and CSS

Talking best practices and tools of the trade

Getting your hands dirty with CodePen

How to continue your coding journey

What was your first experience with code?

What is front-end web development?

Three pillars

HTML

CSS

JavaScript

HTML

Elements

Here are just a few ...

Header

Nav

Main

Footer

Figure

Each of these elements are made of a pair of tags

Nesting

The barebones

Doctype

HTML

Head

Body

index.html

Headers

Class vs. Id

Naming elements

What makes good code?

Write descriptive comments

Review

The three parts of web development are ...

Name some semantic elements. Why are they important?

What four things make up a website's basic structure

How should you name an element

Which one should you choose, class or id?

What is one way to write clean code?

CSS

style.css

What is the cascade?

Navigating a stylesheet

What makes a CSS rule?

Selector

Curly brackets

Declaration

Property and values

Semicolon

Colors

Spacing

Typography

Sans-serif

Serif

Monospaced

Positioning

Floats

Relative

Fixed

Absolute

Display

Block

Inline

Inline-block

Specificity

Keep things DRY

Seperating content and style

HTML deals with structure

CSS deals with the look and feel

Break

Review

HTML deals with ... and CSS deals with ...

What is the cascade?

Name the six parts of a CSS rule.

How does specificity work?

What's the difference between padding and margin?

The two common units of measurement are ...

Setting up a project

index.html and a style.css file

One folder - assets with subfolders css, js, img

Two folder - build/src or src/dist

Three folder - src/tmp/dist

Let's code!

CodePen

Starting with the basics

Write out the basic structure

Remember you need four things

Let's talk semantics

Use five semantic elements

Include a three photos

Include a single link

Make sure all your elements have content

Getting classy

Create five headers, add a random class to each

Add an id to a paragraph tag

Create five divs, add classes using BEM

Put an additional class on your first two headers

Circus-like CSS

The text color of the first five elements should be different

Change the background color for the sixth item

Add 20px padding to the sixth item

Change the font-size of the seventh item

The eigth and tenth items should have the exact same styles

The background of your last item should be #BADA55

Curiouser and curiouser

Nest three section elements inside a main element

Each section should have an h2

Put five paragraphs inside the first section element

Add a footer to the main element

Add comments to the ends of each of the sections

Full of hot air

Make 3 square divs, give them equal width and height

Green, red and blue backgrounds with white text

Add 20px padding to one div

Add 15px margin to another

Add 5px margin and 5px padding to the third

The right type

Make 3 headers of different sizes

Use a "web-safe" font for the first

Use a Google Font for the other two

Talking tools

Developer Panel

Sublime Text

Github

Next steps