Design comparison
Solution retrospective
This is my first attempt at coding up some webby like stuff in 17 years! I spent all that time in the Food and automotive industries. Now I'm trying to get back in to the grove of things. So, I present to you my hot mess to critique and maybe inform me on some ways to better myself. The responsiveness is garbage. I couldn't figure it out. I was attempting to do this in the least amount of code and constraining myself to a deadline of a few hours or less.
Community feedback
- @ahmedmelfayPosted over 3 years ago
Your main element is not centered to do this you can either use flexbox or grid (You can do a research on those).
Or you can simply give your div a position of absolute and its parent (in your case the div with the container class) position of relative and use: top:50%; left:50%; transform:translate(-50%,-50%);
However using grid or flexbox is much cleaner. Also keep in mind grid is much easier than flexbox but flexbox has more browser support.
Also don't ever use variables in CSS because they are not supported in most of the browsers. If you want to use them id suggest learning SASS, its pretty easy, you can learn it within a day or two. Its also a requirement now a days in most Frontend Developer Jobs.
Good luck bro, and quite honestly not bad at all for a beginner.
1@303jollyrogerPosted over 3 years agoBoth Flex box and Grid are new to me. I want to focus on what is more current. SASS is in my queue and will be bumped up.
0@palgrammingPosted over 3 years ago@303jollyroger Wes Boss has a free Grid and Flexbox course that might help your transition into this new way of layout since back 17 years ago was tables tables tables and images for design and not CSS elements
https://wesbos.com/courses
1
Please log in to post a comment
Log in with GitHub
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