@Freedteck
@LucasDeveloper0
Submitted
What are you most proud of, and what would you do differently next time?
The responsive organization with css was the most difficult part of the project, but is a weasome tool to inclusive site for diferents dispositives
@Freedteck
Posted
Hello, well-done with your development journey. It seems you submitted a screenshot of the links instead. Because that's what I can see
It's a (nearly) pixel perfect solution and I hope it works on your machine as well as mine... Naming modifier classes is difficult for me, I need to work on it. I followed the CSS first design perspective by Jeremy Keith that he explains in the CSS in depth book. I highly recommend this book to improve your CSS skills. I checked some good solutions and I changed my current tags to more semantic way. I know there are a lot of things that can be improved...
Any feedback is welcome, thanks...
@Freedteck
Posted
Hi Alper. Great work here and well-done. I'd love to know more about the book you recommend. Did you have any link for it? Kindly share
@Rawi2115
Submitted
i couldn't figure out how to add the background svg
@Freedteck
Posted
Hi, this is really cool. As for the background SVG, the step is pretty straight forward.
background-image: url(' link to the svg ');
Note that the link to the svg is a relative one (./images/pattern-background-desktop.svg);background-repeat: repeatx; if you want.Marked as helpful
@Alfrey-Chan
Submitted
CSS Styling
Code Organization and Practices
@Freedteck
Posted
Hello, I can't find fault in ur html code, where you probably need changes is in your css code. Below are the suggestions I have:
flex-direction: column;. This will make ur card at the center of the page.h1 {font-weight: 700;} and p {font-weight: 400;}card-contents to give space btw the components inside. Such as gap: 20px;Marked as helpful
@ollie-cyber
Submitted
I found the styling of the qr code a little bit difficult especially trying to size the image to fit the div elements.
@Freedteck
Posted
Hi, well-done with the exercise. It's very clean and clear. Concerning the question, you can use max-width: 100% instead of width property on the img tag. This will make the image responsive and fit in the div as you want.
Again, well-done writing clean codes
Marked as helpful
@MeaganA
Submitted
Hello, I completed this QR Code Challenge. I was having difficulty with the mobile version. There was more space at the top of the page that might cause the users to scroll down a little to get to the actual QR code card. Any constructive feedback on this challenge is welcomed!
@Freedteck
Posted
Hi, well-done here. Your code is very clear and clean. From what I observed, you work a lot with margin which can create more space. Try any or all following if it'll help:
While some of these might not work for you, it's still good to try them out
@vitor200450
Submitted
The main difficulty I faced while took on this challenge, is the responsivity. That was the part that got me stuck for a while to find out. Some things I wanted to question for a possible feedback:
What "max-width" values do I specifically use while working with responsivity screens? I know there are specific values for it, but I think sometimes those values aren't exactly accurate as I tried to implement in this challenge.
In a overall question, what practices I could do to improve my responsivity knowledge and try to improve on? This is the part that gets me everytime while working in a front-end page, so it's kinda difficult for me, as a "intermediate-beginner" student.
@Freedteck
Posted
Hey! Kudos on making the design responsive without libraries. Concerning your questions, since you're using flexbox layout, specifying the height for each card class can be strategic. Instead, use the gap: value; property to specify space between elements in the layout and use padding top and bottom to make the container long.
As for the max-width, it's useful when dealing with responsiveness. My suggestion to your code is to wrap all the card class in a div element, then in your css, give the div element a max-width value. Play around the value till you are convenient.
@Pradeep743
Submitted
If you have any suggestions on how I can improve my code, I would greatly appreciate it..
@Freedteck
Posted
I'm not that familiar with tailwind but I think what u need to do in ur code is to add something like overflow: hidden; with some border-radius to the card class so the rounded corners can be effective
@kealozim
Submitted
This is my first challenge submission. I'm unsure if the way I used widths is correct or if there is a better way. Any feedback is appreciated.
@Freedteck
Posted
Hey! I checked your code and everything is fine, Just a little change.
Ur qr-image should have the max-width of 100% for it to fit desired container instead of fixed width.
Also, I suggest you use padding in the container instead of specified height. All should be good from there
Marked as helpful
@Darasimi010
Submitted
@Freedteck
Posted
Wow. Just like exact replica
