Flexbox and Grid Layouts
While I used Flexbox for the layout, I am interested in understanding how I could have implemented CSS Grid for the same purpose.
Can someone provide a comparison or example of how to convert my Flexbox layout to a Grid layout?
Best Practices
Any advice on best practices for organizing and structuring my HTML and CSS files would be helpful.
For example, should I separate certain styles into different files or use specific naming conventions?
Any other feedback is welcome!
I'm currently seeking assistance with the CSS layout of my project. Specifically, I'm struggling with centering elements within a container using Flexbox. Despite my efforts, I haven't been able to achieve the desired alignment. Any guidance or suggestions on how to properly centre elements would be greatly appreciated. And any other feedback is welcome.
I'd like specific feedback on the responsiveness of my Huddle landing page with alternating feature blocks. Specifically, I'm concerned about the accessibility of the .intro section across all screen sizes and orientations. Additionally, I'm seeking guidance on improving the margins and paddings throughout the design to enhance its visual appeal and usability.
I would greatly appreciate feedback on my project, particularly in the following areas:
CSS Grid Usage: This was my first time using CSS Grid, and I'm unsure if I've implemented it correctly. I'd like someone to review my grid layout and point out any errors or areas for improvement.
Responsiveness: While I've tried to make my project responsive, I'm not entirely confident that it displays optimally on all screen sizes. I would appreciate feedback on how I can improve the responsiveness of my design, especially for smaller screens.
Code Structure and Organization: I want to ensure that my HTML and CSS code is well-organized and follows best practices. If there are any areas where I could improve the structure or organization of my code, I'd like to know.
Accessibility: Accessibility is essential, and I want to make sure my project is accessible to all users. If there are any accessibility issues in my code or design, I would appreciate feedback on how to address them.
Any guidance or suggestions on these specific areas would be incredibly helpful for me to complete this challenge successfully. Thank you in advance for your assistance!
Be as specific as possible when asking questions or for feedback on areas of your code. This will increase your chances of receiving higher-quality input from others.
I feel like my web page could have been better, but I am not sure where to improve it. Here are some specific areas where I would appreciate help and feedback:
Responsive Design:
CSS Optimization:
Cross-Browser Compatibility:
Accessibility:
Performance Optimization:
User Experience (UX):
Thank you in advance for your help and feedback!
Any feedback on how to further improve this webpage is welcome.
I was able to complete the project in a few hours. I think I might use a framework next time.
What challenges did you encounter, and how did you overcome them?I faced a challenge with the responsiveness but was able to figure it out in the end.
What specific areas of your project would you like help with?I would love any feedback on the correctness of my approach to the challenge.
Great job on completing the project!
Some improvements
/* Group related styles together */
.section-omelette-recipe,
.section-preparation-time,
.section-ingredients,
.section-instructions,
.section-nutrition {
/* Your styles */
}
/* Simplify selectors */
.omellete-recipe-header {
/* Your styles */
}
/* Normalize font sizes */
h1, h2, h3 {
font-size: 2.5rem;
}
/* Ensure accessibility */
.img-omelette {
/* Your styles */
}
Overall, you've done a commendable job
Keep up the great work!
I am proud that I have learned a little bit of how to use the grid display.
What challenges did you encounter, and how did you overcome them?The challenges I encountered were having no knowledge before on using the grid display.
What specific areas of your project would you like help with?The specific part of the project I would like to help with is learning some techniques of placing easily since I want to make the layout become nice.
<body> tag in your HTML code.<body> tag to enclose the content of your web page.<body> tag.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Links Profile</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="images/favicon-32x32.png">
</head>
<body>
<header>
<!-- Header content goes here -->
</header>
</body>
</html>
2.Incorrect Usage of Heading Tags
<h2> tags for elements like name, location, and role.<h1> for the name and perhaps <h3> for the location and role.<header>
<div class="imgProfile">
<img src="images/avatar-jessica.jpeg" alt="imageProfile">
<div class="nameLocation">
<h1 class="name">Jessica Randall</h1>
<h3 class="location">London, United Kingdom</h3>
<p class="role">"Front-end developer and avid reader"</p>
<div class="buttons">
<!-- Buttons content goes here -->
</div>
</div>
</div>
</header>
3.Buttons as Headings
<h2> tags, which is semantically incorrect.<button> tags for buttons and consider adding appropriate classes or IDs for styling and JavaScript functionality.<div class="buttons">
<button class="github">GitHub</button>
<button class="frontendMentor">Frontend Mentor</button>
<button class="linkedIn">LinkedIn</button>
<button class="twitter">Twitter</button>
<button class="instagram">Instagram</button>
</div>
4.Font Face Declaration
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,500;1,500&family=Inter:wght@600&display=swap');
5.Inconsistent Height Units
6.Media Query Adjustments
Making all the spacings, i would do more semantic tags as the previous commenter said it just that i didn't know much
What challenges did you encounter, and how did you overcome them?Making everything in place as i am not aware of all the tags, but i will learn as i go just to make sure i am not stuck
What specific areas of your project would you like help with?learning all the tags and the css properties does require some research or knowledge beforehand
Make the card design responsive
-Width is set to a fixed percentage (width: 15%;).
-This means that the card will always occupy 15% of the viewport width, regardless of the screen size.
-To make the card design responsive, use relative units like percentages or viewport width (vw) to ensure that the card adjusts its size based on the screen size.
.Card {
/* Instead of fixed percentage, use percentage or viewport width for responsiveness */
width: 90%; /* Example: occupy 90% of the viewport width */
}
Make use of semantic HTML elements
-Semantic HTML elements provide meaning to the content, making it easier for browsers, search engines, and screen readers to understand the structure of the document.
-Instead of using generic <div> elements for structural purposes, use semantic elements to better convey the purpose of each section of the webpage.
<header>
<!-- Header content goes here -->
</header>
<article>
<!-- Main content/article section goes here -->
</article>
<footer>
<!-- Footer content goes here -->
</footer>
I dont think i do anything 'great' here. One thing I learned is definitely flexbox and how to use it the way I wanted it to be.
What challenges did you encounter, and how did you overcome them?I want to create the .container width using relative measurement. I was trying to use the same resolution as the content inside with added padding. I tried fit-content but it seems that the width doesn't fit according to the content inside. So I ended up using absolute measurement
What specific areas of your project would you like help with?I'd like to know how to adjust size according to the content inside. And I want to know which part of my code could be improved according to industry standard.
There is no source code to view on this project as the GitHub link is non-accessible.
I am unable to to do the review.
