View the site here
I wanted to learn how to transform a Figma design into a fully functioning website, improve my CSS skills, and create a modern and responsive React.js website so I built this website. I learn best by first studying the material and then doing a few projects to work out what I learned.
- React functional components and their reusability
- React file and folder structure
- Fundamental CSS properties to improve my flex & grid skills
- Fundamentals of the CSS BEM Model
- Animations and gradients
- Media queries for satisfactory responsiveness covering almost all devices
This project was bootstrapped with Create React App.
Clone the project and enter its root directory.
Install Node.js -> Instructions
Installs all of the project's dependencies.
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
After finding the design I created a basic React app and set up the file structure. Next, I added some basic styles to my CSS file that I knew I would be resuing. After that, I built each section in the order that they appear on the website, tweaking their responsiveness as I went. Lastly, I deploy the site to Github pages.
This project is finished.