Skip to content
OverviewSolutions
5
Comments
6
P
newspaceracer
@newspaceracer

All comments

  • newspaceracer•90
    @newspaceracerSubmitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    It went faster than before. Differently, I may not use as many divs likely. And while this exercise was mostly to help me practice CSS variables, in a project this small wasn't the best choice.

    What challenges did you encounter, and how did you overcome them?

    By not accounting for the size of the margins and paddings in flex extra spaces were added which took me a while to figure out and debug.

    Responsive card and experimenting with CSS variables

    1
    newspaceracer•90
    @newspaceracerPosted 3 days ago

    I forgot to add a main element to contain all the other stuff within so I think that's the accessibility issue, but I was out of time and I didn't want to refactor since I was using body as my container element for the card. Using main I would have had to make sure that main was centered or the same size as body and then center everything within main (I think).

    0
  • newspaceracer•90
    @newspaceracerPosted 3 days ago

    Looks good! The only thing is that on my browser as I move the size of the window, the card moves further to the top left corer of the screen. So I think you just need to center the card. You can do this by selecting the element in which the card itself is and just aligning the stuff inside that parent element to be centered. You can use something like this:

    main { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; }

    Marked as helpful
    0
  • RoxySash•70
    @RoxySashSubmitted 12 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I stuck it through and completed the challenge. The table at the bottom was fun to figure out.

    What challenges did you encounter, and how did you overcome them?

    I encountered a problem with my Github pages I couldn't load the website but I found out I had a folder within a folder type situation Github wasn't able to find my index.html file. It was cool that I figured that out immediately.

    What specific areas of your project would you like help with?
    • I am still learning but I will continue to do other challenges.

    Recipe Main CSS

    1
    newspaceracer•90
    @newspaceracerPosted 12 days ago

    Looks great. I don't know that the responsiveness works but other than that it looks great. I was very interested to see how you dealt with the special styling of the lists and I see you used markers which I didn't think of using, seems more straightforward than what I did. I guess another thing is the original has some tricky margins from the new bullets/numbers so it's not flush with the rest of the text but indented (more trouble than it's worth) but if you want to practice that you may want to give it a shot and see if you can replicate it.

    0
  • newspaceracer•90
    @newspaceracerPosted 13 days ago

    I like how you approached the fonts. Adding the @font-face and then just adding the ones that you will use so you can just use font-family later saves some typing for sure. I was looking how to do that myself, so I resorted for the actually defining the weight on every font manually. Will likely do it the way you did it from now on!

    1
  • Shanxx191919•60
    @Shanxx191919Submitted 15 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of this project since I learned a lot with html and css.

    What challenges did you encounter, and how did you overcome them?

    The sizing of the card and I had trouble putting the items inside the card.

    What specific areas of your project would you like help with?

    I need help with improving css since I write lots of code and I don't wanna waste time.

    Blog Preview

    1
    newspaceracer•90
    @newspaceracerPosted 15 days ago

    It looks neat. You forgot the border around the card but that's an easy fix: border: 1px solid black. The only main thing is it doesn't change when hover over. Hovering is not that bad basically you just write the element you want it to be reacted when hovered over and then inside the CSS declaration you add all the things that need to change including other elements.

    Example:

    card:hover{
box-shadow: #change in shadow#
p{
#change in the p elements within the card element#
}
}
    Marked as helpful
    0
  • newspaceracer•90
    @newspaceracerPosted 15 days ago

    Very clean and easy to follow implementation. I think you started adding the alt text but didn't actually add the value. The card is doesn't have the appropriate corner radius, and the paddings are too small, this can just be easily fixed by adding those attributed in the card.

    Some suggestions would be you don't have to add the .card img selector for the image in this case that way, since it's the only image you can just select the entire element img{} instead.

    The only other point is the text in the card have width and by setting a width you can get closer to the design because currently the text stretches too far to the sides within the card.

    But I'm mostly nitpicking. Your implementation was very clean.

    0