Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
10
P

Jamie DreamCoder (Pseudonym)

@Vinit1234India140 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

  • Article Preview Compnent - Responsive + Mobile First Approach

    #accessibility#sass/scss#parcel

    P
    Jamie DreamCoder (Pseudonym)•140
    Submitted about 1 month ago

    1 comment
  • Meet Landing Page - Responsive - Mobile First Approach


    P
    Jamie DreamCoder (Pseudonym)•140
    Submitted 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.


    1 comment
  • Responsive Testimonial Grid - Mobile First Approach

    #accessibility#bem#sass/scss#parcel

    P
    Jamie DreamCoder (Pseudonym)•140
    Submitted 3 months ago

    I 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.


    1 comment
  • Four Cards Feature Section - using Flex, Grid - Mobile First Approach

    #accessibility#bem

    P
    Jamie DreamCoder (Pseudonym)•140
    Submitted 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.


    1 comment
  • Responsive Product Preview Card Compnent - Mobile First Approach

    #accessibility#sass/scss#parcel

    P
    Jamie DreamCoder (Pseudonym)•140
    Submitted 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.


    1 comment
  • Responsive Recipe Page using Flex - Mobile First Approach


    P
    Jamie DreamCoder (Pseudonym)•140
    Submitted 3 months ago

    Request 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.


    1 comment
View more solutions

Latest comments

  • P
    George•180
    @GeorgeGit1
    Submitted about 2 months ago

    Css Position absolute

    1
    P
    Jamie DreamCoder (Pseudonym)•140
    @Vinit1234
    Posted about 2 months ago

    Great work @GeorgeGit1 !! Here are a few tips that you'd like to consider:

    1. 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>
    
    
    1. If the footer is meant for entire page you can keep it separate from the main tag, as mentioned above.

    2. 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%;
    }
    
    1. 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
    JESUS ANGUIANO•180
    @AnguiNator
    Submitted 3 months ago
    What 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.

    Testimonials Grid Section

    #sass/scss
    1
    P
    Jamie DreamCoder (Pseudonym)•140
    @Vinit1234
    Posted 3 months ago

    Awesome 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:

    1. 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.

    2. 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.

    3. 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 Iqbal•3,320
    @atif-dev
    Submitted 3 months ago

    Responsive Four Card Feature Section

    #accessibility
    1
    P
    Jamie DreamCoder (Pseudonym)•140
    @Vinit1234
    Posted 3 months ago

    Good Work @atif-dev. Your webpage is responsive for different screen sizes. Keep it up!!

  • AnjulAryal•130
    @AnjulAryal
    Submitted 3 months ago
    What specific areas of your project would you like help with?

    Some feebacks will be highly appreciated

    Responsive landing page of perfume using media query

    1
    P
    Jamie DreamCoder (Pseudonym)•140
    @Vinit1234
    Posted 3 months ago

    Hey @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:

    1. 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.

    1. To improve the semantics, you can use <figure> tag to enclose <img> tag instead of using <div class="img">.

    2. 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.

    3. 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! 👋👋👋

  • VenkataMadhuK•60
    @VenkataMadhuK
    Submitted 3 months ago

    QR component challenge using tailwind css

    #tailwind-css
    3
    P
    Jamie DreamCoder (Pseudonym)•140
    @Vinit1234
    Posted 3 months ago

    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 ! 👋👋👋

  • Christian Gabriel Lara López•80
    @chrislara01
    Submitted 3 months ago

    Responsive card using flexbox and media query

    2
    P
    Jamie DreamCoder (Pseudonym)•140
    @Vinit1234
    Posted 3 months ago

    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:

    1. Update the color of product__title to hsl(212, 21%, 14%); i.e.,var(--clr-black).
    2. Update the background of product-card__add-cart on hover as:
    .product-card__add-cart:hover{
         background-color: var(--clr-green-700);
    }
    
    1. Using <figure class="product-image"> tag instead if <div class="product-image"> will improve the semantics of your page.

    2. 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
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub