My perfect work don't need feedback
What challenges did you encounter, and how did you overcome them?My perfect work don't need feedback
What specific areas of your project would you like help with?Non feedback
This is my first challenge. Any feedback is appreciated. Thanks!
Looks very good, but there are some things you could do to improve it:
1.If you start with the full width desktop view, and then try to decrease the width (but still not so low that your media query sets in), you will see that the space available for the qr code and text is way too small, and it can only fit a word or so on each line. How can you fix this? Well, there's no need to use a media query, as you don't want the layout itself to change when crossing a certain width. Instead, define a max-width in units of px, ch, etc. such that it never gets too wide, such as 30ch. Adding a width of 80% will ensure that the qr code and text always fits on narrower screens. I would suggest looking up the clamp() function in order to simplify widths and heights in the future. Speaking of heights...
2.Your design is not centered in the browser, as you probably noticed. This is due to the parent container, main, not taking up the full viewport height (i.e. the height of the available space in your browser). If you enter the DevTools and press CTRL + SHIFT + C, you will be able to use your mouse to highlight the different elements on your site directly (which is a lifesaver) and see the space occupied by the main element. It's often a good idea to have a container element (like a div) encapsulate all the content on your page, as opposed to styling the body itself. Adding height: 100vh, display: flex, flex-direction: column, and justify-content: center to that container should center all of your content vertically. Also add your attribution to this container, if you want to center it as well (which you may want)..
Hello programmers🚀
Although it is a small and for most of you simple project, I enjoyed working on it and I am looking forward to other projects. This project was my last in newbie category.
I try to improve and learn new things every day. I just learn pure javascript and from today I plan learn SCSS & Tailwind.
Question
Any source suggestions for learning this two for free ??
Any suggestions on how I can improve code are welcome!📝
Thank you in advance. ✌️
You should check out the "Tailwind" section on roadmap.sh's frontend roadmap (haven't done it myself, though)! :)
What I found difficult for this project was rounding all edges of the QR code image equally. Whenever I applied border-radius, the top edges would round less than the bottom ones and I'm not sure why.
What are some best practises regarding structuring media queries for responsive design?
Hi! Just some quick feedback:
Noticed a QR overflow on wider screens. No need for media queries here—just set a max width on the QR code div, and a width to ensure it adjusts on narrower screens. Consider clamp() for responsive sizing. Media queries are better for altering layout/content per screen size. A mobile first approach is a good practice to simplify initial designs, though not crucial for this challenge. :)
The QR code is rounded at the top, but padding pushes the image down, leaving an empty space. Understand the difference between padding and margins, and apply "box-sizing: border-box" to all elements using the universal selector "*". This along with clearing default margins and padding should be among your first steps – it's a game changer! :)
I wanna know if has some way to improve my css.
It doesn't look bad at all, but there are some quick changes I would implement:
