i noticed that u cant style specifically change the color of an svg file when its placed inside an image tag, any recommendations on how i can style svg images and what tags i should use instead.
Hi Temiboss1. It is a good question.
fill attribute to change the color of SVG elements like <rect fill="red">. It works like background-color. You can also use it as a property in your CSS file, like rect { fill: red }. The background-color property doesn’t work for SVG elements.img tag. If you want to change something on it, like size or color, you can use svg tag to have full control over it.Proud of my use of Flexbox as I've been learning it recently and have been wanting to implement it more correctly in my code.
What specific areas of your project would you like help with?Please give feedback on my css flexbox and just my css in general! I'm trying to work on making sure my code will look good on all screens
Hi Moe. Everything looks good. Here are some tips:
display: flex for your a elements. You have text-align: center for the btn-list class and it will center any text within it.display: flex for your profile-pic class. Give your img element margin-inline: auto and it will be centered within of the containing block.min-inline-size for the containing block. It avoids some broken UI elements. You can give your article element min-inline-size: 150px.Actually, you don't need to use display: flex for this challenge. Everything is in the normal document flow that is from top to bottom. Try to code this challenge without using flex or grid and see when you should use flex or grid.
Learning the basics of HTML and CSS. This acts as my first project.
What challenges did you encounter, and how did you overcome them?I had trouble with centering the content on the page and learned that I could use flex display.
What specific areas of your project would you like help with?Is there a different way to center the contents of the page without a flex display? What are some other general ways to optimize the code?
Hi Ben Weinstein.
Centering an element is a little tricky. You can use margin-inline: auto to center it horizontally. However, you should explicitly declare a width value for the element itself. If the width value is auto (it is the initial value), margin-inline: auto will render 0. So it will not work... Also, giving an explicit width value will break the browser's responsive behavior. This is why we should use max-inline-size (or max-width) instead of width. You can try your div element with margin-inline: auto and it will be centered horizontally...
For vertical centering, the containing block should have some extra space to distribute it. For your solution, this is the body element. Remove display: flex and give it to place-content: center and keep the height: 100vh. place-content: center will center its direct child element vertically without using display: flex or grid. This is a brand new feature, and the containing block should have some extra space.
I'm proud that I was capable to finish this project :D
What challenges did you encounter, and how did you overcome them?It was difficult to make layout change when window is resized
What specific areas of your project would you like help with?I need to learn more about flexbox and grid
Hi DeKapito. There are some resources for understanding flexbox and grid in depth. Good luck to you :)
And make some challenges again and again for the better version of it...
I'm most proud of the almost perfect looking design, and good responsivity. Next time maybe I should use more responsive properties instead of px, but using px makes it easier to create really similar design like in the figma file.
What challenges did you encounter, and how did you overcome them?Making the elements fit perfectly into phone screen was hard, but with chatGPT and StackOverflow, I figured out a pretty good solution.
What specific areas of your project would you like help with?Hi, Bruno. That is a good question. You can use;
rem unit for the font-size.em unit for the padding.px unit for the margin, border, radius etc.The point of using relative or absolute length units is that we want to know which element can or can't change its size. If we want users to be able to change the size of fonts, we can use the rem unit... On the other hand, if we don't want to change the size of the margin or the border radius, we can use the pixel unit. The em unit refers to the current element's font size, and most of the time it is very useful to use em for padding, but as a beginner you can use rem instead.
This challenge is really hard... Make sure you solve it over and over again when play with some grid features. It'll be a milestone in your coding journey... Just a few quick tips:
align-items: start; for your flex-avatar class to avoid stretching images. And you can set a min-height to keep your images viewable like img { min-height: 2rem } etc.