Sefa
@sefaonderAll comments
- @Christener19Submitted 9 months ago@sefaonderPosted 9 months ago
Hello @Christener19 thank you for sharing your solution with us.
I really like your design, but I have a few suggestions to upgrade your code:
1.In the design template, we are given HSL colors. You can use HSL to make them more transparent, for example:
hsla(39, 100%, 56%,0.1)
. I see that you use rgba in the code, which is also an alternative. You can also use the:root
selector to color the colors. You can use it withvar()
. For more please check out CSS :root Selector2.Instead of using a single color on the button, you can give it a hover effect. This improves the user experience. For more information check out Button Animation & Hover
3.A light box shadow was used in the original design. You can find detailed information about box-shadow here CSS box-shadow. You can also use some tools to make the work easier with box-shadow.
4.Finally, I recommend that you use the rem unit instead of the px unit. You can find detailed information about this here px or REM
Marked as helpful0 - @Dinesh-36Submitted 9 months ago
Feedbacks are Welcomed,
@sefaonderPosted 9 months agoHi @Dinesh-36 your solution is really good.
You can just use it to center the cart on the web page you can use:
body { height:100vh; margin:0; }
More detailed information for css values and units
Note : I liked the use of css grid in the design :D
Marked as helpful0 - @a1031748Submitted 9 months ago
Welcome any advices Thanks~
@sefaonderPosted 9 months agoHello @a1031748 Thank you for sharing your solution with us.
You did a nice job and I liked it.I just want to mention a few small details:
1.When using colors, you used the colors given in the design. This is very nice, but instead of using colors one by one, you can define them in the
:root
selector and use them everywhere in the project withvar()
. For more :root2.You used absolute and margin:auto to center the card. This is a solution, but in this case, you must define all dimensions of the card. This is not a very practical application, especially for different device sizes. You can use flexbox instead.For more flex-box
Marked as helpful0 - @SonynguiSubmitted 10 months ago@sefaonderPosted 10 months ago
Hello @Sonyngui Thank you for sharing the project with us.
Yes, as you said, the preview is fine, but the screenshot seems to have some problems, but screnshoot is not always mandatory in desktop view. If you look at the project with responsive views, you will encounter this issue in mobile view.
Here are some tips for you to solve this error and improve your code:
-
Using
padding
instead ofmargin
will allow you to squeeze the child element inward (For more, please see CSS-PaddingVSMargin) -
The '%' values you give are based on the width or height of the parent element. You can use 'rem' or 'px' instead. (For more, please see CSS-Units)
-
I see 2 different class names in class naming, 'containerr' and 'container'. This is not really a serious problem, but in large and medium-sized projects, class names can sometimes be confusing and this can make it difficult to debug the code. There are different methods for CSS class naming. For example, you can use
containerr
->container
andcontainer
->card-container
.
Marked as helpful1 -
- @PrabhashgSubmitted 10 months ago
I've built this beautiful looking social links card, but it is not responsive. Everything just get out of place for smaller screen size, how to fix this? Help me with this community. I'm very new to web development, infact this was my first kind of project, where for the first time, I learnt how to add hovering effect using CSS.
@sefaonderPosted 10 months agoHello @Prabhashg, first of all, thank you for sharing your solution with us. There are a few issues I would like to mention to improve your code a little more:
-
You can use
display:flex
instead ofposition:relative
, which you used for the container class. In this way, you can center the element more easily. More information about flex-box can be found at Flexbox Guide. -
You can make a clean start on the design by removing the default CSS properties. For more information, visit CSS Reset
-
There is a section in the Starter File for the colors and fonts that will be used in the file called
style-guide.md
. You can also use these colors and fonts with thevar()
variable on CSS using the:root
pseudo-class. For more information, visit CSS3 Variables
1 -