Skip to content
OverviewSolutions
27
Comments
174
Asilcan Toper
@KapteynUniverse

All comments

  • cerine guerra•10
    @cerine-guerra
    What are you most proud of, and what would you do differently next time?

    What I'm most proud of is how I managed to fully center the component both vertically and horizontally using pure CSS, without relying on any frameworks. I also paid attention to detail by closely matching the design, ensuring clean typography, spacing, and mobile responsiveness.

    What I would do differently next time is focus more on accessibility and responsiveness. I would add alt text that is more descriptive, use semantic HTML tags like <figure> or <article> where appropriate, and test on multiple screen sizes. I’d also consider using a mobile-first approach from the start, and maybe explore adding transitions or animations for interactivity.

    What challenges did you encounter, and how did you overcome them?

    One of the main challenges I encountered was centering the QR code card both vertically and horizontally on the page using only HTML and CSS. Initially, I tried using margin and padding, but the layout wasn’t consistent across different screen sizes. After researching and experimenting, I learned how to use Flexbox on the body element with justify-content and align-items to achieve perfect centering.

    Another challenge was getting the text under the image to appear truly centered, not just aligned. I realized that using <br> tags was breaking the natural flow, so I removed them and used max-width and text-align: center inside a wrapper div to let the text wrap more cleanly and visually align.

    These small layout issues taught me a lot about how HTML structure and CSS flow interact, and gave me confidence to handle similar problems in future projects.

    What specific areas of your project would you like help with?

    I'd like help with improving the responsiveness of the project — making sure it looks great on smaller screens like phones and tablets. While I managed to center everything nicely on desktop, I want to learn how to build with a mobile-first approach and use things like media queries more effectively.

    I'd also like guidance on accessibility best practices, such as using more semantic HTML, writing better alt text, and improving contrast for better readability.

    Finally, I’m interested in learning how to add subtle animations or hover effects to make the component feel more interactive and polished — without overcomplicating the layout.

    Responsive QR Code Card with Pure HTML & CSS

    4
    Asilcan Toper•2,960
    @KapteynUniverse

    Hey Cerine, nice job.

    Since you're not using any library or framework, I recommend using GitHub Pages to host these simple sites.

    Judging by your code:

    HTML:

    Good job using the main landmark and section, although the section might be unnecessary. I would also use article for the .code <div>, and <p> instead of <h2>. Headings are meant for hierarchical structure, like titles.

    Images should have meaningful alt text unless they are decorative. In this case, using something like "QR code leading to frontendmentor.io" might be good.

    Also, great job not using <br> and instead achieving the layout with max-width. <br> should generally be avoided for layout purposes, as it's terrible for accessibility.

    CSS:

    Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries.

    For the height: 100vh; on the body, use min-height, so it can grow if it needs to (and this is the only height you need to set 99% of the times).

    these lines seems wrong, maybe opacity is working (no need for it anyway) but usually it's value is between 0-1.

        height: 52; /* Needs a unit, like px, %, em, rem */
    font-style: bold 22; /* I don't think numeric value adds anything */
    opacity: 100%;

    Use a minimum value of 1.5 or 150% for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

    Instead of specifying padding in four separate lines, you can simply write: padding: 10px 10px 40px 10px;

    I recommend you to use a modern css reset for every project. You can check Andy Bell's reset too.

    For the things you said:

    I want to learn how to build with a mobile-first approach and use things like media queries more effectively.

    Just write the HTML first and that's it :D Most of the times it is the mobile design without styles. Then add styles with media min-width layer by layer as the screen size increases.

    improving contrast for better readability

    This component should be ok but some designs on FEM have low contrast. You can check this by hovering any text that has a background color with inspect tool. Also, this is WCAG criteria

    I’m interested in learning how to add subtle animations or hover effects to make the component feel more interactive and polished

    That’s great! Just be cautious — adding hover or focus effects to non-interactive elements might confuse users. But for interactivity, check out pseudo classes, like :hover for that.

  • Fernanda Nogueira•20
    @Fernanda-NogueiraDA
    What are you most proud of, and what would you do differently next time?

    What I'm proud of: Pixel-perfect execution – Matched the design exactly with proper spacing, alignment, and responsive behavior. Accessibility focus – Used semantic HTML and proper alt text for the QR image. Clean code – Organized CSS with clear class names and logical structure.

    What I'd improve next time: CSS variables – Replace hardcoded values with custom properties for easier maintenance. Performance check – Audit bundle size and optimize assets (though simple here, good practice). Enhanced interaction – Add subtle hover effects or focus states for better UX. Cross-browser testing – Verify rendering consistency beyond Chrome/Edge.

    Key takeaway: This project solidified my layout skills, and I’m now eager to implement more scalable CSS approaches in future challenges.

    What challenges did you encounter, and how did you overcome them?

    Challenges Faced & Solutions:

    Responsive Sizing

    Challenge: Keeping the card proportionally sized on very small/large screens.

    Fix: Used max-width with relative units (% + rem) and tested on Chrome DevTools’ device simulator.

    Center Alignment

    Challenge: Vertically centering the card without flex/Grid (for learning purposes).

    Fix: Applied margin: auto with positioned layout as a fallback.

    Color Matching

    Challenge: Design’s subtle hsl() values looked different on my monitor.

    Fix: Extracted exact colors using Figma’s eyedropper tool.

    GitHub Pages Setup

    Challenge: Initial deploy failed due to repo naming.

    Fix: Renamed repo to username.github.io (required for root-level projects).

    Lessons Learned:

    Always test early on real mobile devices.

    Double-check GitHub’s docs for deployment quirks.

    What specific areas of your project would you like help with?

    Areas I'd like help with:

    Code Review:

    Is my HTML semantic enough? (e.g., did I overuse <div>?)

    Could my CSS be more efficient? (e.g., reducing redundancy)

    Best Practices:

    Better way to handle the responsive layout? (Flexbox vs. Grid)

    Accessibility checks beyond alt text.

    Advanced Tips:

    How to make the QR code interactive? (e.g., click animation)

    Git strategy for tiny projects (branching needed?).

    (Specific questions = better feedback!)

    Example focused ask: “Is margin: 0 auto the cleanest way to center this card, or would Flexbox be more maintainable?”

    Qr code component

    #accessibility#cube-css#bem
    2
    Asilcan Toper•2,960
    @KapteynUniverse

    Hey Fernanda, nice job.

    Is my HTML semantic enough? (e.g., did I overuse <div>?)

    I didn't see more than 1 div. It is ok. Think divs as layout containers. I recommend you to check landmarks and every element on MDN site.

    Maybe you can use article for the container. But wrap qr code container with a main. Every page needs 1 main.

    Alt texts should be descriptive, unless the img is decorative. So in this case something like "QR code leading to frontendmentor.io" might be better.

    Break rules <br> are bad for accessibility, i am not sure if there is a usage for br besides poetry or address. If you want to make the text exactly like the design, you can give apply padding or max-width.

    Could my CSS be more efficient? (e.g., reducing redundancy)

    Instead of height: 100vh; use min-height: 100vh; on the body, so it can grow if it needs to.

    Most of the times, you don't need to set height for the elements. For example, you can use

    .qr-code {
    /* height: 270px; */
    /* width: 270px; */
    max-width: 100%;
    display: block;
    border-radius: 10px;
}

    position: relative; on the container seems unnecessary.

    I recommend you to use a modern css reset for every project. You can check Andy Bell's reset too.

    Better way to handle the responsive layout? (Flexbox vs. Grid)

    I don't know if you start with desktop or mobile layout, since this is a small component but for future projects starting with mobile is always easier.

    Chosing between flex or grid depends. It is user preference. Like bento grid challenge, you can make it with flex but it is better to use grid.

    It is always better to use max-width and never set font-size as px like Marzia said.

    Sometimes using clamp() function might be helpful.

    “Is margin: 0 auto the cleanest way to center this card, or would Flexbox be more maintainable?”

    Depends. I use margin-inline: auto; if i just want to center the element horizontaly. To center everything inside the body, flex or grid. Depending on the design, flex or grid again.

    How to make the QR code interactive? (e.g., click animation)

    You can put img into an anchor element and use :hover and :focus pseudo classes.

    You can also use click listener with js or :focus + tabindex with css and html but i won't recommend adding interactibility on a non interactable element.

  • Tetiana•540
    @TetianaAleks
    What specific areas of your project would you like help with?

    I’d really appreciate any feedback on my solution, especially regarding code structure, accessibility and responsiveness.

    Single price grid component

    2
    Asilcan Toper•2,960
    @KapteynUniverse

    Hey Tetiana, nice job.

    Your usage of landmarks and headings and also responsiveness looks good. Sizes are kinda odd tho, like gap: 0.46rem; but i guess you wanted to make pixel-perfect like Yacoub said.

    For accessibility i see 2 issues:

    1. Everything has a bad color ratio, which is not your doing but the design is bad for that matter. For the future; you can see this by hovering any text with inspect tool and look for the contrast. You can check here for that criteria

    2. Outline and border none is not good for accessibility. When i try to focus "Sign Up" button with the tab button on keyboard, i can't see if i am on the button. So either you want to use border-color: transparent; or outline-color: transparent; or need to make a custom style for that.

    Marked as helpful
  • Jeff Hensley•80
    @jeff-hensley
    What are you most proud of, and what would you do differently next time?

    I'm quite proud that I was able to get everything working properly. Even added a little close button to go back to the original card.

    What challenges did you encounter, and how did you overcome them?

    To be honest It was stupid but I put my JS file in the wrong folder in my directory and like a dumb dumb spent way to long trying to figure out why my JS wasn't working. I also struggled with the active states of the buttons in CSS but eventually got it kind of of to work on hover.

    What specific areas of your project would you like help with?

    I could not figure out how to keep the active states of the buttons until the submit. I want the buttons to stay orange until submit is used and then if another button is clicked before submit is clicked then the active state changes to that button.

    Responsive Rating card using basic JS

    1
    Asilcan Toper•2,960
    @KapteynUniverse

    You can create a class for the active state and assign it to the clicked button, but this should ideally be a form with radio buttons. With radio buttons, you can use the css :checked pseudo-class to style them in a simpler way.

  • Asilcan Toper•2,960
    @KapteynUniverse

    Merhaba Ender, good job.

    I recommend you to check semantic html elements. Don't know any good resource about this, but what you are doing has a name, "divitis"

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your div that contains nav with a header and the div that starts with keyboard input with a main would be good.

    Every input must have a label. Placeholder attribute should not be used as an alternative to a label.

    Also search input should be in a form, i think.

    You are mapping ul element in both verb and noun section, so creating lots of lists instead of 1 per section. Map list items inside ul instead.

    For color switcher a button would be a better option instead of an empty div. While writing it came to my mind, for font switcher option might be a good option too (ba dum tıss)

  • Asilcan Toper•2,960
    @KapteynUniverse
    What are you most proud of, and what would you do differently next time?

    My laziness got me again. I started the project but didn’t look at it for a couple of days. When I returned, it was hard to continue and make changes. Next time, I will try to build components with loading and error states, and fetch data from the start instead of just importing from json file.

    I also added a keyboard shortcut to the cart confirm button, so keyboard users don’t have to navigate through every dessert before accessing it.

    What specific areas of your project would you like help with?

    Any feedback is appreciated. I’m not sure about my aria-live and description list usage.

    Product List w/ Cart

    #accessibility#react#vite#typescript
    1
    Asilcan Toper•2,960
    @KapteynUniverse

    Interesting, cart has a max-height and background-color, shouldn't look like that

  • Asilcan Toper•2,960
    @KapteynUniverse

    Merhaba Yasir, seni yolun başında yakaladığıma sevindim demek isterdim :D ama 1.5 senedir freelance çalışıyormuşsun.

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your full page div or wrapping it with a main would be good.

    The WCAG criteria states that line-height should be at least 1.5. 1.2 is too small for those who are dyslexic, these lines are packed too closely together, making it harder to read.

    No need to use width: 100%; for a block element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

    Avoid using fixed values like width: 350px;, for better responsiveness use max-width with rem; max-width: 21.875rem; Also most of the times you don't need to set height.

    Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries. You can also use clamp function for better responsiveness/fluid typography.

    Do not skip heading levels.. Also you shouldn't use more than one h1 in one page.

    Those active states in design images means that elements are interactive. So they are either hyperlinks or buttons(might be inputs or other elements that i forgot too). For this challenge, i think all of them are hyperlinks.

    Also i saw li, summary { list-style: none;} in your css reset. You didn't use list here but for future i recommend you to check accessibility section of this page

  • Tereza-Seno•60
    @Tereza-Seno
    What are you most proud of, and what would you do differently next time?

    It seems like my result is very similar to the preview and I'm proud of it. I know that I use "old" techniques (for example px instead of rem/em ect.) But next time I will try to use them.

    What challenges did you encounter, and how did you overcome them?

    My problem was that the QR code was not in the center. I mean.. It was at the center in a main cross but not in the center of the webpage. It was too high. I used a margin but it was not good solution. But then I relized that I can use min-height: 100vh; and min-width: 100vh; and that solved my problem. I hope it is the "right" way.

    What specific areas of your project would you like help with?

    I'm not sure about sizes. How do I figure out if I should use 300px or 350px? In this case.. I guesstimated it. Maybe I'm little bit dumb and there is a chance that I overlooked it in instructions. I'm not sure about it.

    QR code using HTML and CSS (flexbox)

    1
    Asilcan Toper•2,960
    @KapteynUniverse

    It doesn't have to be pixel perfect but this is a free+ challenge, figma file has everything you need. Also no need to use min-width: 100vh; A block-level element always takes up the full width available (stretches out to the left and right as far as it can). min-height: 100vh; with flex or grid is enough for centering.

    Marked as helpful
  • P
    haru-kunyo•20
    @haru-kunyo
    What are you most proud of, and what would you do differently next time?

    I am proud of the fact that I was able to create my first html,css challenge by taking a little help from mdn and css-tricks, next time I will try to complete it without any online help.

    What challenges did you encounter, and how did you overcome them?

    I encounter the challenge of flex box property. When I made the body a flex and set justify-contents to center the 'attribution' div was in row with the card to i added flex-direction: column to make it go below the card but by doing so the justify-contents: center no longer worked, then i tried align-contents: center it still didn't work. Finally when i changed it to align-items: center the card was in the center of the screen.

    What specific areas of your project would you like help with?

    code 1:

    body{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    code 2:

    body{
    display: flex;
    flex-direction: column;
    align-content: center;
}

    code 3:

    body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

    I want to know why code 1 and code 2 were not able to center the body while code 3 does it.

    QR-code-compnent using CSS flex property

    1
    Asilcan Toper•2,960
    @KapteynUniverse

    When flex-direction is set to column, align-items: center; centers the content horizontally, and justify-content: center; centers it vertically. If flex-direction is row, it works the other way around.

    The problem you're facing is that the <body> element is only as tall as its content. That means you don't see the vertical centering visually but it works. To fix this, you need to set a height. Like you did here but instead of using margin-top, apply min-height: 100vh;.

    Also, avoid using percentage-based heights (especially with low values), as they often behave unpredictably.

    Marked as helpful
  • P
    Tsunami•40
    @marketa-kal
    What are you most proud of, and what would you do differently next time?

    This is my first challenge here.

    What challenges did you encounter, and how did you overcome them?

    I am not able to cope with the footer shifting left when the viewport width is under 320px.

    What specific areas of your project would you like help with?

    I’m quite frustrated with the footer shifting to the left when the viewport is narrower than 320px. So far, I haven’t found any solution other than changing the display property from flex to grid, which would allow me to control the layout more easily. However, I believe there must be a simpler solution.

    QR code component

    1
    Asilcan Toper•2,960
    @KapteynUniverse

    Below 320px doesn't really matter but the problem is you used fixed width values on main and img, they are overflowing under that threshold

    Marked as helpful
  • Emirhan Sezgin•60
    @emirsezginn
    What are you most proud of, and what would you do differently next time?

    I used the grid and flexbox structure well here, but cleaner code could have been written. I will try to write cleaner code next time.

    CSS GRID and FLEXBOX solution.

    #pure-css
    1
    Asilcan Toper•2,960
    @KapteynUniverse

    Merhaba Emirhan, good job. Couple things:

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your container div or wrapping it with a main would be good.

    Images needs a meaningful alt text, unless decorative.

    Do not use headings for sizes and do not skip them: always start from h1, followed by h2 and so on.

    Those buttons should be hyperlinks, so correct element to use here is anchor element. Some might say it will bloat the html but to me, they are list of links, so you can also put them in a list.

    Also flex on them (and grid on p's, h4 etc.) is unnecessary but if you need to align text, you can use text-align. I think you don't need any flex or grid for this challenge besides the one on the body to center the card.

    You don't need to apply font family to every element. Applying to body would do the job but some elements like buttons don't inherit it. For that and many other things, i recommend you to use a modern css reset. You can check Andy Bells reset too.

    Using fixed values like width: 400px; will cause responsive issues later, use max-width: 25rem; instead.

    Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries.

    Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

    Marked as helpful
  • P
    Josh Kahlbaugh•540
    @Joshk7
    What are you most proud of, and what would you do differently next time?

    I liked the way that I initially load the data in for this project with one fetch call:

    const fetchData = async () => {
    try {
        const response = await fetch("/data.json");
        if (!response.ok) {
            throw new Error("Unable to fetch data");
        }
        const result = await response.json();
        quizzes = result.quizzes;
        renderQuizzes();
    } catch (error) {
        menuList.innerHTML = `<li class="fetch__error">${error.message}</li>`;
    }
};

    I could possibly handle the error clause by calling a function instead of manually adding an error, however, this does work.

    What challenges did you encounter, and how did you overcome them?

    Initially, I was overwhelmed with where to start when developing the JavaScript for the quiz app's logic. However, I thought it through and decided that I needed to load the data in for the initial page. From there, the logic for the other pages followed naturally.

    What specific areas of your project would you like help with?

    First, I'd like help on loading data into the project. I'm not positive that the way I did it is the best. Second, the conditional styling for the theme is based on toggling a css class on the root element:

    const handleThemeClick = (e) => {
    root.classList.toggle("dark");
};

    .dark {
    --primary: var(--dark-navy);
    --primary-accent: var(--navy);
    --secondary: var(--pure-white);
    --secondary-accent: var(--light-bluish);
}

    Are there better approaches to this?

    Frontend Quiz with Dark Theme 😈

    #pure-css
    2
    Asilcan Toper•2,960
    @KapteynUniverse

    Hey Josh, i have no idea how good it is :D but i've made a react component to switch theme for a while ago. If you don't know react hooks, you can check this page for another similar way

    On ThemeSwitcher component, i have:

     const [theme, setTheme] = useState(() => {
    return localStorage.getItem("theme") || "light";
  });

    This gets the theme on page load from localstorage, if there isn't a saved theme it sets it as light.

      useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
  }, [theme]);

    This adds data-theme attribute to the html element and saves the current theme on localstorage. Only runs when the theme changes.

    And lastly there is a function to call when user click the button. If it is light changes it to dark if not to light

     const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

    setTheme comes from the first hook above const [theme, setTheme] = useState(() => ... basically theme is the variable and setTheme is the function that updates it. You can call setTheme function anytime and change the theme variable like setTheme("pink")

      <button onClick={toggleTheme} aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}>

    And I've set colors in css with variables.

    [data-theme="dark"] {
  --color-bg-main: #0d0f12;
...
}

[data-theme="light"] {
  --color-bg-main: #ffffff;
...
}

    Remember useEffect that runs whenever theme variable changes? It changes data-theme of html <html lang="en" data-theme="dark"> or <html lang="en" data-theme="light"> and since html is the root element, all color variables changes accordingly

    For loading the data; since styles are similar, it should be possible to just use one section and update the context inside it. Also i think using aria-live is also essential here.

    Marked as helpful
  • Levent•20
    @leventsoner
    What are you most proud of, and what would you do differently next time?

    I'm most proud of achieving a pixel-perfect match with the design, especially the hover effects and responsive layout. The card's shadow effect and the smooth transition on the title hover came out particularly well. The mobile responsiveness works smoothly, and the image handling in different screen sizes is effective.

    For next time, I would:

    • Start with a mobile-first approach rather than desktop-first
    • Use CSS custom properties (variables) for colors and spacing to make the code more maintainable
    • Consider using relative units (rem/em) more consistently throughout the project
    • Plan the responsive breakpoints more systematically
    What challenges did you encounter, and how did you overcome them?

    The main challenges I faced were:

    1. Image handling in the mobile view - Initially, the image wasn't scaling properly on mobile screens. I solved this by using object-fit: cover and setting specific dimensions for the image container.

    2. Font sizing for different screens - I struggled with making the font sizes match the design exactly on both mobile and desktop. While I ended up using media queries, I learned there are alternative approaches using relative units.

    3. Card shadow and border - Getting the exact look of the card's shadow and border took some trial and error. I eventually achieved it by combining border and box-shadow properties effectively.

    I overcame these challenges by consulting MDN documentation and experimenting with different CSS properties until I found the right combination.

    What specific areas of your project would you like help with?

    I would appreciate feedback on:

    1. Best practices for responsive typography - I'd like to know if there are better ways to handle font-size changes between mobile and desktop views without relying heavily on media queries.

    2. CSS organization - While my code works, I'd love to hear suggestions about making it more maintainable and following industry best practices.

    Blog preview card solution using Flexbox

    1
    Asilcan Toper•2,960
    @KapteynUniverse

    Merhaba Levent, nice job.

    For better responsive typography, you can use clamp function, there are also clamp calculators.

    Addition to that:

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your container div with a main would be good. Also attribution div should be in a footer.

    Avoid using fixed values like width: 384px;, for better responsiveness use max-width with rem; max-width: 24rem;

    Images needs a meaningful alt text, unless decorative. For this case, i think illustration image is decorative, so you can leave alt text empty or use aria-hidden and also Greg's avatar image needs a bit more content.

    That active state in the design (your h3) means that tag is interactible, for this case it should be a hyperlink of the article. Like:

    <h3>
 <a href="#">HTML & CSS foundations</a>
</h3>

    Also if you used h3 for the size, don't. Do not skip heading levels: always start from h1, followed by h2 and so on. But another thing; this card would never be used to serve the main heading on a page, so on a real page h2 or h3 probably would be ok.

    You can put font-family etc. to the body, no need to use with *. Most of the elements inherit them. For those that don't and for many other things: i recommend you to use a modern css reset for every project. You can check Andy Bells reset too.

    Marked as helpful
  • Burak Uğraş•90
    @burakugras
    What are you most proud of, and what would you do differently next time?

    I will feel free to ask any AI assistant. I am loosing my time while trying to push myself unnecessarily.

    What challenges did you encounter, and how did you overcome them?

    I could not find suitable attribute. And I had problems with div alignments. But solved the problem by searching new attributes.

    CSS classes, Google Fonts, CSS attributes

    2
    Asilcan Toper•2,960
    @KapteynUniverse

    Merhaba Burak, good job.

    You didn't ask for feedback but here it is :D (I always give feedback to fellow turkish people nonetheless)

    Since you used flex on the body, instead of margin: 15%; you can give body a min-height: 100vh; to center the card vertically.

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your card div with a main would be good.

    Avoid using fixed values like width: 200px;, for better responsiveness use max-width: 12.5rem;. 200 is a bit small tho, 20rem would be better.

    Images need a meaningful alt text, unless decorative. For this case, i think something like "QR code leading to frontendmentor.io" might be ok.

    Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries. You can also use clamp function for better responsiveness.

    The WCAG criteria states that line-height should be at least 1.5.

    I recommend you to use a modern css reset for every project. You can check Andy Bells reset too.

    Also using a external CSS file might be better than internal

    Marked as helpful
  • ronilucylucy•200
    @ronilucylucy
    What specific areas of your project would you like help with?

    i didnt do mobile-design and responsive design kinda sucks, but in order to do it i need to redo my code. i definitely want to start another project so i would like to hear some critic how shitty code is :D

    html/css

    1
    Asilcan Toper•2,960
    @KapteynUniverse

    Hey, ronilucylucy, nice job. It is been a while since a made a long feedback. First of don't get depressed and. Take your time, rest if you are stuck, solutions of the problems usually comes to mind when you are taking a break.

    Starting mobile layout and then designing desktop is easier. When you write the HTML, it is mostly mobile layout without CSS. Before writing a single line of code thinking about what to do, how to do helps too.

    HTML is responsive by default. We are the ones breaking it. For example width: 350px; and width: 400px; on the .text and .div_images p. Don't use fixed values, use max-width instead. Also grid template areas needs to change too for mobile layout, like:

    grid-template-areas: 
 "div_2images"
 "div_3images";

    but it won't solve everything. I like to use flex-wrap on some cases. You can also use flex-wrap: wrap; on all_columns.

    Never use fixed values for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for the font sizes and media queries. You can also use clamp function for better responsiveness

    Do not skip heading levels. Also if you used them for sizes don't

    Images needs to have an alt text, and that alt text should be meaningful, unless they are decorative. For this challenge, i think person avatars and socials are not decorative.

    You can put # to the href of anchor tags for placeholder.

    Some transitions for the active states might be good too.

    I recommend you to use a modern css reset for every project. You can check Andy Bells reset too.

    Marked as helpful
  • M. Abubakr•250
    @m-abubakr1
    What are you most proud of, and what would you do differently next time?

    I have a better understanding of the Picture tag in HTML, and I will move on to cover screen reader optimization in this project. The prices are not so visible to screen readers who cannot see the visual, gonna find a better way to solve that.

    What challenges did you encounter, and how did you overcome them?

    The min-height should not be showing the scrollbar on 100vh, but it was giving the scrollbar. It worked on 95vh, still trying to figure out why?

    What specific areas of your project would you like help with?

    Better Improvisations and developing standards for screen readers as well. Plus The min-height:100vh; giving a scrollbar is confusing.

    Product-Preview-Card-Component-Responsive

    1
    Asilcan Toper•2,960
    @KapteynUniverse

    Hey Abubakr, nice job.

    margin: 1rem; + min-height:100vh giving the scrollbar. You don't need margin on the body.

    Edit: I guess you added margin so article won't touch edges on small screens, you can use margin-inline instead

    Marked as helpful
  • P
    Paisley•95
    @simpsonpaisley
    What specific areas of your project would you like help with?

    I've tried to make this as accessible as possible, however, I'm sure improvements can be made, especially to the JavaScript, which I feel could have been a lot simpler than I've made it.

    I'm also kind of unsure as to when to use REMs and when not to. My design doesn't seem to completely match the design. I know to use REMS because people use different font sizes for accessibility, but I feel like I've overused them here.

    Accessible Accordian

    1
    Asilcan Toper•2,960
    @KapteynUniverse

    Hey Paisley, nice job.

    For accesibility, i don't think making the texts tabable is necessary.

    I sometimes use pixel for small things like border radius but i think it is ok to use rem for everything. You can use em for some cases like button paddings. Maybe this video helps.

    You can also use details for this one.

    Marked as helpful
  • Juan Díaz Peña•90
    @JDPWeb
    What challenges did you encounter, and how did you overcome them?

    setting meaningful class names, but once the structure was clear to me, the classes were easier to determine.

    What specific areas of your project would you like help with?

    Any feedback is welcome.

    Blog Preview Card Main Solution by JDP

    1
    Asilcan Toper•2,960
    @KapteynUniverse

    Hey Juan, nice job.

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your card div with a main would be good.

    Font size on the elements (except the name) overriding the font-size on the body(which is good for this situation because you used rem on them) but never use fixed values for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for the font sizes and media queries.

    Use max-width for better responsiveness.

    Images need a meaningful alt text, unless decorative. For this case, you can leave empty the alt text of illustration or use aria-hidden="true" so screen-readers ignore the it. Also avatar needs more content.

    Marked as helpful