Skip to content
OverviewSolutions
25
Comments
146
Andrey
@dar-ju

All comments

  • percydocomo•520
    @percydocomoSubmitted 7 days ago
    What are you most proud of, and what would you do differently next time?

    To have the navigation menu in mobile design displayed like the project's design. I couldn't display it as desired and later realized CSS transition does not apply to the display property. Therefore, instead of hiding the navigation in the first place, I display it 'block' somewhere out of the screen and reposition it when the open/close button is clicked.

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

    Getting the navigation menu displayed properly in mobile design. I use JavaScript to open and close the menu by changing the HTML style of the navigation menu.

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

    All feedback is welcome.

    News homepage

    1
    Andrey•2,570
    @dar-juPosted 6 days ago

    Hi, percydocomo!

    Great job!

    A few comments on the work:

    • look at the screen resolution of 1000px, some blocks are too narrow, it is considered that if there are 1-2 words in a line, then it is not very comfortable to read. This problem can be partially solved by reducing the side paddings
    • to understand that the button can be clicked, it is better to add a hand cursor to it - cursor: pointer;
    • the main image is shrinks and loses its proportions when the screen width changes, use object-fit: cover for it;
    • when opening the mobile menu, the gray background also moves out. For the background, it is better to make a display delay or darken the body
    • try not to use a fixed height for blocks, for example for .top__story, if you want to increase the amount of text in <p>, then in the mobile version the text will run into another block and the layout will break
    • before publishing, check your code in the validator, there are several errors - "Element button not allowed as child of element ul", "Element aticle not allowed as child of element section"

    Otherwise, everything is great, good luck with the development!

    Marked as helpful
    0
  • Andrey•2,570
    @dar-juPosted 6 days ago

    Hi, Augusto Silva!

    I'll try answer your questions:

    1. First, set the container to the full screen height - min-height: 100vh; Then, make the background image cover - background-size: cover;
    2. Just set the icons to a fixed height and width width: 50px; and height: 50px; - so they will always be round and align the icons inside with flex - display: flex; and justify-content: center;

    I hope I understood the problem correctly.

    Marked as helpful
    1
  • P
    Andrew A Lee•200
    @drewleeSubmitted 12 days ago
    What are you most proud of, and what would you do differently next time?

    This was my first project leveraging CSS Grid for a responsive layout.

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

    Mostly just learning CSS Grid concepts and how to effectively use them.

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

    Ensuring HTML and CSS markup adheres to modern best practices and coding conventions.

    Testimonials Grid Section

    3
    Andrey•2,570
    @dar-juPosted 12 days ago

    Hi Andrew A Lee!

    Your work is really good! You used grid correctly, which is the most important thing in this task. You worked well on the layout for all devices. You use comments in the code, this is a good practice.

    I would just draw attention to the moment of responsiveness of the page. Try to fix the width of the blocks only if it is necessary. For example, look at the layout with a screen resolution of 760px and around - there is a lot of empty space on the sides of the content. You can remove the value width: 305px; from the .testi-grid-item_container block, the content will become more responsive, if it seems that the blocks are too stretched, they can be adjusted with paddings on the sides.

    Good luck with the development!

    Marked as helpful
    1
  • Nico Velasco•380
    @DarionvrSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    Proud of how I was able to use different states to store temporary data like comments and replies before publishing them, and to avoid errors.

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

    Being able to complete the logic behind editing and adding replies was the most challenging part due to the way they were nested within each other. I managed it by adding up to three parameters to the functions to identify the different IDs of both the comment and the reply, and by activating states to show or hide the forms.

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

    "Any feedback is welcome! I tried to create as many components as possible to reuse them separately and make the main code cleaner. I'm not sure if the comments should be ordered based on their score.

    Interactive comments on with React hooks

    #react
    1
    Andrey•2,570
    @dar-juPosted 12 days ago

    Hi, Nico Velasco!

    Great job! I see you worked through this task in detail, I really liked it!

    Just a little bit of what can be fixed:

    • I think the voting logic should work a little differently. 1) you can't vote for your own messages, 2) you can only give one vote to other people's messages and only take it away.

    • look at the layout at the minimum screen resolution - 375px. If you click on editing a message, the input window is too narrow, it's hard to edit anything there

    • regarding semantics and accessibility, look at decorative images, for example +/- they shouldn't have alt filled in, search engines don't need to know what it is, they're not interested, but readers do, add the aria-label value

    • also on the page, the alt of content images should be unique, that is, it's better to write down the names of avatars

    Otherwise, everything is cool, good luck with the development!

    Marked as helpful
    1
  • Andrey•2,570
    @dar-juPosted 13 days ago

    Good work!

    0
  • Andrey•2,570
    @dar-juPosted 13 days ago

    Review in the context of learning paths.

    Great job!

    • I don't think it's a good idea to give all the content to the page without using loading or lazyload.

    • The region filter window has a scroll, you can just increase the height of the screen, especially since the regions are unchangeable.

    • It's better to use input delay in the search, otherwise each entered character puts a load on the server

    • The "Border Countries" buttons, if there is more than one line in it, don't look very good, it's better not to strictly limit the width of the button

    0
  • Bhavik Thakur•230
    @bhavikthakurSubmitted 15 days ago
    What are you most proud of, and what would you do differently next time?

    None!

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

    Since this was my first js challenge, I struggled a lot. I thought this is the easiest js challenge per FM filter, but I don't think so, at least in my case. I wasn't able to add a smooth transition. I used display:none at first but couldn't add a transition, so I had to use the height option with the help of Google (no lie), so I managed to do it on my own. Also, I've noticed my answers expanding, but with that, my questions would push upwards, which made it look weird for some reason, so I added some margin. I still don't know if my solution is good enough. I am planning to add keyboard navigation and better height handling soon but didn't wanna get stuck so I submitted the solution.

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

    Please help me, guys.

    1. I don't want my card to shrink or grow and would prefer it to be fixed size even if I collapse my first expanded answer, which is a default as per design.
    2. I need help with Accordion's most preferred approach in the sense that I don't know what the most preferred approach when it comes to accordion
    3. I couldn't fix my card exactly in the middle as per design so I did it ugly way by adding padding to the body
    4. I need a permanent fix or solution to avoid questions shifting upwards when we expand the answers. I was able to do it here using margin but I don't know if its right way to do it.

    FAQ Accordion with vanilla css and Js

    2
    Andrey•2,570
    @dar-juPosted 15 days ago

    Hi, Bhavik!

    You've got it mostly right!

    • To avoid adding padding for the body, you can make an additional container and give it padding on top. The card will rest against its padding and when expanded, it will only move down.

    • I see margin-bottom for paragraphs, even for those that are collapsed. This issue is easy to solve - just add margin-bottom in js and only if the card is expanded (answer.style.marginBottom = '1em'). Zero it when collapsing.

    • The smoothness of expanding/collapsing by height will be given to you by the height control of the paragraph - collapsed height 0, expanded height 100%. And add smoothness with standard transition. You can also use keyframes

    • Use semantics, all this faq is ul, the items in it are li. Leave alt empty for decorative (non-content) images.

    • Add gap for card__faq-header, on mobile the title text is too close to the + buttons

    Marked as helpful
    0
  • OffixialTrust•120
    @OffixialTrustSubmitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of how far I’ve come with my coding skills. What I’ll do differently next time: When adding content to the innerHTML of a div, you don’t need a div tag because document.createElement(“div”) already creates the div tag. This really stressed me out.

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

    Like I said, adding a div tag in the innerHTML was bad and debugging it was hell. I rewrote the content and harcoded it in the HTML file and compared it with the innerHTML in JS using chatGPT.

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

    1. Sometimes when I place multiple orders, they may become double/appended twice. I noticed this with “vanilla panna cotta”. It’s sometimes double.

    2. When confirm order is clicked, the order-confirmed box is displayed and the transparent overlay is also displayed blocking any other interaction. Now the problem is this only works on desktop view (>768px), the overlay doesn’t work when body < 768px and I didn’t even alter it on @media query. I even tried to explicitly make it show on the confirm-order event listener, yet no success. How do I fix this?

    Product List With cart

    #sass/scss
    3
    Andrey•2,570
    @dar-juPosted 23 days ago

    Hi, OffixialTrust!

    Cool work!

    I looked at your questions:

    1. I couldn't reproduce the duplication problem, everything is ok with me.
    2. For the block with id="overlay" add positioning - top: 0; and left: 0;

    Note that the images stretch when you change the screen resolution, if you don't want to precisely fit the images to the layout, then make them object-fit: cover; It will be looks better.

    Marked as helpful
    1
  • Alfi Zain•280
    @AlfiZainSubmitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    populating dom with json

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

    responsive design

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

    everything

    Time Tracking Dashboard Main with SCSS

    #sass/scss
    1
    Andrey•2,570
    @dar-juPosted 23 days ago

    Hi Alfi Zain!

    Great job!

    • I looked at your code, it updates the blocks entirely, 1-x it's bad for the app's performance, 2-x visually the blocks are rebuilt, it's noticeable, 3-x more code. It would be better if the blocks that don't require changes are written in html, and the data that changes - in js. That is, in js you will need to update only 2 fields in each block, this is done via textblock.textContent =

    • Please note that you have duplicated the button identify code - dailyButton, weeklyButton, monthlyButton. They can be moved to the top of the code and reused in functions.

    • If you connect images via img then alt should be there. If the images are not content, as in your case, then alt should be present in this form: alt="". Otherwise it's an error.

    • Use more semantic tags. This card has a heading H tag, a list ul/li.

    Otherwise, great. Good luck with your developments!

    Marked as helpful
    1
  • Marzia Jalili•4,110
    @MarziaJaliliSubmitted 26 days ago
    What are you most proud of, and what would you do differently next time?

    I would say...my code looks much cleaner this time!

    😎😎😎

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

    At first,the images started getting smaller and couldn't fill the page. Therefore, I set the width and height of all image to 100% and the issue got fixed.

    Hope it's good practice, though.

    😁😁😁

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

    If there's any area that may need amendments, let me know.

    🫡🫡🫡

    Sunnyside Agency Landing Page | React JS ⚛️ & Pure CSS 🎨

    2
    Andrey•2,570
    @dar-juPosted 26 days ago

    Hi Marzia Jalili!

    You did a great job!

    I see a small horizontal scroll on desktop, it's because of the browser scrollbar, check class="hero" it has width: 100vw; change it to 100%

    The rest is cool!

    Marked as helpful
    0
  • Andrey•2,570
    @dar-juPosted 26 days ago

    Hi Yeiser Jimenéz!

    Great job! You did a great job with the animation, I like it!

    There are a few things that could be improved:

    • look at the screen resolution 1025-1530px, the buttons don't look very good
    • there is no scrolling in the Confirmed Order popup, if you add a lot of products, the close button goes down off the screen and you can't click it to close
    • when you add a product to the cart, a vertical scroll bar appears in the cart for a moment. It's probably better to increase the block size first, then add the product. When you delete it, it's the opposite.
    • there's only one thing about the animation - when you place an order, the elements in the Confirmed Order are added too slowly, as if the page is lagging
    • you have a missing heading hierarchy, if Desserts is H1, then the product names should be H2
    • hover effects are not added to all buttons
    • keyboard accessibility is well-designed, but ARIA accessibility could be improved. For example, from an accessibility point of view, it is unclear what the +/-/x buttons do
    • you need to check the code in the validator, there is an errors in html: Element button and div are not allowed as child of element picture
    • the <section> tag can be used if the section has a H2-H6 header, otherwise better use another tag
    • there are explicit lists on the page - a list of products, a list of orders. ul/li is semantically suitable for them.

    Otherwise, great, good luck with your development!

    Marked as helpful
    1
  • aisyahhannes•300
    @aisyahhannesSubmitted 26 days ago
    What specific areas of your project would you like help with?

    I want to try changing the content using only css, instead of js.. but can't figure out how

    Toggle pricing

    1
    Andrey•2,570
    @dar-juPosted 26 days ago

    Hi aisyahhannes!

    To answer your question briefly:

    • in html, create a block with an input and two spans with content
    • input is a toggle button implemented via <input type="checkbox">. Then style it as a button.
    • on one tag with content, make display: none, display the other.
    • when clicking on check, show one, hide the other

    The code is approximately this: html

    <div class="block">
  <input type="checkbox">
  <span class="text1">111111</span>
  <span class="text2">222222</span>
</div>

    css

    .text1 {
  display: inline;
}
.block input:checked ~ .text1 {
  display: none;
}

.text2 {
  display: none;
}
.block input:checked ~ .text2 {
  display: inline;
}

    I hope the idea is clear.

    Marked as helpful
    1
  • P
    Chanokthorn Uerpairojkit•190
    @ChanokthornSubmitted 27 days ago
    What challenges did you encounter, and how did you overcome them?
    • Unsure of how to handle UI when column does not flow normally, handled with hard-coded row and column selector of grid.
    What specific areas of your project would you like help with?
    • I'd like to know what would be the appropriate approach on handling these layouts when the flow of cards is dynamic.
    • On desktop view, what would be the way to determine the height and width of each cards? Should it be set on cards, or set on container such as grid/flex?
    • Any suggestions will be very appreciated.

    Using grid and flex for responsive UI, use quote as background image

    1
    Andrey•2,570
    @dar-juPosted 27 days ago

    Hi, Chanokthorn Uerpairojkit!

    Great job!

    • a little comment about @media. If the designer's layout has only 2 versions - desktop and mobile, this does not mean that you need to make only them. The developer's task is to also make intermediate points. The layout should look good on all devices.

    For example, look at the screen resolution of 1100px, there is a narrow column with content and a lot of empty space on sides. It should not be like this.

    The grid tool provides flexible block management. Your grid is initially set to 4 columns, then at 1120px it switches to 1 column. Make intermediate points - 3, 2 columns and only for the mobile version switch to 1 column.

    In this case, your layout will be perfect.

    • there is a line in the code: background-image: url("images/bg-pattern-quotation.svg"), url("testimonials-grid-section/images/bg-pattern-quotation.svg"); Check, the second image does not load, you need to delete part of the code.

    • if there is no caption to the image, then the <figure> tag is not necessary, you can just use <img>

    Everything else is great!

    I'll try to answer your questions:

    • regarding the dynamism of cards, with the help of grid you can determine their position and the space they occupy in any of the screen resolutions, exactly what I wrote above
    • if you use grid, then you set the size of the container, and inside you distribute the space of the blocks using grid-column and grid-row. It is better not to set the height of the blocks, it should change dynamically depending on the content.

    Good luck with your development!

    Marked as helpful
    1
  • Andrey•2,570
    @dar-juPosted 28 days ago

    Hi, M.Abdul Mannan!

    Very cool work!

    I could find only two minor points:

    • you have a decorative image, it has alt="" and role="presentation". You need to use one of them, either an empty alt or role="presentation". Both parameters are an error. An empty alt is enough
    • when you select a product, the red frame changes the size of the image and it twitches, it is not very pleasant visually. Use outline: 2px solid var(--red); instead of border: 2px solid var(--red);

    The rest is great, good luck with the development!

    0
  • Andrey•2,570
    @dar-juPosted 29 days ago

    Привет, Полина!

    Отличная работа!

    Прям всего пару моментиков:

    • если ты используешь тег <section>, то обязательно должен быть заголовок, иначе это считается ошибкой. Сделай имя заголовком H2 и это семантически будет верно. Кстати, article тоже требует использование заголовка H2-H6 ... Я думаю, в этом компоненте достаточно только секции.
    • в теге img у тебя есть такой код: width="55px" height="auto". Это не совсем верно, т.к. html ожидает цифровые значения в этих полях, другие не воспринимает. Ты можешь сделать width="55" height="55" и это будет верно. Вообще, задавать размеры изображениям в html нужно для того, чтобы резервировать место в DOM и чтобы не было сильных смещений в структуре во время построения страницы. Лучше указывать те значения, которые будут использоваться максимальными, обычно это десктоп версия.
    • обе ошибки, что выше, определяются при помощи валидатора, проверяй свой код на ошибки перед публикацией, это сделает код чище.
    • обрати внимание на ховер, ты использовала его для тега <a>, но так как он у тебя не стилизован, то появляются углы на блоке. Если перенесешь ховер на родительский элемент li, то будет лучше и круглые углы останутся
    • при подключении шрифтов в @font-face лучше использовать строчку font-display: swap; в таком случае браузер сначала будет искать шрифт локально на компе, а потом подключать шрифт, это может сократить время загрузки страницы

    В остальном всё супер, удачи в разработках!

    Marked as helpful
    1
  • P
    Tsotne Meladze•980
    @tsotneforesterSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?
    • axios error handling
    • react-router
    • 'react-parallax-tilt'
    • 'react-loading-skeleton'

    Rest Countries API - React

    #axios#react#vite#styled-components
    2
    Andrey•2,570
    @dar-juPosted about 1 month ago

    Hi!

    Great job! The animation you used is absolutely super! It's the best I've seen.

    I have some comments on the work:

    • the skeleton is triggered when the page is initially loaded, but it seems to me that it is disabled not when the images are loaded, but by a timer. Because I see alt and there is still no image
    • alt for images on the page must be unique
    • your routes are not worked out, I can't go to the country via a direct link. In addition, the path with spaces is not used quite correctly - https://countries-api-geojsone.netlify.app/South Georgia and the South Sandwich Islands
    • it is better to use header instead of div at the top of the site, it is not semantically correct to use nav, header is enough here.
    • why are you using the <div> tag for "Dark Mode"? Semantically, it is correct to use <button> or <a>, it is a switch
    • your page has a broken header hierarchy, if H1 is used for "Where in the world?", then the country name should be H2. When selecting regions, headers should not be used at all there.
    • if I select the Europe region, then go to the country, if click the Back button, then I do not get back to Europe
    • often, when I click the Back button, an image of a woman flashes. Perhaps she needs a small delay in appearance
    • you can still work on "performance", PageSpeed ​​Insights does not have very high indicators
    • you can also work on accessibility, not being able to work on the site using a keyboard

    Otherwise, everything is cool, good luck with the development!

    1
  • Andrey•2,570
    @dar-juPosted about 1 month ago

    Hi manarbooo!

    Great job! I like your responsive layout and it's as close to the mockup as possible.

    There are a few things that could be fixed:

    • check the layout on a screen smaller than 840px, it looks good, but there is a horizontal scroll and you can see the mobile menu on the right. You can use display: none for it, but in this case the animation won't work. The best option is to add the line overflow-x: hidden; for body and everything will be ok
    • it would be cool if the "Features" and "Company" menu appeared not only by clicking on the arrows, but also on the text. It would be even cooler if the menu didn't have to be closed by clicking again, but, for example, by clicking anywhere outside this block.
    • when you click on the burger, it would be better if only the menu moved up, and the gray background just appeared. To do this, you need to separate the background and menu blocks, make the background block opacity
    • you used the <figure> tag for the image, but you connected the image itself via css background-image, this makes no sense. In general, this is a content image and it is better to use the <img> tag with a filled alt. You did the right thing for the logos below, but you need to add the alt attribute to them. For the burger menu and menu closing images, there should also be alt, since these are non-content images, the alt should be empty alt="", otherwise it will be an error.

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

    Marked as helpful
    0
  • Andrey•2,570
    @dar-juPosted about 1 month ago

    Hi Yacoub AlDweik!

    Great job!

    If you don't mind, I'll add a little bit from myself:

    • your close cross for the mobile menu didn't load, because of this there is no way to close menu
    • for the menu and social icons you use ul/li but for "Our creations" - div, I think you need ul there too
    • your keyboard accessibility works, that's cool! but for better readability there is should be aria-label for social icons
    • at the end of development it is necessary to do an overflow test for blocks and for text. For example, the "Our creations" block passes the test, everything is fine here. But the menu items and social network items - do not pass. Why is necessary to do test? Imagine that the customer wants to add new menu items, then they will start to go beyond the block boundaries. Here's how to fix it (the top menu for example): remove the margin-right from li, add the code for ul:
    flex-wrap: wrap;
justify-content: flex-end;
gap: calc(calc(var(--spacing)* 6)* calc(1 - var(--tw-space-x-reverse)));

    In this case, no matter how many menu items you add, the layout will always be stable.

    Everything else is great, good luck with your development!

    Marked as helpful
    0