Skip to content
OverviewSolutions
10
Comments
12
LouiseCW
@costelloeward

All comments

  • LouiseCW•235
    @costelloewardPosted almost 3 years ago

    Hi - this looks pretty good overall. I'd like to second James' comment about semantic html and share this cheat sheet I have found useful: https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/

    1
  • LouiseCW•235
    @costelloewardSubmitted almost 3 years ago

    Hi everyone, this is my first challenge for a while! Any feedback appreciated. I moved the position of the quote mark as I found it made the text harder to read.

    Testimonials with grid and flex

    1
    LouiseCW•235
    @costelloewardPosted almost 3 years ago

    There is no level 1 header as I've treated this as a potential section of something larger.

    0
  • Juliette•100
    @juliettesimonotSubmitted almost 3 years ago

    Hey everyone :)

    I am learning coding, this is my first project. Please tell me if you see mistakes or if you have somes solutions to improve my code. I am focusing only on html ans css for now, before learning a new language :)

    Thanks a lot ! Juliette

    Summary Card Challenge

    2
    LouiseCW•235
    @costelloewardPosted almost 3 years ago

    Hi Juliette, This is great for a first project - well done! I'd suggest looking at the padding for the Annual Plan button - otherwise you are quite close to the design layout.

    Welcome!

    Marked as helpful
    1
  • LouiseCW•235
    @costelloewardPosted about 3 years ago

    Hi Alessandro, Welcome to Frontend Mentor. Well done for trying this one!

    I hit a wall too, until someone told me to look up mix-blend-mode.

    I used this along with

    • object-fit: cover;
    • put the image inside a div
    • set the color as the background for the div rather than styling it on the image.

    Hope this helps!

    0
  • LouiseCW•235
    @costelloewardPosted about 3 years ago

    Hi Sabrina, Well done on getting this far! Your html is referring to an image folder called "images", but your code repository has stored the images without a folder.

    So you can either take the /images out of the html, or make a folder for the images in your repository.

    Hope this helps!

    Marked as helpful
    0
  • LouiseCW•235
    @costelloewardSubmitted over 3 years ago

    Hi everyone,

    This is a work in progress, any feedback much appreciated. I'm unsure about the positioning of the boxes, especially the testimonials. Is there a better way than margins?

    Social proof section: first go

    2
    LouiseCW•235
    @costelloewardPosted over 3 years ago

    Thanks Abhijit, I'll try that out!

    0
  • LouiseCW•235
    @costelloewardPosted over 3 years ago

    Hi Arthur,

    Good job! You can use main, section and picture tags instead of divs -though it might lead to coding the responsive image changes in the html.

    Marked as helpful
    0
  • authenticCoder•75
    @authenticoderSubmitted over 3 years ago

    I was not able to add border-radius to the top of the image alone. The border-radius affected all sides of the image. I would like to have a border-radius on the top section alone. How can I do that? Thanks.

    Mobile-first solution using CSS Flexbox

    2
    LouiseCW•235
    @costelloewardPosted over 3 years ago

    Hi, great job! Border-radius can take multiple values in the same way as margin and padding. So you can use something like this: border-radius: 0.5rem 0.5rem 0 0; I use rem, but this works with other unit types as well.

    Marked as helpful
    0
  • Lesley Kimutai•565
    @LeskimSubmitted over 3 years ago

    I'm hopeless in my margin and padding know-how in solving these problems....Any help or resource location to help me manage my margins and padding responsiveness better will be much appreciated

    Thanks in advance👊🏾

    Using HTML, CSS and JS

    2
    LouiseCW•235
    @costelloewardPosted over 3 years ago

    Hi, you're doing pretty good so far! I found this article helpful for getting my head around when to use padding and when to use margins. https://medium.com/frontendshortcut/margin-vs-padding-c1fc8ea8bfaf

    0
  • LouiseCW•235
    @costelloewardPosted over 3 years ago

    Hi Beshoy,

    Looking good so far!

    When I did this I was advised to go mobile first. So I wrote the CSS for the smaller screen first, then had one min-width query at the end. This meant all the styling for the larger screen was in one place.

    0
  • LouiseCW•235
    @costelloewardPosted over 3 years ago

    Hi John, I'm new and have just done this challenge as well. I used background-image in the CSS rather than adding the images in the html. I looked at the documentation here https://www.w3schools.com/cssref/pr_background-image.asp

    Your solution looks fairly close overall though, so well done!

    0
  • LouiseCW•235
    @costelloewardPosted over 3 years ago

    Hi, I'm also a newbie to Frontend Mentor and I picked this as my first challenge too. It looks good, the positioning of the circles is slightly off, but not by much. There is also a missing line above the stats area of the card. Otherwise, I like it.

    0