Submitted over 1 year ago

QR code landing page using HTML and CSS

Tanmay Ravane• 10

@codeminex

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What did you find difficult while building the project?
Which areas of your code are you unsure of?

=> Areas where I felt difficult to build is to make the website view same as on desktop as well as mobile. Still I am not able to figure out how to get the desired look on Mobile devices.

Community feedback

Tux3er• 760

@Tux3er-Isma

Posted over 1 year ago

Hi Tanmay!!!

Congrats completing this challenge 👍🏻

When I was starting I found also difficult to pass from desktop to mobile

In css there is a property called media-querie. The structure is like this: @media only screen and (max-width: Xpx){}.`

In this case we are using 375px because is a mobile. This is the documentation with exercices, documentation 📖

Don't use position to center elements. There is a easy way to center elements nowadays widt css flexbox: .main_body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; video about flexbox 📹

You have done it very well, congrats 😉👍🏻🎉

I hope this comment will help you in the future building awesome projects 🌟

Melvin Aguilar 🧑🏻‍💻• 61,460

@MelvinAguilar

Posted over 1 year ago

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

Mobile view 📱:

The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">

If you delete the viewport meta tag, the browser will use its default settings for the viewport, which may not be appropriate for the web page you are trying to display. This can lead to issues with the layout of the page, particularly on mobile devices where the screen size and resolution can vary greatly. The page could be too small to read.

HTML 📄:

The lang attribute is used to declare the language of the webpage. Add the lang attribute to the <html> tag with the value en.

Wrap the page's whole main content in the <main> tag.

It is not valid to enclose a heading element (<h5>, <h4>, etc..) within a paragraph, you can confirm this here: https://caninclude.glitch.me/caninclude?child=h5&parent=p

Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘

The text Improve Your Front-End Skills by Building Projects is considered a heading element (h1).

CSS 🎨:

To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

body {
    background-color: #D6E4E5;
    min-height: 100vh;
    display: grid;
    place-content: center;
}

.main_body {
    /* position: relative; */
    /* top: 100px; */
    /* left: 525px; */
    . . . 
}

CSS Reset 🔄:

You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

CSS resets that are widely used:
- Reset CSS
- "My Custom CSS Reset" by JoshWComeau

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Alex Garcia 🦝 Garcialexco• 440

@garcialexco

Posted over 1 year ago

Hello! Great job completing the challenge! 🔥

There's a couple parts of your code that I might be able to help with:

Easiest way to center a thing in the middle of the page is:

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

Stick to using responsive units that resize with the page such as em, rem, percentages etc. They are a lot more forgiving and not as exact as pixels when making it responsive!

Hope this helps, and keep up the great work! 👍 Happy Coding!

Tanmay Ravane• 10

@codeminex

Posted over 1 year ago

@garcialexco Thanks for your valuable feedback. Surely, I will implement the suggestions given by you. Stay connected !! Thankyou.

Please log in to post a comment

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