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

princemuel

@princemuelUseless Loop, Australia135 points

Musician | Software Engineer | Educator | Avid-Learner | Tech-Enthusiast

I’m currently learning...

Frontend: Semantic and Accessible HTML | CSS and Sass | JavaScript with React Backend: Python | JavaScript with Node.js

Latest solutions

  • Calculator PWA built w/ HTML, CSS, Typescript, Rust and Web Assembly

    #accessibility#pwa#tailwind-css#vite#typescript

    princemuel•135
    Submitted 11 months ago

    Handling Input/Output in JavaScript

    Currently, the calculator's Rust/Wasm backend is parsing the input properly. The issue is setting up the JavaScript frontend to properly validate the user's input and make sure the correct values are sent to the backend


    0 comments
  • Mobile-first Card Components with CSS Grid and Flexbox


    princemuel•135
    Submitted about 4 years ago

    0 comments
  • Mobile first workflow with Semantic HTML markup and SCSS


    princemuel•135
    Submitted almost 4 years ago

    1 comment
  • Responsive SignUp Page with Sass and Flexbox


    princemuel•135
    Submitted almost 4 years ago

    0 comments
  • Mobile-first workflow with Sematic HTML and Sass


    princemuel•135
    Submitted about 4 years ago

    1 comment
  • Responsive Accordion card with CSS Grid and Transforms


    princemuel•135
    Submitted about 4 years ago

    1 comment
View more solutions

Latest comments

  • Priscillia Egbo (Althea Storm)•10
    @altheastorm
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud that I was able to make the recipe page responsive on most, if not all, devices. I am also proud that I was able to get the design as close to the designs I saw in the Figma documents.

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

    I designed the page first for desktop, so using media queries to redesign it for mobile proved challenging. I created a container with a white background (where the main content is situated) for the desktop version, so turning that container into the entire page for the mobile version and readjusting the design parameters of all the other elements to fit it was a bit difficult. I'm not even sure I did it right.

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

    I would like help with using media queries to make a desktop-first design mobile-responsive.

    Responsive omelette recipe page created with HTML and CSS

    1
    princemuel•135
    @princemuel
    Posted 7 months ago

    Hi there.

    I've checked out your code and overall, it looks good.

    • It uses semantic HTML.
    • The layout looks good on all screen sizes👌
    • It is well-structured, readable...you'll need to work on reusability.
    • The solution is close to the design and that's great. Chasing the Pixel-Perfect Dream
    • On accessibility, some suggestions, always wrap the page content inside a landmark e.g the main element. Some other landmarks are article, footer, section(useful when coupled with aria-label or arialabelled-by).

    Concerning, your request for help with making the project mobile responsive, why not try building it mobile first i.e write the base styles for mobile, then as the screen widths change, you update the relevant styles.

    I see you made some updates to the recipe container's styles at each breakpoint...You could instead, create a dedicated container class with an absolute max-width say 1440px(convert to rem), a width of 100% with some padding, maybe 1 or 2rem, and a margin-inline of auto to always center the content.

    I guess you already know some of this.

    You can either use it to wrap each section, or the whole content.

    Using it in this project should get you from mobile, all the way to the desktop without writing any media queries except for maybe font-sizes etc.

    Speaking of font-sizes, since you're familiar with css variables, you could create a typescale in :root:

    :root {
      --base-size: 1rem; /* normally 16px */
      --scale: 1.25; /* adjust to your preferred */
      --h1: calc(var(--h2) * var(--scale));
      --h2: calc(var(--h3) * var(--scale));
      --h3: calc(var(--h4) * var(--scale));
      --h4: calc(var(--h5) * var(--scale));
      --h5: calc(var(--h6) * var(--scale));
      --h6: var(--base-size);
    }
    
    /* then do something like this  */
    body {
      font-size: var(--base-size);
    }
    h1 {
      font-size: var(--h1);
    }
    
    /* then at breakpoints..adjust to your preferred  */
    /* tablet */
    @media only screen and (max-width: 768px) {
      --base-size: 1.3rem;
    }
    
    /* and so on */
    

    This way, all you're adjusting is the scale or the base size at each screen size.

    Anyways, good luck✌️

  • Kamasah-Dickson•5,570
    @Kamasah-Dickson
    Submitted over 2 years ago

    Responsive All Countries Made with React + Vite

    #accessibility#react#sass/scss#vite#react-router
    2
    princemuel•135
    @princemuel
    Posted over 2 years ago

    I checked the site on mobile and overall, the layout looks good.

    There are accessibility and code quality issues though. For example, the current tabindexes added on the drop-down menu messes with touch on mobile. Also, the routing in your app's entry point (index.js) is not setup properly but that can easily be fixed.

    I would love to help, but as I'm on my mobile, I can't really type out all what you need to do to fix the issues. If you're on discord, I'd be game to jump on a video chat and we can refactor the project together.

    Marked as helpful
  • Hawawu Oladipo•90
    @bolanleola
    Submitted about 4 years ago

    HTML, CSS

    3
    princemuel•135
    @princemuel
    Posted about 4 years ago

    Hello Dipo, pls avoid using tables and floats in your CSS except for extreme cases. modern CSS layouts use grid and flexbox.

    Also, * {box-sizing: border-box} sets all elements to have a box-sizing of border-box so there's no need to set it again.

    If you have to declare the same styles e.g 40px; again, use CSS variables.

    The order of your CSS should be:

    • Browser Default Styles Reset e.g box-sizing, padding, margins. You can use this to avoid the hassle
    • Basic Page Setup e.g body, container, headings, links, images etc.
    • Components' styles

    Also, do some research on the structure, accessibility and semantics of html.

    what code editor do you use?

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