The project was the culmination of the Scrimba Responsive Design Module. The module covered responsive design concepts including:
- Thinking responsively;
- Relative CSS units;
- Relative line-height;
- Media queries;
- Mobile-first design;
- Responsive site nav;
- Flex-box features;
- Grid features;
The project aim was to build a three-page blog site comprising home page, about me page and feature page. The site was built from scratch according to a Figma design spec. Most of the images used were exported from the Figma file. Additional images for the blog-cards were downloaded from Unsplash plus personal photo used for about me page. All project requirements were met as follows:
- Build each page from scratch using HTML and CSS;
- Make all pages responsive including: relative units, mobile first design, media queries, flex-box and css-grid skills, viewport meta tag;
The following stretch goals were also met:
- Make it your own - content about own learning experiences;
- Display / hide additional recent posts after clicking "view more" / "view less";
- Responsive navigation displaying a "hamburger menu" on smaller screens;
The following additional features were also incorporated:
- Using JavaScript to render the posts, header and footer, including modular JS;
- Using CSS to produce a subtle zoom effect on the home-page main image to indicate the link to the feature page.
The project used mobile-first design apart from the navigation, as demonstrated as part of the teaching for this module. On reflection, mobile-first should be employed throughout the design to avoid a pixel which falls between screen sizes.
Photos from Unsplash: Anoushka P, Miguel Bruna, Artem Sapegin
Frances Hitchcock, 30 November 2022