Skip to content
OverviewSolutions
6
Comments
3
P

Erics

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

  • Character counter

    P
    Erics•90
    Submitted 16 days ago

    What would be the best practice to create the letter density "bars".

    0 comments

  • Interactive Card Details Form

    P
    Erics•90
    Submitted about 1 month ago

    How can I get more accurate sizing to get the layout to be the exact copy of the challenge.

    0 comments

  • Responsive Landing page using CSS

    P
    Erics•90
    Submitted about 2 months ago

    1. How can I find spacing between the hero and content, as as with the navbar and hero

    2. How can I determine the spacing of the main content as well as content inside the grids

    3. How can I determine what the box-shadow values are

    4. In what ways can I make my code more efficient in terms of using less code and getting the design to be more exact.

    0 comments

  • testimonial cards using grid

    P
    Erics•90
    Submitted 7 months ago

    I am curious how I can get the SVG image to work accordingly during the changing of the width. I originally used img."quotation" to make sure that it bypassed any other styles, however this also caused it to bypass the responsiveness and resulted in it not working accordingly. What was causing the "quotation" class to not working the way it should be intended.

    1 comment

  • Four card feature responsiveness

    P
    Erics•90
    Submitted 7 months ago

    How can I preview the changes to a website when I do not have a computer that can reach 1440px, how can I make sure that it is changing correctly to that width? What are options to run the challenge locally to view live changes? How can I add margin between the bottom of the last card and the bottom of the screen when reaching the mobile responsiveness of 375px?

    1 comment

  • HTML + CSS

    P
    Erics•90
    Submitted 7 months ago

    I would like to find ways that I can more efficiently style the html and css. What ways in this challenge could you quickly format the Html and css and how each works in conjuction with each other.

    1 comment

Latest comments

  • P
    Erics•90
    @EricS02Posted 7 months ago

    Great job with the project Lance!

    Your image styling repeats multiple times for different articles (.article-1, .article-2, etc.). You can simplify this by combining the shared properties.

    article .info > img { width: 1.8rem; height: 1.8rem; border-radius: 2rem; }

    .article-1 .info > img { border: 2px solid hsl(263, 63%, 64%); }

    .article-2 .info > img { border: 2px solid hsl(0, 0%, 81%); }

    DRY Principle (Don't Repeat Yourself) with Flexbox: You use display: flex; flex-direction: column; gap: 1rem; in almost every article. Move these common properties to a global article selector and only override unique styles as needed.

    article { display: flex; flex-direction: column; gap: 1rem; }

    0
  • Megha S Patil•100
    @meghaspatil1Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Use of flex

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

    arranging cards into mobile view, then got idea of combing to cards as flex

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

    in flex

    Responsive page experience using flex

    1
    P
    Erics•90
    @EricS02Posted 7 months ago

    Hello Mega S Patil!

    Great job completing the challenge!

    Consider using more semantic HTML tags to improve structure and accessibility. For example, use <header> for the title section and <article> for each card:

    <header class="title"> ... </header> <article class="card Supervisor"> ... </article>

    The alt text for images should be more descriptive. Rather than just repeating the card title (e.g., “Supervisor”), provide meaningful descriptions for better accessibility.

    The class names (e.g., Supervisor, Builder, Karma) should follow a consistent naming convention such as BEM (Block Element Modifier). This could prevent future conflicts and make the code more scalable.

    You could improve the layout by making better use of Flexbox. The current structure of .flex1 and .flex2 could be simplified. For example, wrap the cards in one container and use flex-wrap: wrap to handle responsiveness, instead of nesting multiple flex containers:

    <div class="cards-container"> <div class="card card--supervisor"></div> <div class="card card--team-builder"></div> <div class="card card--karma"></div> <div class="card card--calculator"></div> </div>

    It might be helpful to explicitly include media queries to ensure the design remains responsive on smaller screens. For example, stack cards vertically on smaller screens.

    @media (max-width: 600px) { .cards-container { grid-template-columns: 1fr; /* One column on mobile */ } }

    Well done and good luck in the next challenge!

    0
  • P
    Erics•90
    @EricS02Posted 7 months ago

    great responsiveness and design, only slight suggestion is padding for text could be better

    0