@Ocece77
@KingSkyros
Submitted
Hello π , I am finally done with this project this is one of my projects made with the use of flex-box πͺ.
Some of the things I learned were how to use Flex better and how or where to use them. I mostly learned everything from this interesting blog https://fedmentor.dev/posts/padding-margin/ by Grace.
All suggestions on how I can improve my code or project pls do πββοΈ.
@Ocece77
Posted
Hi ππΏ Your project is great, I noticed you followed the design on mobile, I don't know if it was intentional, in any case it's not bad πππΏ
There are a few corrections to optimize your code πΏ:
First
When you import fonts from google fonts you can put them all in one link, just select the font with the weight you want and in the top right tab "select families" and voilΓ β¨
take a look at this YouTube short that shows how to do it: https://youtube.com/shorts/VPHqcvYTy3A?si=QBKYU4yzmF25RBv2
Second thing :
You can use variables for colors, animation, family .. and store them in root:
Using variables in CSS with the :root selector allows you to store and reuse values throughout your stylesheet, leading to easier and more consistent styling across your entire website βοΈ
Here some cool ressources to help you π :
Third thing :
You can use transition on your button so that when the user no longer hovers over it, it returns smoothly to its initial state. By applying a transition: property to the button's CSS, you can control how properties change over a certain duration when the user interacts with it π.
For exemple in your button:hover{} you can add a transition : 0.3s ease
While you can technically add the transition property to the :hover state of the button, it's more common and efficient to apply it directly to the button's base class like this :
.button{
padding: 15px 6rem;
background-color: hsl(71, 73%, 54%);
border: none;
display: inline-flex;
color: #fff;
font-size: 150%;
font-weight: 200;
transition: 3s ease;
}
.button:hover{
border-radius: 2em;
border: 2px solid white;
color: black;
background-color: transparent;
}
I noticed that your transition is a little bit long , transition more than 1 seconds is often considered too long for a transition duration because it can lead to a sluggish or delayed user experience . In many cases, users expect interactions and animations to feel snappy and responsive π. A 3-second transition could potentially frustrate users by making the interaction feel slow and unresponsive π«¨.
Here some ressources about it π:
Keep practice and NEVER GIVE UP !
Here a video that can motivate you :
Marked as helpful
@nirglus
Submitted
It's the first Frontend Mentor challenge that I've used grid. If you have any tips on how I can improve myself, feel free to share!
@Ocece77
Posted
This is great! I thought your project was the original!π€―
β’ You can enhance your code by utilizing variables for colors, typography, and moreβ¦,and using :root{} in CSS. π³
Take a look at the mozilla web docs π:
https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties
https://developer.mozilla.org/fr/docs/Web/CSS/:root
In one of my projects, I was advised to use dynamic units (em, rem, vw, vh) instead of static units (px)!This offers better scalability π, responsiveness, and consistency across devices π»π±
Look at this article about css unit ! : https://www.freecodecamp.org/news/css-unit-guide/
Marked as helpful
@VMH1225
Submitted
how can I organize my CSS to make it more legible and easier to fix in the future?
@Ocece77
Posted
Hi ! β¨ Organizing CSS styles in the order of the corresponding HTML structure is indeed a good practice . This approach not only enhances readability but also makes it easier to locate and manage styles as the project grows. π± For exemple in your css , you will write the code in the order like this :
.header{
background-color : pink
}
.main{
background-color : chocolate
}
.footer {
background-color :chartreuse
}
This organization aligns with your HTML structure, which might resemble:
<html>
<head>
</head>
<body>
<header><header>
<main><main>
<footer><footer>
</body>
</html>
This article will guide you: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing
Also, try to learn and practice with freeCodeCamp: https://www.freecodecamp.org/learn/2022/responsive-web-design/
Additionally, watching video tutorials on how to create a website on YouTube can be helpful as they demonstrate how they structure their CSS.
Keep going ! Keep Practice πππΏ
@BinLama
Submitted
ΰΈ ^β’ο»β’^ΰΈ Hello, Frontend Mentor coding community. This is my solution for the Results Summary Component
I had a hard time with making gradient background for the results tab and button. So, if there are any resources that you think can help me with that then I greatly appreciate your help. I also couldn't figure out the colors properly. I don't know what tools to use to figure that out. I uploaded the image files to figma but I can't figure out how to get the colors.
Either way, if you have any feedback and tips I greatly appreciate it!
Thanks in advance and happy coding!!
@Ocece77
Posted
Hi ! For any gradient I use this website , it will make you gain a lot of time ! https://cssgradient.io/
For the colors you have a file inside the starter file named « style-guide.md » with the color and font for the project in it ! The file « style-guide.md » is in every project so you should take a look before starting any project!
Keep practice and never give up ππΏππΏβ¨
@Ocece77
Submitted
That project was easy to build tbh ! Obviously the most difficult part for me has always was to setup the media queries (but that was more easy this times because I practice it lately π )! Im note sure about my html syntax so check my code if you have some times and share me your thought about it!
@Ocece77
Posted
Wait guys I forgot the social media icon and I my texts are not in the right place bruh π€¦πΏββοΈ
@Ocece77
Submitted
Hi! I have a new project π§
While I was building my project, I received a great piece of advice about using media queries from another FrontendMentor student! I tried to apply it, and it helped me a lot! But honestly, it took me a few hours to understand how it works and how I should use it in my project! I'm happy because I now have a better understanding of CSS units and media queries! However, I need more practice π©πΏβπ» Never give up, guys ππΏ
If you have some time, you can take a look at my code on GitHub and give me some advice to help me on my programming journey π€.
@Ocece77
Posted
I need to work on my semantic because my site isn't really accessible (ARIA) π«€
@Ocece77
Submitted
What did you find difficult while building the project?
-- That's stupid but the difficult thing was to setup the background. Because the starter pack has 2 background image, I thought I had to make the two images fit together like a puzzle, when in fact I had to choose one, place it at the top of the page, then apply a blue background color π€¦πΏββοΈ
Which areas of your code are you unsure of?
-- My media queries because when I shrink my page, my container becomes weird haha, but when I look at it with the firefox development tool on different devices, my media queries work correctly π€¨I need to practices my media queriesπͺ
Do you have any questions about best practices?
Yes , especially about media query ! π§
@Ocece77
Posted
Okay so I correct my css and I replace all the "vw" and "vh" with "px" because this cause a big mess when I try to shrink my project . Now I'll try to correct the GitHub preview because my image won't load correctly ! π
I also correct the background-image because I forgot a "." at the beginning of the path ! I forgot one little thing and this cause a big problem π₯²
