Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Website with four cards for both PC and mobile screen (HTML5 & CSS)

@ShaFreak95

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

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

@ShaFreak95

Posted

@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
T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@ShaFreak95

Hey, no problem! Keep learning and having fun, of course! 😊 I started learning frontend web dev from Udemy, too! 😆

0
milanb0z 30

@Milanb0z

Posted

Hi ShaFreak95,

You've got pull request on your repo :)

Kind Regards, Milanb0z

1

milanb0z 30

@Milanb0z

Posted

@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

@ShaFreak95

Posted

@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 GitHub
Discord logo

Join 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