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

John

@MiyaoCatSeattle410 points

Hello! I love Frontend Web Design! I enjoy turning Figma files into webpages, which explains why I'm here. I've been studying, learning and practicing Frontend Web Development for over a year now. My goal is to land a Frontend Web Dev role soon.

I’m currently learning...

HTML, CSS, SCSS, Javascript, Node, PHP, Vue (might change to React as it seems to be the popular framework).

Latest solutions

  • New Homepage - Mobile first, SASS/SCSS, Flexbox, Grid

    #sass/scss

    John•410
    Submitted about 1 year ago

    0 comments
  • BMI Calculator Webpage - Mobile first, JS, SASS/SCSS, Grid, Flexbox

    #sass/scss

    John•410
    Submitted about 1 year ago

    I'd like to have a JSON file with all the different "ideal" weights for each height. I started working on it, but I didn't get it up and running. I created the JSON file with the data, but need to pull it into the webpage.


    1 comment
  • Calculator App - Mobile first, Javascript, SASS/SCSS

    #sass/scss#django

    John•410
    Submitted over 1 year ago

    My javascript. It looks like it can be refactored. I feel like it could be written more efficiently.


    0 comments
  • Huddle Landing Page - Mobile first, SASS/SCSS, Flexbox

    #sass/scss

    John•410
    Submitted over 1 year ago

    0 comments
  • Coming Soon Page - SCSS, Javascript

    #sass/scss

    John•410
    Submitted over 1 year ago

    Javascript, SASS, code organization.


    0 comments
  • Intro Component - Mobile first, Flexbox, SCSS, Javascript

    #sass/scss

    John•410
    Submitted over 1 year ago
    • Organization of my code.
    • SCSS
    • Javascript. I think my JS could be refactored as there's a lot of repeating coding.

    0 comments
View more solutions

Latest comments

  • Tharun Raj•1,330
    @Code-Beaker
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Completed it and learned how to google for things that you find difficult. That's all :)

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

    I didn't know how to get the rounded borders around the icons. So did a bit of Googling and Luckily, Stack Overflow helped me solve it.

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

    I'm not really confident about its responsiveness. It might not be perfect for bigger displays because it is my first time trying mobile-first workflow completely.

    I would like to know if I did well with the CSS. Thank you!

    Huddle Landing page using Grid, Flex and Media Queries

    1
    John•410
    @MiyaoCat
    Posted about 1 year ago

    You have <main class='main'>. I think that's redundant. You'll only have one <main> element so you don't necessarily need to give it a class. If you do, maybe make it more descriptive of the element.

    The site only covers the top half of the screen when viewed on desktop. To fill out the page so the content covers the entire height of the screen you could do main { display: flex; flex-direction: column; } then header { flex-grow: 1}

    You have most of the content in the <div='header'>. You can use the official <header> tag for the logo and have the meat of the content in <main>. Then put the social icons in the <footer>.

    Otherwise, looks great!

    Marked as helpful
  • 123dakalo•50
    @123dakalo
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    When I began coding I ignored table elements but in this solution I learned how to use tables.

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

    The challenge I faced was making the design to be responsive like in the design I failed to mimic the design solution. I'll overcome by learning more.

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

    Media query please and maybe to centre big element like this one

    Responsive recipe page using HTML and CSS

    2
    John•410
    @MiyaoCat
    Posted over 1 year ago

    Looks great! The spacing between the bullets and numbers and the text is well done. I know I struggled with that.

    Some small differences I noticed:

    • Your line spacing looks a bit tight compared the the design file.

    • I saw you use @media (max-width: 426px). For mobile-first development, you'll want to use @media (min-width: 426px). When you build mobile-first, you build out the mobile screen first. As you make the screen bigger, you may change some of the CSS. So you'll say, when the screen size is a minimum of X pixels, the elements will include Y CSS. In other words, when the screen size is X pixels or larger, then do this...Hope that makes sense! I know for me it seemed totally backwards and took me a minute to understand it.

  • Moises2710•190
    @Moises2710
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I proud of my HTML because I feel that I am improve my knowledge in this topic.

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

    I didn't have any problem in this challenge.

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

    I would like to receive help in my responsive design.

    Web page with responsive desing and flexbox

    2
    John•410
    @MiyaoCat
    Posted over 1 year ago

    Nice work! Not much to add, just a couple things I quickly noticed.

    • It looks like your box-shadow around the Payment button is off. Here's a handy article that explains the numbers. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
    • An even easier tool is Chrome's inspect too. If you inspect the Payment element then click on the little purple box next to the box-shadow declaration, you can drap and pull the box shadow and it'll automatically update the numbers.
    • I see you used main as the container. However this is a component. I like to think of components as a piece of the page that can be placed anywhere on the page. I would add a secondary container to the main, I typically just make a div and give it the class name of whatever the component is I'm building.
    • When I pull the window wider than 1440px, the background wave cuts off. Also, it looks like the button half is white when it should be blue. I went back and looked at my solution and I didn't even add the wave. Oops!

    Otherwise, looks great! Keep it up!

    Marked as helpful
  • Moises2710•190
    @Moises2710
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I proud of my HTML because I feel that I am improve my knowledge in this topic.

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

    I didn't have any problem in this challenge.

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

    I would like to receive help in my responsive design.

    Web page with responsive desing and flexbox

    2
    John•410
    @MiyaoCat
    Posted over 1 year ago

    Nice work! Not much to add, just a couple things I quickly noticed.

    • It looks like your box-shadow around the Payment button is off. Here's a handy article that explains the numbers. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
    • An even easier tool is Chrome's inspect too. If you inspect the Payment element then click on the little purple box next to the box-shadow declaration, you can drap and pull the box shadow and it'll automatically update the numbers.
    • I see you used main as the container. However this is a component. I like to think of components as a piece of the page that can be placed anywhere on the page. I would add a secondary container to the main, I typically just make a div and give it the class name of whatever the component is I'm building.
    • When I pull the window wider than 1440px, the background wave cuts off. Also, it looks like the button half is white when it should be blue. I went back and looked at my solution and I didn't even add the wave. Oops!

    Otherwise, looks great! Keep it up!

  • John•410
    @MiyaoCat
    Submitted over 1 year ago

    Social Proof - Mobile first, SCSS, Grid, Flexbox

    #sass/scss
    1
    John•410
    @MiyaoCat
    Posted over 1 year ago

    I updated the size of the social-proof div and made it smaller. I also moved the background-images to main instead of within the social-proof div.

  • John•410
    @MiyaoCat
    Submitted over 1 year ago

    NFT card - Hover effect, Flexbox

    2
    John•410
    @MiyaoCat
    Posted over 1 year ago

    Thank you so much! That was incredibly helpful! I was wondering why the .overlay was appearing so big.

    Do you know why the bit of whitespace appears at the bottom if I don't do display: block to the NFT image?

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