Learn to Code HTML & CSS

Brought to you by Galvanize. Learn more about the way we teach code at galvanize.com.

Overview

The goal of this brief course is to provide you with a fun introduction to the world of web development, starting with HTML and CSS.

Here's what we'll be doing:

• Setting up our computers for web development
• Overview of basic HTML concepts
• Overview of CSS concepts
• Playing around in the sandbox

Before you begin, a quick gut check:

• This course is for absolute beginners
• Feel free to move ahead
• Help others when you can
• Be patient and nice
• You will get through it!

#Get Google Chrome

• Download at... Google

#Get the Atom text editor!

• Download https://atom.io/

#Sign up for Github!

• Open a new tab in your browser and go to GitHub.com
• Click the green signup button on the top of this page.
• Confirm your account by clicking the confirmation link in your email

Download the class files

• Go to https://github.com/GalvanizeOpenSource/Learn-To-Code-Week-1
• Click on the button on the right-hand side that says "Download ZIP"
• Go to your downloads folder and double click on the .zip file to unzip it
• IMPORTANT! leave all the individual files in the downloaded folder (if you would like to move it out of the downloads folder move the entire folder, not individual items)
• From atom file > open, select the folder and then click open
• From atom if the file tree does not appear on the left hand View > Toggle Tree View -- this will show you the entire folder within atom

Now if you already know some of what we're talking about you're all set to poke around in the files -- index.html and style.css are the two files we will be making changes to later.

What is git?

Git is a piece of software that allows you to edit and collaborate on projects regardless of your teams location. With Git, you and your team can all be working on the same codebase without having to worry about who's doing what in which order.

Overview of HTML

• tags
• elements
• attributes

####HTML tags: Tags are used to mark up the beginning and end of an HTML element.

<div></div>

####HTML elements: An element in HTML represents some kind of structure, generally and element consists of a start tag, content, and an end tag.

<p>This is an element, it consists of p tags and content.</p>

####HTML attributes: HTML attributes generally appear as name-value pairs. The most common attributes are

• id "id is used on only a single element"
• class "class can be used on multiple elements"
• src "provides the location of an asset that element needs"
• href "specifies a link destination"

Overview of CSS

• Specificity
• id's vs Classes
• syntax

####Specificity What Does CSS Stand for?

####id's vs Classes Classes are used when you need to style multiple elements in a document, while id's are used to style specific elements on a page.

####Syntax Lets look at how to style an element!

<p class="coolThings">Cool Things</p>

Now lets look at the css!

.coolThings {
  font-size: 24px;
}

##Change the Font to something from Google Fonts

• Navigate to google fonts: https://www.google.com/fonts
• Find a font you like and click "add to collection".
• On the bottom right side of your screen click "use".
• On the use page, scroll down to number three and copy the link tag provided.
• Paste that link tag in your index.html file with the new link tag you copied from google fonts.
• Copy the code under number four.
• Paste that code into your stylesheet!

##The User wants some changes

• Change the name of the site
• Change all the navigation links & Section Headers
• Replace my images with your own images

##Make some changes

#Question Time!