Frontend Mentor - Product preview card component

This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

To build the Product preview card component according to the given designs, and make it look as close as possible.
The users should be able to:

• View the optimal layout depending on the users device's screen size
• See hover states for interactive elements (Add to Cart button)

Links

• Solution URL: Open GitHub repository
• Live Site URL: open GitHub Pages of repository

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• Grid
• Mobile-first workflow
• Node.js - Open source and multiplatform JavaScript runtime environment
• NPM - Package Manager for Node JavaScript platform
• Browsersync - Synchronous browser testing (in collaboration with Gulp)
• Gulp - Build tool used as workflow automation tool
• Sass - CSS Preprocessor (in collaboration with Gulp)
• GitHub - Technological platform based on Git
• Git - Free and open source distributed version control system

What I learned

1. Always use semantic compliants-standard HTML
2. To spend time looking at the details of the given designs, to create the application as close as possible to it
3. How CSS Grid works
4. How CSS shorthand properties such as font work (I always used the longhand properties)
5. How I can make the <del> element accessible
6. How Sass variables and partials work (the basics for now)
7. To always keep my CSS organized
8. To keep testing the application for accessibility

Continued development

The way I want to continue to develop myself is by focusing on laying out a proper foundation of HTML, CSS, and JavaScript. This is so I can build quality websites for clients, by just using the core languages of the Web. At the present, I am working on the above things by going through (interactive) articles on the MDN Web Docs (see chapter Useful resources).

Another way I want to improve my knowledge of these subjects is to do more challenges that Frontend Mentor is offering, starting at the lowest level and building that up to the more advanced ones.

Besides the above, I want to continue to develop myself by using several tools more often to improve my workflow, and spend less time doing things that can be automated.

A few tools that I will start using more often are:

1. Gulp
2. Git
3. GitHub

I will learn the above-mentioned points in-between but do not want to focus myself too much on those at the moment.

As soon as I am capable of creating quality websites from the core languages of the Web, I will start to learn JavaScript libraries and frameworks. Both of these change over time, so I do not want to spend my time on those before I have a solid understanding of prior mentioned languages.

Useful resources

• Transfonter - Has been used to convert the downloaded font files to woff and woff2 (most recent font formats, supported in all major browsers), and generate the corresponding @font-face css rulesets
• Frontend Mentor - Product preview card component challenge

Author

• LinkedIn - Yari Morcus
• Frontend Mentor - @YariMorcus