Introduction
Whatever you do, it's always beneficial to have the right tools at your disposal. I love working remotely and am a big advo...
For further actions, you may consider blocking this person and/or reporting abuse
Interesting and inspiring article!
To learn/practice a JS framework I always build the same (video game search) app to focus on the front-end without spending time on the API, build tools... It's also a good way to compare the frameworks. But it may be time to change to another app :)
You must be the master of video game searches, no doubt :)
😂
woow
best approach imho
Which video games api you used? Gamedb?
IGDB (api-docs.igdb.com), but there may be better ones. Since it's only to practice the front-end development, I just picked a random one.
To be honest, I didn't found better Games-related API than IGDB, it was swedish project at first, but acquired by Twitch. Data set is quite rich and useful, so anybody looking for the games database, this one is pretty decent.
I found that IGDB is having most of the handheld (GB, DS, PSP...) games data while others are lacking a lot in handheld department!
As Victor mentioned learning a JS frame is a easy way to master JavaScript. Before jumping into a JS framework, on appcode.app (web developer reference site), there is an article on some basic JavaScript concepts such as functions and variables you might find helpful for beginners. Also a image of a basic JavaScript function below.
I would recommend to use
wemake-vue-templateto get started withVueandNuxt.It allows you to start easily with the full-featured project. Features:
@dependabotnuxtfor server-side renderingtypescriptsupport, includingVue's SFC,Vuex, and testseslint+stylelintjestfor unit tests andtestcafefor end-to-end testingdockeroptional support for development, testing, and productionGitlab CIwith fulltestanddeploypipeline configured by defaultjsdocannotationsvscodesupport and list of suggested settings and pluginsThanks
Thank you Nikita ;)
testcafe? I find it a weird choice, now Cypress is trending and it is a pleasure to use tool.
It is a tool we are using for quite some time. I agree that Cypress is more pleasant these days
....
Thank you, that's a really important guide. 😉💻
Thanks
One of the most useful articles I've read in a while.
I'm also just on the brink of starting with JavaScript Frameworks.
Still a beginner. But I'm hoping I can do one of these.
Thank you for the article brother.
It's amazing.
As a beginner, don't ever start off with frameworks, go for vanilla JavaScript first.
I think it really depends where you come from, how you learn best and what you want to achieve. It won't hurt to know the basics but if you have fun learning for example some Vue first and that helps you to become a better developer I would go for it.
Yes. I have gone through Vanilla JavaScript. That's the reason I'm proceeding to frameworks now.
I have no doubt that you can do it. The only way to find out and become better is to start building stuff! I wish you all the best on your journey :)
This is a very good article to build your skillset in the trending JS frameworks and which you can best work on. It all depends on how much time and effort we have to apply to it and explore the possibilities. Very insightful, thanks.
Thanks mate.
Ameer, what projects have you been working on to build your skills?
Right now. I'm working on the Search movie app mentioned in this post.
It's the perfect project to get used to React Hooks.
Thanks for your sharing. These really will be useful for newbies.
Btw, I did all of them but I haven't got a good CSS knowledge. Yes JS and its frameworks are good but I need advice about CSS :) What are your suggestions?
I need a guide like a start zero to a hero guide.
For example, it should contain, "units of measurement", "PSD to HTML", "mobile design and desktop design" etc.
Let's assume, Think a designer who uses the sketch. He/She gave me a template and expecting me coding this template.
What should I do first?
Have you checked out Scott Tolinski's site yet? leveluptutorials.com/tutorials/css...
He is a great teacher and has some free resources available
Thanks. I'll check. Actually, he is on my list :) I couldn't watch this series.
Advance Css/Sass course of Jonas Schmedtmann is a very helpful one, explained all in details 😄
Love Scott Tolinski
yes sir
Excellent overview of frameworks and tools to build Apps.
It seems to me that is a bit ambitious trying to master all of them.
I use React (and Redux for state management) and still I am struggling with that.
Might be it is better to get a approach to all of them that be proficient in one.
I wanted to make it a bit broader on purpose so that everyone can find something that fits for him/her. If you are already investing in react I would stick with it.
Yes. That is what I thought in first place.
Anyway, I have Vue inmediately in the queue with excellent instructor Stephen Grider in Udemy.
As for GatsbyJS, I really recommend going through their tutorial on creating a Gatsby website, before using any templates. It's amazingly documented and well explained. Helped me a lot before I started using templates.
Do you think it would be a good idea to have a topic about different CMS selection for GatsbyJS and their usability for different projects? :)
You mean like contentful, headless wordpress, etc?
Sounds like a good idea!
Yup, exactly, I think they differ in terms of setup complexity/speed for start and some can be better for small projects (like a simple blog for example).
Hello，sir.
I'm a web developer from China.
It's very lucky that I found your essay a few days ago.It helped me a lot to some extent.
So here's a request that if I could get your permission to translate your essay into Chinese to help more Chinese web learner.It will be extremely delighted if I can have your permission.
And no matter what it would be,I'm still grateful for learning from you.Looking forward to your answer.
Best wishes.
Sure, go ahead
Thanks a lot
Great article.
I am also using VueJs in my current project. It's really fun to work with VueJs.
It absolutely is, I really enjoy working with Vue.js!
This is very exciting, right now I can't do any of these projects. Let's see what I can do in the next weeks.
I'm glad it inspired you. The thing is that just have to build stuff if you want to become better. Theory gives you only so much but building apps and doing projects is what takes you forward!
Maybe check out some Vue.js if you are new to this because it is very beginner-friendly in my opinion.
wow, I didn't expect to see my Angular tutorial here 😲
I wrote that weather app article back in 2018 and I am glad it's still valid even today.
@simonholdorf thank you for the mention! honestly, you motived me to write another full app tutorial again! happy to hear any app suggestions for my next article (+which framework you want to see)
This is such a great article for so many people. It's just missing Aurelia, which is honestly such a fantastic framework. Well worth far more publicity. Unfortunately, the Google's and Facebook's steal the show with mainstream momentum... Such is life.
Elm is also a lovely language/framework.
That's true!
Yeah there are some real nice frameworks out there, but it would go too far to cover them all in one article :/
Hi, I have been a backend developer working with java sprint boot and nodejs express techstack for quite a while.
I want to make a transition to frontend development so as to be a fullstack developer.
Should I jump into the above mentioned projects?
I think it would be a smart move to go for one major framework like Vue or React sooner or later then. So you could use this to get a good overview and then decided with what to go on. Nuxt(Vue) works well with express so this might be a good starting point!
Also it would be a big transition from a mindset perspective. As a backend developer, we think about data, persistence, concurrency, scalability. Etc.
I guess frontend development needs a mindset shift and some focus areas to think about
Yeah it would be a pretty big shift. Not mentioned in the article is all the things like learning CSS, learning accessibility, and learning to build in an environment where there are many unknown variables that you have no control over (screen-size, device type, browser, input method, etc.)
Loved the list sir. I really wanna try making all of these but Just a little curious, are these projects worth trying? I mean different frameworks and parts, I am just scared to end confused in every direction!
Thank you, Simon, for such a great and diverse overview! I often struggle to come up with ideas for projects that will help me to master new programming skills. And this article will be my cheatsheet :)
Glad I can help ❤️
Nice article thanks. Have you got any good projects for building an application using Web Components?
I will try to find something for you!
I too need it then
Thank you for putting together this list of projects. I do learn better with projects, as I generally screw something up which forces me to look up solutions and learn the code. LOL. Anyway can't wait to get started on a couple of these!
Nice article. I hope you can recommend some projects for vanilla JavaScript.
I suggest you to try to build a (very very simple) framework.
Try to implement the basis of a frontend framework: Render components, change detection, spa routing...
I don't think you will get anything suitable/maintainable/performant enough for a production environment, but you will learn a lot about vanilla Javascript and the typical gotchas of the frontend.
How do I go about that?
There are a few articles over the internet from people that tried to do it as a learning experience and documented it, however I can't find one good enough right now.
Those 3 topics I think are the core of every frontend framework:
So you can start by trying to find out how you are going to implement components.
You can do the Angular/Vue way, that is to render the component from an html template and give it some capabilities based on custom html tags, or you can go with the React approach, that is the opposite, to create the components using javascript functions and return the template.
Once you have that, you should start with the actual rendering. The gotcha here is to render components recursively (one component has another on its template, so when you render the parent every child gets rendered eventually).
Once you have that, start with change detection. This is the most tricky point I think, because it has to be done recursively also, but it can be a headache to keep it performant.
You can check the source code and issue trackers of existing frameworks to try to extract some techniques and knowledge about how they solved it.
Thanks for your comment, Yeray!
Nice high level aggregation. This is awesome for anyone, even experienced dev, to refresh the knowledge and keep up with things.
Oh wait, what am I thinking? Nobody can keep up with front end frameworks iterations.
We’ll all just be chasing like crazy ;)
Yeah that's true to some extent. But Nobody needs to fully know everything in and out, If you are capable to handle one of the major frameworks well and also have some good basics in JS you are well prepared for the future I think.
So I can become a frontend master by developing a to-do app with Svelte?
Great!
I don't think it's the good message for young out-of-the-school developers. You promise shiny and brilliant future to them with many libraries and frameworks that didn't even exist 3 years ago and that will be replaced by a more shiny one next year. It 's not with libraries & frameworks that we, developers, build a solid experience.
Moreover, it's not with to-do app and static blogs that we become masters. It's by practicing again and again, by learning fundamentals, best practices, design patterns, languages' principles, by trying, failing and not giving up. It's by building complex systems, working with many other devs, and putting code to production.
You should go deep in one but have a broad overview of others, how they function, what approaches they use - then you will be better in that one you are deep into.
Also, as FE developer, I find it really beneficial to get back-end experience as well.
Hey Simon, excellent article.
In my case, I prefer to learn this way with a real-life example than see all simple articles and documentation about it. I will save so much time. Next weekend I will start to see it. I am working with react js and in the beginning, it was so hard to understand the react work way and after redux connections. Whether I had an article like that my life could be easier. Thanks for share with us.
You are welcome Emerson, all the best on your journey!
Hello, recently I have published card decks for young people to learn Javascript and Python. Would you be able to share the information? summonthejson.com/products/summon-...
Thank you for writing such an awesome blog, I was thinking of creating a website for songs. I think React with hooks is the best option. Secondly, I need to create a website for growing kids and their requirements. Could you please suggest me the best framework for such website.
You might also like: How to Master Python Fast and easy: A complete simple Tutorial based on the officiel documentation
Great post! Any particular reason no to include emberjs?
Yes, I didn't find a project that both fulfilled my quality expectations and was also up to date. But I will gladly update the post if you have one in mind?
Hi, Simon. I think Mike North's workshop may be a good resource for those wanting to try out Ember (in particular, Ember Octane).
github.com/mike-north/ember-octane...
emberjs.com/editions/octane
Mike starts out simple by teaching how to component-ize your HTML files and how to render dynamic data. He then gradually introduces more advanced topics in web development.
The video recording is on Frontend Masters (members only), but Mike's notes are available for free for everyone who want to self-learn and conduct the workshop themselves.
frontendmasters.com/courses/ember-...
github.com/mike-north/ember-octane...
Best,
No. I really don't have any in mind. Shared your post on Twitter. Lets see if anyone replies 😎
This is great! Now I've an idea of what to work on in 2020 for personal projects ... and what to write about. Thank you.
Jenna, thank you for your comment. I wish you all the best for your projects and your writing! :)
Interesting and inspiring article!
Can I translate it into Chinese to help more developers?
If you give credit, sure go ahead!
Thanks.
I will give credit.
One of the most useful articles I've read in a while.
I'm also just on the brink of starting with JavaScript Frameworks.
Still a beginner. But I'm hoping I can do one of these.
Thank you for the article brother.
It's amazing.
Pinterest Descargar
Cool article. It will help a lot of devs to easily try other frameworks. Thanks for this mate!
Thank you very much! This article will benefit me much!
Great article summarising projects on different JavaScript framework or library.
I will also suggest it is worth looking at this blog which lists down some of the Frontend technologies to be considered in 2020
icicletech.com/blog/top-front-end-...
Respected Sir,
I need some help regarding a frontend thing I am trying to achieve.
video is the Google Drive link to the animation effect I am trying to achieve.
It would mean a lot if I could get some help.
Thanking you, Keshar.
Let's just say that I want to build all these projects, and let's say I've done all of them, can I put these projects in my portfolio eventho
BUT,
can I?
Hi Simon, my question is if I just know the basics of JavaScript will I still be able to do this apps since I am new to angular, Vue and many more this framework you mentioned?
Hi Mercy, I mean you have to start somewhere right? You could try to do learn some Vue.js concepts and do one a realted project to see how it works. And if you like the framework, work on your JavaScript skills besides digging deeper into Vue....
Ok thanks brother will surely go through that.
Ow and do you specifically have a link where I can go through the documentation of vue.js?
sure, thats an easy one: vuejs.org/
Alright. Thank you brother I truly appreciate your assistance.
sure thing!
I want to add a tool so you can analyze all your Front-End errors ;)
Screpy - Website Analyzer
I always wonder why (almost) no one realizes the potential of flutter for the web. I'd even put that above React/Vue as soon as it leaves beta status for web development. Finally a new way to design responsive web-sites/apps without all the hassle of html and css. Not to speak of all the baggage js brings and the tooling mess around it.
Thanks for the motivation. I might take this on as my winter break challenge, instead of the
Advent of Code:) Glad it helps you!
this is a great article I have read today. I am still struggling with what project to undertake and at the same time don't want to abandon it in the middle in case I decide. I have several projects that I have not completed
Hello, frontend developers 😃
I found out about free website template resources site.
TemplatesJungle.com helped me a lot in my starting phase and even now during my freelancing phase. They are just making and providing free HTML CSS website templates, free Figma website templates, etc.
Hope this will help you in your career. Lots of best wishes to all of my developer friends.
Very helpful article. Thank you for sharing.
We recently launched Materio Vuetify VueJS Admin Template that can be useful for frontend development and responsive web apps.
Very motivating article!
I'm somehow a newbie in frontend developing and I'm learning react now. The question I have about these projects is what about the backend of these? How can I manage database, request handling, etc. in projects like blogs? Should I also learn a database management system myself? Or what? Can you please introduce me some resources?
Just stick to React!
Thanks
Interesting topic! Everything is explained articulately and clearly. For your project, consider checking out this free npm package: select-paginated.
Great article. Well done lad!
Thanks, sis :)
It is a great "compendio" of valuable learning resources! Thanks for sharing! I´m giving a try!
Gracias Javier, all the best :)
Looking for a job? Build all 9 then put on your CV. And "By the power", you'll land that job -- He-Man
By the Power of Grayskull!
This is one of the best article to showcase some real useful projects.
Thanks sir!
Great post!
Thank you so much for this!!!
Can I do web development with C++
Yes actually: medium.com/@tdeniffel/pragmatic-co...
But it isn't very common, still....
Thanks for your kind information 🙏
Great!
Simplemente excelente!
Thanks
Sure thing!
So great!
Can I translate it into Vietnamese to help more developers?
sure
I already start React js...
this article's project list really inspire me to build something really awesome....
Thank you for this great article! I am looking forward to try some of these tutorials. The link to the Gatsby tutorial doesn’t work anymore unfortunately 😔 do you know any good alternative?
Truly Awesome!!!
Thanks for the great work.
Mohammed, thanks, much appreciated!
Wow!, Thanks for sharing this awesome article
You are welcome, Mansour! :)
Thank you! Challenge accepted!
All the best!
From start to finish this is a quality post!
Thanks Mike, I really appreciate your comment :)
Great article! I'm jealous of that weather app, I might try to build that using Gatsby and Firebase...
Thx, sounds like a good idea!
Good article!! You make it easy to start as UI developer and also to go depth in the modern tech stack.
Thanks for sharing :)
Thanks for your feedback, Max, I really appreciate it!
Interesting topic
This article is exactly what I was looking for! Thank you, thank you, very very much!
I also start to follow you cause I like the way you write.
I hope some day we can work together!
Thanks for your comment, much appreciated!
So... It's already too late in 2019...
It is never too late!
This is the content we need!
Thanks, James!
Very interesting, I am shifting my next goal to this asap
So useful link.
Thanks mate!
Great post, wait to see what is the hottest FE in 2020?
Great article thanks
Thank you :)
Great article! I'm looking forward to follow some of these. Than you!!!
Thank you Simon! Love the challenge, and the detail of your opinions on each! Appreciated.
Well I guess all that's left to say is: Just Do IT :)
This is awesome! thank you for the post!
You are welcome, sir!
Love these ideas! Thanks!
Sure thing!
Simon, thanks for the Snipcart content share, much appreciated! 🙇♂️
Sure thing Franck, it's a great tutorial!
This is a very great post, I will do all I can to create all these wonderful apps.
Building a lot of them with react though, then switching to Vue on the remaining.
Thanks for this great post
Sure thing! :)
I wish people would make more articles like this.
Thank you Garrett, really appreciate your comment. I will keep making quality content for the Dev community!
Really good examples to hone front end development.
Definitely starting this week, Already added them to my trello board. Let's see how this goes.
You can do it! :)
This is an awesome round up of web frameworks :) I'll be happy to try some of them out.
Edit: I was going to use vuetify, but I think Quasar is taking the cake!
Thanks Bernardo, I hope it gives you some inspiration :)
More articles with ideas like this please 😊
No worries, I will take care of that! :)
Hi Simon, thanks for the article, but I really wish you had a more inclusive image set in the post header. Not all "masters" look like this. Hope for your understanding.
Hi Ekaterina, I totally get your point. Hadn't thought of that, apologies, it wasn't my intention. Gonna make sure for future articles to be more inclusive with that images.
please share few project links for React Native also
Will try to find something for you!
I recently found this one for React Native Web, looks pretty solid:
youtube.com/watch?v=_CBYbEGvxYY
This is inspiring. I can feel my dream coming alive again😁😁. Thank you
You're welcome, glad it helps you!
I really feel happy when I see a quality post with some decent resources under the article.
Thanks man, really appreciate your comment!
I have always been creating different projects starting from blog sites (just to implement the CRUD functionalities) to youtube, quora, Facebook replicas.
This is an amazing article. It combines different kind of javascript framework that you can learn. Thanks Simon
Thanks Emmanuel, I wanted to provide you both an overview and also some direction where to move!
nice information shared, here is also a good comparison of Vue vs ReactJS vs Angular
1'm in love with Gatsby, gonna give it a try. Nice article!
Thank's a lot Simon will surely work on these projects.
Many Thanks,
I will build them myself.
Wow - excellent list and an inspiring set of challenges Simon. Job well done.
Thanks Bob, I really appreciate it!
Amazing. I'll try them
Thanks for sharing. It's really interesting
Thank you!
Interesting and inspiring article!
Can I translate it into Chinese to help more developers?
Great ideas, thinking of collecting some sort of curriculum/katas for frontend developers.
Just did the React movie search one and it was great! Nice list
Nostalgia but still the BEST list. Done with all!! 🙏🚀
Very motivating, give me a todo list of projects to learn by doing.
Thanks mate!
Nice
Highly recommended Quasar-Sika-Design Out of the box midrange front end / design solution【dev.to/dqopencloud/quasar-sika-des...
I'm a kid and know quite a bit about coding in general but don't know much about frameworks.... Worth looking into! Thx for sharing!!
Great information loved your content, I have also started writing you can check it out here
Codewithgauri
Thanks :)
instagram.com/p/COfmr3Tgl3U/?utm_s...
Awesome 😍
Thanks for this
wow, what a great post i have just read. I was looking something like that. helpful.
Very nice projects, also graphics-wise.
Thanks a lot
Great article for developers!
Thank you Sir😃
Checkout the Todo & Journaling app that you may want to use. Made it with the lovely Svelte framework.
Great article. I will definitely try and do some of the projects :)
Interesting and inspiring !!! Thanks for sharing :)
That's a really an excellent article, I will do exactly what you are pointing. Thanks a lot for sharing your knowledge with us.
Sounds hard!
How about designing the front-end UI of the world's first Meta-OS?
github.com/g0d/GreyOS
Im really glad this helps you a bit :)
Interesting and inspiring to learn new things and improve my knowledge. Thank so much!
Glad it helps you :)
Cool information, thanks for sharing...
Thanks for your sharing.
OMG! I was looking exactly for something like this. Million thanks a lot!
Thanks Simon! I look forward to digging into these!
Te felicito, muy interesante tu publicacion!
Really useful article to stay up in trends for 2020! Thanks, definitely I'll check some of the projects !
The most popular dev.to post
Fascinating list to put together, thank you @simonholdorf for sharing :)
Pog.
is Flutter something you would still recommend to be part of this list ?
great