This is a solution to the QR Code Component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
A simple project using pure HTML5 and CSS3 showcasing a QR code landing page that leads the visitor to Frontend Mentor website.
The app will be available at http://localhost:3000/
- I started with the markup on index.html, complying with HTML5 semantic tags and standards as much as possible.
- The styling provided by the project briefing was implemented first, followed by the classes I came up with on the markup.
- I used Figma to acquire all the right dimensions involved in the layout and implemented them in the appropriate CSS classes.
- The CSS Cube methodology was used when coding the stylesheet and some of the conventions from BEM were used when naming classes.
- Semantic HTML5 markup
- Mobile-first workflow
- One of several optimal ways of centering an element on the screen while ensuring responsiveness.
- Gave my first shot at applying the CUBE CSS methodology to a project
- Used the CSS reset by Andy Bell
- Used Netlify for deployment of a static website for the first time
- Implemented a simple CI/CD pipeline that:
- Checks the project's NPM packages for security vulnerabilities
- Lints all the code with ESLint
- Publishes an image of the NodeJS app to my repository on DockerHub for deployment