@Fulgore33Submitted 9 months ago
Latest comments
- @hmousavinSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
It's finally finished .. It was quite challenging to make this cross layout (first time, I came up with idea of using flex, then I got with absolute positioning and transform and finally, the CSS Grid, did the job done)
What challenges did you encounter, and how did you overcome them?- Using CSS Grid with proper fractions
- Align items in center without the flex .. At the end I forced to use flex, since my margin/padding with "auto" not worked
- First time to use Box-Shadows
Nothing .. I need to exercise more.
@fayiz770Posted 10 months agoYour CSS file is generally well-structured, but there are a few improvements and corrections you could make for better performance, maintainability, and correctness:
Font-Face Declaration:
You have inconsistencies in your font-weight values. Ensure they match standard values: 100, 200, 300, 400, 500, 600, 700, 800, 900. You have some duplicate and incorrect entries, such as: Poppins-Light has font-style: italic. Poppins-Thin has font-weight: normal. Poppins-SemiBold has font-weight: semibold which is not valid. Use 600. Fix format syntax in the src attributes. Font-Face Example:
@font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-Black.ttf') format('truetype'); font-weight: 900; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-Bold.ttf') format('truetype'); font-weight: 700; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-ExtraBold.ttf') format('truetype'); font-weight: 800; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-ExtraLight.ttf') format('truetype'); font-weight: 200; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-Italic.ttf') format('truetype'); font-style: italic; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-Light.ttf') format('truetype'); font-weight: 300; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-Medium.ttf') format('truetype'); font-weight: 500; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-Regular.ttf') format('truetype'); font-weight: 400; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-Thin.ttf') format('truetype'); font-weight: 100; } @font-face { font-family: 'Poppins'; src: url('assets/Poppins/Poppins-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; }``` ** Media Queries: ** Nested selectors within media queries (.header h1, .header p) might not work as intended. Use direct descendant selectors. Media Query Example:@media (max-width: 375px) { body > main { padding: 3em 1em; }
.header h1 { font-size: 1.3em; } .header p { text-align: justify; /* text-justify is not a valid CSS property */ } .content { display: flex; flex-direction: column; row-gap: 3em; }}```
General Styles:
Use valid values for font-weight. Replace non-standard values like semibold with appropriate numerical values. Ensure consistent usage of CSS properties. General Example:
body { min-width: fit-content; height: auto; font-family: 'Poppins', sans-serif; /* Fallback font added */ } body > main { display: flex; flex-direction: column; align-items: center; min-height: fit-content; } .header { display: flex; flex-direction: column; align-items: center; height: fit-content; color: var(--very-dark-blue); text-align: center; margin-bottom: 3em; } .header h1 { font-size: 2em; font-weight: 300; /* 'lighter' replaced with numeric value */ letter-spacing: 1.5px; } .header p { font-size: 0.9em; font-weight: 700; /* 'bold' replaced with numeric value */ margin-top: 0; } .content { box-sizing: border-box; margin: 0 auto; display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr); gap: 2em; height: auto; } .footer { display: block; height: auto; font-size: 0.8em; font-weight: 700; /* 'bold' replaced with numeric value */ text-align: center; } .footer a { color: var(--very-dark-blue); text-decoration: none; } .card { background-color: white; position: relative; max-width: 22em; min-height: 15em; padding: 1em 2em; box-sizing: border-box; border-radius: 5px; box-shadow: 0px 5px 10px var(--grayish-blue); } .card h2 { color: var(--very-dark-blue); font-size: 1.25rem; } .card p { color: var(--grayish-blue); font-size: 0.8em; font-weight: 700; /* 'bold' replaced with numeric value */ line-height: 2em; } .card img { max-width: 20%; height: auto; position: absolute; right: 10%; bottom: 10%; } .left { grid-column: 1; grid-row: 2 / 4; border-top: 4px solid var(--cyan); } .top { grid-column: 2; grid-row: 1 / 3; border-top: 4px solid var(--red); } .bottom { grid-column: 2; grid-row: 3 / 5; border-top: 4px solid var(--orange); } .right { grid-column: 3; grid-row: 2 / 4; border-top: 4px solid var(--blue); }``` ** Commenting: ** Remove or update commented code to keep the CSS clean and maintainable. These changes should improve the readability, consistency, and functionality of your CSS file. if you find this useful, please mark it as helpful.0 - @fedefiorettiSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I figured out some issues with media querys
What challenges did you encounter, and how did you overcome them?the use of media querys
What specific areas of your project would you like help with?i would love if anyone can check out my stylesheet and maybe give me some tips or feedback.
@fayiz770Posted 10 months ago** Congratulations on completing this challenge **
The overall CSS structure is good, and you can make some improvements on centering the main content, I mean that instead of using
padding-top: 10rem; padding-bottom: 10rem;you can use marginmargin: 0 auto;I hope this helps you a little bit. if find this helpful, please mark it as helpful
Marked as helpful0 - @rohitdubey1352Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
My design skill, that I am very proud of.
What challenges did you encounter, and how did you overcome them?Tackel with list and just responsiveness.
What specific areas of your project would you like help with?NA
@fayiz770Posted 10 months agoDesign and Aesthetics: The design of your recipe page is visually appealing with a clean and organized layout. The use of contrasting colors for different sections (recipe, time, ingredients, instructions, and nutrition) enhances readability. The typography choices, with a serif font for headings and a sans-serif font for body text, create a pleasing hierarchy and improve the visual flow of the content.
Responsive Design: Your page adapts well to different screen sizes, particularly with the media query for screens under 720px. The adjustments to padding, image sizing, and the removal of decorative spans ensure that the content remains accessible and easy to read on smaller devices. This responsiveness is crucial for providing a good user experience across various devices.
Usability and Accessibility: The use of semantic HTML elements like <main>, <h1>, <h2>, and lists (<ul>, <ol>) enhances the structure and accessibility of the page. However, improving the alt text for the image from "img" to something more descriptive, such as "Omelette dish," would enhance accessibility for screen readers. Additionally, using more distinct hover effects for interactive elements could further improve usability.
Code Quality and Maintainability: Your CSS is well-organized and makes effective use of variables for colors and fonts, which aids in maintainability. However, consolidating font imports into a single request can optimize loading times. For example, combining the font imports into one line like so:
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap');This reduces redundancy and simplifies the stylesheet. Additionally, ensure consistent use of class names (e.g., "Instructions" should be "instructions" for consistency with other class names). This attention to detail enhances both the readability and maintainability of your code.
0 - @R3lssSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I tried to use some "em" values as someone commented in my last solution, I'm still improving so is not all values that are in "em"
What challenges did you encounter, and how did you overcome them?It was hard to see if it has some shadow, so I didn't put any, but the main problem was with the links, didn't know how to put them together so I tried many ways and end up get it right
What specific areas of your project would you like help with?Anything you see strange in my code you can tell me and I'll try to improve more:)
@fayiz770Posted 10 months agoYour project is well-executed with a clean design and responsive layout. By incorporating semantic HTML, enhancing accessibility, utilizing CSS variables, and refining interactive elements, you can further improve the user experience and maintainability of your code. Keep up the good work!
0 - @ijohnstSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
Getting this to match the figma file as closely as possible
What challenges did you encounter, and how did you overcome them?Figuring out how to make the typography fluid without a media query. Math is not my strong suit and I needed a fluid typography generator to figure out the proper clamp
What specific areas of your project would you like help with?Any tips on how to make the typography easier to manage. I like that the clamp really minimized the lines I used but I'm not sure that was the best or more eloquent solution without a media query?
@fayiz770Posted 10 months agoUsing the clamp() function in CSS is indeed a powerful way to manage responsive typography without the need for media queries. It allows you to set a fluid range for font sizes that scales with the viewport size, providing a more dynamic and flexible solution. However, there are other best practices and tools you can use to further manage and enhance typography in a responsive design.
0
