🗞️ Hello everyone,
I am excited to share my solution for the News Homepage Challenge!
I welcome any feedback on my solution and am always looking to improve my skills and make my code cleaner. Thank you for taking the time to check out my work!
Hello, how are you? Good job on completing the challenge!
It's usually unnecessary to define width: 100% for elements and it can even cause you problems later on. The reason being is when you apply a margin to it, it'll overflow outside the element and cause you problems in case you want to add more to your element. Usually, width: auto (it's the default value) or defining it manually by does the job.
Happy coding!
Hello, I've just completed this four card feature using CSS Grid, flexbox, and media query to make this website responsive. I will appreciate all the feedback and your advice. Also I'm open to any suggestion how could I improve as Front-end devs.
Thank you,
Hello, how are you? Good job on completing the challenge!
For these 2 pieces of code:
<h1 class="fw-regular">Reliable, efficient delivery</h1> <h1 class="fw-bold">Powered by Technology</h1>
You can just use one <h1> for both of these titles! You can make him break him by using <br> or setting max-width to the h1 element. This is useful to save a line of code!
Happy coding!
For positioning the card in the center of the page, I used display-flex, and margins. It was challenging to get the text justify the same way as the prototype, since paragraph and title behaved differently.
Hello, how are you? Good job on completing the challenge!
I recommend you use rem or em to resize your components instead of px. Using absolute units such as px will not allow users to resize the text and spacing to their needs.
rem is relative to the font size of the root (the parent of all elements) while em is relative to the font size of the parent element. Use whichever you want.
Happy coding!
this is a notification page let me know what you think and how i can make an improvement to it
Hello, how are you? Good job on completing the challenge!
You did not need to define width: auto! This is because width default value is set to auto. So the width can be left as it is.
You can define a border for private message by setting (number)px solid (any color). You may already know this, but this was present in the design preview so I wanted to point that out. You also defined border-radius twice for default and hover states for this element so you can remove it for hover state.
Happy coding!
This is an interactive rating component made with html, css, and javascript let me know what you think about this and if there is anyway to make improvement on this project. Thanks
Hello, how are you? Good job on completing the challenge!
To combine your wrapper width and max-width, just write min(90%, 400px) for width! It'll automatically resize your element depending on the screen size by using whichever can be the smallest! It'll save you 2 lines of code so I recommend you try it out!
Happy coding!
hi there, uploading 5th webpage. pls let me know any correction and suggestions
thank u
Hello, how are you? Good job on completing the challenge!
In order to match the layout shown in the exercise, you would need to use Grid. To do that, create a div that covers all the cards and apply display: grid to that div. You would then need to apply grid properties accordingly to acheive the layout. You can look at my solution on how I did it or study the Grid component and how it works.
Happy coding!
