Web Engineering Foundations

Building the foundation behind modern frontend engineering

This repository documents the stage where I built my core web development foundation from the ground up, starting with semantic HTML and CSS, moving through JavaScript and problem solving, then going deeper into asynchronous programming, TypeScript, and responsive UI development with Tailwind CSS.

What This Repository Represents

I built this repository because I wanted a strong foundation before going deeper into frontend development.

I did not want to know only how to make something work. I wanted to understand what the browser is doing, how JavaScript behaves, how layouts respond, how asynchronous code is scheduled, how APIs communicate, and how TypeScript can make code safer.

That is why this repository contains both simple examples and much deeper learning tracks.

Some folders focus on one small concept at a time.

Others go much further into problem solving, async behavior, type systems, responsive UI, and real application patterns.

This repository is the record of that entire process.

Journey at a Glance

6
Core Learning Tracks

145
JavaScript Practice Tasks

27
TypeScript Practice Tasks

44
Tailwind Topic Labs

HTML
  ↓
CSS
  ↓
JavaScript
  ↓
Problem Solving
  ↓
Asynchronous JavaScript
  ↓
TypeScript
  ↓
Tailwind CSS
  ↓
Stronger Frontend Foundation

This progression reflects the order in which I built the foundation.

Each stage gave me a better understanding of the next one.

Repository Map

Track	Focus
HTML	Semantic markup, forms, media, metadata, and document structure
CSS	Styling, Flexbox, Grid, responsive design, animation, and layout systems
JavaScript	Language fundamentals, DOM, events, OOP, browser programming, and problem solving
Asynchronous JavaScript	Event loop, Promises, async await, Fetch, concurrency, cancellation, caching, and advanced async patterns
TypeScript	Type system, generics, narrowing, OOP, advanced types, compiler configuration, and application typing
Tailwind CSS	Utility based styling, responsive systems, advanced layouts, interaction states, and reusable UI patterns

01 · HTML

My first goal was to understand how a web document should be structured before thinking about styling or JavaScript.

The HTML track contains 13 structured modules.

Coverage

HTML boilerplate and document structure
Headings and paragraphs
Text formatting
Links and navigation
Lists
Images
Tables
Forms
Semantic elements
Audio
Video
Iframes
Meta tags
Favicons
HTML entities

The track finishes with a complete HTML portfolio exercise where several concepts come together in one document.

What I Took From This Stage

HTML itself was not difficult to write.

The useful part was learning to think about structure.

I started paying more attention to document hierarchy, semantic elements, forms, content relationships, and the way good markup makes later styling and interaction easier.

02 · CSS

After learning document structure, I moved into visual layout and responsive interface design.

The CSS track covers 29 core topics, followed by dedicated Flexbox and Grid practice projects.

Core Styling

Selectors
Colors
CSS units
Typography
Backgrounds
Borders
Outlines
Margin
Padding
Box model
Display
Overflow
Visibility
Cursor
Z index

Layout

Positioning
Float and clear
Flexbox
CSS Grid
Object fit
Object position

Visual Interaction

Transforms
Transitions
Keyframe animations
Pseudo classes
Pseudo elements
Attribute selectors
Shadows
Filters
Backdrop filters
CSS functions
CSS variables

Responsive Design

Responsive layout fundamentals
Breakpoints
Flexible sizing
Layout adaptation
Mobile friendly interfaces

Layout Practice

I also worked on focused layout exercises instead of learning properties only in isolation.

Flexbox Project

Navigation
Pricing cards
Team layouts
Gallery sections
Alignment exercises

Grid Project

Magazine layout
Dashboard structure
Image gallery
Holy Grail layout
Responsive card grids

CSS Mental Model

Content
  ↓
Box Model
  ↓
Available Space
  ↓
Layout System
  ↓
Alignment
  ↓
Responsive Behavior

This stage helped me stop fixing layouts with random values and start thinking about how elements actually relate to each other.

03 · JavaScript

JavaScript became the largest part of my early foundation.

I worked through the language itself first, then used it for browser interaction, structured data, object oriented programming, asynchronous behavior, and problem solving.

Language Foundation

Variables and declarations
Primitive values
Reference values
Type conversion
Operators
Equality
Truthy and falsy values
Conditionals
Loops
Control flow

Functions

Function declarations
Function expressions
Arrow functions
Default parameters
Rest parameters
Arguments
Function scope
Block scope
Higher order functions
Callback functions
IIFEs
Recursion

Data Structures

Arrays
Array methods
Objects
Object operations
Strings
String methods
Sets
Maps
JSON
Destructuring
Spread syntax

JavaScript Behavior

Scope
Closures
Hoisting
Error handling
Custom errors

Browser Programming

DOM selection
DOM manipulation
Element creation
Class manipulation
Events
Event objects
Keyboard events
Input events
Event delegation
Listener cleanup

Object Oriented JavaScript

Classes
Instances
Constructors
Methods
Inheritance
Method overriding
super
Getters
Setters
Static methods
Static properties

Problem Solving

I did not want JavaScript to become a subject where I knew the syntax but struggled when I had to solve something without a ready made example.

That is why problem solving became a major part of this repository.

JavaScript Practice Track

The repository contains 145 dedicated JavaScript practice tasks.

The exercises cover:

Conditions and decision making
Loops
Arrays
Strings
Objects
Functions
Data transformation
Searching
Sorting
Validation
Debugging
Closures
Mutation and copying
Small application problems

There are also separate sections for:

Basic JavaScript problem solving
ES6 problem solving
Advanced ES6 problem solving

These include practice with:

let and const
Template strings
Default parameters
Spread syntax
Rest parameters
Arrow functions
Destructuring
Object methods
Optional chaining
map
filter
find
reduce
Method chaining
Closures
Custom sorting
Product data
Cart data
Object transformations

Problem Solving Mental Model

Understand the Input
        ↓
Define the Output
        ↓
Break the Problem Down
        ↓
Choose the Right Data Structure
        ↓
Implement
        ↓
Test Different Cases
        ↓
Refactor

This part of the repository matters a lot to me because knowing JavaScript and being able to solve problems with JavaScript are two different things.

04 · Asynchronous JavaScript

After learning the basics of Promises and async await, I created a separate track to understand asynchronous JavaScript more deeply.

It became an 8 module progression.

Async Foundations

Synchronous execution
Blocking code
Asynchronous execution
JavaScript runtime
Call stack
Web APIs
Callback queue
Event loop
Timers
Execution order

Callbacks

Callback functions
Synchronous callbacks
Asynchronous callbacks
Timer callbacks
Event callbacks
Error first callback patterns
Nested callbacks
Callback hell

Promises

Promise creation
Promise states
Resolve and reject
.then()
.catch()
.finally()
Promise chaining
Returning values
Error propagation
Returning Promises
Converting callback patterns

Async Await

Async functions
await
Promise returns
Sequential asynchronous work
try...catch
finally
Throwing errors
Custom errors
Multiple awaits
Async composition
Common async mistakes

Fetch API & HTTP

The next step was using asynchronous JavaScript for network communication.

Topics Covered

API fundamentals
HTTP requests
HTTP responses
Fetch API
Response objects
JSON
GET
POST
PUT
PATCH
DELETE
Request headers
HTTP status codes
Fetch error handling
AbortController
Reusable API functions

This was where async JavaScript started to feel much more practical.

It was no longer only about timers and Promises. It became about handling real data and real requests.

Concurrency

I also spent time understanding the difference between running independent async tasks one after another and starting them together.

Sequential

Task A
  ↓
Task B
  ↓
Task C

Concurrent

Task A ─┐
Task B ─┼→ Results
Task C ─┘

Promise Combinators

Promise.all
Promise.allSettled
Promise.race
Promise.any
Parallel API requests
Failure behavior
Timeout patterns
Batch processing

Advanced Async Patterns

The later modules move into problems that appear once multiple requests and changing application state are involved.

Topics Covered

Retry patterns
Retry with delay
Exponential backoff
Timeouts
Polling
Cancellation
Race conditions
Preventing stale responses
Debouncing
Throttling
Async caching
Request deduplication
Concurrency control

This part made asynchronous code much easier for me to reason about.

I started thinking beyond whether a request simply succeeds or fails.

I also started thinking about timing, overlapping requests, stale results, retries, cancellation, and what happens when multiple async operations interact.

Event Loop Deep Dive

The final async stage goes deeper into scheduling.

Topics Covered

Microtask queue
Macrotask queue
Promise execution order
Timer execution order
queueMicrotask
Event loop behavior
Async iteration
for await...of
Async generators
Top level await
Integrated async flows

Async Mental Model

JavaScript
    ↓
Call Stack
    ↓
External Async Work
    ↓
Task Queues
    ↓
Event Loop
    ↓
Call Stack

Understanding this was more useful than memorizing the order of a few examples.

It gave me a clearer way to reason about async behavior when something did not run in the order I expected.

05 · TypeScript

TypeScript became one of the deepest tracks in this repository.

The main learning path contains 13 structured modules, plus 27 separate practice tasks.

I started with basic annotations and inference, then moved into narrowing, generics, object oriented programming, advanced type manipulation, compiler configuration, and practical application typing.

Type System Foundation

Type annotations
Type inference
Primitive types
any
unknown
Union types
Literal types

Objects & Collections

Object types
Optional properties
Readonly properties
Nested objects
Arrays
Arrays of objects
Tuples
Type aliases

Functions

Parameter types
Return types
Arrow function typing
Optional parameters
Default parameters
Function types
Callback types
void
never
Rest parameters
Destructured parameters
Function overloads

Interfaces & Type Composition

Topics Covered

Interfaces
Optional interface properties
Readonly interface properties
Function interfaces
Array interfaces
Interface extension
Multiple inheritance
Type aliases
Intersection types
Interface vs type alias

This was where TypeScript started feeling less like annotations and more like a way to describe the shape of an application.

Narrowing & Type Safety

A big part of TypeScript is proving what a value actually is before using it.

Topics Covered

Type assertions
Non null assertions
Type guards
Custom type guards
Discriminated unions
keyof
typeof
Indexed access types
never
Exhaustive checking

State Mental Model

Possible State
│
├── Idle
├── Loading
├── Success
└── Error

Discriminated unions were especially useful because they showed me how types can prevent invalid state combinations instead of only describing data.

Generics & Utility Types

Generics

Generic functions
Multiple generics
Generic constraints
keyof with generics
Generic interfaces

Utility Types

Partial
Required
Pick
Omit
Readonly
Record
ReturnType

Generics changed the way I thought about reusable code.

Instead of making a function broad with any, I could keep useful relationships between the input and output types.

Object Oriented TypeScript

A dedicated module covers:

Classes
Constructors
Properties
Methods
public
private
protected
Readonly members
Getters
Setters
Static members
Inheritance
Method overriding
Encapsulation
Polymorphism
Abstraction

Advanced TypeScript

The later modules go deeper into the type system.

Advanced Type Manipulation

Mapped types
Mapped type modifiers
Conditional types
infer
Exclude
Extract
Parameters
Awaited
Template literal types
as const
satisfies

These topics helped me understand how types can be derived and transformed instead of being rewritten manually every time.

Compiler & Project Configuration

I also spent time learning what TypeScript is doing outside individual files.

Topics Covered

TypeScript compiler
tsconfig.json
Target
Lib
Module configuration
Strict mode
rootDir
outDir
Include and exclude
noEmit
Named imports and exports
Default imports and exports
Type only imports and exports
Declaration files
Project structure

This made TypeScript feel more complete.

I was not only writing types anymore. I had a much better idea of how the project itself is compiled and organized.

Practical TypeScript

The later modules focus on using types in application style code.

Topics Covered

Async TypeScript
Promise types
API response typing
Type imports
Type exports
Error handling with unknown
Reusable application types
Props style object types
Event types
Form data
Nullable data
Generic API responses
Request states
Exhaustive state handling

The final integration work brings several of these ideas together instead of keeping every concept isolated.

TypeScript Practice

Alongside the structured modules, the repository includes 27 dedicated TypeScript practice tasks.

Practice Areas

Functions
Typed objects
Tuples
Arrays
Unknown values
Nested objects
Interfaces
Union types
Type assertions
Generics
Generic constraints
Enums
Utility types
as const
Derived union types

TypeScript Mental Model

JavaScript Runtime Behavior
          +
Static Type Information
          ↓
Clearer Contracts
          ↓
Earlier Feedback
          ↓
Safer Refactoring

The biggest value I found in TypeScript was not writing more syntax.

It was being forced to think more clearly about the data a function receives, what it returns, and what states are actually possible.

06 · Tailwind CSS

I learned Tailwind after spending time with regular CSS first.

That order helped a lot.

Flexbox, Grid, spacing, responsive behavior, positioning, and layout decisions were already familiar, so Tailwind became a faster way to express those ideas rather than a replacement for understanding CSS.

The track contains 44 focused topic labs across two intensive modules.

Foundation & Responsive Layouts

Utility first mindset
Spacing system
Width and height
Sizing
Colors
Backgrounds
Typography
Borders
Radius
Shadows
Display
Visibility
Overflow
Positioning
Z index
Flexbox
Grid
Responsive design
Mobile first strategy
Breakpoint ranges
Responsive sizing
Responsive spacing
Responsive Flexbox
Responsive Grid
Complex responsive layout strategy

Advanced & Production Design

Interaction

Hover states
Focus states
Active states
Disabled states
focus-visible
Group variants
Peer variants
Data variants
ARIA variants

Visual Design

Dark mode
Transitions
Transforms
Animations
Gradients
Visual effects
Arbitrary values
Arbitrary properties
Arbitrary variants

Design Systems

Theme customization
Design tokens
Container queries
Advanced responsive patterns
Responsive design systems

Practical Layouts

Dashboard layouts
Complex grids
Navbar strategy
Sidebar strategy
Responsive cards
Responsive forms
Responsive tables
Reusable component styling
Conditional classes
Dynamic class pitfalls
Tailwind best practices
Accessibility
Reduced motion

Tailwind Mental Model

Design Requirement
       ↓
Layout Decision
       ↓
Responsive Strategy
       ↓
Utility Composition
       ↓
Reusable UI Pattern

Tailwind changed how I write styles, but the CSS knowledge underneath it is still what makes the classes make sense.

What I Practiced Beyond Syntax

Across all of these tracks, a few habits kept repeating.

Breaking Problems Down

When something felt difficult, I learned to separate the input, conditions, transformations, and output before trying to write the full solution.

Understanding Data

A lot of the JavaScript and TypeScript practice comes back to understanding the shape of the data before trying to manipulate it.

That includes:

Arrays
Objects
Nested structures
API responses
Form values
Application states

Debugging

A lot of progress came from code that did not behave the way I expected.

I worked through problems involving:

Incorrect conditions
Loop mistakes
Mutation bugs
Async ordering
Promise errors
Stale responses
Type mismatches
Layout problems

Debugging became part of the learning process rather than something separate from it.

Browser Thinking

The repository also helped me become more comfortable with the actual environment where frontend code runs.

That includes:

DOM
Events
Timers
Web APIs
HTTP
Fetch
Event loop
Responsive layout
Accessibility states

Core Mental Models

Browser Layer

HTML
↓
Structure

CSS
↓
Presentation & Layout

JavaScript
↓
Behavior & Interaction

Programming Layer

Values
  ↓
Control Flow
  ↓
Functions
  ↓
Data Structures
  ↓
Abstraction
  ↓
Problem Solving

Async Layer

Start Work
    ↓
External Async Operation
    ↓
Result Becomes Ready
    ↓
Scheduler
    ↓
JavaScript Continues

Type Safety Layer

Data Shape
    ↓
Type Contract
    ↓
Functions & APIs
    ↓
Compiler Feedback
    ↓
Safer Application Code

UI Layer

Content
   ↓
Layout
   ↓
Responsive Behavior
   ↓
Interaction
   ↓
Usable Interface

How The Repository Evolved

One thing I like about keeping all of this work together is that the progression is visible.

The earlier folders are small and focused.

One topic, one example, one problem.

Later folders start combining multiple concepts and require more reasoning.

Single Concept
     ↓
Small Exercise
     ↓
More Practice
     ↓
Combined Concepts
     ↓
Larger Problems
     ↓
Better Structure

That progression is especially visible in the JavaScript problem solving work, the async modules, the later TypeScript modules, and the responsive Tailwind sections.

Repository Structure

Web Engineering Foundations
│
├── HTML
│   └── 13 structured modules
│
├── CSS
│   ├── 29 core topics
│   ├── Flexbox project
│   └── Grid project
│
├── Java Script
│   ├── 19 core modules
│   ├── 145 practice tasks
│   ├── Basic problem solving
│   ├── ES6 problem solving
│   └── Advanced ES6 problem solving
│
├── Asynchronous Javascript Mastery
│   └── 8 deep dive modules
│
├── Type Script
│   ├── 13 structured modules
│   └── 27 practice tasks
│
└── Tailwind CSS
    ├── Foundation & responsive layouts
    └── Advanced production design

Development Approach

The pattern across this repository was simple.

Learn
  ↓
Write Code
  ↓
Practice
  ↓
Break Something
  ↓
Debug
  ↓
Understand Why
  ↓
Try Again

That worked much better for me than trying to memorize a long list of methods or APIs first.

A lot of concepts only became clear after I used them, made mistakes with them, and then used them again in another problem.

What This Foundation Gave Me

By the end of this repository, I was much more comfortable working with the parts of frontend development that sit underneath frameworks and libraries.

I became comfortable with:

Structuring web documents properly
Building responsive layouts
Working with Flexbox and Grid
Writing JavaScript without framework abstractions
Manipulating arrays and objects
Solving programming problems
Working with the DOM and browser events
Understanding scope and closures
Reasoning about asynchronous execution
Working with Promises and async await
Making HTTP requests
Handling request failures
Managing concurrency
Preventing stale async work
Designing reusable TypeScript types
Working with generics
Narrowing uncertain data
Using advanced TypeScript utilities
Configuring TypeScript projects
Building responsive interfaces with Tailwind
Thinking more carefully about accessibility and interaction states

More importantly, I became much more comfortable figuring things out when the answer is not immediately obvious.

That is one of the biggest things I wanted from this repository.

Repository Status

HTML                         ✓ Complete
CSS                          ✓ Complete
JavaScript                   ✓ Complete
JavaScript Problem Solving   ✓ Complete
Asynchronous JavaScript      ✓ Complete
TypeScript                   ✓ Complete
Tailwind CSS                 ✓ Complete

Web Engineering Foundations  ✓ COMPLETE

Final Reflection

This repository started with basic HTML.

By the end, I was working with event loop behavior, race conditions, request cancellation, generic types, mapped types, compiler configuration, container queries, responsive systems, and much larger problem solving exercises.

That progression matters to me more than any single topic in this repository.

Syntax can always be looked up.

What I wanted was enough understanding that when something does not behave the way I expect, I know how to start thinking about the problem.

Questions like:

What is the browser doing here?

What does this data actually look like?

What changes when this function runs?

Am I changing the original data or creating a new value?

Is this work sequential or concurrent?

Can an older request overwrite a newer result?

What does this type actually guarantee?

What happens if the data is not what I expected?

Will this layout still work on a smaller screen?

Am I solving the real problem or only making this one example work?

Those are the kinds of questions I became much more comfortable asking while building this repository.