Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
7

Edoye

@DoyeDesignsNigeria170 points

This is me taking my first step on my journey to become a frontend developer. I'm happy to learn and share my knowledge and experience.

Latest solutions

  • Responsive Landing Page Using Tailwind CSS

    #tailwind-css

    Edoye•170
    Submitted over 2 years ago

    0 comments
  • I used CSS grid and JavaScript to make it responsive


    Edoye•170
    Submitted over 2 years ago

    2 comments
  • I built this landing page using CSS grid


    Edoye•170
    Submitted over 2 years ago

    1 comment
  • I completed this challenge using flexbox


    Edoye•170
    Submitted over 2 years ago

    0 comments
  • Product card using flexbox and media queries for responsive design


    Edoye•170
    Submitted over 2 years ago

    1 comment
  • I used flex box and hover effect techniques for this project


    Edoye•170
    Submitted over 2 years ago

    1 comment
View more solutions

Latest comments

  • AbdulRhman•270
    @Abdo-al-R
    Submitted over 2 years ago

    Huddle landing page using html and css only

    #accessibility#lighthouse
    1
    Edoye•170
    @DoyeDesigns
    Posted over 2 years ago

    Hello AbdulRhman, you've done a superb work. Your code is readable and easy to understand. I observed you used a lot of breakpoints. you were trying to target specific devices right?

    Here are a few suggestions to improve your code. You can use word-wrap so that your text will be responsive based on the screen size

    Marked as helpful
  • Esteban•340
    @estebanp2022
    Submitted over 2 years ago

    Clipboard Landing Page

    1
    Edoye•170
    @DoyeDesigns
    Posted over 2 years ago

    Hello Esteban, I can see the effort put into this, you’ve done a wonderful job 👏🏾. Here are some suggestions to improve your code. Your HTML markup should contain a level one heading (h1). You can use an h1 tag and then style it to the text size you want.

    I also observed you comment a lot, very detailed comments. You won’t have the luxury of commenting like that on bigger projects. You should practice commenting only when you want to explain concepts that may not be too clear to people who read your code.

    Happy coding Esteban

  • DayaA•130
    @Aishaakin
    Submitted over 2 years ago

    Responsive Landing Page Using CSS Flexbox

    3
    Edoye•170
    @DoyeDesigns
    Posted over 2 years ago

    Hello Aishaskin,

    media query is a condition that has to be met before the elements on a webpage changes it’s layout structure to adjust to the user’s screen size.

    For example /Default background color / Body{ Background: white; } / On screens that are 400px or less, set background color to red/ @media only screen and (max-width: 400px){ Body{ Background: red; } } /On screens that are 800px or greater, set background color to blue/ @media only screen and (min-width: 800px){ Body{ Background: blue; } } Hope this helps

    Here is a link to better understand it https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Also you should wrap all the work to be done in the body in a main tag.. html semantics, it make your page more accessible. So you can remove the div with the container class and use a main tag instead

    You should not put a main tag inside a div. In terms of hierarchy a main tag comes before a div tag. So a div tag should be inside a main tag not the other way around.

    To center the old price and new price add these codes in the parent element holding both of them. That is the div with the “inline” class;

    .inline{ Justify-content: center; Align-items: center; }

    Feel free to reach out to me for more clarification. Happy coding:)

  • Gus•60
    @angusgee
    Submitted over 2 years ago

    QR component using CSS and HTML

    3
    Edoye•170
    @DoyeDesigns
    Posted over 2 years ago

    Good work Lord robins!

    You do not need css grid to center the page Elements. You can add;

    Body { Display: flex; Min-height: 100vh; Justify-content: center; Align-items: center; }

    You can check how I did mine. I reduced the amount of nested divs by grouping some elements into one div.

  • Markhadi•130
    @mrkhd-webDev
    Submitted over 2 years ago

    Social proof section

    #sass/scss
    1
    Edoye•170
    @DoyeDesigns
    Posted over 2 years ago

    Good work Markhadi! Nice attention to detail.

    The mobile view is very ok.

    In your Html markup the div with class= “rated ml-4” you closed the div like this </div class= “img-star”>. You did this several times to close some div tags.

    Attributes are only allowed on start tags

    Marked as helpful
  • Kush🫴•225
    @kush-x7
    Submitted over 2 years ago

    Product preview card component + Animations

    #animation
    2
    Edoye•170
    @DoyeDesigns
    Posted over 2 years ago

    Hello kush-x7 Your code is very neat and easy to read. And thank you for the resources I’m about to go check them out.

    I also like the initiative of adding css animation to your design. It’s cool. I’ll start thinking outside the box too.. nice work

View more comments
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

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