@JasonPBurkeSubmitted 14 days ago
P
DocForLoop
@DocForLoopAll comments
- P@DocForLoopPosted 13 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 needtransform: 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 helpful1 - @nodegreecodeSubmitted 2 months agoWhat 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.
P@DocForLoopPosted 2 months agoHi, 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 withdatetimeattribute for semantic date. - for bg-image use
background-positiontoo.
Marked as helpful1 - I think both images are decorative so you can use empty
- @Ziorko87Submitted 2 months agoP@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-jesusSubmitted 4 months agoP@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 - @artemkotko14Submitted 4 months agoWhat 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.
P@DocForLoopPosted 4 months agoHi, 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 helpful0 - don't use
- @BledanITSubmitted 4 months agoWhat 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.
P@DocForLoopPosted 4 months agoHi, 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 helpful0 - P@rinta-gitSubmitted 4 months agoP@DocForLoopPosted 4 months ago
Hi, I've checked your code and here are my suggestions:
- try use picture element for responsive images
- I don't think you need <br> in h1 it's unnecessary
- for prices use span element instead of h2, h3
- try to use @use and @forward rules in scss
Hope it helps :)
Marked as helpful1 - P@kilozdazolikSubmitted 5 months agoP@DocForLoopPosted 4 months ago
Hi, I see there is a problem with your preview and code links, so I couldn't check it now.
0 - @dorobantu97Submitted 5 months agoP@DocForLoopPosted 4 months ago
Hi, here are some suggestions:
- try to use semantic elements like main, article, section, footer
- I don't think you need media queries
- try to use :hover and :focus pseudo class selectors to change color and background-color on links
Hope it helps.
Marked as helpful0 - @GinoGallardoSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Me gusto haber practicado css puro sin framewors
What challenges did you encounter, and how did you overcome them?aprender a usar figman
What specific areas of your project would you like help with?al momento de nombrar las clases y los commit
P@DocForLoopPosted 5 months agoHi, here are my suggestions :
- due to GDPR compliance check @font-face rules ,as these font files are in your project.
- missing hover effects on the card
- consider using relative CCS units like rem, em, % .. instead px
- check your margins and paddings in figma files, because there are unnecessary gaps in the layout
- check clamp() function for font-sizes
Hope it will help you.
Marked as helpful0 - @ReactLlordSubmitted 5 months agoP@DocForLoopPosted 5 months ago
Hi,
Welcome, I see some issues in your code here are my suggestions:
- I would use semantic HTML , like main, section, footer
- I would put every css rules to the separate css file
- In figma design file there are the correct colors, fonts ,spacings that you can use
- I would dowload the font files and in css I would use @font-face rules
- Your h3 element set to display:flex, but it is unnecessary ,because it is not a flex container.
I hope it will be helpful. All the best!
Marked as helpful0
