Skip to content
OverviewSolutions
18
Comments
18
P
Aakash Dasgupta
@a-d14

All comments

  • P
    GeraASM•500
    @GeraASM
    What are you most proud of, and what would you do differently next time?

    The next time I'll start with the menu

    add new concept with events

    1
    P
    Aakash Dasgupta•360
    @a-d14

    You have issues with accessiobility in your hamburger menu.

    • you should label your nav and the hamburger icon button like so :
    <span id="nav-label" hidden>Navigation</span>

// For the open button
<button id="btnOpen" class="nav__open" aria-expanded="false" aria-labelledby="nav-label">...

// for the nav manu
<nav class="nav__menu" role="dialog" aria-labelledby="nav-label">...

    • if you noticed, I labelled the open button with aria-expanded false and the added role='dialog' to the nav. This is to make an accessible dialog. A dialog is an element that contains extra information that comes into view when a control, in this case a button, is pressed.

    • when the menu is opened, you want to make the rest of the website inaccessible to keyboard and screen readers. To do that, use the HTML's inert property.

    • similarly when the hamburger menu is closed, you want the items in the menu to be inaccessible as well. This must only happen on mobile devices. You can do this used JS. You can detect if a user is on a mobile device using the matchmedia method on the window object.

    Marked as helpful
  • P
    Aakash Dasgupta•360
    @a-d14

    Looks good

  • P
    Aakash Dasgupta•360
    @a-d14

    nice job! However, your images should be inside a button element as it is better for accessibility and would be more semantic HTML. This would also satisfy the criteria given in the problem statement - user should be able to navigate using keyboard.

  • P
    Aakash Dasgupta•360
    @a-d14

    There is a small issue with your project. When you select a rating, the box of the corresponding rating should turn orange. You can implement this by adding a class to the element using JS and in CSS, you can add a declaration under the class selector that turns the background color to orange.

  • guardianprime•260
    @guardianprime
    What are you most proud of, and what would you do differently next time?

    Building with react was good. i even did the darkmode toggle thing that looked hard at first but a little reasearch and i did it.

    what would i do differently? well i would use context api and even the usereducer hook and simplify state handling.

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

    allowing the user to use keyboard as navigation in the app and also the option logic. like how the user sees if the option selected is correct or not instead of just seeing everything that is not correct.

    responsive frontend quiz using react

    1
    P
    Aakash Dasgupta•360
    @a-d14

    You need to fix your progress bar, it does not work properly.

  • P
    Aakash Dasgupta•360
    @a-d14

    looks good!

  • P
    Aakash Dasgupta•360
    @a-d14

    Nicely done!

  • P
    Aakash Dasgupta•360
    @a-d14

    Looks great. Maybe you can center it vertically using 'flex'.

  • Lara Mesa•250
    @Lara-art
    What are you most proud of, and what would you do differently next time?

    I'm proud of this piece of CSS because, even though it's simple, it solved a problem I had in a very straightforward way.

    @media screen and (min-device-width: 600px) {  
    body {  
        place-content: center;  
    }  
}
    What challenges did you encounter, and how did you overcome them?

    All the JavaScript was a challenge. I was able to do some parts on my own, like changing the image depending on the screen size. I did everything else by checking the freeCodeCamp website and using ChatGPT.

    Newsletter

    1
    P
    Aakash Dasgupta•360
    @a-d14

    looks good but maybe you should show the custom error message even when the input is empty. maybe you can modify for JS code to reflect that.

    Marked as helpful
  • P
    Aakash Dasgupta•360
    @a-d14

    looking good but you forgot to add a box shadow to the article

  • Tushar Kaundal•220
    @TusharKaundal
    What are you most proud of, and what would you do differently next time?

    Was able to create this website without providing height to any element

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

    It was easy didnt got to much

    Responsive landing page using SCSS

    #accessibility#sass/scss
    1
    P
    Aakash Dasgupta•360
    @a-d14

    looks good. Maybe try using picture tag for the images in the hero section.

  • P
    Rodrigo Pereira da Silva•210
    @rodrigopereira21
    What challenges did you encounter, and how did you overcome them?

    I've had trouble getting the dasktop layout to work using grid. After some research I managed to achieve a similar result using grid-template-area. I also found it difficult to position the background image of the first card so that it was in the same corner on both mobile and desktop. I positioned it using background-position. I don't know if there are other ways to do this, if there are better ways I'd like to know.

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

    any feedback is welcome

    Responsive Testimonials grid section

    1
    P
    Aakash Dasgupta•360
    @a-d14

    Not much to say except maybe add a few comments in your CSS for better readability. Well done!

    Marked as helpful
  • P
    Aakash Dasgupta•360
    @a-d14
    1. Maybe change the box shadow property. It's different in the desired output.
    2. I would suggest trying to use grid areas to make your grid code more intuitive and simpler.
  • P
    Aakash Dasgupta•360
    @a-d14

    A few suggestions -

    1. you should have added a gap between the elements in the container to get it more in line with the desired output.

    2. You should use [More Modern CSS Reset] (https://piccalil.li/blog/a-more-modern-css-reset/). It's optional but good practice.

    3. You don't really need <figure> element, you can do the same thing using just <img> - MDN Docs.

  • P
    Aakash Dasgupta•360
    @a-d14

    Feel like the recipe should be inside an <article> inside of <main>. Also you should look into Modern CSS Reset. Apart from that everything looks good.

  • P
    Aakash Dasgupta•360
    @a-d14
    1. Feel the card should be in a <section> and not a <div>.
    2. The padding in the card changes when we move to bigger screen sizes. You should look into it.
    3. You should use more variables to make things easier. This is what I do -
    @font-face {
    font-family: 'Inter Bold';
    src: url('./assets/fonts/static/Inter-Bold.ttf');
}

@font-face {
    font-family: 'Inter Regular';
    src: url('./assets/fonts/static/Inter-Regular.ttf');
}

:root {
    --grey-900: #141414;
    --grey-800: #1F1F1F;
    --grey-700: #333333;
    --green: #C4F82A;
    --white: #FFFFFF;

    --text-preset-1: 1.5rem/1.5 'Inter Bold', sans-serif;
    --text-preset-2: 0.875rem/1.5 'Inter Regular', sans-serif;
    --text-preset-2-bold: 0.875rem/1.5 'Inter Bold', sans-serif;

    --spacing-500: 2.5rem;
    --spacing-300: 1.5rem;
    --spacing-200: 1rem;
    --spacing-150: 0.75rem;
    --spacing-100: 0.5rem;
    --spacing-50: 0.25rem;
}
    Marked as helpful
  • P
    João Víctor de Araujo Lima•350
    @xuaun
    What are you most proud of, and what would you do differently next time?

    I'm happy because I was able to include a min-height and min-width on the body to prevent the content from not showing up when I zoomed in too far on the page.

    Blog preview card page using CSS flex

    1
    P
    Aakash Dasgupta•360
    @a-d14

    Everything looks great!

  • P
    Aakash Dasgupta•360
    @a-d14
    1. First thing I notice is there is no box shadow under your container element.
    2. Instead of a <div> I think your container should be a <section>.
    3. No footer present.

    Your file structure seemed very confusing to me at first. Maybe you could make it a bit more structured?