@DylandeBruijn
Posted
@Obom23
Hiya! 👋
Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.
Things you could improve ✍️
-
You could add a
min-height: 100vhto yourbodyelement so it takes up the full height of the viewport while still being able to grow when the content inside it grows. -
Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.
-
You can make your solution more responsive by changing / adding the following code:
body {
margin: 0;
background-color: beige;
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
background-color: white;
padding: 1em;
max-width: 500px;
}
- Try adding the right font families to your solution
I hope you find my feedback helpful! 🌟
Let me know if you have more questions and I'll do my best to answer them. 🙋♂️
Happy coding! 😎
Marked as helpful
@Obom23
Posted
@DylandeBruijn Thank you very much! I updated the files and also took a look at your solution to better understand the variables and their usage.
I noticed that you directly linked the .scss files in the .html file. I had to compile the .scss files first and then link the generated .css file.
Are you using a CSS framework that allows this, or am I doing something wrong?
@DylandeBruijn
Posted
@Obom23
Good question! You are correct that you need to compile SCSS files to CSS to use them in your project. I use a build tool called Vite which does all the heavy lifting for me and it allows me to link SCSS files directly in my HTML.
In summary, when you use a SCSS file directly in your HTML and start the Vite development server, Vite compiles the SCSS to CSS, injects the CSS into your HTML, and sets up a watch system to automatically update the browser whenever you save changes to your SASS files. This process leverages Vite's efficient handling of modern web technologies to provide a fast and responsive development environment.
I hope that makes sense to you!
@Obom23
Posted
@DylandeBruijn Allright, thanks!
