CodeupClassroom/redwood_web_exercises

Redwood Web Exercises

Notes for HTML and CSS

1. Terminal commands
2. Git commands
3. HTML notes
   1. HTTP protocol
   2. HTML forms
4. CSS notes
5. Resources

Terminal commands

• Everything in your filesystem is either a file or a directory (a container for files)
• Your file system is organized as a tree structure
  • There is a root element / (AKA the root directory)
• Hidden files start with a .
• Working with files and directories
  • pwd Print working directory
  • mkdir Create a directory
  • cd Move to a specific directory
  • cd .. Go to the parent directory
  • ls List files
  • touch Creates an empty file
  • cat Show the contents of a file
  • rm Delete files or directories
    • For directories we'll add the flag -r (recursive)
      • rm -r directory It will work if the directory is empty
      • rm -rf directory If the directory is not empty, ie, it contains files or other directories, we'll need the flag -f (force)
    • It needs the recursive flag, because we need to repeat the same operation but for the files and directories within the current directory. Recursion is a type of repetition

Git commands

• Git workflow
  • git status List the current changes
  • git add filename Add a single file
    • git add . This adds everything in the current directory, but deleted files
    • git add -A This adds everything, even ignored files
  • git commit Save your changes to git. You'll need to include a message
    • The default editor is vim
      • Press i to start typing
      • Once your done, press esc
      • To quit the editor press :wq
  • git commit -m "Add examples for HTML forms" Write the message using the -m flag
  • git commit --amend -m "Fixed message" Fix a previous commit, with a new message
  • git log To see a list with all the commits, including your most recent one
  • git push origin master Send your changes to Github

More commands

• git fetch Git download. Downloads changes from the remote without aplying them to mty local repo
• git stash Saves Work in Progress, is similar to commit (temporary save)
• git stash list Shows all the code tha has been stashed

HTML Notes

• HTML is markup language. It describes the structure of a document
• The main component of this language is an element
• There's 3 types of elements
  • Block level -> div, p, h1, h6
  • Inline elements -> strong, em, span
  • Void elements -> br, meta, hr
• The parts of an element are
  • Tags (<tag></tag>)
    • Opening
    • Closing (void elements do not have it)
  • Attributes (attribute="value")
    • They represent properties of the element
    • Some are required (src in an img), some are optional (class)
    • Some do not require a value, since it would be redundant (disabled, readonly)
• Elements are containers
  • Elements can have
    • no content (empty)
    • more elements (children)
    • or text (text nodes)
• Rules
  • block within block (valid)
  • inline within inline (valid)
  • inline within block (valid)
  • Some void elements are block elements (br, hr)
  • block within inline (invalid)
• A document can be a
  • well-formed document
    • Have a correct syntax
  • mal-formed documents
    • Have incorrect syntax. For instance, a non-void element without a closing tag
  • invalid document
    • It has correct syntax, but does not follow the rules defined by the doctype. It uses a non-existing tag (<bananas></bananas>)
  • valid document
    • It has correct syntax
    • It follows the rules defined by the doctype

HTTP protocol

• What's the HTTP protocol?
  • It defines the rules to exchange messages in the Internet
• Communication occurs between a client and a server
• They exchange messages
  • The client sends a request
  • The server returns a response
• Types of messages
  • Questions
  • Commands
• HTTP verbs are used to determine the type of the message
  • GET requests are questions (Could you play this song?)
  • POST requests are commands (Pay the pizza I ordered)
  • There are more: PUT, DELETE, PATCH
• Parts of a message
  • Headers
    • Meta-information (configuration)
      • Status code: 200 OK, 404 Not found, 500 Server error
      • Content type: image, audio, video, text, html, pdf
  • Body
    • The real content

HTML forms

Default values in forms

• The default method (HTTP verb) for forms is get
• The default type for input is text
• The default type for button is submit

How is the information sent

• Depending on the method the information is sent to the server within
  • The request body if it's a post request
  • The request headers if it's a get request (in the query string)
• In any case the format used is the same
  • name1=value1&name2=value2 ....

What is sent to the server

• If you want to send a pre-populated value, then
  • for checkbox, radio, add the checked attribute
  • for select, add the selected attribute
  • for input, use the value attribute
• Inputs of type checkbox and radio are not sent to server if none is checked
• If a form element is disabled then is not sent to the server either
• If a form element is readonly it is sent to the server anyway
• A form element without a name is not sent to the server

CSS Notes

• The unit of work in CSS is a rule
  • One or several selectors.
  • Declarations
    • properties and values
  • selector { property: value; }
• Types of selectors
  • Elements, classes, ids, pseudo-selector
  • Combinations of them
• There are 3 ways to include CSS in a page
  • Inline. Using the style attribute
  • Embedded. Using the style element
  • External. Using the link element pointing to an external .css file
• Types of positioning
  • static is the default positioning
  • absolute and relative positioning. Mostly used for images
  • fixed. Mostly used in main navigation menus
  • float. Is used mostly to create columns
• There's 3 main font families
  • Serif
  • Sans serif
  • Monospace
• How to use Google fonts
  • Select a font
  • Add a link element in your HTML pointing to the font you selected
  • Use the font family in your CSS rule

Grids

A generalization to create layouts based on columns

• They generally are 12 columns
• We have several general concepts
  • Container. It will define the maximum width of the blocks in the page
  • Row. It's a container for columns
  • Columns. Are usually elements floating with a specific width based on percents

Setting up bootstrap

From the CDN

• Got to http://getbootstrap.com/getting-started/
  • Copy the first link tag and add it to the head of your document
  • Copy the only script tag and add it before the end of your body element
  • Go to http://code.jquery.com/ and select the link to the minified version of the latest release (3.2.1) and include the script tag before the script for bootstrap

Download bootstrap

• Got to http://getbootstrap.com/getting-started/
  • Click on the button "Download Bootstrap"
  • Extract the contents of the zip file
  • Copy the file css/bootstrap.min.css to your css folder
  • Copy the directory fonts to the root of your project
  • Create a new directory js in your project
  • Copy the file js/bootstrap.min.js to your new js in your project
  • link to the CSS and JS files from your HTML (css/bootstrap.min.css and boostrap.min.js)
  • Include jQuery from the CDN before the script for bootstrap

Grid system

• col-xs-3 means three columns for extra small devices and bigger (all devices)

Javascript

• Introduction to JavaScript

  • It was created in 7-10 days
  • Its loosely typed
    • Variables change type according to its content

• Statements

  • variable declaration var identifier;
    • An identifier cannot start with a number
    • Cannot include spaces
    • Cannot include dashes
    • They can include underscores
  • assignment identifier = "value";

• Expression

  • Is a statement that returns a value
    • A variable declaration is NOT a expression
    • An assignment IS a expression
  • All expressions have types
    • a boolean expression
    • a numeric expression
    • a string expression

• Javascript will try to convert the values of variables based on the operator

  • x && y, will try to convert both x and y to booleans if they have a different type
  • x * y, will try to convert the variables to numbers
  • x + y, is more complicated because + is used for both addition and concatenation, so JS will look at the types of the variables, if one of them is a string, it will be concatenation

• String Indexes in JavaScript

  We start counting from 0

  string:  "codeup"
  indexes:  012345
  

  • The character at index 0 is c
  • The character at index 3 is e

• Loops Break / Continue

  • break will stop the execution of the whole loop.
  • continue will skip the current cycle of loop and jump to the next iteration.

Control flow statemens

• There's 3 main types
  • sequential
  • conditionals
  • loops
• Types of conditionals
  • if
    • ternary operation
  • switch
• Types of loops
  • while
  • do-while
  • for

Understanding arrays and objects

• Types
  • Simple (1 single value)
    • booleans, numbers, strings
  • Complex (composition, several values)
    • array -> groups, sets, collections, of similar things
      • name[1], name[0] (key (number) -> value (anything))
    • object -> describing the properties of books
      • book["title"], book["author"] (key (string) -> value (anything))
      • book.title, book.author
    • books[0].title "Clean code"
    • books[0]["author"] "Robert Martin"

Chrome debugger

1. Open your Chrome dev tools
2. Switch to the Sources tab
3. Click on the file name that contains your JavaScript code
4. Add a breakpoint in the first line ypu want to debug (click to left of the line number, the line will become blue-ish)
5. Refresh your page
6. Use the button "Step over" to move between lines

Semantic versioning

In simple words

• 1.2.3 -> major.minor.patch
  • major. New stuff yay! Old stuff might not work as before, careful!!!
  • minor. New stuff, yay!
  • patch. Sorry my bad

Resources

For typing and shortcuts

• Typing club
• Typing IO
• Shortcut foo

Services to include images

• Image placeholders
• Lorem ipsum images
• Free stock photos

Validators

• HTML validator

Miscellaneous

• Is the HTML/CSS feature supported?
• Google fonts