Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
9
P
Eddie Bones
@EddieBones1

All comments

  • Maulid Fajar•290
    @MaulidFajar
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    in this code I tried to create with mobile design first which in the end it worked even though I was not used to it. maybe next I want to learn to use css preprocessor

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

    it takes too long to make this

    Responsive Testimony Section using CSS Grid

    #sass/scss
    1
    P
    Eddie Bones•220
    @EddieBones1
    Posted 8 months ago

    If you need help with CSS Grid, I have two amazing resources:

    1.) CSS Grid Layout by Chris House. This article by Chris House is a comprehensive guide to CSS guide.

    2.) Learn CSS Grid the Easy Way by Kevin Powell. If you need to see CSS Grid properties in action, Kevin Powell does a fantastic job of explaining it.

    Marked as helpful
  • 1lija•140
    @1lija
    Submitted 9 months ago

    Four Card Feature Section, first time using grid

    #sass/scss
    1
    P
    Eddie Bones•220
    @EddieBones1
    Posted 8 months ago

    Great Start! However I have a few suggestions:

    1.) In your HTML file, you don't have a anything written in your alt text. Alt text provides better SEO because it provides more context about the content, and it helps with accessibility for screen readers.

    2.) Also, in your HTML file, you have a <h2> tag above the <h1> which is not correct because heading tags should be used in hierarchical order from <h1> to <h6>. You can replace the <h2> tag with a <span> tag because <span> tags does not affect the heading hierarchy.

    <span>Reliable, efficient delivery </span>
    <h1> Powered by technology </h1>
    

    Now span is an inline element. So if you want to change it to a block element just use display:block or display:inline-block.

    Hope this helps.

    Marked as helpful
  • Eugen•180
    @Fender60
    Submitted 9 months ago
    What challenges did you encounter, and how did you overcome them?

    I did this project without a layout for figma, so there were problems with indents and dimensions.

    CSS Grid, Flexbox

    #bem#sass/scss
    1
    P
    Eddie Bones•220
    @EddieBones1
    Posted 9 months ago

    Nice work! I was looking at your code, and I noticed a few things:

    • Include a full CSS reset which goes at the top of your style sheet, before your body. A full css reset establishes a consistent design across different browsers by removing any default styling that each browser has.
    //Full CSS Reset
    *,
    *:before,
    *:after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {}
    
    • You use the same media screen multiple times in your style sheet. Just use it once, and input all your code in that one media screen.
    Marked as helpful
  • iindty•80
    @iindty
    Submitted 10 months ago

    recipe-page-main

    1
    P
    Eddie Bones•220
    @EddieBones1
    Posted 10 months ago

    Good job! But I suggest using HSL (hue, saturation, and lightness) values over hex values because it's easier to tweak HSL values over hex values down the road. Also, start incorporating global variables in your style sheet because it allows you to code faster in your style sheet, and if a web developer ever looks at your code, they would know what your values are. W3schools further explains and shows you examples of how to use global variables in your style sheet.

    Hope this helps!

  • Michael•50
    @NinnoMexs
    Submitted 10 months ago

    Responsive social link page using "HTML" and "CSS"

    1
    P
    Eddie Bones•220
    @EddieBones1
    Posted 10 months ago

    Amazing start! If you want to center the container in the middle of the page. You will have to input this code in the body:

    body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height: 100vh; /* vh= viewport height */
    }
    
    Marked as helpful
  • Julien•170
    @EdoardoRamondetti
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    i did not find this project difficult, i am glad of completed this project quickly

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

    initially I had a little difficulty in vertically centering the main div with flex because I didn't remember that I had to give a height to the body

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

    I would like to know if I have set css and html correctly

    Blog preview card

    2
    P
    Eddie Bones•220
    @EddieBones1
    Posted 10 months ago

    Make sure to have the hover effect in the h2 selector so that when the mouse cursor hovers over the text it changes the color to yellow.

  • Daniel Morais•30
    @Ragnardnl
    Submitted 10 months ago

    QR code

    1
    P
    Eddie Bones•220
    @EddieBones1
    Posted 10 months ago

    I was reviewing your code, and I noticed that the background color for the page is incorrect. It should be: background-color: #d5e1ef; Also, you need the custom font that is in the style guide in the Starter Files.

    Marked as helpful
  • Dev Patel•90
    @devpatel024
    Submitted 10 months ago
    What specific areas of your project would you like help with?

    Gave me feedback!! & if you want to know how to use cursor IDE so message me I will help you to use cursor IDE in your daily coding projects.....

    QR code component - Using cursor IDE

    2
    P
    Eddie Bones•220
    @EddieBones1
    Posted 10 months ago

    It looks amazing! but you are missing the line-spacing property for your h1 and p selectors in your stylesheet. That information can be found in the design Figma files. Also, use em instead of px units because px units are not responsive. You can read more about px vs em units by Grace Snow

    Marked as helpful
  • Mohammed Abdul Sattar•90
    @mabsattar
    Submitted 10 months ago

    QR-Card build via html and css

    1
    P
    Eddie Bones•220
    @EddieBones1
    Posted 10 months ago

    You're off to a really great start! but I noticed there are a few things that is missing in your code. One of them is the background color of the page.

    body{
    background-color: #d5e1ef;
    }
    

    Also, the custom font family Outfit is missing in the head section of the index.html file.

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
    

    Once you copy and paste the code above in the body section of your html file. You will be able set the font family to Outfit in the h1 and p selectors in your stylesheet. Also, you have to change the font-weight to what is shown in the Figma Style folder they provided.

    Hope this helps 😁

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub