Frontend Mentor - Product preview card component solution

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

Inshot challenge

The challenge

Users should be able to:

Your users should be able to:

  • See the social media share links when they click the share icon
  • View the optimal layout for each page depending on their device's screen size
  • See hover states for all interactive elements on the page

Links

Live Site

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • javascript

What I learned

in this project i learned how to manipulate the dom with javascript

<h1>Some HTML code I'm proud of</h1>
<main>
<section>
<img>
.proud-of-this-css {
  :hover
  padding 
  display: grid
}
let me = document.getElementById("id name")

me.classList.add("classElement")

 if (!isItemOpen) {
            item.classList.toggle("open")
            
        }

Continued development

i will like to focus on how to use javascript to manipulate the dom, learning more javascript symtax to help modify the frondend of a web-page

Author