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!
