General Assembly Front End Developers course. Week 1

1. WILL MYERS
Freelance Front End Developer
SLIDES
http://www.slideshare.net/wilkom/fewd-week1-slides

2. ATOM
Atom is a new-ish editor for building websites and web
applications. It has a great online community and lots of
useful free packages.
For Mac OSX 10.8 and above. For Windows 8 and above.
https://atom.io/

3. ATOM PLUGINS
open Atom
go to Preferences (Atom > Preferences), this will launch a
Settings tab.
select Install from the Settings left-hand nav
search for atom-beautify and install this
do the same for open-in-browser, white-cursor and
highlight-line
restart Atom

4. FEWD - GITHUB BASICS

5. WHAT IS GIT
Git is software that you use to backup your files and track
changes when writing code.
It is distributed software, which means it works on multiple
computers, communicating with each other.
This type of software is called SCM (Software Configuration
Management/Source Control Management). It is also called
Version Control.

6. HOW DOES GIT WORK
git (the program) takes a 'snapshot' of your files at a given
moment in time and stores a reference to this 'snapshot'

7. SOME OTHER GIT TERMINOLOGY
repository - a central location (folder) in which data -
typically about a project - is stored and managed
clone - download data from the cloud to your local
machine (laptop, computer, etc.)
commit - save a version of your project to git

8. WHAT IS GITHUB
GitHub is a web application (and desktop application) that
provides a GUI (graphical user interface) to use Git.
You use GitHub to make it easier to perform Git tasks on
your files - saving, tracking, merging, cloning (copying) etc.
GitHub is the market leader for Git applications. It is now
commonplace for any company that employs developers.

9. GITHUB MAIN FEATURES
Makes it easy to manage git repositories
Stores files (similar to Dropbox or Google Drive), but
stores code files
Stores a history of files and the changes that happened to
each file
Hosts files on the cloud so you can share the finished
product with other people

10. WHY IS GITHUB VALUABLE
Since GitHub stores a history of the code, it allows
developers to go back in time if something breaks.
GitHub allows multiple developers to work on the same
project (like Dropbox or GDocs, for code)
GitHub tracks changes so you can see who worked on
what.
GitHub allows for feedback to be given on the code, which
hopefully, increases code quality. Much like an editor
updates a Word document using Track Changes, GitHub
allows a similar environment.

11. HOW WILL WE USE GITHUB?
Throughout this class, you will use GitHub as a tool to
submit assignments and download files; GitHub will also be
used to assess and review your homework and provide
feedback.

12. LET'S START USING GITHUB AND GIT
GitHub Video Explanation
Download the zip file from this URL and extract the files:
http://bit.ly/1jCVe9d
Mac: Just double-click on the zip to extract it
Win: Right-click on the zip file and choose 'Extract here'
Open the Getting_Started_With_GitHub.pdf in the intro-to-git
folder, in the extracted zip.

13. WHERE SHALL WE PUT OUR FILES?
Let's start by making a new folder called 'FEWD' in the user
home directory.
Mac: /Users/<username>
Win: C:Users<username>
This is where we will put everything related to the FEWD
course. For the rest of the course I'll refer to this folder as
'[home]/FEWD'.
N.B If you can't find your user home directory then just
create the 'FEWD' folder on your Desktop.

14. CREATE A GITHUB REPOSITORY
For our first repository you will do the following, using the
GitHub desktop app:
Use the '+' button in the top-left of the app (Create tab)
Create a new repository called 'HelloWorld'.
Choose the [home]/FEWD folder for the local path
Open the hello_world folder in the downloaded intro-to-
git folder and copy the two files into your new HelloWorld
repository folder
Commit the changes and publish the repository to
github.com

15. CLONE A GITHUB REPOSITORY
Now clone (make a local copy) of a repository on GitHub.
Go to this URL on GitHub in your Chrome browser:
Click on the button with an arrow on a screen (located to
the left of DOWNLOAD ZIP button)
Allow the browser to launch GitHub Desktop
Navigate to [home]/FEWD folder in the pop-up and save
the ga-fewd-files cloned repo
Now open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOR
EACH WEEKLY LESSON. DO NOT WORK IN THIS REPO.
https://github.com/wmyers/ga-fewd-files

16. YOUR WEEKLY FEWD GITHUB
REPOSITORY
Use the '+' button in the top-left of GitHub Desktop
(Create tab)
Create a new repository called 'FEWD_Week1'
Choose the [home]/FEWD folder for the local path
Open this repo folder in your editor
Commit the changes and publish the FEWD_Week1
repository to github.com
THIS IS WHERE YOU WILL PUT THE FILES THAT YOU
WORK ON EACH WEEK.

17. YOUR WEEKLY FEWD GITHUB
REPOSITORY
Remember that you will do all your classwork and
homework in your weekly GitHub repository.
You create a new repository each week named in a
consistent way.
e.g. FEWD_Week1, FEWD_Week2, etc.

18. YOUR WEEKLY FEWD GITHUB
REPOSITORY
Each week you will be given a homework assignment. When
you have completed the assignment, you will commit the
files and folders to the weekly created repository:
You need to notify me when your homework is committed
so that I can add comments to your code and grade your
work each week.

19. YOUR WEEKLY FEWD GITHUB
REPOSITORY
When you are ready for me to review your assignments, do
the following:
Go to your weekly repo on github.com: e.g.
Open a new issue under the Issues Tab:
In the title field write (e.g): FEWD_Week1 Assignment
In the comment field write: @wmyers assignment
committed
Now submit the issue
https://github.com/[your-github-id]/FEWD_Week1
https://github.com/[your-github-id]/FEWD_Week1/issues

20. YOUR WEEKLY FEWD GITHUB
REPOSITORY
I will submit feedback each week in two ways:
Comment on your code for each commit that you do for
the assignment, in your weekly repo
Grade your work and put the result in a new issue on your
weekly repo.

21. FEWD - HTML BASICS

22. AGENDA
HTML Tags & CSS Selectors Review
Structure Reading w/ Understanding
External Style Sheets
Lab Time

23. HTML TAGS & CSS SELECTORS

24. HTML BASICS

25. HTML SYNTAX
creates structured documents from page 'parts'
is written in the form of HTML elements consisting of tags
elements either have opening and closing tags: <p></p>
or are 'empty', they have no closing tag: <img>

26. HTML SYNTAX
HTML tags can also have attributes which are properties
written inside the first (opening) tag:
<img src="smiley.gif">

27. MAIN TAGS
<html></html>
The root container tag for the whole document (web page)
<head></head>
The container tag for metadata and links to external files
(e.g .css files)
<body></body>
Contains the visible structure and content of the web page,
nested inside

28. CONTENT TAGS
Heading Elements
<h1>Largest Heading</h1>
<h2>. . . </h2>
<h3>. . . </h3>
<h4>. . .</h4>
<h5>. . . </h5>
<h6>Smallest Heading</h6>

29. CONTENT TAGS
Text Elements
<p>This is a paragraph</p>
<code>This is some computer code</code>
<span>Non-semantic inline content</span>

30. CONTENT TAGS
Unordered list
<ul></ul>
This is a very commonly used tag for things like navigation
menus, or a displayed choice of items on an e-commerce
web page.

31. CONTENT TAGS
Unordered list item
<li>First item</li>
<li>Next item</li>

32. CONTENT TAGS
Links
<a href="Link">First item</a>
To navigate to:
a different place on the current page
another local page
an external page in a different website

33. HTML VS HTML5
HTML5 is HTML with a few additions The Doctype tells you if
the page is HTML5 ready.
<!DOCTYPE html>
HTML HISTORY

34. HTML5
brings many improvements and new features to web
pages
many features of HTML5 have been built to run on low-
powered devices such as smartphones and tablets
introduces the new <video>, <audio>and <canvas>
tags
introduces many new structural document tags, e.g.
<main>, <section>, <article>, <header>,
<footer>, <aside>, <nav>and <figure>- these
are like <div>but with a semantic styleable name.

35. GENERAL ASSEMBLY PRESS
RELEASE
Copy the ga_press_release folder in the week1_working_files
folder (inside ga-fewd-files) into your FEWD_Week1 folder
(inside [home]/FEWD).
Commit and publish the files in GitHub Desktop.

36. MARKING UP CONTENT
We will add HTML tags to the different parts of content in
index.htmlin the ga_press_release folder.
This will show how are tags are used semantically for
different parts of text, to create a document structure.

37. NOW FOR SOME STYLING!
Now that we have structured our HTML document for the
press release, we want to add some CSS styles to make it
look a bit better.
First we need to understand some CSS basics.

38. CSS
There is a little bit of CSS in the your HelloWorld repository

39. CSS
is a styling (stylesheet) language used for describing the
presentation of an HTML document
it separates document content from document
presentation, including control of layout, colors, and
fonts
it makes the page much easier to edit and update, and
improves accessibility
multiple HTML pages can share the same formatting by
writing the CSS in a separate .css file and linking to it from
your HTML page

40. CSS SYNTAX

41. CSS
Where does CSS go?
Inline with the styleattribute
<h1 style="color: red;">Hello World</h1>
In the <head>
<head>
<style> </style>
</head>
h1 {color: red;}
In a separate file (best option)
<head>
<link rel="stylesheet" type="text/css" href="path/to/some.css">
</head>

42. CSS
Using a separate CSS file
It is best practice to put CSS in its own file and link to it from
the <head>.
<link rel="stylesheet" href="style.css">

43. CSS BREAK DOWN
p {
color: red;
font-weight: bold;
}
This whole thing is called a rule.
The pis called a selector, and it's followed by a set of
declarations in a declaration block.

44. CSS BREAK DOWN
The selector (pin this case) specifies what parts of the HTML
document should be styled by the declaration. This selector
will style all pelements on the page.

45. CSS BREAK DOWN
The declaration block here is:
{
color: red;
font-weight: bold;
}
Declarations go inside curly braces.

46. CSS BREAK DOWN
DECLARATIONS
This example has two declarations. Here's the first:
color: red;

47. CSS BREAK DOWN
Let's look at the second declaration:
font-weight: bold;

48. CSS BREAK DOWN
Why might we want to link to a separate CSS file?

49. SEPARATION OF CONCERNS
HTML - Document Structure
CSS - Looks, Style
JavaScript - Logic, functionality, behavior
It is historically seen as wrong to mix these things up.
Putting things where they belong reduces complexity and
increases maintainability. However some new JS
frameworks are challenging this way of thinking.

50. CASCADING STYLE SHEETS (CSS)
COLORS
Colors can be specified in CSS in a variety of ways:

51. COLOR
COLOR KEYWORDS
These are used less frequently, but are handy for basic
colors like blackand white. There are several
See for morehere

52. COLOR
HEX CODES (RGB)

53. COLOR
RGB COLOR VALUES
RGB(0,0,0)
The first value is red, the second green, the third blue.
Each value can range from 0 to 255, which expresses the
same number of color steps as 00 to FF in base-16.

54. COLOR
RGBA COLORS
RGBa works identically to RGB, expect that it takes a 4th
value called the "alpha".
This is a value between 0 and 1 which will be used to
determine a color's opacity on the page,

55. COLOR
HSL COLORS
HSL
Similar notation to RGB values, but specify colors using
hue, saturation, and lightness.
HSLA
As with RGBa, HSLa is exactly like HSL for the first 3
values, but takes a 4th alpha-channel value.

56. CSS SELECTORS
Element Selector
If you want to directly style all tags (elements) of a certain
type (e.g all <p>tags) they you style p
p {color: red;}
<p>Now my text is red</p>

57. CSS SELECTORS
Class Selector
If you want to apply styles to groups of elements then use '.'
(dot) selectors. These select any element with a
corresponding 'class' attribute.
.some-class {color: blue }
<p class="some-class">Now my text is blue</p>

58. CSS SELECTORS
Id Selector
If you want to apply styles to one unique element then use
'#' (hash) selectors. This selects one element with a unique
'id' attribute
#some-id {color: green }
<p id="some-id">Now my text is green</p>

59. STYLING CONTENT
Now let's try and add some basic styles to the
ga_press_release.

60. COOKIE RECIPE
Copy the cookie_recipe folder in the week1_working_files
folder into your FEWD_Week1 folder.
Commit and publish the files in GitHub Desktop.

61. COOKIE RECIPE
Now following the instructions in the index.htmlpage,
structure the recipe HTML and apply some CSS styles - using
an external stylesheet.
Extra points if you can get the image in the page with the
style as described in the instructions.
Feel free to use Google to find out about any styles and tags
that we haven't discussed yet. We will take a more in-depth
look at the <img>tag after this exercise.

62. MORE HTML AND CSS

63. AGENDA
Building A Simple Web Page
Images
Nav
Colors
Fonts
Linking To Other Pages
Lab Time

64. EXERCISE - WHAT TAG IS IT?
Using Google (or your favourite search engine), find out
more about the following tags:
<img>
<nav>
<hr>
You may have already used an <img>tag in the
cookie_recipe. Try using and styling all three in your
cookie_recipe page.
The MDN (Mozilla Developer Network) online docs are
recommended over other online resources.

65. MORE CONTENT TAGS
<div></div>
This is a generic container tag, used when no specific
semantic tag is applicable. It is a rectangular element which
can be styled with margins, padding, borders, background-
colors, width, height etc. Like many other elements it has
block-level display which means it starts on a new line of the
page.
<div>s are often nested in other <div>s
<div class="parent">
<div class="child">Some child content</div>
</div>

66. MORE ON IMAGES
Images are placed using the <img>tag.
<img src="img/imageName.jpg" alt="no-image text" title="hover text">

67. IMAGES
The imgtag requires a srcattribute, which tells the
browser where to find the image.

68. IMAGES
How would you write the src?
There are different approaches to specifying an image
location

69. IMAGES
Inside webroot, a relative path could be used:
<img src="images/logo.png">

70. IMAGES - RELATIVE PATH
Given this folder structure the same image would be
<img src="../images/logo.png">
../means to go up a directory, and can be used
repeatedly: ../../would go up two directories.

71. IMAGES - RELATIVE PATH
<img src="/images/logo.png">
Absolute URLs start with a /, which implies the root
directory of your web site.

72. IMAGES - FULL URL
<img src="https://ga-core.s3.amazonaws.com/production/uploads/program/def
For linking to images, make sure that you have permission
to use the image in this way. Even then, it is often better to
host a copy of the same image, rather than link to another
server, because it reduces dependency.

73. IMAGES
alt and title attribute
<img src="puppy.jpg" alt="My cute puppy" title="My cute puppy">
alt - piece of text to be used in lieu of the image when the
image is unavailable
title - text that appears when your mouse hovers over the
image
Using altattributes has the added benefit of giving search
engines more linguistic context about the image as it is used
on your page.

74. IMAGE FILE FORMATS
There are three main image file formats:

75. IMAGE FILE FORMATS
.PNG
Supports transparency and semi-transparency, great for
logos, icons, and repeating background tiles.
Almost always preferable to a gif, unless semi-
transparency is not needed, and the gifformat is
significantly smaller.
Required for retina display on mobile browsers and apps.

76. IMAGE FILE FORMATS
.GIF
Can have basic transparency, typically a pngis used
instead.
Can be used for simple animations
Find an animated gif online, download it and add it one of
the webpages you have been working on today.

77. IMAGE FILE FORMATS
.JPEG
No transparency, can be stored at different compression
levels with varying amounts of "lossy-ness".
This is typically the best format for photos. (Try to balance
between photo quality and file size.)

78. ANCHOR TAGS
Like the srcattribute in <img>tags, the hrefattribute in
<a>tags denote a path to a location.
These paths can be relative, absolute or a full URL.

79. ANCHOR TAGS IN THE SAME PAGE
You can use anchor links to jump to other parts of your page
- for example the bottom of the page.
First define the link in the href- note the # (hash)
<a href="#bottom">Jump to bottom</a>
To create the place to jump to, either use another <a>tag
with a nameattribute
<p><a name="bottom"></a>Welcome to the bottom of the page</p>
Or just target the id of a tag
<p id="bottom">Welcome to the bottom of the page</p>

80. BUILDING WEBSITES
Copy the assignment folder in the week1_working_files
folder into your FEWD_Week1 repository folder. Commit and
publish the files in GitHub Desktop.
Now go to the assignment folder in your repo in github.com
and you will see the README.md (markdown) file rendered
to be readable.

81. ABOUT ME
Let's build the 'About Me' page together. Take a look at the
about_me_deliverable.png in the
assignment/solution/images folder. We want to build
something with this structure, and then add some styling
like we have done before.

82. ABOUT ME

83. MARGINS, PADDING AND BORDERS
(BOX MODEL)
The CSS Box Model is essentially a series of nested boxes
that wrap around an HTML element. The hierarchy of these
boxes is: margins, borders, padding, and then content.
margin: sets the outer transparent rectangular border of
an element
border: sets the visible rectangular border style of the
element
padding: sets the inner transparent rectangular border
of an element (is colored by a background-color)

84. MARGINS AND PADDING
The values for marginand borderdeclarations can be set
with shorthand:
margin: top right bottom left; (clockwise)
margin: top-and-bottom left-and-right;
Each side can also be set individually with a specific
declaration:
padding-left: 10px;
padding-top: 20px;
etc

85. BORDERS
Borders have their own style declarations:
border-width(number px)
border-style(string - e.g. solid, dotted, dashed)
border-color(string or hex value)
The common shorthand syntax to set a border is:
width style color
border: 4px solid red;

86. ALIGNING AND FLOATING IMAGES
You can align images with the text-alignproperty
applied to the container of the image.
{
text-align: left;
text-align: center;
text-align: right;
}
Aligned images do not wrap text around them. Aligning
images will only position the image left, right, or center with
any text following before and after the image. Aligning
leaves white space on your web page.

87. ALIGNING AND FLOATING IMAGES
You can float images to one side with the floatproperty
applied to the image.
{
float: left;
float: right;
}
The float property specifies that an element should be taken
out from the normal flow of the page and placed along the
left or right side of its container, where text, inline elements,
and following elements will wrap around it.

88. CSS CASCADE, INHERITANCE &
SPECIFICITY
Cascade, Inheritance and Specificity are three inter-related
terms in CSS that relate to how the browser will apply a
particular CSS rule to a given HTML element.

89. CSS CASCADE
A cascade is "a flow of water over a series of steps".
The cascade (in Cascading Style Sheets) is formed by three
main sources of style information.
the browser (user-agent) default styles for HTML
the styles specified by an end user
the styles linked to the document by its author (i.e. you
the developer)

90. CSS CASCADE AND SPECIFICITY
The cascading of these three sources of styling is an
algorithm that decides which style to apply to an element
when multiple styling rules are available.
The specificity of a style is a 'score' calculated by the
cascading algorithm to determine which style is the most
important.
https://developer.mozilla.org/en-
US/docs/Web/CSS/Cascade

91. CSS INHERITANCE
Inheritance is where a child element inherits a style
declaration from a parent container. It could be an
immediate parent container, or an ancestor container
further up the DOM tree.
body { color: red;}
p { background-color: yellow;}
<p>will inherit the red text color from <body>unless it
defines a more specific color declaration in its own style rule.

92. CSS FONTS
In our web pages we default to system fonts like Times, Arial
and Helvetica.
To embed a nicer font that any end user would see, use the
the CSS3 font embedding syntax.
Define your @font-facelinks at the top of your CSS file.
@font-face { font-family: MyFont; src: url('path/to/MyFont.ttf'); }
Now set the value of the font-familydeclaration in a
given rule to use your embedded font:
p {font-family: MyFont;}
http://www.dafont.com/

93. METADATA IN THE HEAD
Metadata is data about data. So the <meta>tags defined in
the head provide additional data about the data in the
HTML document. This data will not be displayed but will be
read by search engine spiders.

94. METADATA IN THE HEAD
Define keywords for search engines
<meta name="keywords" content="HTML, CSS, JavaScript">
Define a description of your web page
<meta name="description" content="Developer CV">
Define the author of a page
<meta name="author" content="Your Name">

95. LAB TIME - YOUR PORTFOLIO!
Finish building the 'About Me' page based on the code-along
we have done together. Now think about the 'Portfolio' page
which you want to build for the homework assignment
based on the portfolio_deliverable.png.
Remember to link up these pages so you can click from one
to the other.

96. HOMEWORK
Build your own portfolio
Watch a video on the Internet about the Internet
Read about CSS Colors
Please also submit an for todays lesson.exit ticket