A 14-week structured curriculum for Frontend Web Development covering HTML, CSS, and DOM manipulation.
Note: JavaScript fundamentals (variables, functions, loops, arrays, objects) are covered in the Fundamentals of Programming module.
- Follow the numbered phases - Topics build on each other
- Complete all exercises - Practice is essential
- Build the projects - Apply what you learn
- Review regularly - Reinforce your knowledge
- Phase 1: HTML Fundamentals (6 topics)
- Phase 2: CSS Fundamentals (7 topics)
- Phase 3: CSS Layouts (5 topics)
- Phase 4: CSS Advanced (6 topics)
- Phase 5: DOM Manipulation (7 topics)
- Phase 6: Advanced JavaScript (2 topics)
- Phase 7: Projects (2 classwork projects)
- Phase 8: Best Practices (4 topics)
Location: classwork/01-html-fundamentals/basic-elements/
Topics: Headings, paragraphs, links, images, horizontal rules
Location: classwork/01-html-fundamentals/lists-and-text-formatting/
Topics: Ordered/unordered/description lists, text formatting tags
Location: classwork/01-html-fundamentals/tables/
Topics: Table structure, headers, rows, cells, styling
Location: classwork/01-html-fundamentals/forms/
Topics: Input types, labels, validation, form submission
Location: classwork/01-html-fundamentals/semantic-html/
Topics: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
Location: classwork/01-html-fundamentals/media-elements/
Topics: <audio>, <video>, <iframe>, embedding content
Location: classwork/02-css-fundamentals/css-link/
Topics: External, internal, inline styles
Location: classwork/02-css-fundamentals/colors/
Topics: RGB, HEX, HSL, named colors, opacity
Location: classwork/02-css-fundamentals/selectors-in-css/
Topics: Element, class, ID, attribute, pseudo-classes
Location: classwork/02-css-fundamentals/box-model/
Topics: Content, padding, border, margin, box-sizing
Location: classwork/02-css-fundamentals/units-and-values/
Topics: px, em, rem, %, vh, vw, calc()
Location: classwork/02-css-fundamentals/display-property/
Topics: Block, inline, inline-block, none
Location: classwork/02-css-fundamentals/fonts-and-typography/
Topics: Font properties, Google Fonts, custom fonts
Location: classwork/03-css-layouts/positioning/
Topics: Static, relative, absolute, fixed, sticky
Location: classwork/03-css-layouts/flexbox/
Topics: Flex container, flex items, alignment, ordering
Location: classwork/03-css-layouts/grids/
Topics: Grid container, template areas, responsive grids
Location: classwork/03-css-layouts/float-and-clear/
Topics: Float property, clearing floats, legacy layouts
Location: classwork/03-css-layouts/responsive-design/
Topics: Media queries, mobile-first, breakpoints
Location: classwork/04-css-advanced/pseudo-classes-elements/
Topics: :hover, :nth-child(), ::before, ::after
Location: classwork/04-css-advanced/transitions/
Topics: Transition properties, timing functions, delays
Location: classwork/04-css-advanced/transformations/
Topics: Translate, rotate, scale, skew, 3D transforms
Location: classwork/04-css-advanced/animations/
Topics: Keyframes, animation properties, timing
Location: classwork/04-css-advanced/css-variables/
Topics: Custom properties, theming, dynamic values
Location: classwork/04-css-advanced/bootstrap/
Topics: Grid system, components, utilities
Prerequisites: JavaScript fundamentals from Fundamentals of Programming module
Location: classwork/04-dom-manipulation/selecting-elements/
Topics: getElementById, querySelector, querySelectorAll
Location: classwork/04-dom-manipulation/modifying-elements/
Topics: innerHTML, textContent, classList, attributes
Location: classwork/04-dom-manipulation/events/
Topics: Event listeners, event object, bubbling/capturing
Location: classwork/04-dom-manipulation/shopping-list/
Topics: Array manipulation, event delegation
Location: classwork/04-dom-manipulation/login-signup/
Topics: Local storage, form handling
Location: classwork/04-dom-manipulation/validation-classwork/
Topics: Client-side validation, error messages
Location: classwork/04-dom-manipulation/regex-validation/
Topics: Regular expressions, pattern matching
Location: classwork/05-advanced-javascript/web-storage/
Topics: localStorage, sessionStorage, cookies
Location: classwork/05-advanced-javascript/jquery-basics/
Topics: Selectors, DOM manipulation, events, AJAX
Location: classwork/06-projects/crud-app/
Topics: Create, Read, Update, Delete operations
Location: classwork/06-projects/calculator/
Topics: DOM manipulation, event handling, arithmetic operations
Location: classwork/07-best-practices/accessibility/
Topics: ARIA, semantic HTML, keyboard navigation
Location: classwork/07-best-practices/performance/
Topics: Optimization, lazy loading, minification
Location: classwork/07-best-practices/debugging/
Topics: Browser DevTools, console methods, breakpoints
Location: classwork/07-best-practices/git-basics/
Topics: Version control, commits, branches, GitHub
Located in projects/ (self-directed):
Topics: Filters, local storage, drag & drop
Topics: API integration, async data (uses Fetch API - self-explored)
Topics: Responsive design, animations, best practices
The following topics were explored independently (covered in Fundamentals of Programming):
- Async JavaScript - Promises, async/await, setTimeout
- Fetch API - Making HTTP requests to APIs
- JSON - Working with JSON data
Location: assignments/assignment-1/
Recommended After: Phase 1
Location: assignments/assignment-2/
Recommended After: Phase 3
Location: assignments/lab-exercise-1/
As assigned
Repository: https://github.com/Bomjan/groupwork1_s1
Focus: HTML and CSS fundamentals
Repository: https://github.com/Bomjan/groupwork2_s1
Focus: JavaScript DOM manipulation and responsive design
- Code along - Don't just read, type the code
- Experiment - Try variations and break things
- Build projects - Apply what you learn
- Ask questions - Use MDN, Stack Overflow, forums
- Review regularly - Spaced repetition helps retention
- Take breaks - Avoid burnout
- Join communities - Learn from others
Duration: 14 weeks
Focus: HTML, CSS, and DOM Manipulation
Prerequisites: Fundamentals of Programming module