@lariella
Submitted
@YunggBladez
@lariella
Submitted
@YunggBladez
Posted
Good use of semantic HTML. This seems to be a perfect 1:1 recreation so great job on that. The code is clear as well. I am not an expert in CSS or HTML. so take that with a grain of salt. I am not sure if any better coding practices could be applied, although I do some things differently, such as instead of adding padding-top for main, I did align-items: center; I am not sure how that would work for yours. Also good usage of @media for responsiveness. I definitely learned a thing or two from your code.
Marked as helpful
@ShivamRajput57
Submitted
@YunggBladez
Posted
Very good job on this one. Upon first glance its hard to notice any real difference between your solution and the original. After a second glance I can point out a few things and how to address them:
no border on the top or left. Using the border-top and border-left properties you can add a 1 px solid black border to fix this.
Blog description width. Yours is 1.5 lines and in the original its 2 lines and 1 word. Can adjust width to fix this.
Not enough padding. To fix this, increase padding.
Line height in blog description. can add "line-height:" to fix.
Overall your design seems to big compared to the original as well.
But great job! Hope you can implement these changes and gain a deeper understanding. Good luck!
@JohnRamirez57
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud it didn't take me all day or multiple hours. I can design everything more efficiently and cleaner but that's part of improving.
What challenges did you encounter, and how did you overcome them?
I have zero idea how to make the content reshape and maintain the same size on different screen/window sizes. I've yet to overcome them.
What specific areas of your project would you like help with?
I need help learning how to make content keep its form and shape in the main window/screen size so that it has the same look on different sizes. Also, I don't know how to properly host a live server. Had to search up a tutorial and borrow the live site link in order to even publish this.
@YunggBladez
Posted
It looks like perhaps the wrong file was uploaded for this one, as the design and solution are completely different. Your file looks pretty good to me. I unfortunately cant make a comparison due to the wrong file upload.
After taking a look at your HTML and CSS on github, I would recommend starting each project, even if its just for practice, with a global reset. Meaning "* { margin: 0; padding 0; box-sizing: border-box; }. I think you did a good job using <br> in your HTML, instead of having to style it in the CSS.