Hey there, thank you for checking out my solution for this challenge. Please lmk if you find any issues or if you have any suggestions on how I can improve my code/implement best practices 🫶🫡
Stuff I struggled with:
Hi denisse,
I think one of the more 'standard' ways to keep the footer at the bottom of viewport would be to follow some of the techniques on MDN web docs
hope that helps!
I wanted to try styled-components but I'm not fond of the CSS-in-JS approach.
I'm not sure I nailed the responsive aspect, it looks maybe a little weird around 700px, just before it switches to mobile design.
I also changed the breakpoint to an arbitrary value: 600px, is this correct or should I try to make it fit into more standard breakpoints like 640px, 768px etc?
Is there something I can do to improve the responsiveness?
Hello Davide,
Styled components do take some getting used to.
One thing I would suggest is to use a function for your media queries, with styled components it becomes easier to add “logic” to your styles.
I’ve normally stuck to standard breakpoints and have used a tool called Responsivly to help decide what breaks to include.
I do a pretty basic version of using functions to return media queries in my Responsive dashboard solution
Hope that helps
Dear All,
Here is my very next challenge, it took a loooong long time to do, but eventually I am done. Javascript is a hard nut to crack for me and I was trying to bring the best out of it. Hope it seems okay and so does my CSS. Any suggestion on HTML tagging maybe? Or anything at all?
Thank you for checking it out,
Cheers to you all,
Dalma
Hello 👋,
Your JavaScript looks pretty clean for a project this size. The only thing I’d add is margin:0 auto to .text-side__first-heading and see if it aligns it center on mobile.
Great job!!
What did you find difficult while building the project?
Which areas of your code are you unsure of?
Do you have any questions about best practices?
To make the page responsive you’d need to include the styles you want to override in a media query.
Margin 0 auto should be enough to center the container.
Main goals of implementing this challenge were:
practice how to use Composition API with SFC
implement a game mod change
Some future plans:
Cool idea to switch game modes, I’ll have to add that to mine
This was a tough challenge but I gained so much experience using CSS Grid. The key lesson for me was to keep it simple and not try to use columns as margins.
Let me know what you think of my code.
