I add Shadow to the container
What challenges did you encounter, and how did you overcome them?shadow is the challenging
What specific areas of your project would you like help with?shadow
Good job on this project.
We want to focus more on semantic tags as we progress through the course instead of always using div container.
You can make use of <main class="main--container">
<main> <img src="assets/images/illustration-article.svg" alt="illustration" class="illustration--img"/> <button>Learning</button> <p class="publish">Published 21 Dec 2023</p> <h1>HTML & CSS foundations</h1> <p>These languages are the backbone of every website,defining structure,content,and presentation.</p> <div class="img--Con"> <img src="assets/images/image-avatar.webp" alt="photo" class="photo"/> <p class="name">Greg Hooper</p> </div> </main>You want to focus on readability in your class names. You can Use -- or __ to create a space between two words. Making it easier to read. It's known as the BEM (Block Element Modifier)
BEM has a few advantages.
Remember that practice makes perfect
Happy coding
Working with Figma for the first time was hard, especially with the free version that lack most of the features that were available years ago, but I'm happy with the end result.
Continue to improve my BEM methodology.
What challenges did you encounter, and how did you overcome them?I have got problems only with Figma, because lack of free features.
What specific areas of your project would you like help with?Looking to improve my HTML and CSS (especially BEM methodology)
Hey, it looks good I have a few suggestions for you to help.
When you download the starter file and the figma file, you can look for the style guide and open it up in your VSC IDE. This will give you the coloring in hsl for your background, containers, your text and font sizes.
you can add this i your pseudo classes.
When you make updates on your code, It's not going to upload automatically on your Git file so we have to do this manually.
This will upload the updated files to your git
If you want to add a <footer> always add it outside of the <main>.
We want to use rem instead of px. px are absolute units/sizes and are less responsive. There is a simple way to calculate your rem. pixels/16px 16 pixels = 1 rem
You can implement these and feel free to ask more questions.
Happy coding!
I love that I could personalize it with my own links.
What challenges did you encounter, and how did you overcome them?The most challenging thing was to change the underline effect, because I nested a div inside the link 😅
What specific areas of your project would you like help with?I'd like to know your sincere opinion of what would you do differently!
When adjusting an image we always use width and height
img { height: 80px; width: 80px; border-radius: 50%; }
You must take the following out of your HTML as it's making an oval:
width="200px"
Your image should look great now!
Let me know if you need more help, this is great practice for me!
I love that I could personalize it with my own links.
What challenges did you encounter, and how did you overcome them?The most challenging thing was to change the underline effect, because I nested a div inside the link 😅
What specific areas of your project would you like help with?I'd like to know your sincere opinion of what would you do differently!
This would import all the details that you need with color coding and sizes which makes it easier to navigate through.
This is going to be helpful the further you go along with this course
I love that I could personalize it with my own links.
What challenges did you encounter, and how did you overcome them?The most challenging thing was to change the underline effect, because I nested a div inside the link 😅
What specific areas of your project would you like help with?I'd like to know your sincere opinion of what would you do differently!
First off! It looks great I have a few suggestions that might be of interest.
You said you fixed the <h2> </h3>, It didn't appear to have changed on your code.
It could be of the following reason:
When we make changes on our code in VSC it doesn't update on our live page automatically so we have to do it manually on VSC's terminal
You could achieve this with the following steps.
your new files/updates should be uploaded to the internet now. It takes about 30 - 40 seconds before you'll see any changes.
happy coding
I'm proud that i was able to utilize my flexbox skills to create the box design . What i'd do next time is to adequately scrutinize the design template before starting to code to save some time.
What challenges did you encounter, and how did you overcome them?The challenge i would say i encountered was making the content within the box identical to the template.
What specific areas of your project would you like help with?none
I have a few suggestions that can help you.
For example "margin: : 0;" is a typo which is common in the beginning and your inspection tool would cross it out. It is worth checking it out.
if we look further into this specific line of code:
* {
margin: : 0;
padding: 0;
box-sizing: border-box;
}
margin: : 0; /corrected/ margin: 0; (this one typo is effecting the rest of the nesting, when you fix it the you'll have sorted out all mistakes)
overall it looks great, Well done!
Happy coding!
Using semantic tags like header, main and footer is a good practice for our HTML's overall structure.
I see you used SASS, how did you experience that?
usage of global reset helps cross browser consistency in rendering the elements. I forgot about this and will remember it next time!
I see a redundancy with .left {}, after we code something new we sometimes loose track of what we already added, keeping everything in order working from top HTML to down helps me avoid this one, but it can still happens to the best of us.
It just needs minor updates,
You've done a great job on this.
Finally, I placed the image with faces on the page similarly, as shown in the design.
What challenges did you encounter, and how did you overcome them?Challenges related to layouts, flexboxes, and grids. Difficulties in understanding the best names for blocks and elements.
What specific areas of your project would you like help with?Hi everyone ✋
Feedback on my website's layout and suggestions for improvement
I would appreciate your feedback on both its layout and the usage of HTML tags. I'm particularly interested in whether I've used the correct tags for structuring content and any suggestions for improving the layout.
What a better way to put the circle with number
How better to place the image with faces
I used a div block and css background-image for that, but I'm interested in knowing if there is a better way to place it on a webpage.
Here is a snippet of the code I'm using:
HTML:
CSS:
.image_faces {
background-image: url("./assets/tablet/image-hero.png");
width: 100%;
height: 200px;
background-size: 120%;
background-repeat: no-repeat;
background-position: top center;
}
Please help with naming blocks and elements in HTML.
Thanks a lot in advance:) Any feedback is important :)
Hey cool code. I'm running through this challenge now and I'm wondering. Why aren't people using grid for this one? What is your reason for using flexbox and no grid for the overall container?
Thanks in Advance!
You've made use of semantic tags which increase readability, CSS variables which helps manage scalability
Responsiveness for larger screens, I see you only have two breaking points which would only be responsive on a few devices. Layouts on other devices might not look so great. If you would like more info on this feel free to ask me.
.card {
border-radius: 50%; /* This is a better option than pixels */
}
font-size: 11px; change this to the following rem size as it is more responsive
11px/16 =0.6875rem
Apply this to any other px's in your code
Grid strength's: grid-template-columns and grid-template-rows gives us the flexibility for laying out the cards effectively.
Typography: font-family and font-weight helps with consistency and a well polished professional appearance.
There was plenty attention to detail in this code!
Well done!
Any advice is welcome.
Hey, great code!
The following might improve your code, the shadow-box can be reduced at the profile picture and the main container.
You might want to consider adding <a> tags in the following to make the link clickable <ul class="links"> <li href="#" tabindex="0">GitHub</li> <li href="#" tabindex="0">Frontend Mentor</li> <li href="#" tabindex="0">LinkedIn</li> <li href="#" tabindex="0">Twitter</li> <li href="#" tabindex="0">Instagram</li> </ul>
Happy Coding!
Using CSS grid was a challenge to me in the begining but now I am more familiar with it
What specific areas of your project would you like help with?i want to know if my query for responsive design is good
You have a great code that can use some minor improvements.
The font statements includes many fonts which makes the loading time slower. If you're only going to use poppins use only that specific font to reduce load time.
Try to use <h1> tags for the following e.g. <p class="mid">Reliable, efficient delivery</p>, this will improve accessibility and and SEO.
Make sure to remove or update comments in the future.
You might want to add alt="#" to your <svg> tags to describe the images for viewers on desktops or mobiles.
Happy Coding!
I'm proud of that the fact that i'm now been able to code by myself
What challenges did you encounter, and how did you overcome them?Procastination
What specific areas of your project would you like help with?How to overcome procastination and be consistent
Hey great coding!
I see you're facing an issue that was driving me mad in the past and it's "Why can't I get my footer at the bottom?"
When we use flex it centers content vertically on a web page, even the footer! We can handle this with a simple solution
margin-top: auto;
Why margin-top: auto; ?
With the right changes the footer will remain at the bottom regardless if there is more or less content.
Happy coding!
You have a really nice code
You can benefit from using figma to get more accurate sizing for the container
you forgot to add a description in you mobile alt="#" <img src="images/image-product-mobile.jpg" alt="" class="mobile-image">, This happens that's why revision is important.
Use of semantic tags are a plus!
Strengths:
Use of semantic tags like <main > <h1> <h2> <h3> <p> <ul> <li> <table> helps for accessibility and SEO
Suggestion to use <section> elements to wrap relevant content blocks like ingredients and instructions. Benefits are enhancement of the documents structure and accessibility
Well-organized
Use of CSS custom properties enhances readability
Great code!
Looks fantastic, here are some suggestion:
<img src="./images/avatar-jessica.jpg" alt=""> alt="Missing picture". let's you know the picture is missing if it doesn't loadInstead of div I think semantic element makes it easier to read:
<body> <main> <figure> <img> </figure> <header>
</header>
<nav> /*You can utilize the nav element here.*/
<a href"#" target="blank">#</a>
<a href"#" target="blank">#</a>
<a href"#" target="blank">#</a>
</nav>
<footer>
</footer>
Great job!
In this project, I’m most proud of the responsive design implementation and the overall structure that allows the content to adapt smoothly across different screen sizes. The use of media queries ensures that the user experience remains consistent and aesthetically pleasing on desktops, tablets, and mobile devices. The attention to detail in styling, such as the use of hover effects and font choices, adds to the visual appeal and interactivity of the design.
If I were to approach this project again, I might experiment with more advanced CSS techniques, such as CSS Grid, to manage layout complexities and provide even greater flexibility. Additionally, I would consider optimizing the design further by incorporating accessibility best practices, such as improved contrast ratios and keyboard navigation support, to make the site more inclusive for all users.
What challenges did you encounter, and how did you overcome them?One of the challenges I encountered during this project was ensuring that the layout and design elements were responsive across a variety of screen sizes and devices. Balancing the design to look good on both large screens and smaller mobile devices required careful consideration of media queries and adjustments to elements like font sizes, padding, and margins.
To overcome this, I used a mobile-first approach, where the design is initially created for smaller screens and then progressively enhanced for larger screens. This strategy made it easier to adapt the design by adding necessary adjustments rather than having to strip down features for mobile. Additionally, testing the design across different devices and screen resolutions helped identify areas that needed refinement, ensuring a consistent and user-friendly experience across all platforms.
What specific areas of your project would you like help with?I would like help with:
Enhanced Responsiveness: Fine-tuning the responsive design to ensure that all elements scale correctly across a wider range of devices, including very small screens. This includes ensuring that images, text, and layout components are appropriately sized and spaced.
Accessibility Improvements: Incorporating accessibility best practices to make sure the project is usable by people with various disabilities. This could involve improving color contrast, adding ARIA roles, and ensuring keyboard navigation works smoothly.
Performance Optimization: Suggestions on how to optimize the loading times and performance of the site, especially with regard to font loading, image sizes, and overall CSS efficiency.
Advanced CSS Techniques: Exploring advanced CSS techniques like CSS Grid or custom properties (variables) to see if they can simplify or enhance the design and layout.
Cross-Browser Compatibility: Ensuring that the site works consistently across different web browsers and versions, and addressing any potential issues or discrepancies that may arise.
You put a great deal of attention into your work,
Here are a few suggestions for more structure and maintainability
</header>
<section>
<p></p>
<p></p>
<h1></h1>
<p></p>
<footer>
</footer>
</section>
</article>
You are well on your way to success!
Many are proud of the innovative solutions or creative ideas they’ve developed, whether in design, problem-solving, or unique approaches to challenges. Better planning and preparation can help avoid pitfalls and improve efficiency. This might include more thorough research or setting clearer goals.
What challenges did you encounter, and how did you overcome them?Problem: The hover effect on the h1 inside the .card and the zoom effect on the .illustration-article might not be functioning as expected.
Possible Solutions:
Check Specificity: Ensure that the CSS selectors are specific enough and not being overridden by other styles. Verify CSS Linking: Confirm that the CSS file is correctly linked and loaded by the browser. Inspect with DevTools: Use browser developer tools to inspect the element and check if the styles are applied correctly.
What specific areas of your project would you like help with?I’d like help with optimizing the responsiveness and visual appeal of my project, ensuring smooth and effective hover and transition effects, and improving performance by optimizing images and refining code. Additionally, I need assistance with enhancing accessibility, ensuring cross-browser compatibility, and managing deployment to ensure a seamless and user-friendly experience.
Everything looks great and well put together!
Instead of using divs you might want to use the following that gave me more structure and helped me save time: (Semantic Elements)
<body> <main> <article> <header>
</header>
<section>
<p></p>
<p></p>
<h1></h1>
<p></p>
<footer>
</footer>
</section>
</article>
It helps me with preperation planning and executation!
Good job
As instructed it looks well done, using external stylesheet helps with maintainability and with larger projects.
Try using semantics instead of divs see code below:
<main>
<article class="#">
<figure class="#">
<img src="#" alt="#">
<figcaption>
</figcaption>
</figure>
<section>
</section>
</article>
</main>
It is more structured and easier to read.
Well Done!