Skip to content
OverviewSolutions
6
Comments
10
frost3dWave
@frost3dWave

All comments

  • frost3dWave•190
    @frost3dWavePosted 10 days ago

    great job! The only thing i could see to improve it would be using more semantic tags for the each individual components like article or section with an aria-labelledby their name(the heading) as its value rather than generic div.
    great work on this project.

    Marked as helpful
    0
  • Jaylen Baxter•300
    @JYLNSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    This challenge went over fairly smoothly. One thing I would change next time, is change the root font size so that sizing may be a little more simple or more uniform than trying to use rems and ems at a larger font size.

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

    I feel like even though I followed the design spec and properly calculated my rems, it feels like the cards still don't match the width like in the design. I tried adjusting the grid gap and the grid container width, but I still couldn't get the paragraphs to line up exactly like the design. I'm not sure what my next step would be unless it is changing the root font size and adjusting my rems based on that change.

    Testimonials Grid Section using Tailwind CSS

    1
    frost3dWave•190
    @frost3dWavePosted 13 days ago

    It could be because your font size is a bit larger I think. Try playing around with it & you will get it. Your grids are perfect.

    Great work on the project.

    Marked as helpful
    1
  • Michael-Alans•130
    @Michael-AlansSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    I believe the use of flex-box and media queries to give a responsive design is a great one.

    The grouping of selectors to reduce the code.

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

    I faced the challenge of changing the flex direction to column on smaller screens because I used @media screen and(max-width) { }

    But I fixed that by using @media.

    Responsive four-card-section using flex-box and media queries

    1
    frost3dWave•190
    @frost3dWavePosted 13 days ago

    Hey, good job on this project, although there are obvious flaws some of which I have listed below, it's great way to learn if you recognize them now & keep them in mind for all your future projects.. Hope this helps.

    • you should also use semantic html for the card components too instead of pure div.
    • :root should be the first inside a stylesheet & its also missing a semicolon in here.
    :root {
    --Cyan: hsl(180, 62%, 55%);
    --Orange: hsl(34, 97%, 64%)
    --Blue: hsl(212, 86%, 64%);
}
    • although you got the layout right, the approach you used is extremely crude & brute force~ish way. You should recognize when to use which tools/ methods. A grid is way more appropriate here than flexbox for they overall page layout.
    • for aligning the images, just having flex on your individual cards would have sufficed here, so you could align it's children using align-self than using floats..
    .one svg,  .two .firstbox svg, .two .secondbox svg, .three svg {
    float: right;
}
    • for the above snippet too & in other places in your code too, just a mere class would have been enough or a simple tag instead of having so many selectors chained together. you could have the same class on all of your cards & just use it once, it would look way more readable.
    @media screen and(max-width:100px) {
    main {
        flex-direction: column;
    
    }
}

    what's the purpose of this, first of all you should use relative units when defining media queries & thus isn't affecting anything & even if it would affect something , you shouldn't need media queries for something as low as 100px.... like your cards are triple the size of the max-width you provided above.

    I'd recommend you to just use both HTML & CSS validators, you will see all of your errors & syntax mistakes.

    0
  • Natali 👻 Grimm•1,110
    @Grimm-NSubmitted 14 days ago
    What are you most proud of, and what would you do differently next time?

    Finally finished the last challenge in the "Newbie" category! 🎉

    The task was really interesting, but as always, I managed to come up with a few extra challenges for myself. 😅 In the end, it all worked out, and I'm proud of the progress I've made! Time to move on to the next one! 💪

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

    I really put a lot of effort into making this design as flexible and responsive as possible, aiming to make it as fluid and adaptable as I could, without being tied to standard sizes. It took me longer than usual, but even so, I’m not entirely happy with the final result. 😔 But hey, it’s all part of the learning process, right?

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

    I’m really looking forward to any advice and comments on this work! I know the code can be improved, and I’m eager to work on it!

    Responsive section Coming Soon (html, stylus, js)

    3
    frost3dWave•190
    @frost3dWavePosted 14 days ago

    Hi, great job on this project. The only thing I noticed which might be unnatural, is the wave animations near the footer. Right now they seem to abruptly cut themselves once 100% is reached & start new at 0%

    @-o-keyframes Wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}

    It's fine if that's what you intended, but I think it would feel more "wavey" or more natural if it didn't cut itself like that..

    You could maybe do it like this,

    @-o-keyframes Wave {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50%);
  }
}

    I think this would look more pleasing to to watch too, as it ensures the start & end position are the same & the halfway point is the previous complete position...

    Marked as helpful
    2
  • frost3dWave•190
    @frost3dWavePosted 14 days ago

    I am getting security error from chrome when visiting your preview. i don't know what you did or not, but its telling me its dangerous site to visit.

    • link properly to your assets when using images & stuff, you are using a wrong name for your cart svg & hence it isnt showing up.. i can just see it from the comparison slider above.

    • dont use width:100% like that on your images, use a max-width instead to ensure they can get smaller if needed & will not grow bigger than their true size.

    • same with other places where u have used width:100%.

    0
  • ElkuchWaltz•80
    @ElkuchWaltzSubmitted 17 days ago
    What are you most proud of, and what would you do differently next time?

    I'm glad that I came back to this after taking some time away. Still, I am having trouble with the code.

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

    I had limited experience with the different display functions in CSS, so I learned a lot more about them and practiced with some online courses/ games. Unfortunately, I'm still having issues with the display.

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

    I would really appreciate if anyone can help with why my @media command isn't changing the layout the way I've intended it to. I've spent a lot of time looking at it and trying different tweaks to no avail.

    Four Card Solution - Help Wanted

    3
    frost3dWave•190
    @frost3dWavePosted 17 days ago

    Try aligning with grid-column & grid-row properties on your instead of grid-area. It should work.

    • First of all, create a 12 column grid layout with row that you prefer (6/8 whatever you feel comfortable with).
    • make sure to use 1fr when defining your columns & rows instead of percentage based that you have now.
    • align individual cards with grid-column-start/grid-column-end & grid-row-start/grid-row-end. It should work.
    Marked as helpful
    0
  • frost3dWave•190
    @frost3dWavePosted 17 days ago
    • do not include your css into the html file, it is good practice to have them both separated & it keeps your html clean.
    • use correct tags for the links section, they aren't list elements nor are they mere buttons.
    • use descriptive alt texts for all the images.
    • again the h tags should be in hierarchical order there shouldn't be such as large difference as h1 & the next as h5 as you have now.
    Marked as helpful
    0
  • Shlok Negi•40
    @tejasnegiSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I would Learn a few more things and implement it better next time. Im not that proud its not the best work as it took some time.

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

    Sizing, Spacing was the biggest challenge as I was given just an image of the final page, so it took quite a lot of back and forth iterations to get it somewhat right, which I also find not so accurate.

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

    If you can see my Nutrition section's table and the original page's Nutrition section's table, you will notice the details is off. I'm unable to explain exactly. So, if anyone notices the issue please check the code Ive done it for and please guide me to fix the issue.

    Recipe Page

    1
    frost3dWave•190
    @frost3dWavePosted 20 days ago

    I can see few on that part.. hope it helps!

    • All the nutritional value are left aligned where as in your solution they are right aligned.
    • And the font weight for the values is also greater than what you have currently..
    Marked as helpful
    0
  • frost3dWave•190
    @frost3dWavePosted 21 days ago
    • At a first glance, its obvious that the profile/author section at the bottom of the card is nowhere near what the design suggests & everything seems a lot bigger in general. So i would suggest you to check out the design files provided for this challenge.
    • Make it a habit to not include internal CSS like you did in here, always use a external stylesheet & link it in the HTML. Its a best practice to follow & also makes the HTML remain clean.
    • Do not set fixed height like you have done so for centering the content, use a min-height to keep content from behaving in unexpected ways on smaller screens.
    • For similar reasons, do not set fixed width on your card component, use max-width so the content does not grow over specified dimensions & shrinks when necessary.
    0
  • frost3dWave•190
    @frost3dWavePosted 23 days ago

    First of all, I would avoid using both inline & internal CSS & use an external CSS. It helps keep the html clean.
    Use <main> tag to surround that main content of your page inside body element other than that it's great one!

    0