@Fulgore33Submitted 5 months ago
P
Mohammad Waris Fayiz
@fayiz770All comments
- @hmousavinSubmitted 6 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 6 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 6 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 6 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 7 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 6 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:[email protected]&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 6 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 6 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 6 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 6 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 - @Son1x-7732Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I did this challenge with relatively very less errors and that too on my own.
What challenges did you encounter, and how did you overcome them?Trouble in centering the divs in html body. Having width from 100% to 100vh helped solve the problem.
What specific areas of your project would you like help with?Adjusting more than two rows in a div.
@fayiz770Posted 6 months ago** Congratulations on completing this challenge ** Yon needs help adjusting more than two rows in a div. you can achieve this in multiple ways one is placing two divs inside the main div and displaying that flexibility. like this ** HTML **
<div class="main-div"> <div class="first-div"></div> <div class="second-div"></div> </div> ``` ** CSS ** .main-div { display: flex; flex-direction: row; } I hope this helps you. If you find this useful, please mark it as helpful. thanks0 - @yawar770Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
jlkjlkj
What specific areas of your project would you like help with?lkljlkjlk
@fayiz770Posted 6 months agoDid you solve the problem with your solution upload.
Marked as helpful1 - @yawar770Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
jlkjlkj
What specific areas of your project would you like help with?lkljlkjlk
@fayiz770Posted 6 months ago@yawar770 Congratulations on completing this challenge look at your solution upload fields your preview solution, and code doesn't match.
Marked as helpful1 - @garykhongSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Proud of figuring out how to do the round border around the result and display the results and categories side by side in desktop view. I'd do the bonus part next time.
What challenges did you encounter, and how did you overcome them?It took a long time to figure out the layout of the round border and gradient of the result. Overcame them just by experimenting with what works, and using chat gpt :)
What specific areas of your project would you like help with?how to do the bonus part
@fayiz770Posted 6 months agoCongratulations. On completing this challenge You can do the bonus part by helping with JavaScript, and if you want to know how to do this, check my solution.
If you find this useful, please mark it as helpful.
1 - @abdul-busybrainSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
The more I do the more I know I don't know
What challenges did you encounter, and how did you overcome them?Styling Tables
What specific areas of your project would you like help with?Table, Media Query, Typography
@fayiz770Posted 6 months agoCongratulations on completing this challenge.
Your HTML and CSS code is quite well-structured, especially considering you're a beginner! Here are some detailed feedback points and suggestions for
improvement
HTML
DOCTYPE Declaration:
Perfect use of
<!DOCTYPE html>to declare the document type.Head Section:
The meta charset and meta viewport tags are correctly included. You included the favicon link, which is great for branding. Font links are repeated. You can combine them to optimize the loading time:
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Outfit:[email protected]&family=Young+Serif&display=swap" rel="stylesheet" />``` Body Content: Your main structure is clear and semantic. Using main, article, header, section, and footer tags correctly. The use of headings (h1, h2) and lists (ul, ol) is appropriate. Consider using more descriptive alt attributes for images to improve accessibility: `<img src="assets/images/image-omelette.jpeg" alt="A delicious omelette" />` Footer Attribution: It's clear and links are correctly implemented. CSS Root Variables: Good use of CSS variables for colors and fonts. This makes your design easily adjustable. Global Styles: Proper use of universal selector * to reset margin and set box-sizing. You might want to uncomment the padding: 0; line in your universal selector for a complete reset:- { margin: 0; padding: 0; box-sizing: border-box; }``` Body Styling:
The body styles are well-defined, setting up a flex container to center the content. Typography and Spacing:
Consistent use of padding and margin, ensuring a clean layout. Good use of transition for smooth animations. Responsive Design:
Media queries are correctly used to adjust styles for larger screens. Ensure all responsive elements are covered. For example, increase padding for other sections in larger viewports as well. Readability:
Your CSS is well-commented and organized, which improves readability and maintainability. Suggestions for Improvement Combining Font Links:
As mentioned earlier, combining the Google Font links helps in reducing the number of HTTP requests, improving performance.
Semantic HTML:
Consider using nav for navigation elements if you plan to add any. Use figure and figcaption for images with captions to provide more context. Accessibility:
Use ARIA roles and landmarks to enhance accessibility. For example:
<main role="main"> ... </main>Ensure all images have descriptive alt text. Performance:
Minimize the use of large images or optimize them for web use. Consider adding a fallback font for when custom fonts fail to load:
body { font-family: var(--main-font), Arial, sans-serif; }Overall
Your code is well-done and demonstrates a solid understanding of HTML and CSS fundamentals. With a few optimizations and enhancements for performance and accessibility, it will be even better. Keep experimenting and learning—you're on the right track!
If you find this helpful, please mark it as useful.
Marked as helpful1 - @ginhxhSubmitted 6 months agoWhat challenges did you encounter, and how did you overcome them?
how to make it responsive with all devices
What specific areas of your project would you like help with?how to make it responsive with all devices
@fayiz770Posted 6 months agoHello there 👋. Congratulations on successfully completing the challenge! 🎉
Your project is well-organized and demonstrates a good understanding of HTML and CSS fundamentals. Here are some feedback points and suggestions for improvement:
HTML
Semantic Structure:
The HTML structure is clear, but consider using semantic tags like <main>, <header>, <footer>, etc., to improve readability and accessibility.
Accessibility
Adding alt attributes to images is crucial for accessibility. For example:
<img src="img/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall" />.Button Links
If the buttons are meant to link to external profiles, using <a> tags styled as buttons would be more semantically appropriate.
CSS
General Styling
The overall styling is good, but there are some areas for improvement to enhance responsiveness and consistency.
Container Alignment
Use Flexbox to center the .all container within the body. This will help with alignment and responsiveness.
Font Import
The font-family should be applied to the body tag to ensure consistency across all elements.
Responsive Design
Ensure that the container scales well on different screen sizes. Use percentages and flexible units (like em or rem) instead of fixed pixel values where possible.
Improved CSS
Here's an improved version of your CSS with these suggestions applied first of all, I want you to try yourself to do this stuff, but if you are stuck come to my solution OK?
/* General Styling */ body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: hsl(0, 0%, 12%); font-family: 'Inter', sans-serif; } /* Main Container */ .all { background-color: grey; padding: 20px 20px 30px; border-radius: 8px; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); width: 100%; max-width: 320px; margin: 0 20px; /* Responsive padding for small screens */ } /* Image Styling */ img { width: 70px; height: 70px; object-fit: cover; border-radius: 50%; margin-bottom: 16px; /* Consistent spacing */ } /* Text Styling */ .nom { color: hsl(0, 0%, 100%); font-size: 20px; font-weight: 600; margin-bottom: 8px; } .location { color: hsl(75, 94%, 57%); font-size: 12px; margin-top: 0; margin-bottom: 16px; /* Consistent spacing */ } .job { font-size: 14px; color: hsl(0, 0%, 100%); margin-bottom: 24px; /* Consistent spacing */ } /* Button Styling */ .btn { background-color: hsl(0, 0%, 20%); color: hsl(0, 0%, 100%); font-size: 14px; font-weight: 600; width: 100%; max-width: 250px; height: 40px; border: none; border-radius: 8px; text-align: center; margin-bottom: 8px; cursor: pointer; /* Pointer cursor for better UX */ } .btn:hover { background-color: hsl(75, 94%, 57%); /* Add hover effect for better UX */ color: hsl(0, 0%, 20%); } /* Responsive Design */ @media (max-width: 375px) { .nom { font-size: 18px; } .location { font-size: 10px; } .job { font-size: 12px; } .btn { font-size: 12px; height: 36px; } }Key Changes and Improvements
Flexbox for Centering
The body now uses Flexbox to center the .all container. Container Width:
The container's width is set to a maximum of 320px, making it more responsive.
Consistent Spacing
Improved margin and padding for consistent spacing between elements.
Button Styling
Added cursor: pointer to buttons for better UX and a hover effect to enhance interactivity.
Font Sizes
Adjusted font sizes for better readability and responsiveness.
Media Queries
Included media queries to adjust font sizes and button sizes on smaller screens.
Final Thoughts
Your project is well on its way to being a polished and responsive component. Implementing these suggestions will enhance the usability and accessibility of your design. Keep up the great work!
If you find this helpful, please mark this helpful Thanks
Marked as helpful1
