Rodel Advincula

Latest comments

• 

  Gino Gallardo•140

  @GinoGallardoSubmitted 3 months ago

  

  Utilice tailwind

  1

  20
  

  Rodel Advincula•120

  @brodel10Posted 3 months ago

  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

  0
• 

  AndresOreVel•170

  @AndresOreVelSubmitted 3 months ago

  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

  20
  

  Rodel Advincula•120

  @brodel10Posted 3 months ago

  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; }

  0
• 

  k-hroma•150

  @k-hromaSubmitted 3 months ago

  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

  60
  

  Rodel Advincula•120

  @brodel10Posted 3 months ago

  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!

  0
• 

  jdelrosario111•30

  @jdelrosario111Submitted 3 months ago

  

  Recipe page

  1

  10
  

  Rodel Advincula•120

  @brodel10Posted 3 months ago

  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!

  0
• 

  Ayman Shalaby•40

  @aymanshalaby55Submitted 3 months ago

  

  social media links.

  3

  30
  

  Rodel Advincula•120

  @brodel10Posted 3 months ago

  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.

  0
• 

  klnrox001•40

  @klnrox001Submitted 3 months ago

  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

  40
  

  Rodel Advincula•120

  @brodel10Posted 3 months ago

  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

  0