I know there are better ways on how to go about this. Any feedback is well appreciated. THANK YOU.
Any feedback or recommendation is well appreciated. Thank You.
Any recommendation is appreciated.
I would appreciate any feedback on Responsive design and page structure best practices. Any Feedback is appreciated. Thank You.
i would appreciate any feedback on the best practice to follow when structuring pages.
great
What challenges did you encounter, and how did you overcome them?great
What specific areas of your project would you like help with?great
Great Job! I like to point out that you should learn to Make use of Accessibility Landmarks like <header>, <main>, <footer>. Always put yourstyles in a different file separate form the HTML files. Make proper use of the heading tags. Always start with h1 then h2, h3 and so on. You can use css to size then to your preferred. I personally do everything possible to avoid using the css height property in my code. And if you must use height avoid using the vh unit. Do this
* {
box-sizing: border-box;
This applies it to all the elements. Do put it on the body as it is not inherited. Cheers!
Nice work. I like to give you a few pointers that will benefit you.
article, header etc. than div. I see you used it a lot in your code.<img> make sure you add meaningful description of the image with the alt attribute. Can only leave alt empty when the image is just for presentation like when used to display icons. HAPPY CODING.I'm proud of myself for finding resources where I got stuck and correcting errors along the way.
What challenges did you encounter, and how did you overcome them?I was having issues with the footer; I made the position absolute. Other minor syntax errors were caught.
What specific areas of your project would you like help with?I'd like suggestions for the positioning of the footer. If I don't use absolute, the footer moves to the right of the social links box OR on it. How can I more specifically adjust my CSS to move the footer to center just below the box?
Great work. You solution look good. I like to add to what @danielmrz-dev just said.
Your footer is outside the body tag. So Include it in the body tag the try applying @danielmrz-dev tip😌.
I am proud of how I use display grid.
What challenges did you encounter, and how did you overcome them?I struggle with postion of body and his height.
Nice work. But I like to point out that you worked harder in your CSS.
There was no need for position property in your CSS code. body was already properly positioned by the browser. Your struggle was as a result of the position: absolute.
Learn to make proper use of inherited properties in CSS, for less code and avoid duplication.
You can learn to make proper use of responsive units (like em, rem, %) in font-size, padding, width and margin. It helps to keep your site responsive if Users chose to resize their browser windows or change browser font size
You can apply full height to the <body> by doing this
body {
height: 100vh;
}
Or
html {
height: 100%;
}
body {
height: 100%;
}
Nice work. I like to point a few things:
box-sizing property is not inherited, so adding it to the body element only affects the body. if your thought was to all the elements. Do this*,
*::before,
*::after {
box-sizing: border-box;
}
You can make your site more responsive by changing the .parent { grid-template-columns: 1fr; } to .parent { grid-template-columns: repeat(auto-fill, minmax( your, 1fr); }.
Learn to make use of the repeat() function, instead of grid-template-columns: 1fr 1fr 1fr; Do grid-template-columns: repeat(3, 1fr);. And don't use grid-template-rows if it's not necessary like in your case, allow Auto-placement in grid to make that decision for you.
Instead of using the media query to change the columns of the grid template, I want it to be a dynamic grid.
What challenges did you encounter, and how did you overcome them?Initially I made a dynamic grid assigning it to the card grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) and it worked well
However, when I set max-width max-width: 600px; to the card it stopped working correctly
How can I make a dynamic grid without using media queries grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) , but make the container have a maximum width
Great solution Maria. I Cloned your repo and checked it out myself. i found out that the problem is not the max-width on the container, but the flexbox algin-items property on main used in centering the card. Remove it and you have a dynamic grid.
main {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
}