Hey there!
With many sites out there that help practice building sites while following a design and find different ways to solve common problems that come up, there are several options to choose from.
Many people getting into front-end dev or full-stack dev will go the normal route of learning about HTML, CSS and then start getting into JavaScript.
However, in practice very few use tools just like that for a production-grade project or when working for a client.
Most of the time, the projects are built using one of the front-end frameworks (i.e. React, Vue, Angular) and in those cases is good to know about these fundamentals to be able to be productive in whatever way the project will require.
So, if someone is just practicing the web dev chops, getting better at building UI's and getting acquainted with responsive design, using full-fledged frameworks would do more harm than good.
The goal is more to know how to take a design and execute it using HTML and CSS. Only after that's done is that the interactivity should take place.
If someone uses Vue or React, plain HTML will never be used as-is and in most of the time plain CSS either. In Angular's case you can have those two but along comes Typescript which requires extra learning on that front.
Knowing how all the pieces fit together for a particular framework will just become a distraction to doing the actual work required to get better at web development (which is building actual sites).
Still, you don't want to go the extremes, not using any frameworks or jumping into one without knowing how the basics work. You would want a middle point between ease-of-use and real-world usage.
Something that doesn't get in your way to practice the necessary skills of a web developer while still retaining some semblance of production-ready code.
So, what could be a good way to get started practicing your web dev chops while still getting exposed to the developer ecosystem and start getting into more "real world" code without getting bogged down with the details of a kitchen and sink framework?
Enter Svelte.
Svelte gives you plain JS, CSS, and an enhanced version of HTML out of the box. Of course, you can use preprocessors if you like (once you learn how to use them)
You can get started pretty quickly with a new Svelte project by running this command:
npx degit sveltejs/template example-project
Then cd into the project, install everything and run the project.
cd example-project
npm install
npm run dev
Now you'll be able to see the project running on localhost and you can start editing the source code seeing the changes right away, no need to refresh the server yourself.
Pretty cool right?
What's even better, is that you can spin up a quick template if you're just testing ideas or want to see how something would look without having to set up anything locally using the online REPL.
Check this (much more interesting) "hello world" in Svelte
It is like a Codepen that shows the result of what you're doing but with all the Svelte functionality working.
Later on, it allows you to download all the code as one project that you can run locally.
Okay, now you might be thinking "well that's pretty cool and all but I don't see how this can help me get better at building UI's...."
Well, that's a fair point but just a starting one.
When making a normal website you would be using plain HTML and CSS to create something that would look like this...
But you can also take that same code, put it in a Svelte app, and the result would be the same...
The difference is that with Svelte you get some extra functionality like adding some cool features with few lines of code.
Like for instance, this improved version of the site
Once you want to start integrating more functionality into your websites, it's easier to go from static landing page to interactive site without too much of the heavy lifting you would have to do using other frameworks.
That's not just to add "cool animations". You can add useful features to a site with little boilerplate, like a dynamic burger menu, dynamic hero, input validation, etc.
Check out the "examples" in the Svelte site for more ideas on that.
Conclusion
As mentioned, learning Svelte doesn't have the kind of steep learning curve that other of the most popular frontend frameworks have. If you know HTML, CSS, and vanilla JS, you can get ahead developing with Svelte without feeling a big change.
After you're more comfortable with it, you can dive deeper into the ways that Svelte simplifies repetitive stuff and handles concepts that a lil' bit harder to grasp in other frameworks (i.e. state, reactivity, stores...)
That's particularly helpful for people who are starting in web dev and, as mentioned in the title, want to "hone their chops" with a combination of simplicity and "real world" code that can later become production-ready code.
Give it a shot and see for yourself how it goes. That's not to say that you should only learn Svelte and disregard any of the other frameworks. There's always something new to learn in the way others approach problems.
As always, thanks for reading so far. I appreciate your time and attention. We'll see back again in another upcoming article. Bye for now!
Photo by Ferenc Almasi on Unsplash
Top comments (0)