Site Introduction

2022-08-20 • 1 min read

I've been learning about web development following The Odin Project curriculum for a little more than a month and I wanted to test my skills by building an entire website from scratch.

I am not a fan of pre-made templates so I designed this website myself using Figma and developed it using plain HTML, CSS and JavaScript.

I experimented with several different color schemes both for the light and dark themes, until I found the ones that I liked the most.

Below are some of the things I have learned along the way.

Development

  • CLI basics
  • What's a VCS and the different types of VCS
  • Git basics
  • HTML from foundations to more advanced concepts
    • Elements/tags
      • Semantic and non-semantic tags
      • Divs, spans, classes and IDs
      • Landmark tags
    • HTML5 Boilerplate
    • DOM tree
    • Lists
    • Images
    • Difference between replaced and non-replaced elements
    • Tables
    • Forms and form validation
    • A11y
      • WCAG & WAI-ARIA
      • A11y best practices
      • A11y tree
  • CSS from foundations to more advanced concepts:
    • Box model
    • Difference between block and inline
    • Simple and advanced selectors
    • Pseudo-classes and pseudo-elements
    • Margin collapse
    • Cascade, specificity and inheritance
    • Flexbox
    • Grid
    • CSS functions and variables
    • Animations - transitions and keyframes
    • Responsiveness and media queries
  • JS basics
    • Variables
      • Purpose
      • Declaration and difference between var, let and const
      • Hoisting
    • Data types (Symbol excluded)
    • Loops
    • Methods and functions
    • DOM manipulation
    • Events
    • Arrays and objects
  • How to debug with DevTools
  • Robots exclusion standard
  • How to host a website

Design

  • Color theory fundamentals
  • Hierarchy
  • Weight and contrast correlation
  • Line spacing
  • Form design (UI/UX)
  • Figma basics
    • Interface and important shortcuts
    • Basic shape tools
    • Setting up a design environment
    • Auto layout
    • Components and Styles
    • Prototyping

The website is fully responsive and a11y-friendly, it supports dark mode and all the images are compressed and resized to reduce the pages loading speed and bandwidth usage allowing it to get an almost perfect lighthouse report for the homepage.

Lighthouse report for the homepage
Lighthouse report for the homepage

The domain was purchased from Google Domains and the website is hosted for free on Cloudflare Pages.

For more information on who I am and how I will be using this website see About.

Next Post