Skip to content
OverviewSolutions
26
Comments
43
P

Rahexx

@Rahexx980 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

View more solutions

Latest comments

  • P
    Rahexx•980
    @Rahexx

    Overall, great job! However, I wouldn’t recommend using ids for styling purposes — it's better to use class selectors, as they are more flexible and easier to manage, especially in larger projects.

    Additionally, for a project of this size, I’d recommend using SCSS. It allows you to split your styles into smaller, more manageable files, use variables and nesting, and overall write cleaner and more maintainable code compared to a single large CSS file.

    Keep up the good work!

  • P
    Rahexx•980
    @Rahexx

    ✅ Strengths

    ✅ Proper HTML structure – the document includes essential tags: <!DOCTYPE html>, html, head, body.

    ✅ Responsive layout using CSS Grid and media queries – a strong approach for adaptive design.

    ✅ Use of class-based selectors instead of styling elements directly – clean and maintainable.

    ✅ Thoughtful component structure (e.g., .headline, .container, .story) – improves readability.

    🛠️ Suggestions for Improvement

    1. 📦 Use an external CSS file instead of inline <style> Why it matters:

    Helps separate concerns – structure (HTML), style (CSS), and logic (JS) should be in different files.

    Makes the CSS easier to maintain and reuse across multiple pages.

    Enables better caching and faster load times in production.

    How to do it: Create a style.css file, move all CSS rules there, and link it in the <head>:

    <link rel="stylesheet" href="style.css">
    1. 📐 Use the BEM methodology for naming classes Currently, class names like .daniel, .patrick, etc. are tied to specific content, which reduces reusability.

    What is BEM?

    BEM stands for Block__Element--Modifier.

    It enforces modular, predictable class names and makes large codebases easier to scale.

    Example using BEM:

    <div class="testimonial testimonial--highlighted"> <div class="testimonial__header"> <img class="testimonial__avatar" src="..." alt=""> <div class="testimonial__user-info"> <p class="testimonial__name">Daniel Clifford</p> <p class="testimonial__title">Verified Graduate</p> </div> </div> <p class="testimonial__quote">...</p> <p class="testimonial__story">...</p> </div> Why it’s better:

    Easier to scale and maintain.

    Avoids conflicting styles.

    Encourages reusable components.

    1. 🚫 Avoid content-specific class names Using class names like .daniel, .kira, etc., creates tight coupling between style and content. This can be problematic if the content changes or needs to be reused.

    Instead, use more generic modifier-based classes:

    .testimonial--primary { background-color: #7239b3; } .testimonial--light { background-color: #fff; color: #5a5b5e; }

    1. 🧹 Code cleanup and optimization Remove commented-out code (e.g., the old .content { display: flex; ... } block) unless it's part of a WIP or being documented.

    Avoid conflicting margin declarations like:

    .deHead { margin-left: 70px; margin-right: 70px; margin: 30px; }

    These override each other. Stick to margin: 30px unless intentional.

    In your media queries:

    grid-template-rows: repeat(auto-fit, 1fr); — note that auto-fit is better suited for columns and works differently with rows. Consider removing grid-template-rows and letting the content determine row height.

    🧠 Final Thoughts Overall, the code works well and demonstrates good foundational understanding. However, introducing BEM for naming conventions and using a dedicated CSS file would significantly improve maintainability, readability, and scalability – especially in real-world projects or collaborative environments.

  • P
    Rahexx•980
    @Rahexx

    Great job with this challenge! Here is some feedback from me:

    Website

    Everything looks good; however, the category background is noticeable due to its corners.

    HTML

    Your HTML file follows BEM conventions well. Everything is clean and readable, and you also use semantic elements correctly—great job!

    SCSS

    Excellent use of nesting and aria-hidden for managing styles. The file structure is well-organized, and the styles are clean and easy to read.

    JS

    There are a couple of unnecessary comments, such as the one describing formatHours. The function name itself is clear enough. Similarly, the comment explaining the handleError function is redundant.

    Instead of keeping handleError as a separate function, you could leave it as a one-line arrow function directly in the catch block for a cleaner approach.

    Overall

    Great job! Keep up the good work!

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

    I am most proud that I successfully completed this challenge using only HTML and CSS. It helped me improve my understanding of structuring a webpage and styling it to match the given design. Next time, I would focus on making my code more efficient by using CSS flexbox/grid more effectively and ensuring better responsiveness for different screen sizes.

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

    One of the challenges I faced was aligning the elements perfectly according to the design. Initially, some sections were not positioned correctly, but I resolved this by carefully adjusting margins, paddings, and using flexbox. Another challenge was ensuring that the text and images were responsive. I overcame this by using relative units like percentages and rem instead of fixed pixel values.

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

    This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.

    Social link profile

    1
    P
    Rahexx•980
    @Rahexx

    Overall good job! Here is some feedback from me:

    Website

    1. I can't see the profile picture because the assets folder is missing in your repository.
    2. The accent color for the city info is different from the original design.
    3. There is a lack of space between elements, making the layout feel cramped.

    HTML

    1. Your HTML is well-structured but can be improved. It's a good practice to use semantic tags. Here is the MDN documentation, which explains semantic tags and why they should be used.

      • For example, instead of <div class="card"></div>, you could use <main class="card"></main>, which adds more meaning to your structure.

    2. Your alt text for the image does not describe its content properly.

      • alt attributes are essential for accessibility, helping screen reader users understand what the image represents.
      • A better alt description could be: "A woman with curly hair wearing a shirt, looking to the left."

    CSS

    1. It's best to separate your styles from the HTML content.

      • Create a separate index.css file and move all styles there.
      • Then, link it in your HTML file: 
        <link href="index.css" rel="stylesheet" />

    2. You have a style-guide.md file that includes font-family and color information.

      • Instead of using Arial, you should use Inter, as mentioned in the style guide.
      • If you're unsure how to import a font, check out Google Fonts—it's easy to use.

    3. The transition and hover effects on the buttons are a nice touch!

    4. Your styles remain static across all screen sizes.

      • To make your website responsive, check out the MDN Docs on Media Queries.
      • Media queries help adjust the layout for different devices.

    5. Remember to leave enough space between elements to improve readability and aesthetics.

    Additional Resources

    Here are two fun games to help you learn Flexbox and Grid more interactively:

    Keep up the great work, and good luck with your next challenge! 🚀

  • vladyslav-shulhach•190
    @vladyslav-shulhach
    What are you most proud of, and what would you do differently next time?

    I'm proud of the way I structured my SCSS this time. For the first time, I've separated the styles into separate files and folders, which makes them much easier to maintain. Before, everything was collected in one file, and let's just say it was a bit messy and hard to navigate. This new approach made my codebase much cleaner and easier to manage. Next time, I plan to improve my work even more by being very careful about how I structure my files from the start to avoid any unnecessary complexity or confusion.

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

    I developed JavaScript to check if the user filled in the email input field correctly. The biggest challenge was to figure out how to combine logic with style - in other words, to find the right solution. JavaScript requires me to think more logically, which makes it challenging and time-consuming. However, I know that with constant practice, I will continue to improve. I overcame this challenge by researching possible solutions online. After testing my implementation, I found that it works as expected. Fortunately, JavaScript is becoming easier to understand as I gain more experience.

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

    I'm open to help in all areas. In particular, I'd like to hear feedback on HTML for structure and accessibility, SCSS for better organisation and best practices, and JavaScript for functionality and logic. Any insights or suggestions for improving my approach would be great.

    Newsletter sign-up form with success message Solution

    #sass/scss
    1
    P
    Rahexx•980
    @Rahexx

    Good job with this challenge! Your website is really close to the design. Here is some feedback from me:

    HTML

    1. You are using two separate img tags—one for mobile and one for desktop. Instead, check out the <picture> tag. It's a better way to manage images across different breakpoints.

    SCSS

    Your styles are well-organized, clear, and readable. Well done!
    Just one thing—try to avoid using !important unless absolutely necessary. It should always be a last resort.

    JS

    1. While JavaScript allows it, you should declare a function or variable before using it.
    2. The arguments input and errorElement in your showError function are unnecessary. You're passing the same variables every time, but since they exist in a higher scope, you can access them directly inside the function. Of course, the message argument is still needed.

    Overall, great job! Keep up the good work! 🚀

  • vladyslav-shulhach•190
    @vladyslav-shulhach
    What are you most proud of, and what would you do differently next time?

    I'm proud to have finally completed the project - what a relief! Next time I'd like to streamline my workflow to complete projects more efficiently.

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

    One challenge was to keep a steady pace throughout the project. I tackled this by staying consistent and focusing on making gradual progress.

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

    I'd like to improve my styling techniques and refine my HTML and JavaScript skills. Any feedback on best practices or optimisations would be greatly appreciated!

    Article Preview Component Solution

    #sass/scss
    2
    P
    Rahexx•980
    @Rahexx

    You did an amazing job with this challenge! Here is some feedback from me:

    HTML:

    Your HTML looks great—you use semantic tags properly, which is excellent. However, I'd recommend being more consistent with your class naming convention. Currently, you're mixing three different conventions: sometimes using underscores, sometimes dashes, and other times camelCase. It’s best to choose one and stick to it.

    For example, I personally use BEM (block__element--modifier), so instead of blog-post__share-menu, I’d suggest renaming it to share__menu.

    Another issue is the use of IDs. While not inherently wrong, they can sometimes cause problems, especially when overriding styles. It’s generally recommended to use classes instead, unless an ID is absolutely necessary.

    CSS:

    Your styles are clean, and you follow best practices when using variables—great job!

    JS:

    Your JavaScript looks good, and I love that you thought about closing the modal with the Escape key. That’s a great usability improvement!

    Overall, excellent work! You should be proud of both this project and your progress.

    Marked as helpful
View more comments