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

Matt Wheeler

@wheelerMTBristol40 points

Simulation and modelling engineer. Probably writing Rust, Fortran, C, or Matlab.

Latest solutions

  • Recipe card using HTML & CSS


    Matt Wheeler•40
    Submitted 6 months ago

    1 comment
  • Social links using Css & Flexbox


    Matt Wheeler•40
    Submitted 7 months ago

    2 comments
  • Blod preview card using CSS Flexbox


    Matt Wheeler•40
    Submitted 7 months ago

    1 comment
  • QR Code using CSS Flexbox


    Matt Wheeler•40
    Submitted 7 months ago

    I am interested in feedback in how I have handled the flexbox side of the challenge. Is what I am doing correct to get an item centered? I don't like the fact that I am relying on margin-top to centrally align the card.


    1 comment

Latest comments

  • P
    Koxone•610
    @Koxone
    Submitted 6 months ago

    CSS

    1
    Matt Wheeler•40
    @wheelerMT
    Posted 6 months ago

    Awesome work :)

  • hermuti•10
    @hermuti
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Well when initially uploading my finished project to GitHub, I mistakenly uploaded the entire folder containing my work instead of the individual files. This caused the live link to my site to fail. To resolve the issue, I explored various solutions and eventually decided to delete the original upload and re-upload the files correctly. Moving forward, I will ensure that I upload only the necessary files rather than the entire folder to avoid similar issues.

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

    One major challenge I faced was correctly configuring my project on GitHub to generate a working live site URL. Initially, I uploaded the entire project folder instead of just the necessary files, which caused the live site link to fail. To address this, I researched solutions, sought guidance, and ultimately deleted the incorrect upload. I then re-uploaded the project correctly, ensuring that only the required files were included. This process taught me the importance of understanding file structure and version control for deployment.

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

    I would appreciate feedback on how I can further optimize my workflow when managing and deploying projects to GitHub. Additionally, I’d like guidance on best practices for structuring files and repositories for clear organization and efficient collaboration. Any tips on improving the styling and responsiveness of my project would also be valuable.

    qr-code-component.github.io

    2
    Matt Wheeler•40
    @wheelerMT
    Posted 7 months ago

    Hey, awesome job! :)

    I see you mentioned wanting some help when it comes to deploying your final webpage, so here are some tips:

    When using GitHub Pages within a repository, it defaults to a URL path of: https://<username>.github.io/<repository_name>. Therefore, when you go to that URL, it will attempt to display the index.html at the root level of the repository.

    The reason your webpage won't have displayed is because your index.html file was inside another folder, i.e., it wasn't at the root level of the repo.

    However, GitHub Pages can work with any number of folders within a repository. Let's say your uploaded folder was called qr-code. Then, to access that webpage, you need to visit the following URL: https://<username>.github.io/<repository_name>/qr-code, replacing username and repository_name with your own. This then displays the index.html file within the qr-code folder :)

    In my set up, I have one repository for all my front-end mentor challenges. To access the webpage of a given challenge, I simply navigate to https://wheelermt.github.io/frontend-mentor/challenges/<challenge_name>. You can see my repository here!

    Hope this helps :)

    To help you improve, I have a few comments on the HTML and CSS below, too.

    HTML:

    • The main content of a webpage should be wrapped in a <main> tag. This is for accessibility reasons (i.e., it helps screen readers perform their task).
    • Having both a text and tect class is confusing (I'm not sure what tect actually is?). I would change the first <p> element to a <h1>.

    CSS:

    • Do not use px as units for text. This is a big accessibility issue. If a user scales up their text size in the browser, any text element that uses a px font-size will not scale up, and so will remain hard to read for that user.
  • iBotayo•30
    @iBotayo
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Completing another challenge without having to consult any resource is a win for me. In the future, I would like to use a framework like react and tailwind.

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

    It was quite a smooth ride

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

    If the CSS can be optimize, I'd love see how to do it.

    Social Profiles link using CSS Flexbox

    1
    Matt Wheeler•40
    @wheelerMT
    Posted 7 months ago

    Awesome job :)

    Here are a few things to make it even better:

    HTML:

    • Every HTML document should include a main element. This is an accessibility issue, as it helps screen readers identify the main content on the screen.
    • Headers should always be in order, so never start with a <h3>, change it to a <h1>.
    • All <img> tags should have an alt text describing what the image is for accessibility reasons.

    CSS:

    • Include a CSS Reset for best practice.
    • Never use px to specify the font-size. This is an accessibility issue as it prevents the users text from scaling properly in browsers. Use rem instead to set the font-size.
    • Similarly, when setting the width and height of an element do so using a rem.
    • You should specify min-height: 100svh in the body tag to ensure the body takes up the full height of the screen. This will then center the card in exactly the center of a given screen.

    A lot of these tips I got from Oystein's comment on my own work, see here.

  • Phantuan2004•40
    @Phantuan2004
    Submitted 7 months ago

    css

    2
    Matt Wheeler•40
    @wheelerMT
    Posted 7 months ago

    Awesome work!

    To get the card to be centered exactly in the middle of the screen, you could have a body styling of the following:

    body {
          background-color: #F4D04E;
          margin: 0; /* Remove default margin */
          height: 100vh; /* Set height to 100% of the viewport */
          display: flex; /* Use flexbox for centering */
          justify-content: center; /* Center horizontally */
          align-items: center; /* Center vertically */
    }
    
  • Andrii•30
    @andriiyakymiv
    Submitted 7 months ago

    HTML. CSS.

    1
    Matt Wheeler•40
    @wheelerMT
    Posted 7 months ago

    Amazing job!!

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