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

Rachael

@RMK-creativeFrankfurt am Main, Germany610 points

Hey there, I'm Rachael. A mostly-self-taught-recent-bootcamp-graduate interested in all things frontend web development.

I’m currently learning...

React, Node.js

Latest solutions

  • Mobile-first solution


    Rachael•610
    Submitted almost 4 years ago

    2 comments
  • Mobile-first solution


    Rachael•610
    Submitted about 4 years ago

    0 comments
  • Mobile-first CSS Grid solution


    Rachael•610
    Submitted about 4 years ago

    0 comments
  • SCSS and Grid solution


    Rachael•610
    Submitted over 4 years ago

    0 comments
  • Mobile-first, grid and first time with sass


    Rachael•610
    Submitted over 4 years ago

    2 comments
  • First solution using HTML and vanilla CSS


    Rachael•610
    Submitted over 4 years ago

    5 comments

Latest comments

  • Hana•960
    @Hanka8
    Submitted about 3 years ago

    Simple FAQ page using vanilla JS

    2
    Rachael•610
    @RMK-creative
    Posted about 3 years ago

    Hi Hana, nice job :)

    Regarding your questions: If you add overflow: visible; on your .card I think you'll get what you're trying to do with the image. I see you have it applied in your media query, but it doesn't work on screens larger than 1044px.

    What is the transition effect that you're trying to add?

  • Jacob McKinney•20
    @knyghttech
    Submitted about 3 years ago

    QR Code Challenge - Knyght Tech

    1
    Rachael•610
    @RMK-creative
    Posted about 3 years ago

    Hi Jacob, congrats on completing your first challenge!!! 🎉🎉. The first of many I hope ;)

    You've done a really great job, I just have a few tips for you:

    • First to answer your question about the text: you have applied the class="bold" to the <section> tag which wraps around your <h1>. If you apply that class directly to the h1 and delete your <section> tags you will see the text will change (and you can then edit to get it closer to the design if you wish to). Wrapping the <h1> like this is not really necessary for this challenge, same with the <main> tag that wraps the <p> - I would also remove <main> and apply class="text" directly on the <p> tag.

    • Read up on html semantics a little to get a good understanding of best practices (for example: https://www.semrush.com/blog/semantic-html5-guide/)

    • Try using indentation to make your code a little easier to read, for example:

    <html>
      <body>
        <h1>Hello World</h1>
        <p>Example text</p>
        <div>
            <img />
        </div>
      </body>
    </html>
    

    Keep going, you're off to an excellent start!

  • Abhi Shek•60
    @InertNp
    Submitted about 3 years ago

    QR code Container

    1
    Rachael•610
    @RMK-creative
    Posted about 3 years ago

    Hi Abhi, do you have any specific questions regarding the HTML?

    I think you did a good job getting it close to the design, so well done on that. I would suggest checking out the accessibility issues in the report and get those points cleared up.

    Regarding your html code, the span tag could be changed to a heading tag, and the alt text on the image could be simply "qr code" - screen readers will already announce that it is image.

    Marked as helpful
  • P
    Christopher Adolphe•620
    @christopher-adolphe
    Submitted about 3 years ago

    Art gallery website | HTML, CSS, JS

    #sass/scss#typescript#webpack#gsap
    5
    Rachael•610
    @RMK-creative
    Posted about 3 years ago

    Wow Christopher, well done on this challenge! I plan to spend some time reading your code because I think I can learn a lot of new things from you - thanks for sharing! I've been wanting to try out GSAP and seeing your work has inspired me to jump in and give it a go :)

    Just one thing I came across - the leaflet map is blank on loading, I get the location pin but the actual map is empty so maybe something worth looking into. I tried on 3 different browsers with and got the same issue on each.

    Marked as helpful
  • Ollie•580
    @ohermans1
    Submitted over 3 years ago

    PhotoSnap - Created with Angular - Includes extra functionality

    #angular#bem#sass/scss#typescript
    2
    Rachael•610
    @RMK-creative
    Posted over 3 years ago

    Hi Ollie, awesome job on this project - it looks great on different screen sizes I tested with dev tools. I especially love that you added the extra pages, really nice touch!

    Just one thing I came across - when I click on the image card the story page will load, but when I click on the "read more ->" section of the same card, it skips past the story page and loads the home page again. When I click back on my browser, I then see the story page. Maybe just checkout the functionality of that read more link :)

    Marked as helpful
  • QWen•50
    @qingwen-kb
    Submitted almost 4 years ago

    Responsive landing page using flexbox

    2
    Rachael•610
    @RMK-creative
    Posted almost 4 years ago

    Hi QWen, congrats on having a go at this one! It does look a bit unfinished, but I do commend you for your bravery!! It's quite a challenging one for people new to web dev, so kudos to you

    I would recommend going through the html and accessibility report - there are some issues with headings not being in ascending order, and being placed where they shouldn't be (e.g in ul). The reports have useful links so you can learn more about these points.

    Compared to the design, things look to be in the right place, but spacing and font sizes could be improved to get it a little closer. For example, in the We're Different section, max-width and increased font-size on the sub-headings will make it much more readable.

    Keep going with it, and ask questions in the slack help channel if you get stuck or need assistance.

    Marked as helpful
View more comments

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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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