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

Peter Hannell

@peterhannellLondon, United Kingdom200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

JavaScript

Latest solutions

  • Intro Component with Signup Form Solution

    #accessibility#bem#less#parcel

    Peter Hannell•200
    Submitted almost 3 years ago

    1 comment
  • Interactive Rating Component Solution - Pug, Sass, Tailwind & daisyUI

    #accessibility#bem#sass/scss#tailwind-css

    Peter Hannell•200
    Submitted almost 3 years ago

    1 comment
  • Profile Card Component - HTML & Tailwind CSS

    #tailwind-css

    Peter Hannell•200
    Submitted about 3 years ago

    0 comments
  • Chat App CSS Illustration with Tailwind

    #accessibility#tailwind-css#semantic-ui

    Peter Hannell•200
    Submitted about 3 years ago

    0 comments
  • Huddle landing page with a single introductory section challenge hub


    Peter Hannell•200
    Submitted about 3 years ago

    1 comment
  • Huddle Landing Page


    Peter Hannell•200
    Submitted about 3 years ago

    0 comments
View more solutions

Latest comments

  • Peter Hannell•200
    @peterhannell
    Submitted almost 3 years ago

    Interactive Rating Component Solution - Pug, Sass, Tailwind & daisyUI

    #accessibility#bem#sass/scss#tailwind-css
    1
    Peter Hannell•200
    @peterhannell
    Posted almost 3 years ago

    D'oh... I forgot the <footer> section :-) I always forget something. I'll add this later on. Also my padding and margins are slightly off as I usually reset everything and write all the CSS from scratch. I was a bit lazy this time but I wanted to focus more on the JavaScript and not the styling!

    Thanks!

  • Mouad P7•50
    @mouad-P7
    Submitted almost 3 years ago

    Stats preview card component (made with html and css only).

    2
    Peter Hannell•200
    @peterhannell
    Posted almost 3 years ago

    Hi Mouad, good job with your solution. I have a couple of suggestions:

    1. your <html> tag is missing a language attribute. You can correct this by using <html lang="en">
    2. in regards to your question about changing the colour of the image: you first need to apply a background colour to your image wrapper, then you can reduce the opacity of your image element with the opacity: property in your CSS file.

    Hope this helps!

    Marked as helpful
  • Chloe•20
    @chloeafp
    Submitted about 3 years ago

    Card component using HTML and CSS

    2
    Peter Hannell•200
    @peterhannell
    Posted about 3 years ago

    Hi Chloe, I'm a fellow learner but I can offer some feedback/advice.

    Firstly make sure you include enough 'landmarks' in your HTML - these are tags like main nav footer etc., that define sections of content in your page which greatly improves accessibility for assistive navigation technologies such as screen readers. For example, you should wrap your 'attribution' class in a footer tag.

    You should also try to make your class names a bit more descriptive; for instance 'header' is a very generic and could refer to any header section within your page. This could be somewhat confusing when it comes to maintaining code later on. Maybe something like 'card__header' would be more appropriate just as an example.

    Finally, try to avoid the use of px for sizing everything in your CSS. You can certainly use it in some cases but most of the time will you want to use rem (and also em in specific cases) which is scalable and respects the users' browser font size preferences.

    But other than that you've done a great job! I hope my comment was helpful.

    Marked as helpful
  • Ana•20
    @AnaSudame
    Submitted about 3 years ago

    First challenge- Scan QR code component using Html & CSS

    #materialize-css
    2
    Peter Hannell•200
    @peterhannell
    Posted about 3 years ago

    Hi :-)

    Your CSS isn't linked properly. Make sure you include ./ before the path to your styles.css in your HTML head. Your code should read like this:

    <link rel="stylesheet" href="./styles.css">

    You also don't have any images in your github repository so you need to include them there.

    Hope this helps!

  • Marek•60
    @kozlowskimarek
    Submitted over 3 years ago

    Order Sumary

    2
    Peter Hannell•200
    @peterhannell
    Posted over 3 years ago

    Hi @kozlowskimarek!

    Good job. However, your HTML mark-up is missing a <main> and <footer> landmarks. Other than that your solution looks good.

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