I started by creating all the HTML elements and assigning them classes. Next, I started to work on the cards, where I added things like box shadows, background images, and padding. Then, I moved onto the text, where I spent time getting the colors, sizes, and styles right. I then moved onto the top of the cards, where I used proprties such as Display: flex, and margin to get the spacing and design right. Once I was down styling the cards, I moved onto the layout. I used flexbox properties on the body, to get everything centered horizontally and vertically. Once, I was done, I learned about some basic grid properties, as this was my first project using and learning about grid. I used things like grid template columns, to create my layout. I had some difficulty dealing with the second row, and the long card, as they would be spaced further away, ruining the layout. I spent some time experimenting, writing things out, and reworking my HTML, until I fixed my issue. Once I finished, I tested the website on multiple browsers, added some responsive design using media queries, and used the built-in device size emulation feature to view what the website would look like on different devices.
Latest solutions
Recipe Page
Submitted about 1 year agoI could not add a padding or margin between the ordered list item's numbering and the list item itself.
Latest comments
- @daniyalmaster693What are you most proud of, and what would you do differently next time?@rckash
This is excellent. Good job! Your documentation of the process is also great. Keep doing what you are doing and great things are ahead for you.
- @kokkondaBhanutejaWhat are you most proud of, and what would you do differently next time?
it's good
What challenges did you encounter, and how did you overcome them?It's challenging. I have learned about grid-area properties ans it's use-cases
What specific areas of your project would you like help with?it's good
@rckashGood job with the four cards. You can improve your adherence to the design by adding a margin/padding to the top of the page and by getting rid of the white line at the bottom.
- @alexboliveiraWhat are you most proud of, and what would you do differently next time?
Gostei muito do desafio na qual o read.me teve algumas configurações importantes e com base naquela simples informação, tudo foi tornando mais claro e objetivo. Refaria o projeto com algumas alterações no style para melhorias
What challenges did you encounter, and how did you overcome them?A leitura do Read.me foi fundamental; no começo, eu não entendi muito as configurações, fiquei um bom tempo tentando entender mas depois foi fluindo naturalmente
What specific areas of your project would you like help with?as paddings e as margins
@rckashGood job getting creative and applying originality. I believe that line height and letter spacing can be improved for aesthetic.
Marked as helpful - @mohabelelWhat are you most proud of, and what would you do differently next time?
None, I will focus on making a good HTML structure to save lots of time while styling
What challenges did you encounter, and how did you overcome them?Coloring the numbers list, but I overcome it by using HTML span!
What specific areas of your project would you like help with?Nothing, I would appreciate it if I could get any feedback!
@rckashEverything looks great. I believe that the lesser margin on the top of the card than the design's is an upgrade. Good job!
- @Sowmisri2306What are you most proud of, and what would you do differently next time?
Good Learning
What challenges did you encounter, and how did you overcome them?Good Learning
What specific areas of your project would you like help with?Good Learning
@rckashGood job. You can improve your adherence to the design by improving on letter spacing and image sizing.
- @marlar-tzWhat are you most proud of, and what would you do differently next time?
In this challenge , I got to learn about creating card using CSS properties.Moreover, I learnt about CSS hover selector , padding , and margin to develop a solution for this challenge.
What challenges did you encounter, and how did you overcome them?In this challenge , I face a few difficulties when adjusting for mobile design. But , I used Responsive HTML and adjusted some CSS parts to be appropriate for mobile design content.