Projects summary

Here is a page that contains several small projects I worked on
(they are related to the Scrimba and a bit of the Codecademy courses)

I've decided not to spread these projects into several repositories and keep them under one.

There's also a very simple quote generator in the footer (no API). It radomly generates a three-part message at the bottom of the page on its loading.

Also, pages doesn't have "back/home" navigation on purpose. I needed each of them to look like a standalone project.

Some useful notes

These projects were a part of some of the HTML/CSS/JS courses I was doing and, as it was a sort of a recap, I was taking notes of the most useful information. They can be checked under this section.

IMPORTANT: these are only those notes that I found useful for myself while applying all that to the techniques I learnt before. It's not a summary.

HTML/CSS notes

  • Input field info
  • To center an element without flexbox: add width; add display: block; add left and right margin - auto. Check "text-align" for other elements.
  • CSS utility class - single purpose. Can be added with a space to another class (e.g. color/underline for particular element).
  • Not all CSS properties are inherited
  • List of Web Safe Fonts
  • Check background-size
  • Buttons don't inherit the font. Use font-family: inherit.
  • Manipulate text-shadow
  • h1, h2, h3 {} to create CSS rules for a group of tags (any tags).
  • align-items - could be a cause for items to stretch or not.
  • CSS specificity - e.g. IDs > class, etc.
  • linear-gradient
  • body { margin: 0 } to reset margin for everything at the beginning.
  • list-style
  • Target specific elements. E.g. li a {}
  • Check where you need pixels or vh/vw (precision vs. adapting to the screen size)
  • Add padding to the input field if you need to add gaps. Use width + box-sizing: border-box to control its size.

JavaScript notes

  • Strings have higher priority than numbers. E.g. string + number(s) or number(s) + string always = string.
  • innerText shows only human-readable elements; textContent shows all elements.
  • "What was declared in the loop stays in the loop scope only (e.g. i)."
    (c) Confucius
  • Math.random() - range between 0 and 1 (1 not included).
  • Math.floor() - removes decimals.
  • Use return to get the value out of the function to use it further.
  • Methods are functions that are attached to objects.
  • unshift() adds items at the beginning of the array, shift() removes item at the beginning of the array.
  • To get all the values through a loop use += (not just =).
  • .innerHTML - to render HTML-elements.
  • Render the element once outside of the loop if possible.
  • Local storage
  • JSON methods: parse / stringify - switching between strings and arrays.
  • typeof name - to check the type.
  • false, 0, "", null, undefined, NaN - are only falsy values.
  • Parameters - when you define a function, arguments - when you call a function.
  • Destructuring assignment
  • Object literals
  • Spread syntax (...)
  • Rest parameters
  • Set default parameters like: function name(param = default) {}.
  • includes() - checks if item is in the array (returns a boolean).
  • .padStart(desired-array-length, filler) - to fill array from start; .padEnd(desired-array-length, filler) - to fill array from end.
  • Sets