Giter Club home page Giter Club logo

lambda-school-mini-bootcamp-2's Introduction

!EASTER EGGS: Click on the ▶︎ black ▶︎ triangles ▶︎ to reveal the EASTER EGGS!

Lambda-School-mini-bootcamp-2

Start date: May 15, 2017:

Course Resources

Additional resources

Week 1 - TEXT EDITORS, HTML AND CSS

"The basics of code, how it works on the web, and what websites are made of."

In addition to w3c for CSS & HTML, for HTML, see also: https://whatwg.org
HTTP is per w3c & http://ietf.org

Monday, May 15, 2017, Lecture 1:

  1. Mini Bootcamp Lesson 1: HTML & CSS

  • LESSON 1: HTML & CSS

  • Lecture 1 example on CodePen.io: "Words"

  • Lecture 1 example on CodePen.io: "divs"

    Lecture 1 notes
    • Lecture 1 starts@ ~12min
      There's good information in the first twelve minutes, don't skip it.

      • HTML

    • Words
    • Declaring the type of document: <!DOCTYPE html>
      html = Hyper-Text Markup Language
      HTML consists of matching <tag_type> openings and </tag_type> closings.
      Whatever is inside the open/close tag set belongs to that tag area.
      I.e. <open> tag_area <close>
      To declare a closing, the tag type is prepended with a forward slash: /
      I.e. <tag_type> tag_area </tag_type>
      E.g. <html> html_area </html>
      HTML involves "nesting" tags inside each other per sections, containers, divisions, etc. E.g.
      <!DOCTYPE html><html><head>...</head><body>...</body></html>
    • <html lang="en">...</html>
      per w3.org: language declaration
      "Always use a language attribute on the html element. This is inherited by all other elements, and so will set a default language for the text in the document head element."
    • Basic html document layout:
      1. <!DOCTYPE html> - doc. type declaration,
      2. <html> </html> - html container
      3. <head> </head> contains meta-info mostly for the browser,
      4. <body> </body> is the actual body of the page
    • Title and meta info in head
      Title tag determines browser tab text.
      <html> <head> <title>Browser Tab Text</title> </head> <body> </body> </html>
    • body contains what you see
    • image tags (and some other tags) don't need to be closed
      <img src="url_goes_here">
      ...& it makes NO difference, but you can use a closing tag:
      <img src="url_goes_here"/>
    • anchor tags for links, p tags for paragraphs, h# for headers, etc...
    • Whitespace is pretty much ignored; however, whitepsaces (and tabs) can make things much more "human-readable"
    • html comments are ignored by the html parser:
      <!-- comments go here -->
      <!--
      comments
      can
      also
      be
      across
      multiple
      lines
      -->

      • CSS

    • CSS = Cascading Style Sheet
    • CSS link syntax in the html file (tells the html doc where to find the corresponding css file)
      <html> <head> <title>Browser Tab Text</title> <link to CSS file> </head> <body> </body> </html>
      e.g. <link rel="stylesheet" type="text/css" href="homework.css">
    • convention is to put .css in the same directory as the .html, but it can be put in any directory so long as the "link href="" points to its location
    • per w3schools.com: CSS link syntax
    • HTML "super power": use the browser element inspector to see how web pages are constructed with html and css!
      e.g. to find a hexadecimal color code (e.g. #4CAF50)
    • Basic CSS syntax:
      tag_type {
          declaration: specification;
          ...
      }
    • more CSS syntax:
      • classes are prepended with a period, i.e. .class_name{...} e.g.,
        .some_class_name{...} in the CSS file, and,
        <html_tag class="some_class_name">...</html_tag> in the HTML file.
      • id's are prepended with a has, i.e. #id_name{...} e.g.,
        #some_id_name{...} in the CSS file, and,
        <html_tag id="some_id_name">...</html_tag> in the HTML file.
    • ID vs CLASS:
      • ID's are UNIQUE to a single instance
        • Each element can have only one ID
        • Each page can have only one element with that ID
      • CLASSes are used to group element
        • You can use the same class on multiple elements.
        • You can use multiple classes on the same element.
      More id vs class per CSS-Tricks.com and stack question/answer
    • CSS order of precedence: most exact vs top to bottom cascade (vs importance)
      1. Importance
      2. Specificity
      3. Source Order
      For more info, per w3.org: "Inheritance and Cascade"
    • Per w3schools: CSS Combinators
    • CSS comments are between forward slash and star: /* comments go here */ and they can span multiple lines as well.

      • Additional Notes

    • HTML specs, percentage vs. height
    • HTML meta tags
    • How do I indent or tab text on my web page or in HTML?
    • HTML Escape Characters: Complete List
    • I cannot recommend strongly enough: DO NOT TAKE NOTES IN HTML!!!!!! XD
  1. Homework assignment:

Friday, May 19, 2017, Lecture 2:

  1. Mini Bootcamp Lesson 2: Responsive Web Design
  1. Homework assignment:
Click here for a full screen capture

Week 2 - INTRO TO JAVASCRIPT

"An in-depth introduction to the language of the web."

JavaScript maintained by Mozilla & ECMA
git, GitHub & Atom

Monday, May 22, 2017, Lecture 3

  1. Mini Bootcamp Lesson 3: Command Line, git & Github
  1. Homework assignment:

Friday, May 26, 2017, Lecture 4

  1. Mini Bootcamp Lesson 4: JavaScript and the DOM (Domain Object Model)
  1. Homework assignment:

Week 3 - INTRO TO JAVASCRIPT

"Arrays, objects, and Array/Object class methods."

Friday, June 2, 2017, Lecture 5

  1. Mini Bootcamp Lesson 5: Statements, Variables, and For Loops from JavaScript
  1. Homework assignment:

Week 4 - INTERMEDIATE JAVASCRIPT

"Prototype, this, closure, and callbacks."

Monday, June 5, 2017, Lecture 6

  1. Mini Bootcamp Lesson 6: Functions, Parameters, Arguments
  1. Homework assignment:

Friday, June 9, 2017, Lecture 7

Arrays, Objects, & Methods.

  1. Mini Bootcamp Lesson 7:
  1. Homework assignment:

Week 5 - ADVANCED JAVASCRIPT

"Callback Functions"

Monday, June 12, 2017, Lecture 8

  1. Mini Bootcamp Lesson 8:
  1. Homework assignment:

fin.

lambda-school-mini-bootcamp-2's People

Contributors

mixelpixel avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.