Website with four cards for both PC and mobile screen (HTML5 & CSS)
Design comparison
Solution retrospective
If there are mistakes that you've spotted, feel free to leave feedbacks so that I may improve myself as a Front-end Dev.
Community feedback
- @ApplePieGiraffePosted almost 4 years ago
Hey, Shafiq Akiya! 👋
Good work on this challenge! 👍
I suggest,
- Using a single
<h1>
tag for the heading of the page (since it is really a single heading, not two separate headings). You can easily style the two parts of the heading differently using a<span>
tag. - Making sure the feature cards remain in the center of the page in the desktop layout (even when the page is resized). At certain screen widths, it is off-center.
- Either including a tablet layout or switching to a mobile-friendly layout sooner than 640px to prevent a horizontal scroll bar from appearing along the bottom of the page before the layout switches. 😉
Keep coding (and happy coding, too)! 😁
And happy holidays! 🎄
1@ShaFreak95Posted almost 4 years ago@ApplePieGiraffe hi Giraffe 😁 thank you for the feedback and tips! I really appreciate your help and others to make me even better.
For the 2nd point, I am still unable to solve it yet but based on the previous commenter, he/she suggested me to learn Scss, Grid and Flexbox which I am doing right now. For now, I tried to replicate what I've learned and understood in Udemy to freshen up my web dev skills and doing this task is even more challenging for me than the instructor's challenge even though this is just a newbie level (haha).
Might take a while for me to solve but hopefully it's gonna be soon!
Once again, thank you so much and have a great holidays season too 😉
1@ApplePieGiraffePosted almost 4 years ago@ShaFreak95
Hey, no problem! Keep learning and having fun, of course! 😊 I started learning frontend web dev from Udemy, too! 😆
0 - Using a single
- @Milanb0zPosted almost 4 years ago
Hi ShaFreak95,
You've got pull request on your repo :)
Kind Regards, Milanb0z
1@Milanb0zPosted almost 4 years ago@Milanb0z
I'm suggesting you to learn Sass(scss) and to use BEM naming convention, also learn Flexbox and Grid it will make your life easier.
Links to learn more:
BEM: http://getbem.com/naming/ Scss: https://www.youtube.com/watch?v=nu5mdN2JIwM
1@ShaFreak95Posted almost 4 years ago@Milanb0z hey, thank you so much for the tips! I will definitely utilise these in my next challenge :D
I learned Web Dev from a course in Udemy and the instructor recommends to practise what I've learned (not completing it yet because I wanna practise my HTML and CSS) so far here.
Just wondering, on a rate from 1-10, how do you rate my solutions? :D I really appreciate your replies and feedbacks! ^_^
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord