Building mobile first and changing layout with media queries and css flexbox and grid. I should try and clean up my css
What challenges did you encounter, and how did you overcome them?Unsure how to add a background image with a color overlay
What specific areas of your project would you like help with?How do I add the header images so they expand off the sides as the design file shows
For your issue with the header images, you can set a negative left/right margin. The max-width on the header-wrapper is not allowing the images to go over to the edge of the screen. There must be anoter property that is minimizing the pictures when you remove it (I tried in inspect). I was able to acheive it by applying the css below. You can try this to see the expect result. From there you can try to fix the issue with removing max-width.
.left-image { margin-left: -32px; } .right-image { margin-right: -32px; }
.header-wrapper { display: flex; /* flex-direction: row; This is the default so it can be omitted*/ justify-content: space-between; /* < add this to push the images to the edges of the screen / min-width: 100vw; / < I changed this to "min" instead of max since removing width specification minimizes the images; you'll have to troubleshoot that */ align-items: center; }
This will get you started with how to move things out of their container.
I'm proud of the responsiveness all around.
What challenges did you encounter, and how did you overcome them?I usually put the footer outside the main section but I couldn't get the footer to extend the full width so I had to put the footer inside the main section.
What specific areas of your project would you like help with?For the life of me I couldn't get the text in the footer button to be on one line and I couldn't get it to change colors and turn the cursor to pointer on hover. The hero buttons work fine on hover and even though the footer button is the same, for whatever reason it won't work.
I struggled with the footer on this one as well. The buttons on the project have a fixed width, so you don't have to worry about responsiveness. If you set a min-width of 193px to the .btn-footer class, that will take care of the button for you.
Good job! I especially appreciate your comments on the CSS.
Happy coding!
Nice work!
Here are a few suggestions:
Your h elements should be set to --clr-dkBlue: hsl(234, 12%, 34%); which would be best set on the body to avoid repeats since you have the color set for the p elements.
Using “middleCol” to center the two cards is clever; however, for future expansion of the site, you should consider grid positions instead. You can use grid-column/grid-row or grid area. Build 5 CSS Grid Layouts by CodeLab on YouTube was helpful in showing how to use these methods.
Happy coding!
Hello! Good attempt! Your solution uses some semantic HTML elements, but incorporating more specific tags like <section> and <article> will enhance the structure. The layout differs from the expected side-by-side design, and text readability could be improved. The code is clean but can be optimized by removing redundancies and consolidating CSS variables. Keep practicing, and you'll be surprised at how much you'll improve.
.
Hello!
Your HTML and CSS code for the "Recipe Page" challenge is well-structured and adheres to semantic HTML5 practices, enhancing readability and accessibility. However, the fonts for headings and body copy are switched, and there's a reference to a non-existent styles.css file. Unused HTML and CSS should be removed to streamline the code. Consider consolidating CSS files to reduce redundancies and improve maintainability. Additionally, ensure the design is fully responsive and add necessary ARIA roles and labels for better accessibility. Overall, with minor adjustments, your project can achieve optimal performance and maintainability.
Great job on your solution! Here are a few points I noticed:
Semantic HTML: You used appropriate tags like <main>, <section>, and <ul>, which helps with the structure and readability of your code. However, consider using <h2> instead of <h4> to maintain a proper heading hierarchy.
Accessibility: The alt text for the avatar image is a good start. You might want to ensure that the color contrast for your links when hovered meets accessibility standards. Adding aria-labels to links can also improve screen reader accessibility.
Responsiveness: Your layout looks good, but it could benefit from some media queries to handle different screen sizes better. Using relative units like % or rem for widths and heights can also improve flexibility.
Code Structure: Your code is well-organized and easy to read. Using CSS variables for colors can make future theme adjustments easier and keep your CSS DRY (Don't Repeat Yourself).
Overall, your solution is solid and functional. With a few tweaks, it can be even more accessible and responsive.
Keep up the great work!
Hello!
The HTML for the blog preview card is structured and clean but could benefit from more semantic elements like <article>, <section>, and <time> to improve readability and SEO. While the design fidelity to the Frontend Mentor example is good, incorporating alt attributes for images would enhance accessibility. The CSS is well-organized; however, media queries could be used to better adapt the layout for various screen sizes. The use of CSS variables for colors and fonts could increase reusability. Overall, the code provides a solid foundation with room for improvement in semantic structure, accessibility, and responsive design to ensure optimal performance across all devices.
Happy frontending!
Hi Chloe!
I like your project, here is a bit of feedback: Overall, your HTML is well-structured and easy to read. Consider adding alt text to the img tag for better accessibility. Nice work on the clean and minimal HTML structure! Your CSS is organized and follows best practices for responsive design. Looks like most of us ended up with a larger card than the screenshots. Enjoy frontending!
