fcc

freecodecamp assignments

A repo to track my progress on FCC assignments.

Table of Contents

HTML

I have taken the freedom to add dark mode styling since I find it helpful to reduce eye strain. The original fcc labs from this section do not touch on custom styling in order to ease the learning curve.

HTML Basics

  1. Build a recipe page

    Topics: HTML boilerplate, headings, lists, and images.

  2. Build a Travel agency page

    Topics: Images, the figure and figcaption elements, and the anchor element.

  3. Build an Audio and Video Player

    Topics: Audio and video elements. User stories

  4. Build a Heart icon

    Topics: path, svg.

    We use vector elements to create a heart icon.

  5. Build a video compilation

    Topics: iframe, section.

    We use the iframe element to embed youtube videos, and the semantic section element. Videos were selected intentionally to make an Unreal Engine learning resources page.

Semantic HTML

  1. Build a Cat Blog Page

    Topics: Semantic html elements like nav, header, main, footer, and address.

  2. Build an Event Hub Page

    Topics: semantic html elements like section, article, time, and lists. The page holds info on future and past imaginary thematic events.

Forms and Tables

  1. Build a Hotel Feedback Form

    Topics: Forms and inputs - Guided. Workshop details

  2. Build a Survey Form

    Topics: Forms and different type of inputs. User stories.

    I chose Gen AI user experience as the topic for this lab.

  3. Build a Book Catalog Table

    Topics: Vanilla HTML tables, thead, tbody, tfoot. User stories.

    Content is about bestselling books.

Accessibility

  1. Build a Checkout Page

    Topics: Aria and alt attributes with inputs and images. User stories.

  2. Build a Movie Review Page

    Topics: Alt attributes, accessible lists, and hiding decorative content from screen readers. User stories

  3. Build a Multimedia Player

    Topics: accessibility principles for video and audio elements. User stories

CSS

CSS Basics

  1. Design a business card

    Topics: Margins, spacing, width, centering content, background and font color. User stories

  2. Build a To-do list

    Topics: Stylized lists, stylized links. User stories

  3. Design a Blog post card

    Topics: CSS selectors and classes, pseudo-classes, links, margins, spacing, width, centering content, background and font color. User stories

Absolute and relative units

  1. Build an Event Flyer Page

    Topics: Absolute and relative units, width, height, calc(), lists. User Stories