frost3dWave

Latest comments

• 

  Hussein Beshir•70

  @HussooBSubmitted 5 months ago

  

  Testimonials

  1

  40
  

  frost3dWave•200

  @frost3dWavePosted 5 months 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
• 

  P

  Jaylen Baxter•340

  @JYLNSubmitted 5 months 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

  #parcel#tailwind-css

  1

  60
  

  frost3dWave•200

  @frost3dWavePosted 5 months 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•300

  @Michael-AlansSubmitted 5 months 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

  20
  

  frost3dWave•200

  @frost3dWavePosted 5 months 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,190

  @Grimm-NSubmitted 5 months 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)

  #animation#python#stylus

  3

  121
  

  frost3dWave•200

  @frost3dWavePosted 5 months 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
• 

  kirankumar636164•50

  @kirankumar636164Submitted 5 months ago

  

  Product-preview-card

  1

  40
  

  frost3dWave•200

  @frost3dWavePosted 5 months 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 5 months 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

  20
  

  frost3dWave•200

  @frost3dWavePosted 5 months 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