All comments

• 

  Ukan• 20

  @ukanlei

  Submitted about 2 years ago

  This simple card component was a lot more challenging than it looked. One thing I struggled with the most in this project was organizing my stylesheet. I find myself going back and forth between my codes and mock-ups, thinking I have finished only to realize I have missed some essential styling components. Ultimately, this disorganization has affected my workflow and quality of work.

  Questions:

  1. What are the standards or best practices when it comes to organizing CSS and making it more manageable?
  2. How can I reduce repetition in my CSS?

  

  Card Component with HTML and CSS

  2

  5

  0

  

  Mary Njoroge• 150

  @Maryahcee

  Posted about 2 years ago

  To avoid repetition in CSS I use class with same name when there are several elements that need same styling design. Also breakdown sections if it's Navbar section check to see what elements have similar design and give them same class name.

  Finish designing one section at a time it makes the work easier and you won't have to keep repeating your self. Cheers! Keep coding!

  1
• 

  Ukan• 20

  @ukanlei

  Submitted about 2 years ago

  This simple card component was a lot more challenging than it looked. One thing I struggled with the most in this project was organizing my stylesheet. I find myself going back and forth between my codes and mock-ups, thinking I have finished only to realize I have missed some essential styling components. Ultimately, this disorganization has affected my workflow and quality of work.

  Questions:

  1. What are the standards or best practices when it comes to organizing CSS and making it more manageable?
  2. How can I reduce repetition in my CSS?

  

  Card Component with HTML and CSS

  2

  5

  0

  

  Mary Njoroge• 150

  @Maryahcee

  Posted about 2 years ago

  Hi the card looks good. At first someone struggles with finding the best working flow. However I have some tips that have helped me become organized while working on my projects. First look and analyize the design and make a sketch of how I will approach the design. Second write down all sections (eg. Navbar, Main, footer.) in the design and what I will use (eg flex or grid) to make them. If you do this routine in your first projects you will notice that in the future you won't necessarily have to do it it comes naturally with more practice. I hope this helps. Happy coding!

  1
• 

  Eduardo Pinheiro• 20

  @EduMPinheiro

  Submitted about 2 years ago

  I had some difficulties on this one. Align the icons with the text, I couldn't do it put a circular border around the avatar image

  But I'm really glad I could do this!

  

  HTML CSS NFT preview card

  2

  3

  0

  

  Mary Njoroge• 150

  @Maryahcee

  Posted about 2 years ago

  To add a divider line before the avatar add a div with an <hr> element, then style it as follows: hr { width: 80%; color: white; }

  0
• 

  Eduardo Pinheiro• 20

  @EduMPinheiro

  Submitted about 2 years ago

  I had some difficulties on this one. Align the icons with the text, I couldn't do it put a circular border around the avatar image

  But I'm really glad I could do this!

  

  HTML CSS NFT preview card

  2

  3

  0

  

  Mary Njoroge• 150

  @Maryahcee

  Posted about 2 years ago

  Hi Nice work here! To put a circular border around the avatar image Add this border-color: white; border-radius: 50%; border-style: solid;

  0
• 

  Emma• 320

  @emjogale

  Submitted about 2 years ago

  Not sure if I have used the background property correctly to position the background image. Any advice on this welcome!

  

  Responsive page with flexbox layout

  2

  3

  0

  

  Mary Njoroge• 150

  @Maryahcee

  Posted about 2 years ago

  @emjogale nice to know you managed. Happy coding.

  0
• 

  Emma• 320

  @emjogale

  Submitted about 2 years ago

  Not sure if I have used the background property correctly to position the background image. Any advice on this welcome!

  

  Responsive page with flexbox layout

  2

  3

  0

  

  Mary Njoroge• 150

  @Maryahcee

  Posted about 2 years ago

  Hi, the background looks good to the eye , however you can add center/cover after no repeat. Nice work!

  1

  This comment has received 1 replyShow
• 

  Rina• 100

  @dodrin

  Submitted about 2 years ago

  Hi, Im newbie coder who want to become front end dev. In this project I have a few difficulties that I couldn't figure out.

  1. Overlay is somehow not matching with the image position.
  2. I want the card to be vertically centered when opened with smaller display.

  I appreciate your help and feedback on my project. Thanks!

  

  NFT preview card component

  6

  4

  1

  

  Mary Njoroge• 150

  @Maryahcee

  Posted about 2 years ago

  Nice work. .container { height: 200px; position: relative; border: 3px solid green; }

  .vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } Try this for smaller screen. Make sure you give the container a position of relative first.

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  ohm_yuvadee• 100

  @theohm12

  Submitted over 2 years ago

  

  Building the card component using HTML, CSS

  2

  1

  0

  

  Mary Njoroge• 150

  @Maryahcee

  Posted over 2 years ago

  Hi, nice work. You should also add the hover state it should look like the attached image under active-state.

  0