Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.

Test Accessibility and add correct html roles

Brief

Your challenge is to build out this e-commerce product page and get it looking as close to the design as possible.

Your users should be able to:

• #14
• #15
• #16
• #17
• #18
• #19

🗃 Assets provided

• JPEG design files for mobile & desktop layouts
• Style guide for fonts, colors, etc.
• Optimized image assets
• README file to help you get started
• HTML file with pre-written content

files

Your task is to build out the project to the designs inside the /design folder:

jpg Wireframe higth fidelity in design/*.jpg

• desktop
  • design
  • active-states
  • thank-you-state
• mobile
  • design
  • thank-you-state

file style-guide.md

• layout
• colors
• typography

Analyze and extract dimensions:

• font
• margin - padding
• width - heigth
• position
• states: active,hover, …

• Open new lightbox when clicking on big img

• Show ⬅ and ➡ buttons

• Click them to view next/prev img

• Show thumbnails list with show the active img

• Add ✖ button to exit

• the same for mobile but in main page, not in lightbox

Your challenge is to build out this interactive rating component and get it looking as close to the design as possible.

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Select and submit a number rating
• See the "Thank you" card state after submitting a rating

Cart Element 🛒:

• On click view Cart preview
  • Cart empy
    
  • Cart fill
    

Quantity buttons ➕/ ➖:

• ➖ button click, remove quantity
• ➕ button click, add quantity
• Add to Cart button click, Add quantity to Cart with right calc

Mobile Cart

• the same but centered
  

Write out the base styles for your project, including general content styles, such as font-family and font-size.

• Fix animation when close the menu
• Close menu when clicking on dark background

Navigate the slider using either their

• mouse
• trackpad or scroll
• keyboard ⬅➡

Your challenge is to build out this e-commerce homepage and get it looking as close to the design as possible.

Users should be able to:

• #34
• View the optimal layout for the site depending on their device's screen size
  • page layout
  • Nav Menu
  • slider
• Add interactivity
  • Nav menu
  • slider
• See hover states for all interactive elements on the page

🗃 Assets provided

• JPEG design files for mobile & desktop layouts
• Style guide for fonts, colors, etc.
• Optimized image assets
• README file to help you get started
• HTML file with pre-written content

files

Your task is to build out the project to the designs inside the /design folder:

jpg Wireframe higth fidelity in design/*.jpg

• desktop
  • design
    • active-state basked empty
    • active-state basked filled
  • design-lightbox
    • active-state basked empty
• mobile
  • design
    • active-state basked empty
    • active-state basked filled
  • design-menu

file style-guide.md

• layout
• colors
• typography

Analyze and extract dimensions:

• font
• margin - padding
• width - heigth
• position
• states: active,hover, …

feedback given from discord --> comment

To fix:

• use real html for radio inputs
• article
• style
• javascript

• #18 View cart
• remove items from the cart

Your users should be able to:

• Add their email and submit the form
• See a success message with their email after successfully submitting the form
• See form validation messages if:
  • The field is left empty
  • The email address is not formatted correctly
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

When I build the project, Parcel changes the filenames of the images and thus the rendering is compromised...

After my first report I had some suggestions to improve my solution:

• fix some html errors
• Change my listbox to a fieldset of radio inputs

Your challenge is to build out this 3-column preview card component and get it looking as close to the design as possible.

Your users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Provided by the customer:

file style-guide.md

• layout
• colors
• typography

jpg Wireframe higth fidelity in design/*.jpg

• desktop
  • preview
  • preview active-states
  • preview error-states
  • success message
  • success-active message
• mobile
  • preview
  • success message

Analyze and extract dimensions:

• font
• margin - padding
• width - heigth
• position
• states: active,hover, …

Update readme file to explain project

Update readme file to explain project

• nav link
• cart
• user icon
• img thumbnails
• quantity buttons
• Add to cart button

Feedback:

Implement main page with HTML and CSS for:

• desktop
• mobile

🗃 Assets provided

• JPEG design files for mobile & desktop layouts
• Style guide for fonts, colors, etc.
• Optimized image assets
• README file to help you get started
• HTML file with pre-written content

files

Your task is to build out the project to the designs inside the /design folder:

jpg Wireframe higth fidelity in design/*.jpg

• desktop
  • design
  • active-states
• mobile
  • design

file style-guide.md

• layout
• colors
• typography

Analyze and extract dimensions:

• font
• margin - padding
• width - heigth
• position
• states: active,hover, …

🗃 Assets provided

• JPEG design files for mobile & desktop layouts
• Style guide for fonts, colors, etc.
• Optimized image assets
• README file to help you get started
• HTML file with pre-written content

files

Your task is to build out the project to the designs inside the /design folder:

jpg Wireframe higth fidelity in design/*.jpg

• desktop
  • design
  • active-states
• mobile
  • design
  • navigation

file style-guide.md

• layout
• colors
• typography

Analyze and extract dimensions:

• font
• margin - padding
• width - heigth
• position
• states: active,hover, …