Latest solutions
Article Preview Compnent - Responsive + Mobile First Approach
#accessibility#sass/scss#parcelPSubmitted about 1 month agoMeet Landing Page - Responsive - Mobile First Approach
PSubmitted 2 months ago-
I would like to know if my styles.scss file code looks clean with css code.
-
I would be open to any other suggestions for improvement.
-
Responsive Testimonial Grid - Mobile First Approach
#accessibility#bem#sass/scss#parcelPSubmitted 3 months agoI am encountering a problem of overflow in my grid items (card-4 and card-5) while resizing to medium-sized screen (min-width:768px). I tried out multiple fixes but could not fix it. I would be glad to know your suggestions.
Also, I am open to any other suggestions.
Four Cards Feature Section - using Flex, Grid - Mobile First Approach
#accessibility#bemPSubmitted 3 months ago-
I would be eager to know if any kind of improvements can be made in the project.
-
Also, I would like to know if my styles.css is well organized.
-
Responsive Product Preview Card Compnent - Mobile First Approach
#accessibility#sass/scss#parcelPSubmitted 3 months ago-
Can my SASS file be optimized more? If yes, I would like to know specifically how?
-
Should one skip learning SASS due to Modern CSS and inclination towards Tailwind and Lightning CSS? I would like to know your thoughts on it.
-
Responsive Recipe Page using Flex - Mobile First Approach
PSubmitted 3 months agoRequest for help from Professionals regarding Git commits.
I would like to know if you commit your entire HTML code in a single commit or commit it in smaller chunks? If yes, on what basis do you chunk them?
Like in this recipe challenge, I completed entire HTML code and committed in single commit.
In a professional environment, what approach is acceptable?
I am open to any suggestions.
Latest comments
- P@GeorgeGit1P@Vinit1234
Great work @GeorgeGit1 !! Here are a few tips that you'd like to consider:
- Using semantic tags instead of divs will improve the meaning of your website structure. Here's a sample structure:
<header> <nav class="logo"> <img src="./assets/logo.svg" alt="Website logo"> </nav> </header> <main> <section class="heading"> <div class="hero-image"> </div> </section> <section class="main-text"> <div class="buttons"></div> </section> <section class="middle-content"> <div class="lice"></div> <div class="images"> </section> </main> <footer> <div class="lice lice-2"></div> <div class="footer-text"></div> </footer>
-
If the footer is meant for entire page you can keep it separate from the main tag, as mentioned above.
-
You can retain the proportion of the images by avoiding applying explicit widths and heights (and using max-width instead) as:
.images img { /* width: 100%; */ /* height: 100%; */ border-radius: 5px; max-width: 100%; }
- You can position the circled number 2 to overlap the footer by adding properties as:
.lice-2{ position: relative; } .circle-2{ position: absolute; bottom: -30px; } .line-2{ position: absolute; bottom: 27px; }
*Disclaimer :These are just suggestions. Feel free to modify them as per your requirements.
Rest looks good to me. Well done!!
Keep coding, Keep growing. 👋
Hope you find some of this useful, if so please remember to click the "mark as helpful" button. Thank you!👋👋👋
- P@AnguiNatorWhat are you most proud of, and what would you do differently next time?
In this challenge, I learned how to use maps, @each, and @if in Sass. I will keep using them to continue practicing.
P@Vinit1234Awesome job @AnguiNator !! It's great to see that you've put in good efforts in making this challenge pixel perfect using advance concepts from SASS. Here are a few suggestion that you'd like to consider:
-
Applying width in px kills responsive nature of the elements (so it's recommended to skip giving fixed widths). You can still achieve responsiveness by using grid (by setting grid-rows and grid-columns; or grid-area on grid-items). You can refer this grid layout guide as a useful resource.
-
You can use position property to place and position bg-pattern-quotation image and apply z-index on it to achieve desired result. You can try it out.
-
Using rems instead of px will improve the accessibility of your page. If you'd like to read more on this you can refer this.
Rest looks good to me!
Keep it up! Keep coding, keep growing! 👍
If you found anything in this comment helpful, please remember to click the "mark as helpful" button. Thank you! 👋
-
- P@atif-devP@Vinit1234
Good Work @atif-dev. Your webpage is responsive for different screen sizes. Keep it up!!
- @AnjulAryalWhat specific areas of your project would you like help with?
Some feebacks will be highly appreciated
P@Vinit1234Hey @AnjulAryal, it's great that you've completed your challenge! Here are a few tweaks that you'd like to add up to improve your page:
- You can refer to styles suggested in style-guide.md file that is provided. For example: Set font-size and color accordingly,
body{ font-size:14px; color:var(--Grey); } h2{ color:var(--Black) }
You can import webfonts (mentioned in styles.md) into you css file as:
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap"); body{ font-family: "Montserrat", sans-serif; }
Similarly you can figure out other styles to be applied referring styles.md file.
-
To improve the semantics, you can use <figure> tag to enclose <img> tag instead of using <div class="img">.
-
You can improve responsiveness of your image to maintain its proportion on different screens by using properties like aspect-ratio, box-size, object-fit etc. Refer this awesome link to learn more about responsive images.
-
You can also add hover effect on button to change its background color as mentioned:
background-color:var(--Green700); }
I must say that you are on the right track of progress. Keep coding keep improving!! 👋
If you found anything in this comment helpful, please remember to click the "mark as helpful" button. Thank you! 👋👋👋
- @VenkataMadhuKP@Vinit1234
Hi @VenkataMadhuK! It was a good attempt with Tailwind 🙌. A minor fix can center your QR image and keep it responsive - just remove the class
w-[200px]
from <img> tag. Giving widths in pixels nullifies its responsive nature.If you found this feedback helpful, please remember to click the "mark as helpful" button. Thank you! Keep up the good work ! 👋👋👋
- @chrislara01P@Vinit1234
Awesome work @chrislara01 !! Your page looks cool! I would like to mention a few suggestions that might improve the accuracy of your solution closer to design as follows:
- Update the color of product__title to hsl(212, 21%, 14%); i.e.,var(--clr-black).
- Update the background of product-card__add-cart on hover as:
.product-card__add-cart:hover{ background-color: var(--clr-green-700); }
-
Using <figure class="product-image"> tag instead if <div class="product-image"> will improve the semantics of your page.
-
I like the trick that you used
display:none
to hide respective product images on respective screen sizes. But eventually you'll end up writing multiple media queries if there were a few more images (with different resolutions). You can try using srcset and sizes attributes in the <img> tag. You can Refer This
Rest of your work is Great! Keep Coding Keep Growing!!💪🏻
PS: If you found anything in this comment helpful, please remember to click the "mark as helpful" button. Thank you!
Marked as helpful