Skip to content
OverviewSolutions
7
Comments
7
P
Eddie
@WeatherheadOnline

All comments

  • P
    Michael•180
    @Networksentinel
    What are you most proud of, and what would you do differently next time?

    This project was similar to the one I did before, and I used it as a chance to sharpen my CSS Grid skills even more. Along the way, I also picked up a couple of neat tricks.

    1. Grid layout with grid-template-areas: I used grid-template-areas again to set up the layout. This time, I had to tweak the column sizes a bit to get the spacing just right. Playing with the grid-template-columns helped me balance how much space each section takes up.

    2. Profile pictures with a "fake" border: The profile pictures had a border (or stroke), but it wasn’t part of the actual image. I could’ve used box-sizing: content-box;, but instead, I went with a little trick: I added a box-shadow that mimics a border. It doesn’t mess with the box model and still gives the same look. 😄

    Here’s a code snippet showing both things in action:

    <header class="feature__header">
    <img class="feature__header--img feature__header--stroke-daniel" src="/images/image-daniel.jpg" alt="Profile picture of Daniel">
    <h3>Daniel Clifford</h3>
    <h4>Verified Graduate</h4>
</header>

    .feature__header {
    display: grid;
    gap: 0.25rem 1.0625rem;
    grid-template-areas: 
    "left right1"
    "left right2";
    grid-template-columns: auto 1fr;

    &--img {
        width: 28px;
        height: 28px;
        border-radius: 100%;

        grid-area: left;
    }
    &--stroke-patrick {
        box-shadow: 0px 0px 0px 2px $color-8;
        -webkit-box-shadow: 0px 0px 0px 2px $color-8;
        -moz-box-shadow: 0px 0px 0px 2px $color-8;
    }
    &--stroke-daniel {
        box-shadow: 0px 0px 0px 2px $color-9;
        -webkit-box-shadow: 0px 0px 0px 2px $color-9;
        -moz-box-shadow: 0px 0px 0px 2px $color-9;
    }
}
    What challenges did you encounter, and how did you overcome them?

    One challenge I ran into was getting the Grid items to have the correct size and spacing. It took a bit of experimenting to figure out how to control the ratio of space each item takes up. But honestly, it turned out to be a great way to dig deeper into CSS Grid. In the end, the solution was pretty straightforward — something like:

    grid-template-columns: auto 1fr;
    What specific areas of your project would you like help with?

    If anyone has a moment, I’d love some feedback on two of my files: _feature.scss and _cards.scss (specifically the //INDIVIDUAL CARD STYLES section).

    Is the way I’m using Grid there effective? Would you simplify or improve anything?

    Any tips, tricks, or advice—no matter how small—are very welcome and much appreciated!

    Responsive Grid section using all kinds stuff

    #vite#sass/scss
    2
    P
    Eddie•140
    @WeatherheadOnline

    I think your use of CSS Grid looks good - seems like you got it all figured out. On an unrelated note, here's a potential alternative approach for adding a border on two of the profile pics. In the HTML, the <img> element would be replaced with a <div>:

    <header class="feature__header">
    <div class="feature__header--img feature__header--stroke-daniel"></div>

    and then the profile pic would get added as a background image to the empty div:

    .feature__header--stroke-daniel  {
    background-image: url("/images/image-daniel.jpg");
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    background-size: cover;
}

    Then to add the border:

    .feature__header--stroke-daniel, .feature__header--stroke-patrick {
    border: 2px solid $purple-300;
}

    Food for thought. In the meantime I'm going to go look at more of your code because good grief how did you get it looking so close to the design file.

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

    Used a mobile first approach to build a responsive website and used sass mixins, functions to control the breakpoints.

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

    First time using a mobile first approach to building the site so awkward at first, but slowly got used to it with help of Google and other resources.

    Responsive four card layout using flexbox and scss

    #sass/scss
    1
    P
    Eddie•140
    @WeatherheadOnline

    Nice responsiveness. Don't forget to include media queries for tablets, too. (I'll admit that's something I've found challenging.) Here's something you could try: @media (any-hover: hover) for devices with a mouse or other pointer device, to target desktop screens, and @media (any-hover: none) for devices without a mouse, ie phones and tablets. After that, I usually target tablets with something like: @media (any-hover: none) and (min-width: 700px) (I used 700px based on the widths of tablet and phone screens in browser devtools). Regardless, your solution looks good.

    Marked as helpful
  • P
    Eddie•140
    @WeatherheadOnline

    Hi there. Nice solution. Here's something that may be useful: You can enter the word "Perfume" in lower- or sentence-case in your HTML, and use the text-transform property to make it render to the screen in uppercase. Your HTML on line 19 would look like <h5>Perfume<h5> and your CSS would need to include h5 {text-transform: uppercase}. You don't strictly need it for this challenge, but it might be useful in future if you're working with someone else's HTML.

  • P
    Eddie•140
    @WeatherheadOnline

    Your solution looks great. Here's one thing that might be helpful: you can fine-tune the horizontal positioning of the bullet points to be further to the left, to get them a bit closer to the design file.

    To change the positioning of the bullet points:

    ol, ul {padding-left: ___;}

/* or if you want them set up differently, */

ol {padding-left: ___;}
ul {padding-left: ___;}

    And to change the positioning of the text next to them:

    li {padding-left: ___;}

/* or */

ol > li {padding-left: ___;}
ul > li {padding-left: ___;}

    Hope that helps. But like I said, you're already looking good.

    Marked as helpful
  • P
    GeraASM•500
    @GeraASM
    What are you most proud of, and what would you do differently next time? the next time I'll try to start to remember use 100vh in the body always to start What specific areas of your project would you like help with?

    About de SEO another project means this topic about the images so I must to write height and width

    I use flexbox and margin-inline i didn't know to use

    3
    P
    Eddie•140
    @WeatherheadOnline

    Nice solution!

  • P
    Eddie•140
    @WeatherheadOnline

    Nice solution. I'm practicing giving feedback so take this with a grain of salt. You might think about sizing the fonts so that the text takes up about the same space as it does in the design .jpeg, eg the text in the main <p> element wraps to a new line at "of every / website" and at "content, and / presentation".

  • Agidza•20
    @lynnagidza
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing a responsive design that works well across different screen sizes despite my time away from frontend development. Though simple, the final product closely matches the design requirements while maintaining clean, readable code.

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

    The main challenges I faced included:

    • CSS Syntax Issues: I initially struggled with CSS shorthand properties because I was incorrectly using commas instead of spaces to separate values. After careful debugging (Inspect) and reviewing documentation, I identified the correct syntax.
    • Centering Elements: The classic challenge of centering elements vertically and horizontally gave me some trouble. I resolved this by utilizing simple properties like margin: auto for divs and block display for the image
    What specific areas of your project would you like help with?

    I would appreciate guidance on:

    • Code Optimization: Are there ways to make my CSS more efficient? I feel like I might have some redundant styles that could be consolidated.
    • CSS Animation: I'd like to add subtle animations to enhance user experience.

    Responsive QR Code Component

    2
    P
    Eddie•140
    @WeatherheadOnline

    Nice solution. I like your choices of html tags, I could probably learn something about accessibility from you. Since you asked about redundancy, the only thing I could see is that you're declaring text-align: center twice, and you could probably get away with declaring it only once, in the body. But everything else looked quite efficient.