Skip to content
OverviewSolutions
31
Comments
272
P

Andrey

@dar-juMoscow4,600 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

  • 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
    P
    Andrey•4,600
    @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
    P
    Andrey•4,600
    @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
  • P
    Andrey•4,600
    @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
  • P
    Andrey•4,600
    @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
  • P
    Weyehn Reeves•190
    @WeyehnR
    What are you most proud of, and what would you do differently next time?

    I have start used more of the HTML tags like header, main, and footer, and the more i got into the HTML semantics then I have grown to appreciate its clearity

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

    The hardest part was finding the way to organize all of the source image as i found a new variable called srcset (https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) as i looked at it and i decide to try it out, it took some trial and error to get it right

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

    I am willing to welcome any suggestion!

    My meet the landing page

    2
    P
    Andrey•4,600
    @dar-ju

    Hi, Weyehn Reeves!

    Great job! Semantics are fine, code is readable, responsiveness is good, I don't see any errors in BEM.

    Concerning this work, look for an opportunity to correct:

    • you have the following lines in your html code
    .\starter-code\assets\desktop\image-hero-left.png,
./starter-code/assets/desktop/image-hero-right.png

    most likely most browsers will understand this, but it would be better to fix the backslash

    • I don't have a design layout, but it seems to me that something is wrong with the color of the text "v1.3" on the download buttons during hover - the text is not visible
    • the button in the footer in 2 lines on a screen width higher than 770px, this should not be so

    Otherwise, the work is super! Good luck with the development!

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

    I’d really appreciate constructive feedback.

    News homepage

    #bem
    4
    P
    Andrey•4,600
    @dar-ju

    Hi, Tetiana!

    Your work gets better and better with each task, you're great!

    Let's move on)

    You need to not only lay out a page or component, but also test it for stability - make content overflow test.

    Why is this necessary? You will hand over the work, but it is not a fact that the content in the blocks will be constant, the customer can change it.

    How to do test? Just reduce or add the amount of text in the text blocks, as well as the blocks and see how they behave, as well as how the neighboring blocks behave. You can add text and duplicate blocks directly in the browser in dev mode.

    Here are some examples:

    • in the .categories__description blocks, add much more text, the image narrows significantly, this means that it should have a minimum width
    • add 2-3 more items to the menu and at 600px the menu will go over the logo. For .menu__list you can add flex-wrap: wrap; and justify-content: flex-end; and in @media (min-width: 900px) { change gap so that the height between lines is normal like gap: 2rem 4.1rem;
    • add a fourth block .categories__item, at a width of 1024px the new block will be in the middle, which means justify-content: space-between; for .categories__items is not quite suitable here, it is better to use the calculated width of blocks for elements

    You also need to check everything else. All these changes add very little code, but your layout becomes resistant to changes.

    Having mastered overflow testing, you will reach a more professional level.

    Good luck in future projects!

View more comments