Any constructive feedback is welcome :) **Technologies used** 1. ReactJS, Vite, React Router Dom, Jest(https://www.npmjs.com/package/jest) 2. Custom CSS 3. Google fonts **What I learned** ***Using props for CSS*** - To avoid rewriting code, I learned to use props for CSS, for example: ```html

``` ***Scaling SVGs*** - During this I have learned to scale SVGs with the transform property, by taking the width and height of the SVG and adapting that. - For example, if the SVG was 'width: 450' the css property would be: ```css .svg-image { transform: scale(0.45); } ``` - You can then use this and adapt it for different screen sizes, for example I added 10 for tablets and small screens and an extra 30 for desktops. ***Nested routes in react router dom*** - In react router dom, they have nested routes so that you can have multiple navigations on one page. - For example in the main App/Routes component you can have: ```js }> }/> } /> } /> ``` - Then in the component you would Links or NavLinks like: ```js 01 Overview 02 Structure 03 Surface ``` - Note: NavLink comes with an isActive/.active class to easily style the links, whilst Link does not. **Useful resources** - [React Router Dom - Nestest Routes](https://www.robinwieruch.de/react-router-nested-routes/) - This article helped to understand nested routes in react router dom, I'd recommend it to anyone still learning this concept. - [React Router Docs](https://reactrouter.com/en/main/components/nav-link) - This is the react router documentation - Read it, documentation is good! - [Scaling SVGS](https://css-tricks.com/scale-svg/) - CSS-Tricks helps with any CSS needs, this article explains SVGS in detail.

Becki

All solutions

Responsive web page, ReactJS, React router dom