Skip to content
OverviewSolutions
4
Comments
4
P

JeniaPetrenko

@JeniaPetrenko40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • NayyabAqib•650
    @nayyabaqib
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully implementing a responsive design using only HTML and CSS. It was a great learning experience to structure the layout properly and style it effectively. Next time, I would focus more on improving accessibility and adding small animations to enhance user experience.

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

    One challenge I faced was aligning the content properly within the columns while keeping the design responsive. Initially, the layout was breaking on smaller screens. I solved this issue by using CSS Flexbox and Media Queries to ensure a smooth and adaptable design.

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

    Through this challenge, I learned how to structure content effectively using HTML and apply modern CSS techniques to create a visually appealing layout. Additionally, I improved my skills in handling responsive design and debugging layout issues.

    recipie_page

    #accessibility
    1
    P
    JeniaPetrenko•40
    @JeniaPetrenko

    Nice start. But it looks like you didn't finish all tasks requirements. It would be easier if the code consists of different "sections" (preparation, ingredients, instructions, nutrition) in one container. Then it easier to work with style.

    But it's good you used h1, h2, ul, ol - good for structure and accessibility.

    The layout is responsive with a flexible container width and good use of max-width for smaller screens.

    Although the code is clean, consider moving styles to an external CSS file for better maintainability and reusability.

  • P
    JeniaPetrenko•40
    @JeniaPetrenko

    Semantic HTML The structure is simple and uses some semantic elements like <section> and <div>. However, it would be better to wrap the main content inside a <main> tag for better accessibility and structure.

    Accessibility Improvements The profile image should have a more descriptive alt text, e.g., "Profile picture of Jatin Sharma". Using <button> instead of <a> for links that trigger actions (e.g., social media buttons) would improve accessibility. Consider adding aria-labels to links for screen reader users. Responsiveness The layout works well on smaller screens, but:

    The height: 550px; on .social-tab might cause overflow issues on very small screens. A better approach would be min-height instead of a fixed height. The profile image's height: 84px; makes it appear stretched—use aspect-ratio: 1/1 or adjust object-fit. Code Readability & Reusability The CSS is structured well, but avoid using generic selectors like a {}—instead, use .link-tabs a {} for better specificity. Some spacing inconsistencies exist (e.g., .bio { padding-top: 5px; } could be in .profile). Design Accuracy The colors and spacing look good, but adding more padding around the text would improve readability. The hover effect on links works well and gives good feedback to users. Suggested Improvements Wrap the main content inside a <main> tag. Improve image styling to avoid stretching. Adjust the height of .social-tab to be more flexible. Use more descriptive alt text and consider aria-labels for better accessibility. Overall, this is a solid implementation with just a few refinements needed!

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

    I think I am proud of resemblance with a design, simple code, using custom properties for a first time and most of all clamp() function debut.

    I'd like to try mobile first approach next time and to use max-width properties in a right way

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

    • Responsiveness, Media queries

      Needed a lot of trial and error with that

    • Finding a way to reduce font without media queries

      Googled for some time to find out and experimented with different approaches

    • Recalculating units to come up with intermediate fonts value to use with clamp()

      VSCode copilot came in handy

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

    Do I adhere with best practices?

    I just used two media queries for a sake of the project but did I pick right ones?

    Is my approach to reducing fonts without media queries correct?

    Responsive Blog Preview Card

    #accessibility
    1
    P
    JeniaPetrenko•40
    @JeniaPetrenko
    1. Your solution is great built using semantic HTML. The tags "article, time" are will-suited and enhances clarity. I think that tag "address" might not be the best choice for the author section.
    2. This code is quite accessible. "alt" attributes are included in images which is great for screen readers. The structure is clear and easy to navigate.
    3. The us of "clamp()" for text sizes ensures good scalability.
    4. Code Sructure is clear and the use of CSS variables makes the code more maintainable.
    5. design closely matches the task.
  • P
    JeniaPetrenko•40
    @JeniaPetrenko

    Good that you're using h1 element for the main heading, it gives structure and helps with accessibility. You can also improve the usage of the alt attribute for the IMG tag and provide a meaningful description of the image for better accessibility. It's good that you use Flexbox to center the content, which is good for responsiveness. Think also about adding some media queries for finer control over how elements behave on smaller of larger screens. Your CSS is clear and well-organized, with straightforward rules for layout and design. Consider adding more specific class names for elements like the img, heading, p to increase clarity in larger projects. Your code is solid for a basic layout and you've followed many best practices. Overall, you're on the right track. Keep up the good work!