TheOdinProject

For the visual repository with access to live web pages, use GitHub pages.

The following repository contains my submissions for assignments in The Odin Project. Each section below includes a list of points that I’ve learned while studying its corresponding section in the curriculum. If there is a project associated with a section, a link to my submission will be included in the heading. There is also a list of links to all my project submissions under the “Projects” section.

Projects

• Project: Recipes
• Project: Landing Page
• Project: Rock Paper Scissors
• Project: Etch-A-Sketch
• Project: Calculator

HTML Foundations (Project: Recipes)

• Google evaluates search terms in headers based on which rank of header is used (i.e. h1 more important than h2)
• Image tags should always include an “alt” attribute to improve accessibility
• Git commits should use an active voice (i.e. “Fix player collision bug” instead of “Fixed player collision bug”) to match Git conventions

CSS Foundations

• There are 5 types of selectors in CSS:
  • Universal (*)
  • Class (.class-name)
  • ID (#idname)
  • Grouping (.class-name, #idname, div…)
  • Element/Type (div, ul, body, etc.)
• The CSS cascade is the most important concept of the language (hence, why it’s part of the name) but also the hardest
  • Determines which styles are applied to any given element
• The Box Model:
  • Everything you see on a webpage is either part of a box or a box itself
• A box’s size and its relationship to the content inside are determined by:
  • Padding (space between content and border)
  • Border (edge between padding and margin)
  • Margin (space between elements; margins have the ability to collapse or overlap between elements)

Flexbox (Project: Landing Page)

• How to use Flexbox:
  • Slap on a “display: flex;” and “flex-direction: column;” style
  • Call it a day
• Jokes aside, Flexbox is powerful but deceptively simple
• “display: flex;” is for flex containers, “flex: …;” is for flex children
• Flexbox can be easily applied to lists for a simple navbar
• Making things stretch on the page is easy with “max-width: x%;” and “width: 100%”
  • This will force it to cover the specified percentage of the page horizontally
• Many predefined HTML tags have default margins which can screw with Flexbox
• Stretching images is hard but possible by specifying a max, min width and using “flex: auto;”

JavaScript

• This section took much longer than expected
• I thought, knowing more “complex” languages such as C and Assembly, JavaScript would be a walk in the park, but boy is it hard to debug
• JS is dynamically typed, meaning a variable can assume any data type at any point
• “null” means empty or unknown while “undefined” means unassigned
• Maps and JS objects are similar, but JS objects can have nested pairs
  • JS objects act similarly to JSON objects
• All variables are global by default
  • Storing variables and methods inside of classes helps clean up the global namespace
• Always sketch your user interfaces beforehand (learned this from a previous project, but thought it was worth reinforcing)
• I have never had a reason to use one browser over another until I realized how robust Chrome’s dev tools are
• Comments tell us why code works, not how
• When linking a JS script in the head element, you must use the defer keyword to correctly load elements from the DOM
• Programming a calculator is harder than I thought…