CS50 Week 8 HTML CSS JavaScript — Building a Trivia App and a Seven-Theme Developer Portfolio
- Parsa Dev
- Feb 10
- 3 min read
Week 8 of CS50x is the first week where the output is something you can actually open in a browser and show to someone. The two problems are Trivia and Homepage — and while Trivia is a focused exercise in DOM manipulation, Homepage is a full multi-page website with real design decisions behind it. Trivia is the warm-up: a two-part quiz page where the first question is multiple choice and the second is a free text response. The JavaScript listens for button clicks using querySelectorAll to grab all elements with the incorrect class and a separate querySelector for the single correct button, then changes background colours to red or green depending on the answer and injects feedback text into a <p> element beneath the question. The free response section does the same thing but compares the input field's value against the expected answer string — in this case Switzerland, for the genuinely interesting law about guinea pigs not being kept alone. The custom CSS in Trivia keeps things clean: a blue header, hover transitions on the content sections, and light blue button styling that gives the page a bit of personality without overcomplicating it.
Homepage is where the week gets interesting. The spec asks for four linked HTML pages, ten distinct HTML tags, Bootstrap integration, a custom CSS file with five or more selectors and properties, and some JavaScript interactivity. What was built goes considerably beyond that. The site is a four-page professional developer portfolio for ParsaDev — Home, About, Skills & Services, and Contact — with a seven-theme colour palette system powered entirely by CSS custom properties. Each theme is defined as a [data-theme] attribute selector that sets variables for the background, accent colours, text, and button styles across the whole site. Switching themes calls changeTheme() in JavaScript, which updates the data-theme attribute on the <html> element and saves the selection to localStorage so it persists across pages and sessions. On desktop, themes are accessible via a dropdown in the navigation bar; on mobile, a grid of seven coloured squares appears inside the hamburger menu. The active theme gets a highlighted border, giving immediate visual feedback. Bootstrap 5.3's responsive grid handles the page layout throughout — two-column sections that stack to single column on mobile, a three-column footer that collapses gracefully, and a sticky navbar with a hamburger toggler on smaller screens. Scroll animations are handled with the Intersection Observer API, which adds a fade-in class to each section as it enters the viewport.
The most technically satisfying part of the Homepage build is how the theme system interacts with Bootstrap. Rather than fighting Bootstrap's default colour classes, the custom CSS uses CSS variable overrides — every colour value in .navbar-custom, .section-box, .btn-custom, and the footer is drawn from the active theme's variables, which means the entire site's palette changes in a single JavaScript call. The eleven distinct HTML tags used across the site include semantic elements like <nav>, <section>, and <footer>, as well as structural ones like <div>, <ul>, <li>, <img>, headings, <a>, <button>, and <i> for Bootstrap icons — well above the ten required. The CSS selectors cover attribute selectors, class selectors, combined selectors, tag selectors, and pseudo-class selectors like :hover, and the properties used include background-color, color, font-family, padding, margin, border-radius, box-shadow, transition, transform, and opacity. The full code for this week is on GitHub — browse the Trivia folder and the Homepage folder directly, or explore the entire CS50x repository to follow the course week by week.
Comments