Learn-To-Code-Week-1

Overview

Our goal this week is to setup our developer environment and link it to our github account for maximum developer points. We'll also download the Atom text editor and do a little bit of coding.

Here's what we'll be doing:

Overview of basic HTML concepts

Overview of CSS concepts

Signing up for github and learning about git

Forking and cloning our first project

Editing HTML/CSS and pushing code back up to Github.

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 elemnets 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;
}

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.

Topic: talk about the cookie receipie metaphor

#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

#Lets Fork and Clone our first project on Github!

• Click the fork button on the top right of this page!
• Click "Clone in Desktop"
• Follow Prompts to install the GitHub App

#Get the Atom text editor!

• Download https://atom.io/

##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
• Push changes to github

##Make some changes

##Commit and Push to Github

#Question Time!