n/a
What challenges did you encounter, and how did you overcome them?Cutting overflowing elements by using width: 100% and overflow: hidden; on the parent element.
What specific areas of your project would you like help with?n/a
Great project, looks almost exactly like preview, besides the placement of elements everything looks fine, code is easy to read and edit, multiple reusable classes, good job! Good luck with next projects!
In this challenge, I discovered the Sass function color.change() from the sass:color module, which allows manipulating color channels and the transparency of a Sass variable. Thanks to this function, I didn’t have to duplicate the $color-grey-500 variable to adjust its transparency.
What specific areas of your project would you like help with?@use "sass:color"; box-shadow: 40px 60px 50px 0px color.change($color-grey-500, $alpha: 0.25);
Any suggestions are welcome :)
What a coincidence, hello @KonradJam ! Your advice were very helpfull, I reviewed your code and I can clearly say that I should learn from you. There nothing I can recommend you to improve besides adding some margin on top of your project to make it more similar to preview.
Good luck and have fun! :D
This time I learned to use Sass. The variables and functions are convenient.
What challenges did you encounter, and how did you overcome them?I had some trouble making the layout for the footer at the bottom while keeping the main part vertically central. After I looked it up, I used flex-grown: 1 for the main part and it worked.
I used a lot of layers in both HTML and CSS. Is there a better solution to optimize or minimize those layers or elements? Any other suggestions are appreciated. Thanks a lot!
Hey, page looks very good, it's responsive, works very well in both moblie and desktop view. About your problems with having content verticaly centered, try to insert all of your content in .container class. I usualy create .container { max-width: 80%; margin: 0 auto; } That allows me to center all of my content. You can try it.
I also noticed, thay You used h1 and h2 innstead of just one header, Try to use span property on bold part of header with created additional class to change the size and boldness of part of header.
I have the same issue, we both should use more em, rem, max, min, clamp units to make our webstes more responsive. I'll recommend you Kevin Powell YT chanell, he explain everything very easily.
I hope you enjoy your path of Frontend dev. Good luck and have fun!
I'm glad that i am not facing any problem for this project
What challenges did you encounter, and how did you overcome them?I may will do another project that will increase my skill significantly
What specific areas of your project would you like help with?I'll help something like how design the card using pure CSS without any framework or library
Im amazed. Your project is very good. I could easily read your code, I can learn some new things thanks to You. Thats all i can tell.
Good luck :D
The code is amazing. Semantic, well structured, easy to read. You use a very advanced type of code. I believe I can learn a lot from your project.
Visually I see a big difference between the preview and the final result, it's just a matter of changing margins and spacing, possible font sizes, a matter of cosmetics.
Very good project, good luck with coding!
Well i enjoyed making this as a revision project and helped me clear more concepts.
What challenges did you encounter, and how did you overcome them?it was easy to make as i have pracitced several layouts just responsive is something i need to focus on more.
What specific areas of your project would you like help with?well mostly how to approach and think about responsiveness before making the whole project.
Hey, I had big problem with responsive design (and still have some), I recommend you Kevin Powell 21-day challenge (Conquering Responsive Layouts). Access is free and you will for sure find some answers.
Great project btw, you can try to make it looks more like a design one by changing background color and adjusting paddings and font sizes.
Good luck with next challenges
Im proud of fact, i didn't use @media to make card fully responsive. In future I will try to create this card as a part of page, to try to make reusable classes, and make it look more authentic.
What challenges did you encounter, and how did you overcome them?The biggest issue i got was about making it fully responsive. I got some tips from Kevin Powell and after few attempts i make it work correctly.
What specific areas of your project would you like help with?I have problem with building class for each element of website. For example, it's still a little difficult for Me to name elements and make them responsive without making huge errors.
After some time i decided I will add some changes, to make it as close to design as possible. Finaly I adjust card width and picture padding. My goal was to make it without using position properties, and without setting size for image of QR code.
Amazing project, the only thing you can change is margins and paddings betweet elements and using proper font weight. Besides that it looks greate, almost identical.
Good luck with next projects!
It's almost perfectly identical, without solution/design preview I won't be able to see difference. Greate job, I will for sure check your code to improve my own skills!
Hello, I can't use preview of code. It would be helpfull to others if You share your project via git properly. I recommend use some YT videos to see how things should be done right.
About, your project - looks very good, the only issue is the fact that card don't use all height of browser. It's easy to change, you should add height atribute set to 100% for parent of your card. That will extedt background and fill all avaliable space. I can't tell specify element of code you could change because, as I mentioned - there's no possiblity to check your code.
Good luck with your Frontend path :D
