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.
RC Kashyap
@rckashAll comments
- @daniyalmaster693Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?@rckashPosted 6 months ago
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.
0 - @kokkondaBhanutejaSubmitted 6 months agoWhat 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
@rckashPosted 6 months agoGood 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.
0 - @alexboliveiraSubmitted 6 months agoWhat 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
@rckashPosted 6 months agoGood job getting creative and applying originality. I believe that line height and letter spacing can be improved for aesthetic.
Marked as helpful0 - @mohabelelSubmitted 6 months agoWhat 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!
@rckashPosted 6 months agoEverything looks great. I believe that the lesser margin on the top of the card than the design's is an upgrade. Good job!
0 - @Sowmisri2306Submitted 7 months agoWhat 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
@rckashPosted 7 months agoGood job. You can improve your adherence to the design by improving on letter spacing and image sizing.
0 - @marlar-tzSubmitted 7 months agoWhat 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.
- @vnshakumarSubmitted 7 months ago@rckashPosted 7 months ago
Good job! You can step up the conformity with the design by adding a padding-left and padding-right to the texts.
0 - @mishtickleSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I overcomplicated the solution the first time around since I had not coded HTML / CSS for quite some time. With continued experience I think I can do a better job next time. I would like to shout out a huge thanks to the people who commented on my original solution.
What challenges did you encounter, and how did you overcome them?I forgot a lot of basic HTML and CSS, and utilised my Google-Fu skills to overcome them, although my solution was a bit messy at first.
What specific areas of your project would you like help with?I'm happy with this solution.
@rckashPosted 7 months agoGood job. You can center your texts by applying
text-align: Centeron your styling.0
