[v.1.0] (09/15/2023): Post started!

Fig. 1: The Odin Project's Logo (Image source: The Odin Project).

Fundamentals

  • The Rubber-Duck method:
    • What do you think the problem is?
    • What exactly do you want to happen?
    • What is actually happening?
    • How did you get there?
    • What have you tried so far?

Web Development

Mindsets

Asking for Help

Computer Fundamentals

Command Lines

  • The Art of Command Line is a complete beginner’s pro-maker. It serves as an open-source repository. This also has a lot of pro tips!
  • ExplainShell.com is a great resource if you want to deconstruct a particularly strange shell command or learn how Bash works through guess-and-check.
  • Command Line Flashcards by flashcards.github.io.
  • Linux Commands for Beginners contains 24 videos explaining the basics of the command line. Videos are brief enough for beginners but, at the same time, detailed enough to get you started and light your inner curiosity.

Git

HTML, CSS, & Flexbox

HTML

CSS

  • Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of less specific selectors. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.

  • Mozilla CSS values and units can be used to learn the various types of values possible in absolute or relative terms.

  • An interactive Scrim which covers much of the material in the lesson in an interactive form.

  • The CSS Cascade is a great, interactive read that goes a little more in detail about other factors that affect what CSS rules actually end up being applied.

  • Changing the Font Family describes a few different approaches to using custom fonts.

  • CSS Specificity Explained from Kevin Powell goes through various specificity examples and gives some advice on avoiding wrestling with specificity.

  • CSS Specificity Calculator allows you to fill in your own selectors and have their specificity calculated and visualized.

  • Mozilla CSS Properties Reference can be used to learn if a particular CSS property is inherited or not; simply look for the Inherited field inside the Formal Definition section. Here’s an example for the CSS color property.

The Box Model

  • The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. The assigned articles go into more depth on this concept, but to sum it up briefly:

    • padding increases the space between the border of a box and the content of the box.
    • margin increases the space between the borders of a box and the borders of adjacent boxes.
    • border adds space (even if it’s only a pixel or two) between the margin and the padding.

  • This CSS Tricks page has some further information about the margin property that you’ll find useful. Specifically, the sections about auto and margin collapsing contain things you’ll want to know.

  • For a more interactive explanation and example, try this Scrim on the box model.

  • Watch “this” simple short video on What does the term “Normal Flow” Mean In CSS

  • For a more interactive explanation and example, try this Scrim on block and inline display.

Flexbox

  • Flexbox gave us a ton of amazing new tools for laying out a web page. Compare these techniques to what we were able to do with floats, and it should be pretty clear that flexbox is a cleaner option for laying out modern websites:

    • Use display: flex; to create a flex container.
    • Use justify-content to define the horizontal alignment of items.
    • Use align-items to define the vertical alignment of items.
    • Use flex-direction if you need columns instead of rows.
    • Use the row-reverse or column-reverse values to flip item order.
    • Use order to customize the order of individual elements.
    • Use align-self to vertically align individual items.
    • Use flex to create flexible boxes that can stretch and shrink.

  • An Interactive Guide to Flexbox

  • A Complete Guide to Flexbox

  • This Flexbox tutorial is a friendly tutorial for modern CSS layouts by Interneting Is Hard.

  • For a more interactive explanation and example, try this Scrim on Flexbox. Note that this Scrim requires logging into Scrimba in order to view.

  • Shorthand properties on MDN

  • Check out this video explaining how flexbox works and why.

  • For an interactive explanation and demo, check out the Scrim on the flex shorthand. For an alternative explanation you can view the Scrim on using flex-grow, flex-shrink, and flex-basis. Note that these Scrims require logging into Scrimba in order to view.

  • This flexbox visual cheatsheet has some useful references to flex and its properties.

  • For an interactive demo, check out this Scrim on Flexbox axes. Note that this Scrim requires logging into Scrimba in order to view.

  • This beautiful Interactive Guide to Flexbox covers everything you need to know. It will help reinforce concepts we’ve already touched on with some really fun and creative examples. Spend some time here, some of it should be review at this point, but the foundations here are important!

  • Typical use cases of Flexbox is an MDN article that covers some more practical tips. Don’t skip the interactive sections! Playing around with this stuff is how you learn it!

  • The CSS Tricks “Guide to Flexbox” is a classic. There isn’t any new information for you here, but the images and examples are super helpful. This one is a great cheat sheet that you’ll probably return to often. (Keep it handy for the practice exercises!)

  • Flexbox Froggy is a funny little game for practicing moving things around with flexbox.

  • Flexbox Zombies is another gamified take on flexbox. Free, but requires an account.

  • The Basic Concepts of Flexbox article on MDN is another good starting point. There are helpful examples and interactive sections.

  • Aligning Items in a Flex Container goes into more depth on the topic of axes and align-items vs justify-content.

  • This Flexbox Tutorial from freecodecamp is another decent resource.

  • Flexbox Crash Course is a nice resource by Traversy Media.

  • For more interactive demos, try the Scrim on the justify-content property and the Scrim on the align-items property. Note that these Scrims require logging into Scrimba in order to view.

JavaScript

Citation

Cited as:

Odin's Resources Repository https://mnguyen0226.github.io/posts/web_dev_odin/post/.\

Or

@article{nguyen2023odin,
  title   = "Odin's Resources Repository",
  author  = "Nguyen, Minh",
  journal = "mnguyen0226.github.io",
  year    = "2023",
  month   = "September",
  url     = "https://mnguyen0226.github.io/posts/web_dev_odin/post/"
}

References

[1] Full Stack JavaScript | The Odin Project. Theodinproject.com. Published 2023. Accessed September 15, 2023. https://www.theodinproject.com/paths/full-stack-javascript ‌

Fig. 2: Kansas City, Kansas, U.S.A
(Image Source: Colton Sturgeon @ Unsplash).