Skip to content
Submitted about 1 year ago

Basics of CSS and HTML and first time Media Queries.

Hamza Kharal•50
@kharalhamza98
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I did this in an effort to stay on top of my HTML and CSS while I start learning JavaScript. I want to keep doing these once a week.

A few issues with this one:

  1. When doing the mobile view, I wasn't able to center the buttons properly, they are ever so slightly misaligned from one another. I tried many fixes but couldn't attempt it.

  2. I could not figure out how to make the "computer" image center itself while the screen size shrinks. I was able to do it for the "devices" photo but not this one.

  3. Class names. I need to start using better class names to make it easier to understand where things are and what element they are for. It became a big hassle when doing the media queries.

This was my first time using media queries so I hope I did an okay job with them.

Feel free to offer advice and help me out with the issues I had. This was so fun!

Community feedback

  • Sulaiman Abubakar•270
    @Abu-SmanPosted about 1 year ago

    Hello, @kharalhamza98. You're doing great; keep going. To solve your problem of buttons not being centred on a mobile screen, simply give them a width of 100% rather than a width in px. This way, they will never grow larger than their parent container. Also, make the images of the computer and devices 100% wide so they don't overflow the body.

    Some suggestions for you:

    • There is no need to include the header element within a section element. The header element is a standalone semantic html element. Your index.html file should look something like this:
    <body>
<header></header>
<main>
    <section></section>
    <section></section>
</main>
<footer></footer>
</body>
    • Read about BEM naming to learn how to name your classes.
    • Avoid using "px" and instead use the "rem" and "em" units when building a responsive layout.
    • Specifying the width of your images in % rather than px is gonna make your life way easier.
    Marked as helpful
    1
    Hamza Kharal•50
    @kharalhamza98Posted about 1 year ago

    @Abu-Sman Wow thank you so much! Sorry I am just getting to this, I was focusing on Javascript for a while and came back on here to refresh myself on html and CSS. You are right, I need to start moving away from px or EVERYTHING. It makes things harder than they need to be. Also THANK YOU for the button advice. You are awesome! I will look into BEM.

    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