What is your opinion, how would you approach this challenge that works for you and others?
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!