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; */
}
Nice work! I like to point out that using of vh and vw can cause on expected behavior in your code. i am guessing that is the reason you don't have spacing at the top and bottom of your page.
When next you want to increase the height of you page make use of this code:
html, body { height: 100%; }
Always remove unused codes to keep you work clean. You can checkout this link by Dixita Ganatra to help you understand more on how and when to properly use responsive units ( like px, rem, em ). Great work ljmanayon,
I am very satisfied with the final result because I think it looks very similar to the original design.
What challenges did you encounter, and how did you overcome them?It's the first time I combine the use of grid and flexbox and use the grid documentation specifically to center the main container.
What specific areas of your project would you like help with?Any suggestion is welcome!
Nice work! But you forgot to add space (margin or padding) at the edges of the page. You also forgot to change the color of the social link on hover and used white instead.
I see you mixed fixed units and responsive units in your code. Always use Responsive units on places like font size, padding, margin, width, and fixed units on border width. You can check out this link on Dixita Ganatra to learn more on how to use them.
In this project I mostly used the margins and padding to match it to the design. In the future I would focus more on other techniques of centering the elements.
What challenges did you encounter, and how did you overcome them?I tried a few methods to keep the footer at the bottom. Finally, I implemented the absolute position.
What specific areas of your project would you like help with?I would appreciate some feedback on placing the footer, as well as best practices for centering elements on the screen, eg. div.
Great work agsendo. You can also use Grid to center elements and also push the footer at the bottom of the page.
Make use of responsive units like em and rem for font size, padding, margin, and width, and use px for places like border, and border-radius. Users can increase their browser font size or zoom their screen and you will want you site to look good and responsive in that case. Read more about responsive unit a post by Dixinta Ganatra
Hi Satyam. Great work. There are few places I like to point out. You should not pust texts on <div> and <span>, because they are used for grouping element not for texts. Put your text in the right element tags like <p> element tag can help in responsive design. Also you should know that screen readers don't read texts on <div> and <span>.
Make use of semantic HTML <time> tag when working with time not <p> tag. It include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
In your Stylesheet don't add both max-width and width at a time. Is either you are using one not the two or you can use min-width and max-width. When added Line height I saw that you forgot to add the unit. I recommend using responsive units like rem, em when working with font-size, margin, padding, width and use px when working with border and border radius . If responsive units was used In the project, you wouldn't need to use media query. Overall You solution is great!
Next time I am planning to host fonts locally.
What challenges did you encounter, and how did you overcome them?Since it is small project, I have not faced a difficult issue yet.
What specific areas of your project would you like help with?Any idea to improve my project is appreciated, since it is my first project after long time. If I find any idea helpful, I try to incorporate them in my next projects.
Great work AbdulMalk! I like you solution. I learned something new reading your code. I just want to point out that I don't use flexbox or Grid in my code on till I really have to use them. Great power comes with great responsibility. Also I saw you didn't make use of inheritance in CSS. It can help reduce code and make it cleaner. Nice work.
I was most proud of figuring out how to get the qr code centered in the middle of the page. I think it gave me a better understanding of justify-content versus align-items and how to use them.
What challenges did you encounter, and how did you overcome them?Figuring out how to center the qr code vertically was challenging. It involved some googling and rereading how flexboxes work.
What specific areas of your project would you like help with?If any of my code doesn't follow best practices, I would love to know how to improve my code in that way.
Hi, Wey! Great work. Going through your project code I saw that you used a media query. I think it was not necessary if you had used responsive length units (eg. rem, em ). You should also avoid using responsive units like percent (%) in places like border and border-radius. instead, use fixed units. take a look at my version of the same solution on Github account to see how I achieve mobile and desktop design with just the use of responsive units. All the same, I think you did great work. Check out this link https://medium.com/@dixita0607/css-units-for-font-size-px-em-rem-79f7e592bb97 to get a better understanding of responsive unit.
