fyrfli
/
product-preview-card
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
6 Commits
1 Branch
0 Tags
1.6 MiB
 
 
 
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
Go to file
Camille Frantz a21c7d0c9b
fixed a typo 		7 months ago
.vault Initial; complete 7 months ago
css fixed the desktop image; updated README; pushing to github 7 months ago
img fixed the desktop image; updated README; pushing to github 7 months ago
.gitignore Initial; complete 7 months ago
README.md accidentally removed a heading in the README; added it back 7 months ago
docker-compose.yml fixed a typo 7 months ago
index.html fixed the desktop image; updated README; pushing to github 7 months ago

README.md

Frontend Mentor - Product preview card component solution

@fyrfli's solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Screenshot

Links

  • Solution URL: Code
  • Live Site URL: Live

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • Less CSS

What I learned

I tried doing this with Bootstrap at first but found I needed too many customized styles for my limited Boostrap knowledge. TailwindCSS is far easier to use on projects like this than Bootstrap is ... at least so it seems to me at the moment.

Further, I am so comfortable with Less at this point in time that it just seemed to be faster to get it done with Less. This took me just under 2 hours to complete.

Continued development

I want to try to learn more Bootstrap to get it done using that framework that way I can even add some Javascript to the page as well.

Author