Design comparison
Solution retrospective
any feed back is welcome, thanks
Community feedback
- @kaseyveePosted over 1 year ago
A super easy way to add some visual interactivity are to add hover or active states. Here, you could use:
con:hover { background-color: red; }
to change the color of the button on hover.
:active adds properties on clicks.
Overall awesome job so far!
0 - @devriquesantPosted over 1 year ago
Hello Hugo8814
Congratulations for completing this challenge!!
✏️ Here are some tips and suggestions for this and your future projects ;) ✏️
-
1. 📱 Build a responsive web page:
- The use of
px
unit to dimension your components in the page gives it a appearance of static. - To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.
- In your case, using
px
to dimension the mobile version of your web page will create the same view in all devices, but keep in mind that they have different sizes, so content could not appear entirely. - To deeper details, take a look at it
- The use of
-
2. 🚀 CSS Layout:
- It's common in a web page you see every kind of elements such as images, titles, paragraphs and etc... they are disposed in different manners all over the page
- Using CSS Layouts you can distribute theses elements in your page and do it according to what you want to do
- Center a element?
- You can
magin:auto
an element or do adisplay:flex
, with center alignment, in the parent element!!
- You can
- Dispose in a cols and rows?
- You can do it using
display:grid
!!
- You can do it using
- That are a lot of options to be explored, other than positioning your elements based on a
px
. - Here is a good way to start
Overall your project is great and keep coding, I'm sure you will discover new things and become even better
Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)
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