Our reporter did not find any issues in this project! 🎉
ApplePieGiraffe’s questions for the community
Hey, everybody! 👋
This was a fun little challenge! I used Svelte again and it makes things so much easier—component-scoped styles are like the greatest invention since sliced bread! 😂
I added an intro animation (for the tablet/desktop layout of the site) with GSAP and the little attribution popup. I also just went with the browser form validation for this one. 😀
Feedback welcome and appreciated, of course! 😊
Happy coding! 😁
Hey APG! Yooooo dat loading screen 😯😯😯 is dope 🤩! It just brings your work to another level! And the way you managed the animations is so smart 🥳!
I'm glad to hear you still like Svelte 😆, Svelte also supports component-scoped
scss 😏, just few steps and it will just work, check out this article. (This is the scss setup I found before, if there is a simpler way to do, please let me know😝)
keep coding and happy coding 🙌!
Thanks, zuolizhu! 😆 Happy coding, too! 😃
@ApplePieGiraffe I just updated my comment above about the scss supports in Svelte. Hope it helps 🤪!
Thanks for the link to that article! 😊
I've actually found that article before and tried to follow it several times, but each time I do, VS Code tells me "Node Sass does not yet support your current runtime environment." I ran around StackOverflow trying to figure out what was going on and ended up installing a couple of different versions of Node.js and node-sass (both old and new) and running a bunch of npm commands to reinstall or rebuild node-sass, but nothing's seemed to work so far. 😢
I ended up just using plain ol' CSS but it's not that bad since Svelte's scoped styles often mean I don't even have to use classes and stuff half of the time. 😜
I might just try it again in a little while or perhaps find a different way of using Sass with Svelte. 😀
But thanks, still! 👍
@ApplePieGiraffe I think I have the same issue when I was working on my react project with node-sass version
Node Sass version 5.0.0 is incompatible with ^4.0.0`.
And if you head over to npm node-sass, they said
LibSass and Node Sass are deprecated. 😢
Hope those helped 😁.
Thanks for that info! I'll try that out! 👍
How do you know the names of the colors in :root, is there a specific site?
I believe I got those color names from the style guide included with the free starter files for the challenge. You can really name those colors anything you want—I just stuck with the names given in the style guide because I like them and it saves me time thinking of color names. 😄
@ApplePieGiraffe My friend's last question is how do I arrange my files inside the build folder so that it is similar to the arrangement that you have because my files are random and I want to arrange them inside the build folder similar to your arrangement like two files, I hope you teach me the order of files
If you'd like to order your files in a similar manner, simply study the existing file structure of a project you'd like to copy (in this case, this solution), and replicate that structure in your own project. 😉
public folder, I have an HTML file (just one since I'm using Svelte) and a CSS file (for all of my global styles), and a folder containing all of the assets (mostly images) for the project. 🙂
Literally only just seen this. Absolutely loving the loading animation, APG! 😍 These extra touches are what take projects to the next level. You're building up an incredible portfolio of projects! 🚀
I really wanna flex my creative muscles especially in animations. That load animation is so cute. How did you achieve it?
Hey, there! 👋
Like I mentioned in my reply to SzymonRojek, the animation in this project mostly consists of
<div>s and a few other elements that I animated the properties of using GSAP. I suggest taking a look at GSAP's getting started page, since it's very helpful and easy to get into animating things in your own projects! Also, this video by Dev Ed helped give me some ideas for the animation and get started using GSAP. 😊 And you can always take a look at the code for this project to see exactly how it's done and get ideas, too! 😉
Hope that helps. 😀
wow => what can I say! intro is amazing - how did you do it? Extra additional effect. I love it, very smooth. Perfect pixel!:D
Thanks, SzymonRojek! The intro animation mostly consists of a bunch of divs and some text of which I animated properties like the width and height and opacity with GSAP. Using Svelte made it easy to manage the animation because I could create the entire animation as a separate component and stuff. 😀
OOO thank you so much. I will have look it definitely. Generally project looks professional. Have to read about Svelte.
Happy day! :D
Hello, ApplePieGiraffe! 👋
Great work! I can't wait to jump into some framework myself after watching some of your projects! But for now step by step 😅I would suggest to change
outline-offset for focus state for your input. It starts looking broken when input invalid border comes to action.
Good luck with that, have fun coding! 💪
Hi ApplePieGiraffe , Your solution seems absolutely PERFECT 👏👏.Your intro animation is just dope 🔥. The more I see your solution , the more I am interested in learning Svelte.
Happy coding 😇
Join our Slack community
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!