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

Chris Andrews

@ChrisAndrewsDevMelbourne170 points

Studying fullstack development with an interest in frontend work!

I’m currently learning...

Fullstack Development | Svelte | React | The intricacies of SASS | So-on && so-forth.. | Open to any and all advice and critiques!

Latest solutions

  • Profile Card | Vanilla CSS


    Chris Andrews•170
    Submitted almost 3 years ago

    1 comment
  • Vanilla CSS | My solution


    Chris Andrews•170
    Submitted almost 3 years ago

    1 comment
  • Flexbox && Responsive Design

    #accessibility

    Chris Andrews•170
    Submitted almost 3 years ago

    1 comment
  • Advice Generator | Sass + JS

    #sass/scss

    Chris Andrews•170
    Submitted almost 3 years ago

    1 comment
  • Vanilla CSS/Minimal Code NFT Card


    Chris Andrews•170
    Submitted about 3 years ago

    1 comment
  • Dart Sass - This one was surprisingly tricky for me!

    #sass/scss

    Chris Andrews•170
    Submitted about 3 years ago

    0 comments
View more solutions

Latest comments

  • isayaexavery•10
    @isayaexavery
    Submitted almost 3 years ago

    QR code card component using CSS

    #react#react-native#sass/scss#styled-components
    2
    Chris Andrews•170
    @ChrisAndrewsDev
    Posted almost 3 years ago

    Hey @isayaexavery, nice work on your first challenge!

    There's a few small HTML warnings that are easy to remedy:

    • Using semantic landmark HTML tags <main> <section> in place of standard <div> tags to divide sections is best practice and helps with accessibility for screen-readers.
    • You typically want to start with an <h1> on a page and work your way down to smaller headings for less vital content: <h1> to <h2> to <h3> and so on.

    One small thing I noticed when compared to the design brief is that your paragraph should be text-align: center

    You should definitely look into custom CSS variables if you're working with vanilla CSS, especially when doing the challenges here, they make life so much easier when working from a design brief!

    Other than that, your CSS was solid, I could see you experimented with some styles and methods to get a preferred outcome, there are a couple of smaller tweaks I would have made, but you're on the right track for sure!

    Nice one!

    Marked as helpful
  • Natasha Williams•10
    @NATiiCODES
    Submitted almost 3 years ago

    product preview card component

    5
    Chris Andrews•170
    @ChrisAndrewsDev
    Posted almost 3 years ago

    Howdy @NATiiCODES!

    There does seem to be some spacing weirdness going on with the solution, my assumption (and hopefully a more experienced developer can correct me if I'm wrong) is that it's because you're using article elements for the majority of the HTML.

    From my understanding, the <article> tag serves a super specific role and generally doesn't get used for the bulk of the structure of a document.

    I would suggest trying to change the <article> tags to <div> tags, or preferably semantic tags, like <section> for larger containers, followed by <div> tags inside.

    I've got a feeling this should help with the elements being all scrunched together and allow you to apply styles easier!

    Good luck and let me know if it works at all!

  • Kate•30
    @unic0rnKate
    Submitted almost 3 years ago

    HTML CSS BEGINNER

    3
    Chris Andrews•170
    @ChrisAndrewsDev
    Posted almost 3 years ago

    Howdy @unic0rnKate!

    Don't worry, everyone seems very friendly on here (I am new too!) and usually give really good feedback.

    I did notice that your styles don't seem to be applying to your solution, and it looks to me that your relative linking is slightly incorrect:

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

    Should be changed to

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

    Typically the "/" denotes a parent folder - "parentFolder/itemInsideFolder" and since you don't have a "css" folder, you shouldn't need to use that!

    Once you've fixed that small issue we can have a look at the design implementation! Good luck :)

  • mahmoud medhat•180
    @MahmoudKasrawy
    Submitted almost 3 years ago

    2ns attempt QR Card component

    2
    Chris Andrews•170
    @ChrisAndrewsDev
    Posted almost 3 years ago

    Hi @MahmoudKasrawy!

    It seems like your screenshot does not look the same as the deployed solution, I will just assume it's an error on this site, as the actual live solution looks much closer!

    Very solid first effort 🎉🎉

    You do have some HTML and accessibility issues that shouldn't be too hard to remedy.

    Firstly, you should have meta attributes in your markup boilerplate, it would look something like this:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    

    If you are using vsCode as your text editor, I think you can use "! + tab" to generate the default boilerplate markup which contains most (if not all) of the things you would need to avoid those errors!

    When using an image, it's best-practice to provide an "alt" tag, to help with screen-readers and web-crawlers:

    <img src="../source/image" alt="a text description of the image">

    A really solid effort so far though!

  • abidoyeIbukun•10
    @abidoyeIbukun
    Submitted almost 3 years ago

    QR Code Component Using HTML And Css

    1
    Chris Andrews•170
    @ChrisAndrewsDev
    Posted almost 3 years ago

    Howdy @abidoyeIbukun!

    It seems like something has broken when deploying your solution, did you perhaps deploy the wrong build?

    It might be an issue with your HTML filename, does the live site look different to the screenshot displayed on here?

    Marked as helpful
  • Lee Fentress•30
    @lee-fentress
    Submitted almost 3 years ago

    Stats Preview Card

    1
    Chris Andrews•170
    @ChrisAndrewsDev
    Posted almost 3 years ago

    Hey @lee-fentress!

    It seems like your relative link path is a bit off in your HTML (where you are linking the .css stylesheet) - <link rel="stylesheet" href="/stats preview card/actual project/images/styles.css">

    It should be something like this: <link rel="stylesheet" href="./styles.css">

    Typically when you link things from the same general directory or workspace:

    • "./" means the same level (or directory) as the current file
    • "../" means go up one level (or directory) from the current file
    Marked as helpful
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