Skip to content
Submitted almost 3 years ago

Responsive Page using CSS Grid

ckullo•60
@ckullo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Most of the time, I don't know where to start...? Like this time... I wonder how to get the background and mockup image, even though they are available in starter files. Feels like I've got distracted with what should I do to get the design in Figma.

Please share your tip on what or where to look before starting the project.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    Greetings, Ckullo (Mr. Bayu Jayasukma)! 👋

    Congratulations on finishing this challenge! 🎉

    I notice that you are importing two font families with separate <link>. I would recommend importing both font families at once to improve the loading speed of the site.

    Some feedback:

    • Accessibility
      • All the page content should live inside the body element. Really important!
      • Then, you can have this HTML markup structure for the webpage.
    <body>
  <header>
    logo goes here...
    usually the logo is wrapped with anchor tag
    that will navigate the user to the home page
  </header>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      the social media links might go here...
      attribution links live here...
  </footer>
</body>
    • The alternative text for the logo should be the company name. In this case it should be alt="Huddle". Also, alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, etc). It's already an image element so the screen reader will pronounce it as an image. 🙂
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only except the logo.
    • When I was doing this challenge, I made the Register button as a link element because I thought it would navigate the user to the register page. I would like to know what do you think is going to happen when the user clicks the Register button?
    • The label for the social media links should only tell the social media platforms. Just like the alternative text for images, the same logic applies to the label for link elements.
    • Styling
      • Never specify the height of an element unless you have a good reason. Use min-height instead. Currently, on mobile landscape view, I can't scroll to see the rest of the page content.
    • Best Practice (Recommended)
      • Remove the type="text/css" from the link tag. The stylesheet will work just fine without it.

    I'm going the share a screenshot in Slack to show what the live site looks like on my desktop view.

    I hope this information is useful! Happy coding! 😁

    Marked as helpful
    1
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    Regarding your question, when I am going to do a challenge, the first thing that I am going to do is to plan the HTML markup.

    For example, if I am going to do this challenge, I am going to create an index.html.txt file to plan my HTML markup. It might look something like this:

    header.header
  a.header__home
    img.header__logo
main.hero
  .container
    img.hero__illustration
  .hero__text
      h1.hero__title
      p.hero__title
      a.hero__link
footer.footer
  ...more pseudo-code

    I use emmet syntax as my pseudo-code, you can obviously write your pseudo-code however you like. 🙂

    Keep in mind that if you are going to follow this method, you have to plan the HTML markup from the desktop design.

    After that, I write my HTML code and then start writing the styling for the mobile layout and then use min-width media query to style larger screen sizes.

    1
    ckullo•60
    @ckulloPosted almost 3 years ago

    @vanzasetia Thank you for your thorough review... I've made changes to my code based on this...

    I need to learn a lot about CSS, I need to specify all heights of an element to make it have an exact position just how I want them to be.

    Honestly, I've never really learned deep on CSS, only some basic CSS properties.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    @ckullo Specifying a height for every single element is going to destroy its responsiveness. Let the content inside it dictate the height of it. In a real-world website, the content of the page might not always be like that. If the content gets changed then you might have a hard time to change the height too.

    Also, it's not a good reason to specify all heights of all elements just to make them look similar to the design. Instead, I would recommend adjusting the padding, margin, max-width, etc, to make it looks closer to the design.

    0
  • Hexer•3,660
    @EmmanuelHexerPosted almost 3 years ago

    Great job man. Keep it up

    0
    ckullo•60
    @ckulloPosted almost 3 years ago

    @Phalcin thank you... I do really appreciate this man...

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord