Skip to content
OverviewSolutions
7
Comments
7

Rodel Advincula

@brodel10120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Rodel Advincula•120
    @brodel10

    Great job Gino, not much to point out here, although there are a couple of repeated tailwind classes that could probably be consolidated to make your code a little smaller and easier to track and you'd only have to change one thing instead of doing it to each card. I see that grid gap-x-8 gap-y-12 sm:grid-cols-1 sm:gap-y-6 is used for each card container. I would probably create a class in your stylesheet that looks something like this:

    section { @apply rounded-xl p-8 bg-lightGray shadow-lg; }

    .card { @apply grid gap-x-8 gap-y-12 sm:grid-cols-1 sm:gap-y-6; }

    Hope this helps!

    Marked as helpful
  • AndresOreVel•370
    @AndresOreVel
    What are you most proud of, and what would you do differently next time?

    I would say that it can be improved quite a bit to make it more like the result that was requested, but I am still quite satisfied.

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

    Using grid and combining it with flex as I have done, has caused me more than one headache.

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

    In particular, I would like to know more about using the grid. I'm sure there are other ways to simplify this exercise.

    Four Cards

    1
    Rodel Advincula•120
    @brodel10

    Awesome job! Only thing I can say is that you can probably have a common class for all your individual cards and move all the similar css under that class name to remove repeat and have a small css foot print.

    .card-item { box-shadow: 0 1rem 2rem .5rem #dedede; padding: 1.25rem; border-radius: 0.625rem; display: flex; flex-direction: column; }

  • k-hroma•150
    @k-hroma
    What are you most proud of, and what would you do differently next time?

    Ugh, since I'm just starting out in this, it was very complicated for me to try to make a responsive design, so I'm proud to have achieved what I did

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

    The biggest challenges were related to the relationships between containers and making them flexible to achieve a responsive design.

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

    Any help or suggestion on how to improve will be very welcome.

    ResponsiveProductCardComponent CSS

    1
    Rodel Advincula•120
    @brodel10

    Great job k-hroma! Another way of adding a strikethrough to a text is by using the <s> tag. Same outcome but makes your css file a wee bit smaller lol. Other than that, I think your code is pretty spot on!

  • Rodel Advincula•120
    @brodel10

    Looks great @jdelrosario111! One thing I see that I can recommend is that instead of using span and then adding css styling to make the text bold, I would just simply use the <b> tag. No extra css necessary. Other than that, your code looks great and well organized! Keep it up!

  • Rodel Advincula•120
    @brodel10

    Amazing job Ayman, your solution looks exactly like the design. I would recommend using max-width and max-height though as modern browsers detect this and keeps a correct aspect ratio and makes it responsive across all screen sizes.

  • klnrox001•40
    @klnrox001
    What are you most proud of, and what would you do differently next time?

    I tried my best to fulfill the challenge brief. I managed to make a design that resembles the preview given. I want to complete these challenges more efficiently, so any advice is greatly appreciated! ^^;

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

    I had a lot of trouble using "object-fit" for the image in the mobile design. My final solution after messing around in the Inspect Element tool in Chrome Developer Tools was as follows:

    @media only screen and (max-width: 375px) {
    #headImage {
width: 100%;
height: 12.5625em;
object-fit: cover;
}
    What specific areas of your project would you like help with?

    I think my css code needs work... any suggestions for improvements will be greatly appreciated :)

    Blog Preview Card Solution

    1
    Rodel Advincula•120
    @brodel10

    Hi klnrox001, great work! CSS can definitely be simplified. I see that you tried adding padding and margin to your parent element, im assuming to center the card element, but this can simply be done using flexbox which youve already done. I would first remove the added padding and margin from all the elements using:

    • { padding: 0; margin: 0; box-sizing: border-box; /* tells the browser to include an element's border and padding in its width and height */ }

    then make sure to set your page/container height to the users viewport height:

    .body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: hsl(47, 88%, 63%); }

    this approach will ensure that the child element of body, which is .generalContainer in your case, will be centered on all screen sizes. Also, if you use min-height and min-width on your elements the browser will make sure to use the correct height-width ratio.

    Marked as helpful
View more comments