@PyaePhyo1999
Erick Rodrigues
@SortJakkeAll comments
- @SortJakke
Great job! Your solution is very faithful to the original design, and all functionalities work correctly without any apparent errors. Additionally, the website demonstrates excellent keyboard accessibility, allowing smooth navigation using the "Tab" key.
However, to further enhance usability, it would be beneficial to add a feature in the slides that enables control via the arrow keys, making navigation even more intuitive for users who rely on this functionality. Moreover, I noticed that the "Explore" button on the homepage is not working—it might be worth reviewing this interaction to ensure visitors can access the intended content.
Marked as helpful - @Utkarsh9571What are you most proud of, and what would you do differently next time?
this is an intermediate challenge, comparatively a simple one. it has a lot of individual challenge components, it took some time, also with this i learned about css frameworks, tried to use one, didn't work out good, but it will.
What challenges did you encounter, and how did you overcome them?it has some thing which are somewhat difficult to do,
like most annoying is that blue shape behind the images, making its size grow as screen grow is difficult.
also the red bottom on selected feature button on mobile size in my submitted project is not similar to the design provided.
What specific areas of your project would you like help with?please look into it and give suggestions on anything.
@SortJakkeDespite some design challenges, you managed to achieve a good final result. The tab switching for features and the accordion for FAQs are working well, demonstrating your technical skills and dedication to the project.
I understand your frustration with creating the blue balloons using HTML/CSS without compromising the page design. Striking a balance between aesthetics and technical implementation can be challenging, but with fine adjustments, it’s possible to integrate this element in a harmonious way.
On the other hand, I felt there was a lack of attention to accessibility, especially since key functionalities are inaccessible via keyboard navigation. Prioritizing inclusive navigation not only improves the experience for users with different needs but also strengthens the overall usability of the project.
Overall, the progress is significant, and with a few refinements, the result can become even more polished!
- P@LaStellaa@SortJakke
Congratulations! You successfully replicated the provided design with precision in both the desktop and mobile versions. The result is well-executed and visually consistent.
I really liked the slide animation—it runs smoothly and doesn't present any bugs, which enhances the overall experience. However, one aspect to consider is accessibility. The buttons are not accessible via keyboard, and navigating the page using the "Tab" key creates a strange effect on the slide, which might make interaction difficult for users who rely on this functionality.
Additionally, at first glance, I thought the slides weren’t working. Later, I realized that you have to click exactly on the icon to interact with them. Perhaps a small visual cue or an adjustment in the clickable area could make the interaction more intuitive.
Marked as helpful - P@yudin7324@SortJakke
cool!
- @220100dungvan@SortJakke
?
- @Sanya-ZgWhat are you most proud of, and what would you do differently next time?
First time doing something like this and it worked out very well.
What challenges did you encounter, and how did you overcome them?There were a few new things but I found a way out and everything works.
What specific areas of your project would you like help with?No problem.
@SortJakkeHello! Here are some feedback points:
. To make the code more semantic, I recommend replacing div.img__block with a <figure> and div.info__block with an <article>. This will improve content structuring and accessibility.
. To enhance the slide's accessibility, you could consider:
- Adding an addEventListener("keydown") to the thumbnails and the .lb_next and .lb_prev buttons, allowing keyboard navigation.
- Making the lightbox items focusable by adding a tabindex to the buttons and thumbnails.
. Between the media queries for 375px and 500px, the image overflows off-screen, and the buttons become inaccessible. To prevent this issue, I suggest following a more general approach to breakpoint divisions:
- max-width: 600px for mobile devices
- min-width: 600px for portrait-mode tablets
- min-width: 900px for landscape-mode tablets
- min-width: 1200px for desktops
- min-width: 1800px for large screens
Despite these points, your solution is well-aligned with the proposed design, and all functionalities work correctly. Congratulations on the great work!
Marked as helpful - P@LaStellaaWhat are you most proud of, and what would you do differently next time?
I am happy with the result overall, especially the responsiveness achieved with CSS Grid. I used the grid template areas and it worked great. I am understanding more and more the importance of a well structured HTML and i want to keep focusing on that.
What challenges did you encounter, and how did you overcome them?Since it was my first time using grid areas, it took me a little bit of time to get it to work like i wanted to, especially the image. Another challenge was the menu on mobile screen, since i had to style it i could not use the display: none and had to rely on opacity 0 , which made my JS a bit more complicated that it could have been.
What specific areas of your project would you like help with?If anyone has suggestions on how i can simplify my code, i am all ears!!
@SortJakkeHello, here is some feedback on your project:
Issues found:
- On the page, each clickable article has a hover effect, but ideally, these elements should be links that allow users to access the full article. Making them keyboard-accessible is essential to ensure inclusive navigation.
- The menu button is also not accessible via the keyboard, which affects the experience for users relying on this functionality.
Suggestions for improvement:
- You can simplify the HTML by adding the "grif-container" class directly to the <main> tag. Using two tags to contain the same content is redundant and can be avoided.
- I recommend using a button (<button>) instead of an image (<img>) to open the menu, as it is semantically more appropriate and improves the page’s accessibility. Additionally, you could create two classes: one for the closed state and another for the open state. In JavaScript, you would simply toggle the classes, making the menu open script much simpler and more efficient.
- In the main article, I suggest creating a single <section> and dividing it into <div>s. This structure would be more correct, as the current code makes the elements seem unrelated. Additionally, the appropriate tag for containing images is <figure>.
- For the footers, it might be a good idea to group all elements into a single <section>, although I understand the reasoning for keeping them separate.
Final thoughts: Despite these suggestions, your solution is visually very similar to the provided design. Congratulations on the great work!
Marked as helpful - @T23harms@SortJakke
Hello, here is some feedback on your project:
Warnings about functionality:
- The radio and checkbox inputs are currently not accessible via the keyboard, which compromises usability for users relying on keyboard navigation. I recommend reviewing the focus and associated attributes.
- The submit button does not have a hover effect, which might make the visual interaction less intuitive.
- The text and email inputs lack padding-left, impacting aesthetics and potentially making the filling experience less comfortable.
Suggestions for HTML:
- I recommend including all inputs inside a <form>. This makes the HTML more accessible, organized, and facilitates script configuration for validation and submission.
- I suggest replacing the "query-field" div with a <fieldset>, which is semantically ideal for grouping related inputs like radio buttons. Additionally, the <fieldset> allows the use of a <legend>, which is more appropriate than the <label> currently used as the section title.
- The button used as a label for the checkbox is unnecessary and semantically incorrect. Consider replacing it with a more suitable approach that adheres to accessibility best practices.
Final thoughts: Despite these observations, the solution presented is visually aligned with the provided design, and the error messages are appearing and disappearing correctly as needed. Congratulations on the work! With these adjustments, the result will be even more aligned with best practices and accessible to all users.
Marked as helpful - P@a-d14@SortJakke
Congratulations on the excellent work! You created an HTML structure with well-thought-out semantics, demonstrating attention to best practices. Additionally, your styling with SASS was very well executed, showing care for details and organization. Finally, the script you wrote is simple, functional, and effectively fulfills the project's purpose, highlighting your ability to develop practical and efficient solutions. Great job!
- @MaruchetO@SortJakke
I recommend using addEventListener on the <form> instead of inline event methods. This will allow you to capture events in a more organized and centralized way. Additionally, by accessing the event within the listener, you’ll have direct access to all the form inputs through event.target. This approach not only simplifies your code but also improves the maintenance and scalability of the script, leaving your HTML cleaner without the need to attach events directly to the elements.
Marked as helpful - @T23harms@SortJakke
Design and functionality:
- The calculator is currently accepting negative values, which could compromise its functionality in scenarios where only positive numbers are needed.
- The error message is misaligned, and the input does not change its border when displaying an error, which affects visual perception and usability.
Suggestions for the code:
- I recommend using position: absolute on the error span and aligning it according to the specified design to ensure visual consistency.
- Input images can be added via background-image in the CSS, simplifying the HTML and making design adjustments easier.
- Using a label associated with the input is more semantically correct and provides accessibility benefits, such as improved interaction for users relying on assistive technologies.
- To prevent negative values in numeric inputs, you can add the min="0" attribute directly in the HTML. However, the more robust approach would be to implement validation in JavaScript, providing greater control over the data entered.
- Using a <form> to wrap the calculator elements would make the code more organized and semantic while also facilitating JavaScript integration for event handling and validations.
Final considerations: Despite these adjustments, the solution presented is visually aligned with the proposed design and offers a functional experience that would work well for an average user. Congratulations on the work!
Marked as helpful - P@HamzehAlayan01@SortJakke
Hello, here is some feedback on your project:
Visual issues:
- The image overflows the div, which can compromise responsive design and cause visual disorganization. I suggest adjusting it with properties like max-width or max-height.
- There is no spacing between paragraphs, which makes the text harder to read and the layout less pleasant. Adding margins or padding would solve this issue.
- The border-radius is smaller than specified in the design, which affects the visual fidelity to the original concept.
HTML:
- I recommend replacing the "wrapper" div with a <main> element and the "-half" divisions with <section> elements. This would make the code more semantic and aligned with best practices.
- The HTML already uses the <picture> element, which is excellent for swapping images based on device size. This is a modern and effective approach.
- For lists, it would be a good idea to use <ul> and <li>, styled in CSS with list-style-image on the <ul> or a pseudo-element ::before on the <li>. Both options are great and allow flexibility in the design.
- In the input section, placing the label, input, and button inside a <form> would make the code more organized and simplify event handling with JavaScript.
- To display the error message, I suggest placing it inside a <span> and moving it using position: absolute. This would allow you to remove the "label-validation-box" div and the "email-label" paragraph, simplifying the code.
CSS:
- Limiting the wrapper's height to 65vh can distort the layout on some devices. I recommend revisiting this value or opting for a more flexible height.
- Adjusting the main-image with max-width or max-height prevents overflow issues and keeps the design consistent.
- To remove the button's borders, use border: none instead of border: transparent, ensuring the button looks cleaner.
- On mobile, the button is outside the wrapper because you applied height: 100vh. This causes the div to exceed the screen size. Removing this property or using height: fit-content may resolve the problem.
Marked as helpful - P@oryanhachWhat are you most proud of, and what would you do differently next time?
I am proud of myself for figuring out how to add the modal using JS. I did not do the mobile modal, and the tablet and dekstop's modals displayed properly on fixed sizes, but It was not my main goal in this challenge. Overall, I am proud of myself, and while I made many mistakes during the code, I feel like I took what I needed from this challenge, and will build on those mistakes on future challenges.
@SortJakkeHi, here are some comments about your project:
General observations:
- The share box is missing in mobile mode;
- The share box (share__modal) is misaligned on certain screen widths;
- The share button does not change color according to the defined design styles.
In your HTML code:
- I suggest placing the <img> tag inside a <figure> tag for better semantics and organization.
- Replace the <p> tag with an <h1> in "article__description--main" to improve semantics and HTML hierarchy.
- Placing descriptions inside a <section> or <article> tag can make the HTML more structured and SEO and accessibility friendly.
In your CSS:
- You used predefined declarations, which is great! However, some unnecessary declarations could be removed to reduce clutter and improve performance.
Additional tip: To avoid misaligning the "share__modal", I recommend moving it inside the "article__footer" and applying position: relative to the footer. This will help maintain alignment and make it easier to maintain the layout.
Final thoughts: Despite these minor adjustments, the site is very close to the original design, and the code is readable for other developers. Congratulations on the excellent work!
Marked as helpful - @jawad-mwadamaWhat are you most proud of, and what would you do differently next time?
Proud that i am learning css grids which i didn't know how to do. I am happy with what i delivered..
What challenges did you encounter, and how did you overcome them?The bottom testimonial which had a bigger span and the one on the far right that spans from top to bottom of the grid container. So i used grid template areas...
What specific areas of your project would you like help with?None for now, i am just learning alone and that is important for my development...
@SortJakkeHello! I would like to congratulate you on the incredible work with your HTML/CSS code. The attention to detail and the organization of the code are simply impeccable. The structure is clear and semantic, reflecting an excellent understanding of web development best practices.
- P@aokoyeWhat are you most proud of, and what would you do differently next time?
I am happy with how comfortable I am with HTML and CSS. Resizing for mobile proved a little difficult, but I was able to get it done.
@SortJakkeHello! Here are some suggestions to improve your project:
-
Main tag for accessibility: Every webpage needs a main tag, as it is essential for accessibility and improves code readability.
-
Layout simplification: Your div with the class .container and the div .card can be combined into a single structure and converted into the main tag. This reduces redundancy and enhances semantics.
-
Image elements: The div image could be replaced with a figure tag, which is better suited for representing images. Alternatively, you could remove it if it's not necessary.
-
Semantic text tags: Replacing the divs .tag, .date, and .text with text-specific tags like p or other appropriate tags would result in more semantic code.
-
Title hierarchy: Changing the h2 to an h1 would ensure proper title hierarchy, and any necessary styling adjustments can be handled in the CSS.
-
CSS adjustments: Media queries might not be needed in this case. Adding a max-width to the .container class and a padding: 1em to the body should suffice to make the card adapt smoothly to any viewport.
Despite these suggestions, you arrived at a good end result! Congratulations on the solution!
Marked as helpful -
- P@jellmooWhat are you most proud of, and what would you do differently next time?
Proud of my use of Flexbox as I've been learning it recently and have been wanting to implement it more correctly in my code.
What specific areas of your project would you like help with?Please give feedback on my css flexbox and just my css in general! I'm trying to work on making sure my code will look good on all screens
@SortJakkeHello! Here are some suggestions to improve your project:
-
More semantic HTML: I would recommend replacing the article tag with the main tag and the divs with sections. This change will make your HTML code more semantic and eliminate an unnecessary tag. In the CSS, you can move the main tag declarations to the body for a cleaner and better-organized code structure.
-
CSS declarations: It's great that you used predefined declarations as it helps save time. However, I would remove unnecessary or unused declarations to avoid excess in your code.
-
Best practices: Even though it might not make a significant difference, removing unnecessary parts of the code is considered a good practice. It makes the page more readable, optimized, and easier to maintain in the future.
-
Additional suggestion: Since you designed this card to feel personal, enabling the GitHub and Frontend Mentor links would be a fun "easter egg." This would add an extra touch and make the user experience even more engaging.
Despite these suggestions, the final result looks fantastic! Comparing it with the original design, it seems the only differences are intentional, which shows your attention to detail. Congratulations on a job well done!
Marked as helpful -
- @Silas310@SortJakke
Hello! Here are some suggestions to improve your code:
-
HTML semantics: I recommend removing the <header> from within the <main> tag. Additionally, replace the <div> with the class "container-2" with the <main> tag and move its definitions to the <body>. This would make your code more semantic and aligned with HTML best practices.
-
Layout flexibility: Using relative values like em, vw, or % helps to avoid distortions and gives elements greater flexibility. Additionally, exploring properties like min-width and max-width can be helpful to enhance the page's responsiveness.
-
Simpler grid: I believe using grid-template-areas could simplify the structure and reduce potential layout distortions. It's an approach that makes it easier to control the defined design areas.
Despite these points, the final result of your work is excellent. If it weren’t for the slight misalignment, it would be visually perfect. Congratulations on your effort and progress!
Marked as helpful -
- @milicaaa175What are you most proud of, and what would you do differently next time?
I think I got faster in writing html and css. Next time I would like to try and download fonts instead of importing them.
What challenges did you encounter, and how did you overcome them?I had a problem with sizing some parts of the card component because of the picture element. The solution was to apply all properties to the img element inside of it.
@SortJakkeFor accessibility reasons, it is recommended to create more semantic code by using the <main>, <section>, and <figure> tags in this case.
Marked as helpful
