Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Landing page

SrLianGeβ€’ 20

@GonzDv

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


i find dificult how to put the image to the side the text. I need to understend better how to work padding and margin, i forget it lol Also i though in use variables in css is it wort using it?

Community feedback

Amer Shahβ€’ 260

@fggdbdsbfd

Posted

I'd be happy to give you some advice on the topic of landmarks in HTML documents! Here are some tips, presented in bullet points with a professional tone and a few helpful emojis:

-🏠 Every good HTML document should have a main landmark! This landmark helps users understand the structure of the page and navigate it more easily.

-πŸ“Œ The main landmark should typically be the <main> element. This element should contain the main content of the page, such as articles, posts, or product listings.

-πŸ”Ž You can use ARIA attributes to help identify your main landmark and make it more accessible to users who rely on assistive technologies.

-🧐 Remember that other landmarks, such as <header>, <nav>, <aside>, and <footer>, can also be helpful for organizing your content and making it easier to navigate.

-πŸ’» When designing your HTML document, it's important to consider the needs of all users, including those with disabilities. By using proper landmarks and ARIA attributes, you can make your site more accessible and user-friendly for everyone.

Choosing the right font for a project can greatly affect its overall look and readability. Here are some general tips to consider when selecting fonts:

-I hope these tips help you create an organized and accessible HTML document with a clear main landmark! If you have any more questions, feel free to ask.

Marked as helpful

0
Giuliaβ€’ 210

@GiuliaT97

Posted

Try this to center your card

body { font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; background-color: hsl(30, 38%, 92%); display: flex; flex-direction:column; align-items: center; }

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord