Full Stack Course Projects

A collection of front-end homework projects created during a full-stack development course.

This repository contains several practice projects built with HTML, CSS, JavaScript, TypeScript, React, and modern front-end build tooling. The main focus is learning semantic markup, page structure, navigation, forms, CSS selectors, styling, layout techniques, organizing multi-page websites, practicing JavaScript fundamentals, and working with modern build workflows.

Project Overview

The repository works as a course catalogue. Earlier homework assignments are still stored in local folders here, while newer assignments can live in separate repositories and be linked from the root index.html.

#	Project	Status	Location	Description
HTML 1️⃣	homework-01	✅ Local	Folder	A basic HTML page about Ukraine's Eurovision 2026 representative, including text, an image, lists, preformatted content, and an external video link.
HTML 2️⃣	homework-02	✅ Local	Folder	A multi-page HTML structure with pages for articles, catalog, gallery, contacts, navigation, and registration.
HTML 3️⃣	homework-03	✅ Local	Folder	A styled multi-page website for Canby Glass Design Studio with custom layouts, navigation, images, icons, forms, and visual design.
HTML 4️⃣	homework-04	✅ Local	Folder	A CSS selector practice page that demonstrates selector types, specificity, nesting, sibling selectors, attributes, IDs, classes, and pseudo-classes.
HTML 6️⃣	homework-06	✅ Local	Folder	A layout practice project with table examples, structured pages, custom icons, and a Mondrian-style visual composition.
HTML 7️⃣	homework-07	✅ Local	Folder	A multi-page CSS box model project covering block and inline elements, normalize, reset, display, box-sizing, float, overflow, positioning, and practical block construction.
HTML 8️⃣	html-homework-08	✅ Local	Folder	A responsive float layout demo with plant cards, five block-positioning variants, navigation anchors, expandable explanations, and clearfix practice.
HTML 9️⃣	html-homework-09-simple-site	✅ Local	Folder	A one-page Simple Site landing page with header navigation, hero content, about section, statistics strip, process media preview, and footer.
HTML 🔟	homework-10-responsive-simple-site	🔗 Linked	Repository	A responsive continuation of Simple Site focused on media queries, flexible spacing, adaptive layout behavior, and viewport testing.
HTML 1️⃣1️⃣	css-homework-11-simple-site-refactoring	🔗 Linked	Repository	A refactored Simple Site project with modular SCSS, Gulp build automation, minified stylesheet output, and responsive layout enhancements.
HTML 1️⃣3️⃣	homework-13-svg-css-animation	🔗 Linked	Repository	Interactive SVG gallery with styled shapes and CSS animations; includes accessibility considerations and responsive layout.
HTML 1️⃣4️⃣	homework-14-bootstrap	🔗 Linked	Repository	A responsive Bootstrap landing page for CANBY Glass Design Studio with carousel sections, dropdown/offcanvas navigation, product modals, accordion content, and a consultation form.
HTML 1️⃣5️⃣	homework-15-tailwind	🔗 Linked	Repository	A responsive Vite and Tailwind CSS football prediction dashboard for the FIFA World Cup 2026 with match forecasts, schedule filters, player ratings, rules, modals, and theme switching.
HTML 1️⃣7️⃣	homework-17-final-scss	🔗 Linked	Repository	A final responsive SCSS web project with component sections, modular partials, WebP images, hover/focus states, and an animated mobile burger menu.
JS 1️⃣	js-homework-01-tests	🔗 Linked	Repository	A JavaScript basics assignment with variables, data types, number formatting, BigInt practice, Vitest checks, and a browser demo that mirrors console output on the page.
JS 2️⃣	js-homework-02-operators	🔗 Linked	Repository	A JavaScript operators assignment with increment/decrement, compound assignment, Math methods, string operations, helper functions, BigInt sums, Vitest checks, and a browser demo that mirrors console output on the page.
JS 3️⃣	js-homework-03-functions	🔗 Linked	Repository	A JavaScript functions assignment with objects, methods, loops, switch cases, ternary operators, callbacks, exported functions, Vitest checks, and a browser demo that mirrors console output on the page.
JS 4️⃣	js-homework-04-hof-closures	🔗 Linked	Repository	A JavaScript higher-order functions assignment with nested functions, closures, function modification, currying, domain generation, Vitest checks, and a browser demo that mirrors console output on the page.
JS 5️⃣	js-homework-05-this-bind	🔗 Linked	Repository	A JavaScript assignment with closure counters, recursive power calculation, callback formatting, Math.max with apply, bind-based helpers, Vitest checks, and a browser demo that mirrors console output on the page.
JS 6️⃣	js-homework-06-map-set-classes	🔗 Linked	Repository	A JavaScript classes assignment with a Map-based calorie calculator, a Set-based unique username registry, Vitest checks, and a browser demo that mirrors console output on the page.
JS 7️⃣	js-homework-07-array-date	🔗 Linked	Repository	A JavaScript assignment with reduce, map, a class-based skills manager, a DateCalculator constructor, Vitest checks, and a browser demo that mirrors console output on the page.
JS 8️⃣	js-homework-08-dom-storage	🔗 Linked	Repository	A JavaScript DOM and browser storage assignment with dynamic element creation, encoded cookies, sessionStorage helpers, Vitest checks, and a browser demo that mirrors console output on the page.
JS 9️⃣	js-homework-09-dom-events	🔗 Linked	Repository	A JavaScript DOM events assignment with button click handling, mouse position tracking, delegated list clicks, Vitest checks, and a browser demo that mirrors console output on the page.
JS 🔟	-js-homework-10-carousel-	🔗 Linked	Repository	A responsive CANBY glass collection carousel with autoplay, previous and next controls, indicators, swipe and keyboard navigation, product copy updates, and Vitest checks.
JS 1️⃣1️⃣	js-homework-11-oop-carousel	🔗 Linked	Repository	A pure JavaScript CANBY carousel with separate class-based and prototype-based implementations, inheritance, dynamic controls, configurable autoplay, keyboard navigation, and mouse/touch swipe.
JS 1️⃣2️⃣	js-homework-12-testing	🔗 Linked	Repository	DOM event handlers for button clicks, mouse tracking, and delegated list interactions, tested with Vitest and jsdom.
JS 1️⃣3️⃣	js-homework-13-regular-expressions	🔗 Linked	Repository	Email and URL validation with regular expressions, additional edge-case tests, Vitest checks, and an interactive browser demo.
JS 1️⃣4️⃣	js-homework-14-fetch-crud	🔗 Linked	Repository	Interactive CRUD request builder using Fetch API, async/await, JSON, HTTP methods, status handling, and JSONPlaceholder.
JS 1️⃣5️⃣	js-homework-15-omdb-live-search	🔗 Linked	Repository	Responsive OMDb live search with debounced requests, pagination, interface states, poster fallbacks, and JavaScript-generated HTML and CSS.
JS 1️⃣6️⃣	js-homework-16-skyflow-gulp	🔗 Linked	Repository	Responsive Gulp automation dashboard with SCSS compilation, BrowserSync live reload, Autoprefixer, CSS property and media query sorting, source maps, and production CSS minification.
JS 1️⃣7️⃣	js-homework-17-mamma-agata-webpack	🔗 Linked	Repository	Responsive Mamma Agata cookbook launch and event landing page bundled with Webpack 5, featuring content-hashed assets, local fonts, vendor splitting, optimized images, and interactive JavaScript components.
JS 1️⃣8️⃣	js-homework-18-mamma-agata-webpack-advanced	🔗 Linked	Repository	Advanced Mamma Agata Webpack workflow with DevServer live reload, external production CSS, LESS and SCSS preprocessing, Babel, TypeScript, ESLint, and Webpack Bundle Analyzer.
JS 1️⃣9️⃣	js-homework-19-typescript-basic	🔗 Linked	Repository	TypeScript fundamentals with typed functions, custom object types, enums, default parameters, error handling, and automated Vitest tests.
JS 2️⃣0️⃣	js-homework-20-typescript-advanced	🔗 Linked	Repository	Advanced TypeScript practice with interfaces, method decorators, namespaces, typed profile creation, automated Vitest tests, and an interactive browser demo.
React 1️⃣	react-homework-01-init	🔗 Linked	Repository	A responsive React and TypeScript daily-focus application with reusable Button and Input components, shared validation, state updates, keyboard support, and automated Vitest tests.
React 2️⃣	react-homework-02-stateful-stateless	🔗 Linked	Repository	A React exercise focused on stateful and stateless components, component responsibilities, props, state, and reusable UI composition.
React 3️⃣	react-homework-03-controlled-uncontrolled	🔗 Linked	Repository	A responsive weather app with controlled city search, an uncontrolled observation form, and live weather loaded with useEffect.
React 4️⃣	react-homework-04-use-wanderly	🔗 Linked	Repository	A responsive travel inspiration app using React 19 use(), Suspense, and an ErrorBoundary for asynchronous destination recommendations.
React 5️⃣	react-homework-05-useeffect-axios-quakescope	🔗 Linked	Repository	A responsive seismic intelligence dashboard using React useEffect and Axios to visualize live and historical USGS earthquake data on an interactive 3D globe.
React 6️⃣	react-homework-06-react-router-atlasroute	🔗 Linked	Repository	A responsive country explorer SPA built with React Router 7, including nested and dynamic routes, loaders, query parameters, active navigation, and route-level error handling.
React 7️⃣	react-homework-07-react-context-atlasroute	🔗 Linked	Repository	AtlasRoute extended with React Context for persistent Light/Dark theme, Metric/Imperial units, saved countries, My Atlas, and optimized global state without prop drilling.
React 8️⃣	react-homework-08-redux-toolkit-atlasroute	🔗 Linked	Repository	AtlasRoute migrated to Redux Toolkit with centralized feature slices for preferences, saved countries, and recently viewed destinations, plus persisted global state.
React 9️⃣	react-homework-09-redux-thunk-atlasroute	🔗 Linked	Repository	AtlasRoute extended with async Redux Toolkit flows using createAsyncThunk, request lifecycle states, retryable errors, session caching, and live weather, local time, and climate insights.
React 🔟	react-homework-10-forms-validation-atlasroute	🔗 Linked	Repository	AtlasRoute extended with a two-step trip-planning flow using Formik + Yup and React Hook Form, including field and cross-field validation, accessible error states, Redux Toolkit persistence, and saved trip plans.
React 1️⃣1️⃣	react-homework-11-material-ui-atlasroute	🔗 Linked	Repository	AtlasRoute extended with Material UI, per-trip readiness tracking, named traveler checklists, responsive dialogs, saved-trip filtering and sorting, and persisted readiness state.
React 1️⃣2️⃣	react-homework-12-vitest-user-profile	🔗 Linked	Repository	A React profile project with async JSONPlaceholder data loading, loading/success/error states, retry handling, mocked fetch requests, and Vitest + React Testing Library tests.
React 1️⃣3️⃣	react-homework-13-memoization-noir-edit	🔗 Linked	Repository	A responsive NOIR / EDIT product catalogue demonstrating useMemo, useCallback, and React.memo with Baseline vs Optimized rendering, performance counters, filtering, sorting, favorites, product details, and responsive routing.
React 1️⃣4️⃣	react-homework-14-react-libraries-noir-edit	🔗 Linked	Repository	NOIR / EDIT extended with React Icons, React Toastify, and React Idle Timer, including session activity tracking, inactivity/resume feedback, reusable interface icons, toast notifications, filtering, sorting, favorites, product details, and responsive routing.
Full-Stack Project · P0	helmsight	🔗 Linked	Repository	A responsive project-delivery management workspace with portfolio health, governance, risks, milestones, EVM analytics, weekly reporting, and meeting notes. Built with React 19, Redux Toolkit, and React Router.

Repository Features

• Semantic HTML structure for clear and accessible page markup.
• Separate project organization for homework assignments.
• Reusable project organization with assets, pages, styles, and documentation.
• Custom CSS styling for layouts, navigation, cards, forms, tables, float compositions, landing pages, responsive states, and visual demos.
• Practice-focused pages that demonstrate specific HTML and CSS concepts.
• Responsive homework pages that adapt layout examples for tablets and mobile screens.
• Dynamic single-page homework apps with JavaScript-rendered sections, filters, modals, and persisted UI state.
• GitHub Pages support through direct links to local homework folders and separate repositories.
• Markdown documentation for the repository and selected homework projects.

Technologies Used

• HTML5
• CSS3
• JavaScript basics
• TypeScript
• React 19
• React Router 7
• React Context API
• Redux Toolkit
• React Redux
• Redux Thunk (createAsyncThunk)
• Formik
• Yup
• React Hook Form
• SVG assets
• Bootstrap 5
• SCSS
• Gulp
• BrowserSync
• PostCSS
• Autoprefixer
• cssnano
• Tailwind CSS 4
• Vite
• Webpack 5
• WebP images
• WOFF2 fonts
• Google Fonts
• Fetch API
• Async/Await
• OMDb API
• ESLint
• Vitest
• React Testing Library
• jsdom

Project Structure

full-stack-course/
├── homework-01/
├── homework-02/
├── homework-03/
│   ├── assets/
│   │   ├── css/
│   │   └── img/
│   ├── pages/
│   └── index.html
├── homework-04/
├── homework-06/
├── homework-07/
├── html-homework-08/
│   ├── assets/
│   │   ├── css/
│   │   ├── fonts/
│   │   └── img/
│   ├── index.html
│   └── README.md
├── html-homework-09-simple-site/
│   ├── assets/
│   │   ├── css/
│   │   └── img/
│   ├── index.html
│   └── README.md
├── index.html
├── package.json
└── README.md

How To Run

No build step is required for the HTML/CSS pages.

1. Open the project folder.
2. Choose one of the homework directories or use the root catalogue page.
3. Open the required index.html file in a browser.

For example:

html-homework-09-simple-site/index.html

Folder-based GitHub Pages links in this catalogue follow this pattern:

https://andrii-dolzhenko.github.io/full-stack-hero/html-homework-09-simple-site/

Separate homework repositories have their own GitHub Pages links, for example:

https://andrii-dolzhenko.github.io/homework-10-responsive-simple-site/

https://andrii-dolzhenko.github.io/homework-15-tailwind/

https://andrii-dolzhenko.github.io/homework-17-final-scss/

https://andrii-dolzhenko.github.io/js-homework-01-tests/

https://andrii-dolzhenko.github.io/js-homework-02-operators/

https://andrii-dolzhenko.github.io/js-homework-03-functions/

https://andrii-dolzhenko.github.io/js-homework-04-hof-closures/

https://andrii-dolzhenko.github.io/js-homework-05-this-bind/

https://andrii-dolzhenko.github.io/js-homework-06-map-set-classes/

https://andrii-dolzhenko.github.io/js-homework-07-array-date/

https://andrii-dolzhenko.github.io/js-homework-08-dom-storage/

https://andrii-dolzhenko.github.io/js-homework-09-dom-events/

https://andrii-dolzhenko.github.io/-js-homework-10-carousel-/

https://andrii-dolzhenko.github.io/js-homework-11-oop-carousel/

https://andrii-dolzhenko.github.io/js-homework-12-testing/

https://andrii-dolzhenko.github.io/js-homework-13-regular-expressions/

https://andrii-dolzhenko.github.io/js-homework-14-fetch-crud/

https://andrii-dolzhenko.github.io/js-homework-15-omdb-live-search/

https://andrii-dolzhenko.github.io/js-homework-16-skyflow-gulp/

https://andrii-dolzhenko.github.io/js-homework-17-mamma-agata-webpack/

https://andrii-dolzhenko.github.io/js-homework-18-mamma-agata-webpack-advanced/

https://andrii-dolzhenko.github.io/js-homework-19-typescript-basic/

https://andrii-dolzhenko.github.io/js-homework-20-typescript-advanced/

https://andrii-dolzhenko.github.io/react-homework-01-init/

https://andrii-dolzhenko.github.io/react-homework-02-stateful-stateless/

https://andrii-dolzhenko.github.io/react-homework-03-controlled-uncontrolled/

https://andrii-dolzhenko.github.io/react-homework-04-use-wanderly/

https://github.com/andrii-dolzhenko/react-homework-05-useeffect-axios-quakescope

https://andrii-dolzhenko.github.io/react-homework-06-react-router-atlasroute/

https://andrii-dolzhenko.github.io/react-homework-07-react-context-atlasroute/

https://andrii-dolzhenko.github.io/react-homework-08-redux-toolkit-atlasroute/

https://andrii-dolzhenko.github.io/react-homework-09-redux-thunk-atlasroute/

https://andrii-dolzhenko.github.io/react-homework-10-forms-validation-atlasroute/

https://andrii-dolzhenko.github.io/react-homework-11-material-ui-atlasroute/

https://andrii-dolzhenko.github.io/react-homework-12-vitest-user-profile/

https://andrii-dolzhenko.github.io/react-homework-13-memoization-noir-edit/

https://andrii-dolzhenko.github.io/react-homework-14-react-libraries-noir-edit/

https://andrii-dolzhenko.github.io/helmsight/

Learning Goals

This project helps practice:

• creating valid HTML page structures;

• linking pages together;

• building forms;

• styling layouts with CSS;

• working with images and SVG files;

• understanding CSS specificity;

• positioning blocks with float and margin;

• clearing floated layouts with clearfix;

• building responsive one-page landing pages;

• building interactive Bootstrap-based landing pages;

• aligning content with Flexbox;

• adapting layouts with media queries;

• testing responsive pages across mobile, tablet, laptop, and desktop widths;

• building utility-first responsive interfaces with Tailwind CSS;

• creating JavaScript variables with primitive and structured values;

• formatting numbers and working with BigInt values;

• using JavaScript operators, Math methods, string methods, and helper functions;

• writing JavaScript functions with objects, loops, switch cases, ternary operators, and callbacks;

• practicing higher-order functions, closures, currying, and function composition patterns;

• working with closure state, recursive callbacks, apply, and bind;

• building class-based JavaScript modules with Map and Set collections;

• using array reduce/map methods, class-based managers, and date constructors;

• creating DOM elements and working with cookies and sessionStorage;

• handling DOM events, mouse movement, and delegated list clicks;

• building a responsive product carousel with controls, indicators, swipe gestures, and keyboard navigation;

• implementing carousel inheritance with ES6 classes and explicit prototype chains;

• testing DOM event handlers with Vitest and jsdom;

• validating email addresses and website URLs with regular expressions;

• sending asynchronous CRUD requests with the Fetch API and handling JSON and HTTP statuses;

• building debounced OMDb live search with interface states, pagination, and poster fallbacks;

• automating SCSS compilation, live reload, CSS sorting, source maps, and production minification with Gulp;

• running JavaScript homework tests with Vitest;

• rendering dynamic single-page app sections from local JavaScript data;

• managing UI state, filters, modals, theme toggles, and localStorage;

• organizing SCSS with partial files, variables, mixins, and component sections;

• building animated mobile navigation and interactive hover/focus states;

• organizing project files;

• preparing a repository for front-end coursework.

• configuring advanced Webpack workflows with DevServer, LESS, SCSS, Babel, TypeScript, ESLint, and bundle analysis;

• practicing TypeScript fundamentals with typed functions, custom object types, enums, default parameters, and error handling.

• practicing advanced TypeScript with interfaces, method decorators, namespaces, typed profile creation, and scoped APIs.

• building reusable functional React components with typed props, state, shared event handlers, input validation, and responsive layouts.

• separating stateful and stateless React component responsibilities and passing data through props.

• working with controlled and uncontrolled form inputs and loading external data with useEffect.

• reading asynchronous Promise results with React 19 use(), displaying pending UI with Suspense, and handling rejected Promises with an ErrorBoundary.

• configuring client-side navigation with React Router 7, including nested and dynamic routes, loaders, query parameters, active links, and route-level error handling.

• managing application-wide state with React Context, including persistent theme and unit preferences, saved countries, memoized context actions, and deep consumers without prop drilling.

• managing application-wide state with Redux Toolkit using configureStore, createSlice, Provider, selectors, actions, persisted state, and independent feature slices.

• handling asynchronous Redux workflows with createAsyncThunk, pending / fulfilled / rejected lifecycle states, retryable errors, request deduplication, session caching, and API-driven country insights.

• testing asynchronous React component behavior with Vitest and React Testing Library, including mocked fetch requests, loading, success, error, and retry states.

• optimizing React rendering with useMemo, useCallback, and React.memo, comparing Baseline and Optimized behavior with render and calculation counters.

• integrating specialized React libraries such as React Icons, React Toastify, and React Idle Timer to add reusable iconography, non-blocking user feedback, and inactivity-aware session behavior.

• developing a project-delivery workspace with React Router, Redux Toolkit, EVM calculations, responsive dashboards, accessibility checks, and CI/CD deployment.

Author

© Andrii Dolzhenko. All Rights Reserved. 2026