This is my solution to the 'QR code component' challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.
- Solution URL: View the GitHub repository here
- Live Site URL: I have hosted the project on GitHub Pages here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox - CSS web layout model
- Bootstrap - CSS Framework
- TypeScript - Programming language that extends JavaScript
- React - JavaScript library
- Node.js - JavaScript runtime environment
- Vite - React build tool with local development server
- I learned that I can create custom font families by downloading and adding font files, then defining font faces in CSS using the '@font-face' rule:
@font-face {
font-family: "Outfit";
src: url("../assets/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
}- I learnt that I cannot open my React TypeScript app directly via the HTML file because the browser doesn't have the capability to handle the dynamic execution of TypeScript code or serve other assets.
- During development, I need tools like Vite to start a development server that handles dynamic transpiling of TypeScript and JSX to JavaScript, bundling, and serving of my app.
- For production, I need to run a build command to generate the production build of the app that includes the necessary JavaScript code bundled by Vite, CSS files, and assets. This build can be opened via its HTML file
- I also got more familiar with Bootstrap, Typescript and React.
- Bootstrap
- Typescript
- React
I found these techniques very useful. I will continue focusing on them in future projects to refine and perfect them.
- React Tutorial for Beginners - This is an amazing tutorial which helped me understand React, TypeScript and Bootstrap. I'd recommend it to anyone still learning these concepts.
- GitHub - @ArinzeGit
- Frontend Mentor - @ArinzeGit
- LinkedIn - @Dennings-Owoh
- Instagram - @_.arinze._
- Twitter - @Arinze98433402