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
OverviewSolutions3Comments5116

All comments

  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Company logo's alt tag descriptions should NEVER include the keyword "logo"; It should only state the company's name.
    • Remove all the article elements you added, as they are being used incorrectly and not needed for this challenge.
    • Your email input is missing a label which will be visually hidden.
    • The illustration is purely decorative, so it's better off to leave the alt description blank.
    • The social media logos need to interactive. So they need to be wrapped inside an anchor element. They should also be built as an unordered list.
    • The JS for your email input validation needs work, as email@[email protected] is considered valid. You also want to add some sort of confirmation to valid emails as I wasn't sure if the validation was working.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    Regarding your question, you will use position: absolute on the button and relative on the form. You can then align the button using top, left, etc...

    • Currently, from 320px - 1000px your content is broken ⚠️ with both mobile/desktop images displaying at the same time and content overlapping.
    • For the image, I highly suggest using the picture element and allowing the browser to handled which image to show.
    • Company logo alt descriptions should ALWAYS state the company's name.
    • The header should be outside the main element for semantic purposes.
    • The heading "We're coming soon" should be wrapped in a h1 heading.
    • Your email input needs to have a label which you'll want to accessible hide.
    • Your "thank you" and "error message" should be handled by your JS and they should be inside the form (you will also want to give them an aria-live to notify low vision users of changes and an aria-describedby to link them to the input)
    • Your email validation needs to be reworked, as it currently accepts email@[email protected] as a valid email.
    • For you widths and heights avoid using values such as vw; or percentages as they can cause you to lose control of your content. Instead use rem or em. More info on topic https://web.dev/learn/design/.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Unfortunately, there are countless things that need to be improved that I would not expect at this challenge level...

    For example:

    • This should be a header element and not a div.

    • Company logo alt descriptions should NEVER ❌ be "logo"; it should always state the company's name.

    • Your nav button is inaccessible ⚠️. This because you built it using a div (<div class="open-nav-div">) when it should off been built using a button.

    • The list items inside the nav menu should be wrapped inside an anchor element in order for them to be interactive.

    These are just a few things that need to be fixed... there are a whole lot more things that need improvement.

    I strongly recommend checking out https://web.dev/learn/html/ to enhance your web development knowledge. This resource can be instrumental in helping you avoid the types of mistakes that may arise in your future projects.

    Upon reviewing your profile, I've noticed that you appear to be rapidly tackling various challenges, with near-daily postings. It seems that your primary emphasis is on animation rather than the quality and accessibility of your code.

    As a web developer, it's crucial to make quality code (error free, semantically correct, proper usage of elements, etc...) and accessibility your top priorities. These aspects are what distinguish an average developer from an outstanding one.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Every site should ALWAY have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

    More Info: 📚

    MDN Main Element

    • The logo’s alt tag description needs to be improved upon ⚠️; it should state the company’s name.
    • Your email input and button needs to be wrapped inside a form and have a visibly hidden label attached to it for improved accessibility.
    • The social media icons are missing⚠️ from your site.
    • Your email validation needs work as email@[email protected] is considered a valid email, when it should not.
    • When the user enters a valid email⚠️, It should have some sort of confirmation stating that the email is valid to improve user experience ✅.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey @Grind3189 👋! Congrats on completing this challenge!

    Unfortunately, since you have added a login/sign-up screen and made it a requirement for users to create an account, it has made receiving proper feedback, difficult, as this is considered bad practice, especially if you are showcasing a project.

    I highly recommend adding a "guest" login to allow users to enjoy your site while still keeping your login/sign-up screen.

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Unfortunately, there are a lot of mistakes been that I would not expect at this challenge level.

    I noticed that you are not receiving feedback in your previous challenges, In that case I would recommend reading the feedback others receive to improve all your previous challenges.

    Here are some suggestions to help improve your code:

    • The header should always be outside⚠️ of the main element to make semantic sense.
    • Swap <section class="banner-section"> with a header element and <header class="header container"> into a div.
    • The logo's anchor should have an aria-label⚠️ and it should state the company's logo name and where it leads to.
    • There is NO❌ reason to have code for two separate navigation menus. There should only be one and you will CSS to style it for different layouts.
    • The navigation "button" has to be a built using a button⚠️ since it doing an action (open/close menu); Currently, it is not accessible.

    • Text should not be all uppercase <h1 class="hero-h1">IMMERSIVE EXPERIENCES THAT DELIVER</h1> as it is not screenreader friendly😢, instead use CSS to do so.

    • The buttons in the creation portion should be anchor⚠️ elements, as they would most likely direct users to other parts of your site.

    • Skipping heading levels is something that is not allowed❌ in web dev. In your case, you can't jump from h2 to h4.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • InterceptorTT• 390

    @InterceptorTT

    Submitted

    Cool challenge! I struggle a little bit in figurin' out how to do the second section (interactive), and as you can see the part of the text is not properly aligned with the rest of the layout. I'm curious to see how you did it! any suggestion would be appreciated anyway!

    Responsive Loopstudio landing page

    1

    P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Unfortunalty, there are a lot issues that I would not expect at this challenge level... I would highly recommend starting with an easier challenge.

    Here are some suggestions to help improve your code:

    • Your navigation needs to be rewritten⚠️. There should not be two separate codes for your navigation menu, there should only be one and you will use CSS to style it for mobile/desktop.
    • Since your logo is wrapped inside an anchor element, you need to include ⚠️ an aria-label stating the logo's name ("Loopstudios") and where it leads to ("Home").
    • The nav toggle should be the first thing inside of the nav to improve accessibility and it should⚠️ be a button not an anchor. It should also have aria-expanded, area-label and an aria-control.
    • Remove all the br elements you have added, they are being used incorrectly🚩.
    • For the card, instead of doing this [example provided at bottom of text], it far better to use the picture element.

    ❌:

     <a href="#" class="img-desktop"><img src="images/desktop/image-deep-earth.jpg" alt="#"></a>
<a href="#" class="img-mobile"><img src="images/mobile/image-deep-earth.jpg" alt="#"></a>
    • In the card, the images should not❌ be the element that is interactive, it should be the text and you have the text "breakout" to make the entire card interactive.

    Here is a helpful article on how to achieve that https://piccalil.li/tutorial/create-a-semantic-break-out-button-to-make-an-entire-element-clickable/

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • P
    Carlito• 190

    @Introxiety

    Submitted

    I'm not sure if my grid layout approach is optimal. If you have any feedback or if I've included unnecessary elements, I would appreciate your guidance and corrections. Thank you.

    GRID & PSEUDO SELECTORS

    2

    P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • For the icons, just leave the alt blank, no for alt="_blank".
    • There's no need to do this #grid-blocks>div:nth-child(3), it only complicates things. Instead give the card a class and use that for styling.
    • Using CSS Grid with Grid-Template-Areas will make things way easier 💯 when building the layout; it will give you full control of the layout.
    • I would definitely add ⚠️ a third layout between, maybe, 650 - 1000px as your layout is just a single column until 1440px.
    • You definitely want to use variables, at minimum, for your colors as it will help keep things organize and easier to maintain.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The only headings ⚠️ in this component are the names of each individual; “Daniel Clifford”, “Jonathan Walters”, “Jeanette Harmon”, “Patrick Abrams” and “Kira Whittle”. Everything else should be wrapped in a paragraph element.
    • The profile images alt tags need to be improved ⚠️. It should ALWAYS and only state the person’s full name.
    • Remove all the br elements you added; they are being used incorrectly ⚠️.
    • The article element is not the best choice ❌ for wrapping these testimonials. In order to use the article element the component needs to be able to make sense on its own and be independently distributable (can be used in on another site). These testimonials cannot do neither.

    More Info:📚

    MDN Article Element

    • For the testimonials, it is best ✅ to to wrap each individual testimonial component in a figure element, the individuals information should be wrapped in a figcaption element and lastly, the testimonial itself should be wrapped in a blockquote element.

    Code:

    <figure>
   <figcaption></figcaption>
   <blockquote></blockquote>
</figure>

    More Info:📚

    MDN Figure Element

    • Level 4 media queries are not fully supported ⚠️, so you component is stuck in mobile layout.

    More Info:📚 MDN Media Queries

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Unfortunately, you code is not ❌ accessible (even though you tagged that it was). Here are some suggestions to help improve your code:

    • The web development process can be made easier and expedite the process 🚀 by implementing a CSS Reset. Here are some examples that you can freely use 😁: Josh Comeau Reset, Eric Meyer Reset

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • Richard• 320

    @riwepo

    Submitted

    This project took a long time, following along with Kevin Powel, then adapting the things he did to work with react.js and a component centric way of building. It took me a couple of false starts until I worked out a way to adapt what he was doing.

    I learned a huge amount from this project, a lot more than I thought I would! I highly recommend it to anyone thinking of doing it.

    Kevin explains everything very well, but there was one thing I didn't understand. When developing his font size system, he calls the font sizes --fs-900, --fs-800, --fs-700 etc. down to --fs-400. I have no idea where he got these names/numbers from?? There was nothing in the Figma design file like this, and I couldn't find anything on google about it.

    space tourism multi-page site from figma design using react.js

    #react

    1

    P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey @riwepo! Congrats on completing this challenge!

    Regarding Kevin Powell's font size naming, that is just his preferred naming method for his variables. There is no set naming convention for variables, so people just name whatever they prefer.

    0
  • Caleb Sim• 410

    @CodeLamp168

    Submitted

    HELLO THERE

    This would be the fifth time I had created a multi page website using Vite REACT and the second time creating this challenge project from scratch

    I had spent about a week building and debugging.

    Challenge Faced:

    • The hardest part here would be deploying the react app to the gh-pages. Took a while but finally figured out a solution.

    • Did my best to manage the scss for each website and making it as "optimized" and "clean" as it could be. Although personally Tailwind would be more preferable

    Things I learned

    • How to display a REACT app on a gh-pages.
    • How REACT projects display images and assets in gh-pages and what needs to be fixed in your code for it to display

    SPACE TOURISM VITE REACT AND SCSS

    #sass/scss#vite#react

    2

    P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey @CodeLamp168, here is some feedback on your submission for this challenge. For this feedback, I'll only focus on three (3) improvements.

    • Your src folder lacks proper structure and organization, I highly recommend reorganizing your folder. Organizing your React src folder is essential for maintaining a clean and maintainable codebase as your application grows. A well-organized folder structure makes it easier for you and your team to find and manage files efficiently.
    • To better improve the navigation system of your React app, I would highly recommend using routes to all the different pages your app has.

    So something like this:

    function App() {
  return (
        <BrowserRouter>
        <Routes>
          <Route path="/" element={Home} />
          <Route path="/destinations" element={Destinations} />
          <Route path="/crew" element={Crew} />
          <Route path="/tech" element={Tech} />
        </Routes>
        <BrowserRouter>
  );
}
    • For navigation component, instead of doing this <NavItem navNum="00" navKey="home" NavSite="HOME" /> you can mainstream the code and use either <Link to="/">Home</Link> or <NavLink to="/">Home</Link>.
    0
  • P
    Brice THIBAULT• 100

    @Darkjulius

    Submitted

    Hello to all. Here is my solution for this project. As for previous projects, I'm not sure about the semantics but I think I respected it. I had some difficulties on the Responsive part but it will eventually come back. If you have any advice, I'll take it. Good day.

    Responsive Single Price Grid Component using CSS Flexbox

    4

    P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Remove all the article and section elements you added as they are being used incorrectly ❌, since this is a component.
    • Your "button" was created with the incorrect element ❌. When the user clicks on the button they should be directed to a different part of you site. The anchor tag will achieve this.
    • In your CSS file, you want to ensure you are checking ⚠️ for any repeated code to remove it and are utilizing your variables constantly.

    More Info:📚

    MDN The Anchor element

    • There is no need ⚠️ to nest your styles in this .container > section > article:first-child manner. Instead target the class of the element you wish to style. This will make it easier to maintain as your project sizes increase.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • Roberto Rojas• 100

    @roberto-j-rojas

    Submitted

    The only issue I had with this one is that I didn't know whether I should use three h1 tags.

    I would really appreciate any feedback, it would be very helpful for me to improve my skills.

    Thanks for reading :)

    3 Columns Preview card using SASS/SCSS

    #sass/scss

    2

    P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    Regarding your question, the h1 heading is only able to be used once per page as it is a crucial heading off any website. Think of to as a book's title; there is only one.

    So for this challenge, the best option would be to use an h2 heading.

    • Remove all the section element you added; They are being used incorrectly ❌, as this a component and not a site section.
    • The “car icons” in this component are purely decorative⚠️. Their alt tag should be left blank to remove them from assistive technology.
    • Your "buttons" were created with the incorrect element ❌. When the user clicks on the button they should be directed to a different part of you site. The anchor tag will achieve this.

    More Info:📚

    MDN The Anchor element

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Remove all the br elements you added, they are not ❌ being used correctly.
    • The HTML for the ratings needs to be rewritten as it was done incorrectly ❌:

    To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.

    1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
    2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
    3. The last thing you will want to include will be a button so users can submit their choice.

    More Info: 📚

    MDN: Form Element

    MDN: <input type="radio">

    MDN: Field Set Element

    • Once the top is implemented , for your JS, the eventListener should be on the form as a submit.

    More Info:📚

    Click vs. Submit EventListeners

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    2
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    Regarding your question, the background looks fine.

    But your HTML needs a lot of work...

    • The section element is being used incorrectly ⚠️ and not needed for this challenge. Instead use div.
    • The HTML for the ratings needs to be rewritten as it was done incorrectly ❌:

    To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.

    1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
    2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
    3. The last thing you will want to include will be a button so users can submit their choice.

    More Info: 📚

    MDN: Form Element

    MDN: <input type="radio">

    MDN: Field Set Element

    • Once the top is implemented , for your JS, the eventListener should be on the form as a submit.

    More Info:📚

    Click vs. Submit EventListeners

    • The “icons/illustrations” in this component are purely decorative. ⚠️ Their alt tag should be left blank to hide them from assistive technology.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • The web development process can be made easier and expedite the process 🚀 by implementing a CSS Reset.

    Here are some examples that you can freely use:

    Josh Comeau Reset

    Eric Meyer Reset

    • It is best practice ✅ to use, classes for styling purposes, while using ids solely for JavaScript.
    • Implement a "Mobile First" approach 📱 > 🖥

    Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

    More Info: 📚

    Mobile First

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    The paragraph element is not an interactive element, so it is definitely the not the correct element to use for the ratings.

    Once you fix your HTML (with the feedback below) your JS will be reduced by a lot.

    • To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.
    1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
    2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
    3. The last thing you will want to include will be a button so users can submit their choice.

    More Info: 📚

    MDN: Form Element

    MDN: <input type="radio">

    MDN: Field Set Element

    • Once the top is implemented , for your JS, the eventListener should be on the form as a submit.

    More Info:📚

    Click vs. Submit EventListeners

    • To get the ‘rating’ give each rating the same name (ex. name=“rating” and then you would do the following const rating = form. rating.value

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    The HTML for the ratings needs to be rewritten as it was done incorrectly ❌. button are for submitting a form, opening/closing mobile navs, etc…

    To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.

    1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
    2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
    3. The last thing you will want to include will be a button so users can submit their choice.

    More Info: 📚

    MDN: Form Element

    MDN: <input type="radio">

    MDN: Field Set Element

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    1
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 I’m shocked that @0xAbdulKhalid missed all of these errors that could have been improved upon.

    Here are some suggestions to help improve your code:

    Unfortunately your content Your content is not fully responsive. 😢 Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

    https://web.dev/learn/design/

    • Every site should ALWAY have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

    More Info: 📚

    MDN Main Element

    • As mentioned already the picture element is the best choice ✅ for this challenge.
    • The image’s alt tag description needs to be improved upon ⚠️. Assume that you are describing the image to someone over the phone.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
    • This is not how to create this heading. it is not several lines of individual code, it is a single line of text; so it should be read as one cohesive sentence. Not only that it is a `heading so it be wrapped in said element.

    ❌

    <div class="title">
<div class="line1">Gabrielle</div>
<div class="line2">Essence Eau</div>
<div class="line3">De Parfum</div>
</div>

    ✅

    <h1>Gabrielle Essence Eau De Parfum</h1>
    • The old price (169.99) 🏷 is not being properly announced 😢 to screen readers. To fix this, you are going to wrap the the price in a s element and inside it you will add a span element with an visually-hidden class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

    More Info:📚

    The Strikethrough Element

    • Remove overflow: hidden; and change min-height: 95vh; to min-height: 100vh; in the body.
    • Remove all the border-radius and only apply it to the container of the component along with overflow: hidden.
    • It is best practice ✅ to, at minimum, use variables for your colors.
    • Remove the height: 410px; from the "detail" class as it is not necessary; the content itself will create the height.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    In all honestly, after reviewing your code I’ve noticed countless errors (too many to point out) that should not be happening in this level challenge. Same goes for all your other challenges, I think it would best for you to start with the challenges that "component" in their title to build up your coding skills

    Here are some of the errors found:

    • The headings in your challenge are being used incorrectly ❌, since you are using the h1 heading several times in a single page and you are skipping heading levels; both which are not allowed. There should only be one h1 heading as for the footer heading you added, it is unnecessary since you provided an image logo (use that instead)
    • When using alt tags, this alt="grid" is not how you write them. "Grid” means nothing to users of screen readers. If the image serves a purpose/adds value, then you explain what the image is (imaging explaining it to someone over the phone) if it I purely decorative then leave it blank.
    • Never give the body an explicit width/max-width.
    • For several of your elements, you are giving them explicit width and/or height which in turn makes them static; you want them to be responsive.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • David Ochoa• 290

    @davidochoadev

    Submitted

    Hello Everyone 👋

    I have successfully completed the challenge utilizing the following:

    • Mobile-first approach
    • HTML5
    • CSS3
    • Flexbox
    • Grid

    I do have a question regarding font importing using the link provided by Google Fonts. I attempted to paste the @import code below the :root selector, but the fonts didn't change. As a result, I had to import them within the HTML file. I would like to know the most efficient and performance-friendly method of importing fonts. Should I download and manually upload the font files to the repository? I appreciate your assistance in answering this question.

    Thank you in advance for your response.

    Best regards,

    David Ochoa

    3-Column Preview Card Component | HTML5, CSS3, Grid & Flexbox

    1

    P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    Regarding your question, it is best practice to link the font-family in the HTML due to performance (even if it is minimal).

    • The section and figure elements are being used incorrectly ❌. section are for sections of a page while the figure is only used when there is a figcaption.
    • Your "buttons" were created with the incorrect element ❌. When the user clicks on the button they should be directed to a different part of you site. The anchor tag will achieve this.

    More Info:📚

    MDN The Anchor element

    • For "visually hidden" content use the following code:
    .visually-hidden {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
margin: -1px !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some recommendations for enhancing your code:

    • The “car icons” in this component are purely decorative⚠️. Their alt tag should be left blank to remove them from assistive technology.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • The headings in your component are being used incorrectly❌. Since the h1 heading can only be used once ⚠️, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading ✅ since it is reusable and it will give each heading the same level of importance.
    • For improved accessibility 📈 for your content, it is best practice ✅ to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.
    • ALWAYS Implement a "Mobile First" approach 📱 > 🖥

    Mobile devices are now the dominant 👑 way in which people browse the web. So when building your content, you will start building with small screen sizes (starting at 320px) and work your way to larger screens using min-width.

    More Info: 📚

    Mobile First

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Every site should ALWAY have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

    More Info: 📚

    MDN Main Element

    • Since the images in this component add value and serve a purpose (displaying the product) it needs to be accessible ⚠️. The image needs to be applied using the picture element and not the background-image property, as it will not only let you use different images during different breakpoints it will let apply an alt tag description to image stating what the image is.

    Syntax:

    <picture>
<source media="(min-width: )" srcset="">
<img src="" alt="">
</picture>

    More Info:📚

    https://www.w3schools.com/html/html_images_picture.asp

    • Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
    • The old price (169.99) 🏷 is not being properly announced 😢 to screen readers. To fix this, you are going to wrap the the price in a s element and inside it you will add a span element with an visually-hidden class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

    More Info:📚

    The Strikethrough Element

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • P
    バレンタイン 😈• 64,430

    @vcarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

    More Info: 📚

    MDN Main Element

    • The alt tag description for the “QR image” needs to be improved upon ⚠️. Its needs to tell screen reader users where it will take them to when they scan it.
    • The "Improve your front-end skill by building projects" is a heading ⚠️ in this component, so should be wrapped in an heading element.
    • The web development process can be made easier and expedite the process 🚀 by implementing a CSS Reset. Here are some examples that you can freely use 😁: Josh Comeau Reset, Eric Meyer Reset
    • Change ⚠️ width to max-width in your component’s container to make it responsive. You will also want to remove the height as it is unnecessary.
    • Move all of these elements to the body and change the height to min-height;
    .wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
    • Not necessary;
    .info {
width: 85%;
}
    • There is no need to repeat code. Instead apply text-align: center; and font-family: 'Outfit', sans-serif; to the .container.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1