Building a News Website from HTML, SCSS, and JavaScript

Objective

Creating a responsive News website using HTML, SCSS, and JavaScript while detailing the development process.

Project Setup

• Tools: Using Vite to compile SCSS files and run a local server.
• Design Source: Figma design from Frontend Mentor Challenge.
• File Management: Remove unnecessary starter files provided by Vite.

Global Styles

• Color & Typography: Saving design colors as CSS custom properties.
• Responsive Fonts: Using fluid typography calculator to set font sizes with clamp function.
• Accessibility: Converting pixels to REM units using a SAS function and setting font sizes as custom properties.

Image Optimization

• Export Formats: SVG for logos, JPEG for photographic images.
• Optimization Tool: TinyPNG for image optimization.

HTML Markup

• Semantic Structure:
  • Header for navigation.
  • Main tag for website sections.
  • Using semantic tags like article for standalone content.

CSS Styling

Basic Styling

• Wrapper Class: Uses min function to control content width.
• Navigation: Flexbox and media queries for responsive design.

Feature Section

• SASS Partial: Created for feature-specific styles.
• Issues: Challenges with clamp function workaround.

New Section

• Styling Approach: Utilizing block elements with BEM methodology.

Blog Section

• Grid Layout: CSS Grid for layout; aligning with Flexbox properties.

Responsive Design

Mobile Layout

• CSS Grid: Adjustments for single column layout.
• Nested Grid: Features utilize subgrid within main grid.

Desktop Layout

• Grid Template: Designed with multiple columns and rows for wider viewports.
• Adjustments: Subgrid usage for efficient style management.

Navigation and Accessibility

Desktop Navigation

• Flexbox: For alignment and spacing.

Mobile Navigation

• Hamburger Menu: Utilizes Flexbox and requires image exports.
• JavaScript: Used for menu toggle with attention to screen reader accessibility.

Accessibility Enhancements

• Keyboard & Screen Readers: Proper aria attributes, inert properties, and focus management.
• Accessibility Tools: Utilizing developer accessibility features and practical accessibility learning resources.

Reflections and Resources

• SASS Issues: Troubleshooting function interpolation for CSS custom properties.
• Accessibility Learning: Mention of Sarah Swan's accessibility course.
• Additional Content: A full 5-hour coding video available on Coder Coder Builds channel.

This project demonstrates the transformation of a design into a fully responsive website using modern front-end technologies with an emphasis on accessibility.