Skip to content
OverviewSolutions
33
Comments
274

Andrey

@dar-juMoscow4,710 points

I am a practicing JavaScript Fullstack developer. I try to do tasks as thoroughly as possible. Quality is the first and speed come with experience.

I’m currently learning...

Node.js

Latest solutions

View more solutions

Latest comments

  • pheight-89•240
    @pheight-89
    What are you most proud of, and what would you do differently next time?

    I am most proud of being able to implement a dynamic and responsive layout that adapts between mobile and desktop views using CSS Grid and Flexbox. Getting the appContainer to center and the individual cards to lay out correctly on different screen sizes was a significant challenge. By making the User card span two rows and ensuring all the other cards fit neatly into the grid, I feel that I achieved the provided design. The use of Flexbox within the individual card components to handle content distribution was also a key part of this success, preventing the content from being cut off.

    Next time, I would focus more on building components to be inherently flexible from the start. I spent a lot of time debugging why elements weren't expanding or centering correctly because I was using fixed heights and widths in some places. I learned that designing with Flexbox and CSS Grid from the beginning, and letting the content dictate the height, would have saved a lot of time and refactoring. Additionally, I would have set up a more robust component-level styling architecture to prevent styles from one component from unintentionally affecting another, which happened with the .userCard and .card components.

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

    The main challenge I faced was with CSS layout and component sizing, specifically:

    • Vertical Centering: Initially, the entire application container appContainer wasn't centered on the page.
    • Card Overflow: The individual cards, especially the User card, were getting cut off on larger screens. The grid-row: span 2 property was causing the component to be a certain size, but the content inside wasn't growing to fill that space.
    • Inconsistent Sizing: The User and Card components had a mix of fixed heights and flexible layouts, which created conflicts when trying to achieve a responsive design.

    How I overcame Them:

    • Centralizing the Layout: I solved the layout issue by applying CSS Grid directly to the main element of the page component. This allowed me to define a clear, four-column structure for the desktop view and a single-column layout for mobile.

    • Preventing Card Overflow: I made the cards' layouts flexible by using height: 100% on both the Card and User components. This ensured they would fill the height of their respective grid cells.

    • Staggering the User Card: By using grid-row: span 2 on the User component, I was able to make it take up two rows in the grid, creating the unique staggered layout without it being cut off.

    • Aligning Content: I used a combination of margin: 0 auto; and align-content: center on the main element to center the entire grid, both horizontally and vertically, on the page.

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

    I would like to ensure that accessibility is being implemented such as keyboard use and that screen readers are able to read the content appropriately.

    Time Tracking App

    #svelte
    1
    Andrey•4,710
    @dar-ju

    Hi, pheight-89!

    Great job!

    You have everything in order regarding accessibility except for the "..." elements in the cards You need to wrap the <img> tag in <button>, you press it and something will happen, so it's a button. But for screen readers it's not clear what the button does, so you can add aria-label="Open detailed information". After you add <button>, check that it gets keyboard focus.

    Also note that img alt only needs to be filled in for content images that should be indexed in search engines. We don't need these 3 dots to be indexed, so leave alt empty alt="". You don't need to fill in alt for background images either. The only content image here is the user's avatar.

    Check the layout of the screen width 968 and lower - there is too much empty space around the cards, at this width you can place, for example, 2 cards in a column.

    You can also add hover for interactive elements - menu items and dots.

    Otherwise, everything is great, good luck with future projects!

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

    I’m most proud of achieving a clean and responsive layout that looks good on all devices while keeping the HTML and CSS well-structured. This project helped me improve my skills with flexible typography and spacing. Next time, I’d spend more time fine-tuning accessibility features and experimenting with more advanced CSS techniques like CSS Grid for even better layout control.

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

    One challenge was ensuring that the design remained perfectly responsive across different screen sizes without breaking the layout. I overcame this by testing at multiple breakpoints and using max-width and flexbox strategically. I also refined font sizes and spacing using clamp() for fluid typography.

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

    I’d like feedback on improving accessibility and semantic HTML structure. While the layout works well visually, I want to ensure it’s as user-friendly as possible for screen readers and optimized for SEO. Any tips for cleaner, more maintainable CSS would also be appreciated.

    Product Preview Card Component Main

    1
    Andrey•4,710
    @dar-ju

    Hi ThatBoyTweek!

    Great job!

    I'll try to answer your questions on accessibility and semantics

    You're overusing aria-label in tags that already have some information. For example, in the line <p class="card__category" aria-label="Category">Perfum</p> The <p> already has the text content "Perfum", and at the same time you set aria-label="Category", which essentially replaces the text for screen readers. This can cause confusion, because screen readers will read "Category", not "Perfum" In such cases, you can use aria-labelledby, but I would not put aria here at all, it is already clear what we are talking about.

    Same with prices, especially here: <span class="card__price--old" aria-label="Original price"><del>$169.99</del></span> The screen reader will see the <del> tag and pronounce it.

    Use aria for really obscure elements, like close buttons, where there is a svg cross without text and other similar ones.

    As for the rest:

    • Look at the layout on the mobile version ~360px your footer runs over the button, you need to figure out the heights of the blocks and the "fixed position" of the footer.
    • You are using BEM, you have a small error in the price blocks, a modifier is used but there is no element, this will be correct: "card__price card__price--current" "card__price card__price--old"

    Everything else is perfect, you are great!

    Marked as helpful
  • P
    Melissa Kipp•70
    @melissakipp
    What are you most proud of, and what would you do differently next time?

    Most proud of: I'm really proud of solving the tricky CSS layout problems, especially creating the two-tone background effect and making the cards center properly on all screen sizes. I also got Jest testing to work with Next.js 15, which was tough but taught me a lot about build tools.

    Do differently next time: I would start with a simpler approach instead of trying to integrate everything into my main portfolio site right away. Building it standalone first would have been easier for debugging. I'd also write more tests from the beginning instead of adding them later.

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

    Biggest challenges:

    • Testing setup conflicts - Jest and Next.js didn't play nice together. I fixed this by creating a separate Babel config just for tests while letting Next.js use its own compiler.

    • Layout issues - Cards wouldn't center below 1164px width, and I had scrolling problems. I solved these by using better flexbox properties and changing from fixed heights to minimum heights.

    • Button hover effects - They were causing the layout to shift around. I fixed this by adding transparent borders that just change color on hover instead of adding new borders.

    • Form state management - The form wouldn't reset after submitting. I used React Hook Form's reset function to clear everything properly.

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

    1. Double scrollbar issue - I still have a vertical double scrollbar when this project is integrated into my main site. I've tried adjusting overflow properties but haven't fully solved it yet.

    2. Testing best practices - I'd love feedback on my Jest test setup and whether there are better ways to test React components with Next.js 15.

    3. CSS architecture - Is there a better way to organize my CSS modules for larger projects? My current approach works but feels like it could be cleaner.

    4. Component reusability - How can I make my Countdown and SignUpForm components more flexible for different design themes without breaking the current styling?

    Any feedback on these areas would be super helpful!

    Officelite coming soon site

    #next#jest
    1
    Andrey•4,710
    @dar-ju

    Hi Melissa!

    Great job! I especially liked the hover of the bottom button.

    Just a few comments to improve it:

    • you have a media transition at 1163px and below it the plan blocks look lonely - they have a lot of empty space on the sides. Column for them can be made later, and before that they can be narrowed, to do this remove min-width: 360px; from the blocks and add max-width: 360px;, width: 100%; min-width leave somewhere around 250px where they will still look normal. Also remove max-width: 360px; from the parent block. As a result, your container will become more responsive and more controllable.
    • in fact, this is no longer a component, but a full-fledged landing page, so it would be better if there was a main H1 heading for "A simple solution to complex tasks is coming soon"
    • look at how the content above moves when you hover over the main Get started button, to avoid this, reserve space for the hover - add the line border: 2px solid transparent; for the .Hero_button block
    • there is not enough hover effect for the plan buttons
    • you use quite a lot of media queries, try to use no more than 6 transitions in the project. In this project, 3-4 are enough. In more complex projects, a large number of transitions can cause slowdowns

    Otherwise, everything is super, good luck with your development!

    Marked as helpful
  • P
    Anatolii Sudariev•210
    @amix74
    What are you most proud of, and what would you do differently next time?

    I successfully built an interactive rating component, which was an excellent learning experience. I am particularly proud of implementing full keyboard accessibility in addition to the standard mouse interaction. This project taught me how to ensure users can navigate and interact with the component seamlessly using the Tab, Enter, and Arrow keys. This was a valuable lesson in building more robust and user-friendly interfaces.

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

    I welcome anyone to review my code, share their thoughts, and suggest any possible improvements.

    Interactive rating component using Vanilla JS

    #sass/scss
    1
    Andrey•4,710
    @dar-ju

    Hi, Anatolii!

    Great job! Most of the tags are used correctly, the component looks good on all screens.

    What can be added to improve:

    • this component requires the user to do something and confirm the action \ send data. So you can use the <form> tag. It's easy to remember: are we sending some data? Use <form>
    • if you can click somewhere and something should happen - use <button>. In short: action - <button>, link - <a>. So for 1-5 you can use the nesting ul>li>button or div>button. The way you did it is also correct, just in the case of <button> you can get rid of tabindex="0" role="radio" aria-checked="false"
    • the user should understand that the Submit button can be clicked, add cursor: pointer; for it

    Everything else is super, you're great!

    Marked as helpful
  • Andrey•4,710
    @dar-ju

    Hi Ayokanmi Adejola!

    Great job! It's hard to add anything.

    You can improve the work with grid. There is a rule in design that if a paragraph has 3 or fewer words in one line, the paragraph becomes difficult to read. At a screen width of 770px and around, some columns are very narrow. You can make an additional transition grid - 3 columns and 3 rows, that is, move the block on the right down

    It's better to use rem instead of px for font size FreeCodeCamp. In short, the absolute value can cause problems with the font size when zoom in and out the screen.

    Otherwise, everything is great! Good luck with your projects!

    Marked as helpful
  • Andrey•4,710
    @dar-ju

    Hi Mohamed Biomy!

    Great job, but I see you don't have a tablet version, with a screen width of 600-1100px the content doesn't fit on the screen. You don't necessarily need a design layout for this, it's enough to just move and compress the blocks.

    What can be added\improved:

    • for better semantics for all content that is between the header and footer, you need to use the <main> tag, for the menu there is a <nav> tag
    • where the listing 01, 02, 03 is a list of ol\li
    • the logo in the footer is a different color
    • the list of social networks is also a ul\li list
    • the location of the blocks inside the footer differs from the layout
    • if clicking on something causes some action, then it is better to use <button> for this, you need to fix it for the burger and close burger buttons
    • the avatar images do not have alt, this is a error, alt can be left empty, but it should be

    Layout is precisely attention to detail.

    Good luck with your future projects!

    Marked as helpful
View more comments