Frontend Mentor | andreimaier's profile

All comments

@git-ritesh

Submitted about 1 year ago

It's my first ever Challenge Project that I completed with Responsive Design. Responsiveness was the thing that took me a while as I've applied Media Queries in my project for the first time on my own. I watched tutorials and used Media Queries earlier but wasn't comfortable until I made my hands dirty with Media Queries on my own.

Product preview card component using Flexbox (Responsive)

andreimaier• 180

@andreimaier

Posted about 1 year ago

Congratulations on completing the challenge! You're right that you only learn by doing it yourself! Keep up the good work!

Marked as helpful

Pythonic• 20

@pyth0n1c0

Submitted over 1 year ago

Guys, what are your best practices for HTML and CSS? It would be of great help to a newbie.

My First HTML/CSS Exercise

andreimaier• 180

@andreimaier

Posted over 1 year ago

Hi there! 👋 First off, great job on implementing the design!

Here are a few suggestions on how you can improve your code:

try setting display: flex to your body element

Syntax

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

This will align your div.center vertically.

add an alt description to your img.qr-code

For More info on when you should use alt attributes and when not to, check THIS 📚

try to use Semantic HTML as much as possible
- for example by replacing your div.center with the main element
- you can also add an h1 heading, give it a sr-only class and hide it using something like this

.sr-only {
    position: absolute;
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin: -1rem;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

I'm also new, but I learned a lot from comments and looking at others' solutions.

If you have any questions or need further clarification, feel free to reach out to me. I'll do my best to help!

**Keep up the good work!!**🙌🏻