Self thought Front End Development learning curriculum & resources in 2018
What is Front End Development:
Before talking the Front End Technologies we need to understand what is Front End Development, which thing done by a Front End Developer. why need a Front End Developer? according to wikipedia :
The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer.
— — — Wikipedia
How the web works:
This theory is not essential to writing web code in the short term, but before long you'll really start to benefit from…developer.mozilla.org
আপনি যে বাড়িতে থাকেন সেটা কি দিয়ে তৈরী সেটাই যদি না জানেন তাহলে লজ্জার ব্যাপার না? এটা ঠিক যে সেই বাড়িতে বাস করতে হলে…medium.com
After learning how to web works you should know what is web browser? how they work and how you work with them very easily? look at those blog post below:
Check out my overview of Chrome DevTools if you’re new to themmedium.freecodecamp.org
Learn Command Line:
Discover the power of this simple, yet essential text-based tool and increase your productivity as a developer.www.codecademy.com
Learn Chrome Dev Tools:
The developer tools console is one of the most powerful tools available to you when it comes to debugging your…blog.teamtreehouse.com
The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to…developer.mozilla.org
Learn the basics of HTML:
HTML is structure to your pages and we should learn tags, attribute and so more. most preferably you must know:
- how to write semantic HTML
- Understand how to divide page into sections and how to structure the DOM properly
After completely learning from any of those resources you must test your skill using some practice techniques. you can create at least 5 web pages and complete basic HTML5 challenges from freeCodeCamp beta.
Learn the basics of CSS:
Now that we have learnt how to style our html pages and looks beautiful. CSS — Cascading stylesheets are used to add beauty to your HTML pages.
- First thing that you will have to do is learn about the syntax and familiarize yourself with the common CSS properties.
- Learn about the box model and how to prepare layouts using Grid and Flexbox
- Once you are done with that, learn how to make your websites responsive with media queries.
Resources for basic CSS:
Resources for Grid & Flexbox:
- A Complete Guide to Flexbox from CSS-TRICS
- A Complete Guide to Grid from CSS-TRICS
- Wesbos: What is Flexbox
- Wesbos: CSS Grid
Now we already know HTML5 (Tags, Attributes, Semantic Structure etc) and CSS3 (Selector, Class, Id, Flexbox, Grid and more beautiful things). So lets create at least 5 web pages using your smart head and practice basic CSS3 challenges from freeCodeCamp beta.
And last but not least practice some flexbox and grid online game like:
Practice and Building Projects
- Cloning a nice looking web page
- Build a Tribute Page (FCC Project)
- Build your Personal Portfolio (FCC Project)
Responsive Web Design:
- Udacity: Responsive Web Design Fundamentals
- Coursera: Advanced Styling with Responsive Design
- Material Design For Bootstrap 4
- RRFonline: PSD to HTML
Basics of jQuery
Learn JSON API and Ajax
Days of static web pages are long gone! We need to build modern apps and sites that update with clicks, not with reloading. We need to fetch data from multiple sources at once. And we’ll learn all that via API and Ajax.
Learn Git and GitHub
We’ve learned a lot so far and now we do a lot of coding everyday. We need a way to keep our code organized for different projects. And to do that, we’ll learn git and put all our code on GitHub. It’ll also help us a build a good looking profile on GitHub. It’s important because recruiter will look at your GitHub page to see how your code is and how often do you code. So, The early we start, the better.
- CodeSchool: Try Git from
- Codecademy: Learn Git
- Git Official Docs & Pro Git book
- A developer’s introduction to GitHub
Practice and Project Building
We’ve learned powerful tools since the last time we’ve built anything. Now it’s a good time to put everything into test again. Let’s build some cool stuff using everything we’ve learned.
- Build a random quote Machine (FCC Project)
- Build a weather app (FCC Projects)
- Wikipedia Viewer (FCC Project)
- Use twitch.tv JSON API
These are real world useful applications that makes it appropriate to call yourself a web ninja!
Learn UI/Interaction Principle:
Remember the last time you built a project and your friend was amazed to see what you’ve done? But did s/he made any compliment on how cool your project looks? Maybe not, right? That’s fine because you are not a designer. But look is important. In fact, that’s what Front-End is all about, isn’t it? That is exactly why we are going to learn a little bit about UI and UX. Most company would have their personal graphics designer to design their site, but we will still need to create interface on our own sometime. Be it in our workplace, or for our next personal project.
And even if don’t have to, having these knowledge will help you collaborate with the designer in teamwork, which will set you apart from other typical developers in the room. Having a good idea about UI and UX will also push you one step forward to the Full-Stack track. Here is some great article to start with:
This section will contain more article worth reading, tutorials, Book recommendations, Free courses and other types of resources.
Let’s see how learning React ⚛️ in the right order can make it less overwhelming.blog.kentcdodds.com
Start with this blog post or learn from below list of courses.
- Codecamedy: Learn Learn ReactJS: Part I & Part: 2
- React.js: Official Tutorial
- Scotch.io: Learning React.js
- Egghead.io: Start Learning React.js
- Egghead.io: Beginner's guide to React.js
- CSS-TRICS: React Guides
- Wesbos: REACT FOR BEGINNERS [Regular Price: $89, more than 70% discount available]
State Managment Tools:
- Redux: Getting Started with Redux
- Wes Bos: Learn Redux
- Mobx: Manage Application State with Mobx-state-tree
Progressive Web Apps Training:
Now time to Practice, Practice and Practice
Bonus React.js Projects:
- Build a Markdown Previewer
- Build a Camper Leaderboard
- Build a Recipe Box
- Build Game of Life
- Build a Roguelike Dungeon Crawler Game
- The 2018 Web Developer Roadmap
- Modern Frontend Developer in 2018
- Mastering Full Stack Engineering in 12 to 20 weeks for beginners and experienced alike.
- Front End Developer Handbook 2018