DocForLoop

Latest comments

• 

  Jason Burke•170

  @JasonPBurkeSubmitted 11 days ago

  

  responsive signup page w/ validate & toggle functions

  #sass/scss

  1

  00
  

  P

  DocForLoop•410

  @DocForLoopPosted 10 days ago

  Hi, I have checked your code here are my suggestions:

  • I see that the picture element media query is set to 768px, but I think is better to set about 1200, because between 768px and 1200px is usually for tablets and small laptops , and you can keep the column layout till 1200px and switch to desktop design from 1201px
  • I think flexbox is better than grid for simple column to row layout changes, less code needed and it's simpler
  • In body use min-height: 100vh
  • For font sizes you can use clamp() function to make the title responsive, I don't think you need transform: scale()
  • I you want to add transition to button with linear grad use overlay effect with opacity and you can add transition to opacity and it will work

  Hope it helps! :)

  Marked as helpful

  1
• 

  nodegreecode•280

  @nodegreecodeSubmitted 2 months ago

  What are you most proud of, and what would you do differently next time?

  I’m excited to embark on this new learning path and to see my solution come closer to the intended design. That said, my current solution is optimized only for desktop browsers, specifically Firefox and Chromium-based engines. For my next project, I’ll focus on improving responsiveness to ensure a better experience across different devices and screen sizes.

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

  What started as a seemingly simple challenge quickly became more complex as I got deeper into the project. After finishing the markup and half the styling, I realized that positioning the popup with social links wasn’t as straightforward as I thought.

  To solve this, I had to get creative. I wrapped the preview article in an extra container to make it relative, allowing me to position the share popup exactly where it needed to be. I also decided to use a background image instead of embedding the image with an <img> tag. However, I’m aware this might not be the cleanest solution.

  Styling the card for the mobile version was another unexpected hurdle. Getting the flex-basis proportions just right to match the design was tricky, and I had to experiment quite a bit to achieve the desired look.

  While it wasn’t as smooth as I’d hoped, overcoming these challenges was a great learning experience and a reminder of how attention to detail can make all the difference.

  

  Responsive article preview with SASS

  #sass/scss

  1

  10
  

  P

  DocForLoop•410

  @DocForLoopPosted 2 months ago

  Hi, I've checked your code ;)

  • I think both images are decorative so you can use empty alt="" or link as background-images.
  • you can use <time> element with datetime attribute for semantic date.
  • for bg-image use background-position too.

  Marked as helpful

  1
• 

  olaf•235

  @Ziorko87Submitted 2 months ago

  

  HTML CSS GRID FLEX

  1

  30
  

  P

  DocForLoop•410

  @DocForLoopPosted 2 months ago

  Just a few tips:

  • use rem for font-sizes, if you change your browser default font-size you will see the difference.
  • try px for spacing, gap, same reason above
  • you can use grid-template-areas with grid-area, it's a simpler way for this kind of layout :)

  0
• 

  P

  Mario Jesús Arias Hernández•100

  @Mario-jesusSubmitted 4 months ago

  

  meet-landing-page

  #sass/scss

  1

  00
  

  P

  DocForLoop•410

  @DocForLoopPosted 4 months ago

  Hi, here are some feedbacks:

  • for responsive typography use clamp() function and you don't need to use media queries.
  • in media queries use em, it is better than px
  • it is better to use flexbox than grid if you want the footer-texts to align next to each other, and when you need only row or column layout.

  Hope it helps :)

  0
• 

  Artem Kotko•190

  @artemkotko14Submitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  Most proud of making a design using CSS Grid

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

  I've tried to recreate the exact designs given without having a Figma file. The only way in which I managed to do so was with

  .card__additional-quote {
        padding-right: ;
      }
  

  on two sepate cards which just doesn't feel right for me.

  I would be glad if someone would suggest how I can improve my code without a need to use that.

  

  Five cards using CSS Grid

  #bem#sass/scss

  1

  30
  

  P

  DocForLoop•410

  @DocForLoopPosted 4 months ago

  Hi, it is hard to make proper spacing without the design file, but good job, here are some tips:

  • don't use <br> in card-author, use flexbox instead and maybe a simple <p> is enough with <h3>
  • try to use semantic elements for cards like <section> <article> <header> <blockquote>
  • in layout try to use grid-template-areas for card's placement so you don't have to specify grid-column and grid-row

  Marked as helpful

  0
• 

  BledanIT•370

  @BledanITSubmitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  Proud of getting the grid done in much less time than the previous exercise and getting a good idea for the upper colored border.

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

  Correct sizing, solved easier than the other times

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

  I'd like to get feedback on sizes and layout.

  

  CSS Grid four card solution

  4

  60
  

  P

  DocForLoop•410

  @DocForLoopPosted 4 months ago

  Hi, here are some tips:

  • try to use rem for font-size instead of px , I only use px for padding currently
  • try to use clamp() for main title(h1) it grows from 24px to 36px
  • try to use em in media queries
  • I don't know why footer got absolute position it overlaps the main content , let it stay in the normal flow
  • usually tablet breakpoint starts at 768px, your breakpoint at 600 px give a very narrow card style, you can make a custom tablet layout e.g 2 column layout from 678px to 1200px or increase your breakpoint to look nice
  • svg's on mobile a bit smaller than on desktop size
  • try to use inheritance from body element and h1,h2,h3 so you don't need to repeat code blocks
  • try to use css variables for better structure and reusability, maintainability

  Hope it helps ;)

  Marked as helpful

  0