Skip to content
OverviewSolutions
9
Comments
8
Sardor Akmalovich
@akmalov11c

All comments

  • Mikhail•460
    @mkostrikovSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I used parcel, sass and pug in the project

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

    Еhere were difficulties with the structure of the project, with styles. Сouldn't get the desired background color in the footer.

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

    I will be glad of any help

    Meet landing page

    1
    Sardor Akmalovich•190
    @akmalov11cPosted 6 months ago

    Hi, congratulations on completing the challenge!

    Your HTML code for the Meet landing page looks good! Here are some simple suggestions to improve it further:

    • Semantic HTML Elements: Consider using more semantic tags like <section> and <article> where appropriate to enhance readability and SEO.
    • Accessibility: Add meaningful alt attributes to images, especially the logo SVG. This helps screen readers describe the images to users with visual impairments.
    • Inline SVG: Move the inline SVG to an external file and use the <img> tag or <use> with <symbol> for cleaner HTML.
    • Footer Content: Wrap footer content in <footer> instead of <section>. This improves semantic structure.
    • Comments: Add comments in your HTML and CSS to describe sections and styles. This helps maintain the code in the future.
    • Testing: Test your HTML for responsiveness and accessibility using tools like Lighthouse or Wave.

    These changes will help make your HTML more semantic, accessible, and maintainable. Great job on your project!

    Marked as helpful
    0
  • Donovan Romero•100
    @nsvonod12Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    The use of grid

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

    No problems

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

    None by the moment

    Testimonials grid section - Responsive

    1
    Sardor Akmalovich•190
    @akmalov11cPosted 6 months ago

    Hi there! You've put together a visually striking layout with engaging content. Here's some feedback to help refine your project:

    HTML:

    1. Your HTML structure is well-organized and uses appropriate tags. However, you could enhance accessibility by including alternative text for your images using descriptive alt attributes.
    2. Consider utilizing semantic HTML elements such as <article> and <figure> to provide more meaning to your content, especially for screen readers and search engine optimization.

    CSS:

    1. Your use of CSS variables is excellent for maintaining consistency and making updates easier. Consider giving your variables more meaningful names to improve readability and maintenance.
    2. You're effectively applying responsive design techniques with media queries. However, ensure that your media query syntax is correct (e.g., @media (min-width: 1200px)) to properly target larger screens.

    Overall, you're off to a great start! Keep experimenting with design and layout to enhance user experience, and continue honing your skills. Happy coding!

    1
  • Augustine Stephen Abah•60
    @ababaugSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to complete the project with what I learnt on CSS Grid from Kevin Powell Youtube Channel.

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

    trying to vertically align the side grids, but I was able to solve that by reading mdn documentations.

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

    None

    Four card feature section

    1
    Sardor Akmalovich•190
    @akmalov11cPosted 6 months ago

    Hey there, great job on your implementation!

    Your code is clean and well-structured. Keep up the excellent work, and don't hesitate to experiment with new techniques and seek feedback from peers to continue improving. Happy coding!

    0
  • Julie Crotzer•360
    @JCrotzerSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Using rem and em for sizes for better responsiveness.

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

    n/a

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

    n/a

    Responsive Product Preview Card using flexbox, css and html

    1
    Sardor Akmalovich•190
    @akmalov11cPosted 7 months ago

    Great job on the layout of your main section! Now, let's provide some feedback:

    • Your HTML structure is simple and effective, using appropriate tags for different elements.
    • The CSS styling is well-organized and easy to follow, with clear comments.
    • The use of CSS variables for colors enhances maintainability and consistency.
    • The design is responsive, adjusting smoothly between mobile and desktop views thanks to the media queries.
    • To improve consistency and visual appeal, consider increasing the border-radius for the ".mobile-img" and ".desktop-img" elements to match the rounded corners of the container.
    • Paying attention to padding throughout the design, especially within ".card-content", can help create better spacing and alignment for your content.
    • Consider using the <picture> element to provide different image sources based on the device's viewport size. This can improve performance and optimize image loading for users on various devices, ensuring they receive the most appropriate image resolution.

    Overall, your code shows a good understanding of HTML and CSS. Keep refining your skills, and don't hesitate to reach out if you need further assistance. Keep up the good work!

    0
  • Ahmed A Zenaty•40
    @AhmedzenatySubmitted 7 months 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?

    none

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

    none

    recipe-page-main

    1
    Sardor Akmalovich•190
    @akmalov11cPosted 7 months ago

    Great job on the recipe page component!

    Your HTML and CSS skills are solid, showing attention to detail and usability. Just remember to pay more attention to colors, especially for list markers. Also, adding a border-bottom to each table line except the last one would improve clarity. Keep refining your skills for better designs. Happy coding!

    0
  • Mennatalla•90
    @Mennatalla-KhoughaSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    It took 45 minutes

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

    Adjusting the fonts size

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

    i am not sure the font sizes are right

    Frontend Mentor | Social links profile

    1
    Sardor Akmalovich•190
    @akmalov11cPosted 7 months ago

    Great job on the card component!

    Now, let's dive into some feedback to further enhance your work.

    HTML:

    • Your HTML structure is clear and easy to follow. It could be improved slightly by using more semantic elements like <article> and <ul>.

    Responsive Layout:

    • Your card layout adapts well to smaller screens. Consider adding media queries for larger screens to maintain consistency.

    Adherence to Design:

    • Your solution closely matches the design provided.
    • For the ".s-m" class, consider increasing the border-radius to create a smoother and more visually appealing button-like appearance.
    • In general, paying attention to padding throughout your design can greatly enhance the overall spacing and readability. Consider adjusting padding values to create more balanced and visually pleasing layouts.

    Overall, your solution demonstrates a solid understanding of HTML and CSS, with attention to detail and usability. Keep up the good work, and continue refining your skills to create even more polished and accessible designs. Happy coding!

    Marked as helpful
    1
  • Sardor Akmalovich•190
    @akmalov11cPosted 7 months ago

    Hi there! Great work on your project!

    HTML:

    1. You've effectively used semantic HTML elements like <main>, <div>, and <p> to structure your content. It's clear and organized.
    2. It would be beneficial to include more descriptive alt attributes for your <img> elements to enhance accessibility. Instead of "Card illustration" and "Author avatar", you could provide specific descriptions of the images.

    CSS:

    1. Your use of CSS variables for colors and typography is a good practice, making it easy to maintain and update styles throughout your project.
    2. You've implemented media queries to ensure your layout is responsive across different screen sizes, which is excellent. Consider adjusting spacing and font sizes further for improved readability on smaller screens.
    3. The box-shadow property on your .card class adds a nice touch of depth to the card. However, you might want to consider reducing the spread and blur radius slightly for a more subtle effect.
    4. It seems you've missed adding a transition property to elements where you want to animate changes. Adding transitions can create smoother visual effects, enhancing the user experience. For instance, you could add transitions to hover effects on elements like .title for a smoother color change.

    Overall, your code is well-organized and visually appealing. Keep up the good work, and don't hesitate to experiment with different techniques to further enhance your skills. Happy coding!

    Marked as helpful
    1
  • Omair Majid•100
    @BigO-DevSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I thought this was a simple, straightforward project, ideal for beginners. If I had to do things differently, I would try to organize my CSS better.

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

    The challenge was making sure it was responsive. I was able to achieve this by making the width of the card a percentage and by using rem units.

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

    I'd appreciate any feedback on how I could improve and advice on using best practices.

    QR code component using HTML and CSS

    2
    Sardor Akmalovich•190
    @akmalov11cPosted 7 months ago

    Hi there! Great job on completing the challenge!

    Your solution looks well-structured and visually appealing. Here are some suggestions to enhance your project further:

    HTML:

    1. You've used appropriate HTML elements to structure your content, which is fantastic. However, consider adding semantic elements like <header>, <main>, and <footer> for better organization and accessibility.
    2. Don't forget to add descriptive alt attributes to your <img> elements for better accessibility and SEO. Instead of simply "qr-code", you could provide a brief description of what the QR code represents.

    CSS:

    1. Your use of CSS variables for colors and typography is a smart approach, making it easy to update styles across your project. Consider using more descriptive variable names for better clarity and maintainability.
    2. You're applying media queries effectively to make your layout responsive. Perhaps you could fine-tune the spacing and typography for smaller screens to ensure optimal readability and usability.

    Overall, your code is clean and well-structured. Keep up the good work, and don't hesitate to experiment with new techniques and seek feedback from peers to continue improving. Happy coding!

    Marked as helpful
    1