Skip to content
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

Latest comments

  • Rachael•610
    @RMK-creativePosted almost 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?

    0
  • Rachael•610
    @RMK-creativePosted almost 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!

    1
  • Rachael•610
    @RMK-creativePosted almost 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
    1
  • Rachael•610
    @RMK-creativePosted almost 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
    0
  • Rachael•610
    @RMK-creativePosted almost 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
    1
  • Rachael•610
    @RMK-creativePosted over 3 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
    0
View more comments