Skip to content
OverviewSolutions
21
Comments
11
P

Shawky Ahmed

@QS3H350 points

I am just a passionate programmer aspiring to be a full-stack software engineer.

I’m currently learning...

React and TypeScript

Latest solutions

View more solutions

Latest comments

  • P
    Shawky Ahmed•350
    @QS3H

    Good Job on completing the challenge @zerowater4704, when I visited your GitHub page, I found that you are writing the README file in your language, which is not practically a problem, but can prevent people wanting to review your project and give you feedback on your solutions from doing so, I recommend you write your README and any documentation for any software you build in the future in English as that will help you reach most people in the world and especially developers as most of them use English in their work. Now, when it comes to your solution, it is well organized and well-structured in the HTML, and in the CSS, you can group related styles under comments to make the CSS code more readable and clean. Great job on the JavaScript solution :).

    Marked as helpful
  • P
    Shawky Ahmed•350
    @QS3H

    Great Job on completing the challenge. I have a few recommendations for the code to improve it further:-

    Current Strengths of your code:

    1- Good use of CSS custom properties (variables)

    2- Proper mobile-first approach

    3- Well-organized media queries

    4- Good accessibility features

    5- Clean CSS reset

    6- Logical naming conventions

    Areas for Improvement:

    • Group related media queries
    • Use CSS custom properties for repeated values
    • Use logical properties consistently
    • Consider using transform and opacity for animations
    • Make your CSS Custom Properties more organized ->
    :root {
  /* Colors */
  --clr-very-dark-grayish-blue: hsl(217, 19%, 35%);
  --clr-desaturated-dark-blue: hsl(214, 17%, 51%);
  --clr-grayish-blue: hsl(212, 23%, 69%);
  --clr-light-grayish-blue: hsl(210, 46%, 95%);

  /* Layout */
  --spacing-xs: 0.625rem;  /* 10px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 1.125rem;  /* 18px */
  --spacing-lg: 2rem;      /* 32px */
  
  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  
  /* Z-index layers */
  --z-normal: 1;
  --z-tooltip: 100;
  --z-fixed: 9999;
}
    • Improve Media Query Breakpoints ->
    :root {
  /* Breakpoints */
  --mobile: 40em;
  --tablet: 56.25em;
}

/* Use custom properties for breakpoints */
@media (min-width: var(--mobile)) {
  /* ...existing code... */
}
    • Add more DRY (Don't repeat yourself) Improvements
    /* Common border radius utility */
.radius-bottom {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.radius-top {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

    Besides that, you're good to go. Great job, and good luck with your future challenges. :)

    Marked as helpful
  • P
    Shawky Ahmed•350
    @QS3H

    Great job on completing this challenge. I have a few recommendations for you:- Increase the font size of the hero heading to 64px or 4rem to make it look closer to the design. Also, increase the paragraph's font size in the hero section to 1.125rem and do the same to the main content text and increase it by a bit to match the design. Besides that, your solution is responsive and looks good on all screens Great job. Good luck with your future challenges. :)

  • P
    Rafael Dias•1,100
    @rafaeldgeo
    What are you most proud of, and what would you do differently next time?

    I'm proud to use in this challenge the web components to create reusable custom elements.

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

    My idea was to use this challenge to study web components, so I spent a lot of time trying to apply this knowledge. It's work!

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

    I would like to help with grid and flexbox.

    Testimonials-grid-section-main using web components

    #accessibility#web-components#bem
    1
    P
    Shawky Ahmed•350
    @QS3H

    Great Job finishing the challenge and being able to use web components, the only drawback I see for using them is that they can get very messy in the HTML, besides that there is not much to comment on your code Good work :)

  • P
    Shawky Ahmed•350
    @QS3H

    Great job on completing the challenge, I have a few recommendations to improve your code further:-

    1. I noticed in your HTML that you are using 2 H1 tags, I strongly recommend only using 1 h1 tag in any HTML document as that is the best for accessibility, you can put your subtitle in a span element in the h1 tag to style it accordingly

    2. I also recommend for you to increase the width of the cards to 350px or its equivalent in relative units (em and rem) to match the design as closely as possible

    3. lastly I suggest not changing the font-size of your HTML tag in your media query at different breakpoints but rather change the font-size at one location in the root element by making it a variable to make your designs more responsive and fluid.

    great job again on completing the challenge and good luck on the next ones :)

    Marked as helpful
  • P
    Shawky Ahmed•350
    @QS3H

    great job completing this challenge, I just have a couple of recommendations to improve your code further:-

    1. I would recommend using semantic HTML like the main tag to hold your card component as that is a best practice and it's great for accessibility
    2. In your CSS you should use relative units like (em and rem) for most of your styles to make the card and typography more responsive and fluid
    3. Lastly for future challenges I would recommend using CSS variables for colors font-sizes and weights (and anything that you would use at multiple places) as that will greatly improve your CSS code and will help you change the values in one place rather than going to each value to change it.

    wish your the best of luck at your next challenges :)

View more comments