All solutions

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

This was used mostly as practice for two things: semantic HTML and CSS positioning. I was able to create the layout I wanted without using pseudo-elements which I had been doing in the past.

One thing I did not attempt with this challenge was to use Javascript to impact active states. Since I wanted to focus mostly on honing my CSS skills, this inherently left me at a disadvantage when it comes to getting more Javascript practice. One thing that I struggled with for the CSS portion of the project was creating the overlay on the main card image. I was not able to get it color-perfect because I used opacity properties on the element behind it (which became above it on hover), thus was unable to set the opacity in the child image (eyeball) even using the !important declaration.

For this I used the CSS documentation on MDN.

Hello! Thank you for checking out my solution for this challenge.

This is my first attempt at using vanilla javascript for validation, and did not create individual validation functions for each scenario, rather, I used a sweeping function to check for invalid dates, leap years, etc.

I did my best to get the design as pixel-perfect as possible, but I am sure there are mistakes.

What I am looking for feedback on most are the following.

• Positioning, I struggled a lot with getting the submit button to be where I needed.
• Javascript syntax, while I understood what I needed to do, I had to use chatGPT to help me correct my syntax because I kept running into errors, specifically the validation functions.

I am more used to using things such as react which use a virtual DOM and components, so vanilla JS is foreign to me but something I believe is vital to learn before I continue into react, svelte or anything else.

• CSS: Grid, flexbox, pseudo-elements and pseudo-classes
• HTML: Semantic markup
• Javascript: React components for each section as well as navigation bar

• Most struggles were with styling, specifically positioning and active states
• Unable to create responsive navbar with Javascript, instead used :active/:focus-within pseudoclasses in order to create navbar, which resulted in being unable to properly close the navbar and posed further challenges for responsivity.
• For some reason the attribution footer seems to have disappeared. Is this because React prefers the only visible element be the #root div?

• VSCode
• CRA
• CSS, React documentation
• NPM

Styling used

• Grid for displaying main sections and containers
• Flexbox used for positioning internal elements
• Experimenting with nth-of-child/nth-of-type pseudo elements Tools Used
• For positioning the hero image, I did consult ChatGPT for some assistance as it was not responsive enough for my purposes
• CSS, HTML5 with semantic markup
• VS Code Dimensions
• Mobile 375x810
• Tablet 768x1280
• Desktop 1920x1080 Areas of Opportunity I struggled mostly with positioning. I like to believe I have strong styling skills, in terms of being able to generate color schemes, create borders, etc., but struggle with positioning, especially when trying to create a responsive page. Javascript was not used as I am still at a very base level knowledge of Javascript, but I believe it may have actually been a more helpful idea to use for responsive positioning. As I am focused more on broad styling, I did not bother with the background pattern images, but if I am not mistaken the two within the hero section would be positioned absolutely with overflow hidden.

Please provide any feedback you can on both my styling and my actual code - I know it definitely needs refactoring, but I am not sure where to start.

Hi all! Please provide me with any feedback you can.

I used Grid for the main 'card' container while I used flex-box for all the components of the 'card'.

Here are the things I am struggling with, still:

The background images do not display on github, although the relative filepaths are correct. When opening the file in live server, it works fine.

Other than that, I think I got pretty close! let me know how I did.

I struggled with positioning elements on the desktop version of the page. This is likely because I didn't take a mobile-first approach with my styling and instead designed it on desktop first, rather than using media queries for desktop. Please provide feedback on positioning and code.

Attached is my solution for the challenge. I do not believe I was successful, because I cannot get the content within the product card to maintain relevant sizing to the card itself. I attempted to use display: relative on the container while using display: absolute on the inner two elements (the image and the "content", which is everything else), but was unable to do so. Can anyone provide me feedback on my solution so that I can know how to fix it in the future? Thank you.