Connect with us

A complete Learning Journey to Web Development – The Ultimate Blueprint

coding

A complete Learning Journey to Web Development – The Ultimate Blueprint

Hello, world! What’s going on? Let’s get introduced real quick! I am Szabi, A WordPress enthusiast, and plugin programmer. I am starting to guide you through a learning journey to web development which means I’m pretty serious about it. That’s enough for now. We’ll get to know each other better soon. Let’s get going!

Disclaimer: This post is relatively big and I know popcorn doesn’t go nicely with reading which makes you hate reading huge articles. So I’ve split it up into different parts. You can skip to the part you want to read without reading other parts. Even though it will hurt my feelings greatly.

Current State of Learning Web Development

So, Web Development; What an exciting platform to be in! I guess this is one of the platforms that has changed most radically in last few years and continuing to be more and more complex despite all the rages of people and internet memes. Personally, I was very interested in learning web development from the first time I had an exposure to it. I attempted to learn it several times but ended up failing miserably. Sometimes because I couldn’t dedicate enough time to it, And sometime because I couldn’t keep myself motivated enough to stick to the learning journey. But lately, I’ve been very depressed about my personal growth. I am realizing that as the years going by, I’m going nowhere. I am also tired of trying random things and failing.

So, I’ve decided to pick one thing that I’m really passionate about and go all in with it! And that is…you guessed it; Web Development!

Starting from earlier this year, I took it SERIOUSLY and started researching on it. I have read a lot of articles, talked with my local experienced people, asked for suggestion/advice from people on the online forum, collected tons of amazing resources, completed a short course on web design and so on. And What I’ve learned so far is that Web Development, or, Software Development/Coding/Programming or whatever you may call it, is HARD. It is really hard. It definitely takes more than just watching tutorials and banging on keyboards.

Even though the internet is flooded with the success story of people getting high paying job only after coding for ‘X’ months, Often time, these are just story and other times, these are the tip of the iceberg. If you dig a little deeper, You’ll soon find out that every person who got the job had worked the hell out of themselves for a fairly extended period of time. And what matters most is the consistency of your hard work, you continuity in the learning journey. You have to be strongly focused on your goal and you have to work on it every day. 30 days a month, 7 days a week. Sure you have a life to maintain, But to be successful is this industry, you have to progress every day. Even if it is only a tiny little bit.

All of these things, the hard work, the consistency, the mindset; these requires you to have a lot of motivation. So the bottom line is, This industry is (almost) only for people who are truly passionate about it. If you are moved by numbers that developers earn or if you want to learn it only because it looks cool to work from home lying on your couch, this might not be the right choice for you. But on the other side of the coin, If you are passionate, focused and consistent, it’s not that hard to achieve the life you’re dreaming of. It’s only a matter of time. This might sound contradictory to what I’ve already said, But hey! If you really love the work, then hard work is the fun part of the journey, right?

On a different note, If you only want to learn coding for the sake of learning, or for sharpening your logical ability or just to understand what this coding revolution thing going around, then you’re more than welcome. And trust me when I say; Coding is easy and fun. It is nearly as easy as cutting your birthday cake. It only gets a little tricky when you try to make a professional career out of it. This article is focused towards those brave heroes.

The Challenges in Learning Web Development

Now, Back to the main point. This year I am determined to turn myself into a Web Developer. I know I can’t reach my milestone within this year, (Actually, I never can. Because learning never ends here and my milestone will keep changing.) But I want to get as far as I can. I can’t fail this time. I have to hold myself in learning at any cost. So to make this a little bit easier for me (and for you), I’ve listed out the biggest challenges along the way to achieving my goal. They are:

  • It’s hard being motivated enough to work every day for a long time. It’s fine to be down sometime, but we need to get back on the track as soon as possible.
  • We just can’t help ourselves when we are not motivated. As most of us learn to code alone, It’s natural to doubt the value of what we’re are learning after a period of time. That is when we need others help. We need other people to tell us that we’re progressing, and what we are doing is valuable. Solution to this is to be connected with people/community. If we don’t have one, We have to create one!
  • Maintain our daily life in a way that we can dedicate a good portion of our time regularly into achieving our goal. The fix is to form habits. We have to apply scientifically proved method in our life so that we can form the habit we need easily.
  • Being productive. It’s equally damaging to learn the wrong thing in the right way and to learn the right thing in the wrong way. As we have to learn a LOT along the way, we should not spend (Read: waste) our valuable time in topics which just doesn’t deserve it. Again, we need to follow scientifically proven methods for efficient learning. We also need to know the right thing to learn on the right time.
  • We also need a solid and valid guideline to follow. So that we doesn’t end up learning things that don’t add enough value when we finish learning it. We also need a way to measure where we are on the spectrum while we’re in the learning journey.
  • We need to have people or mentor where we can stumble upon when we get stuck. Sometime finding out the answers on StackOverflow is just isn’t satisfying. And sometime we just need to have an end to end conversation with a real person.

While the internet has more than enough supply of amazing resources, That is exactly what makes it more than easy for anyone to keep switching between different stuff and end up being lost in the wild sea of resources.

But despite this, there is some program online which is really amazing and provide solutions for almost all the challenges I’ve mentioned. Some of them are free and other requires small to big amount of your bucks. I tried several of these programs (among the free ones) which have a good reputation and the one that is closest for solving all the challenges and provide a truly amazing learning experience, in my opinion, is Free Code Camp.

It’s a platform maintained by the open source community and it’s totally free of cost. They have a complete curriculum from start to end and provide interactive learning resource for everything. What is even more amazing is that they give you a way to do real life projects for nonprofit organizations when you’re done learning. You can add those to your resume/portfolio which will boost your chance in applying for jobs while also helping people who are trying to make the world a better place. They provide individual certificate for different stack of technology they offer. If you’re a beginner, I definitely recommend you to start learning from Free Code Camp.

But Free Code Camp also isn’t your complete solution. A large amount of their users (if not all) agrees that to be a complete developer with fulfilled knowledge, you definitely need to learn more things outside of FCC’s curriculum. Plus, They provide helping content on every challenge which might not always be enough for you. You might need a little more explanation or might just want description from another perspective. Besides Free Code Camp, There’s some other project which is also known to be very good learning platform. The Odin Project, Codecademy, CodeSchool, TeamTreeHouse are some you should check out.

The Plan

While I started learning, I became overwhelmed by all these facts. It takes a lot of time and energy to figure out what to learn, when to and where from. I felt that it would be great if there was something that doesn’t compromise any aspect of the problem, Something that attempts to solve all the challenges for learner and Something that had it ALL laid out in a single place. And that is when the idea for creating this blueprint came into my mind. I am extremely excited to share my idea with you.

The plan is simply to try to learn things the best way and documenting everything along the way of learning. So that anyone who want to learn, will be able to learn without worrying about resources or guidelines. It would also allow us to build a community of ourselves and help each other when we need to. We’ll also be able to share resources among us and discuss what’s good and what’s not. That way, we’ll be able to create a directory of best-of-class resources. Also, There’s no govern here. We are all beginner. We’ll learn from expert’s content and then explain it in our own way. So, There’s no situation where your expert mentor assumes you magically know everything and makes you feel like it’s stupid to ask questions about that stuff. Sounds cool? Here is what I’ll do:

Today in this post, I am going to create a rough list or blueprint or roadmap of things that we need to learn. After that, I’ll break down the syllabus into segments that we can complete in weeks. And then every week I’ll try to learn things that are in the syllabus for that week, And write a post explaining what I’ve learned. I’ll try to explain what I’ve understood, what I found hard to grasp, where I’ve learned it from, what’s the importance of that topic, how it can be applied in real world usage, sample code for practicing and everything else you might imagine.I’ll also share the best resources that I can find on the internet so you can dive deep into the topic and learn it.

Think about it, everyone teaches from their own perspectives. When you learn from several sources and combine them together, only then you can expect to gain a 360-degree view of that topic. Besides, I’ll take suggestions on every aspect of this journey from you, and will try to tweak it the way you like it so that we can create a personalized learning experience. And if we succeed, This will be a truly complete outline of the learning journey which will help anyone in the world to chase their dreams. Imagine how amazing it would be if you could find literally everything you need into one place! That’s what we’ll be doing. So the ultimate summary is, we are not only going the fulfill our dreams, we’ll also help an innumerous number of people to fulfill their dreams as well. Like Robert Ingersoll said:

“We rise by lifting others.”

I am already more than grateful to the amazing community for all the resources that I’ve learned from. It would never be possible for me to do that on my own. I have taken so much from these communities that sometime it’s feels a little selfish to only take and not give something back. So, Via this plan, I want to contribute as much as I can. And you can also be a part of it. Let’s begin!

The Learning Blue Print

So, Below is the list of things we need to have a solid understanding of to be a great Front-End/Back-End/Full-Stack developer. We have to build strong foundation of these technologies. There’s no other way around without putting in hard work to learn. No escaping, No skipping. I have put together these content in order that most expert will recommend you to learn. But it is not mandatory. You can choose your own topic or skip topic that you already know. But here, we’ll mostly follow the sequence from FreeCodeCamp so that we can earn certificates from there after reaching every milestone of our learning journey. So, Let’s begin the journey captain!

-2. Be Motivated Before we Start

We need to be highly energized and determined to achieve our goal. Focus is the key. We need to be stubborn in our vision to reach our dream. Hence, We need to be extremely motivated. Read these article and it will make you think, It will make you believe, it will make you confident, and it will make you stronger.

-1. Let’s take a look at the bigger picture!

We’ll have to learn a lot. We should have clear idea of what we going to learn and when. So we know how we are progressing and we can plan/prepare for whatever comes next. The below link is a roadmap that kamranahmedse created to illustrate things we need to learn to be a developer. Take a look at it.

Hey! Don’t be overwhelmed seeing that big list of things you have to learn! Not everything takes much time and not everything is equally important. Most importantly, we’ll only take one step at a time, little by little.

0. Learn How to Learn! (Before the Beginning)

Even though we are taught from the beginning of our childhood that we should always be learning; However, We were never taught how to actually learn! We need to learn everything in the least possible time so that we can boost our learning time. I am not talking about finding shortcut or cheap strategy to study, rather I am talking about efficient solid learning in minimum amount of time. Do this course from the University of California where expert will teach you about how human brain learns and how we can boost our learning process.

I am quite sure you’ll be amazed to learn some facts about our brain and also about things you were probably doing wrong. I’ve completed the course and I regret not doing it earlier. As these tips apply to learning anything and everything in your life, This course will serve you some lifelong lesson. And of course, It’s completely free!

You don’t have to wait until you finish this 4-week course to start learning web development. Keep learning while doing the course in parallel and apply things you learn from there in your own learning.

Now that we are full of energy and motivation, We have a clear idea of what we’ll be learning and we also know the most efficient way to learn, It is the perfect time take a deep bite at the hard rock yet delicious cookies. Boo ya!

You can also check one of my other articles on this subject: How can anyone learn to code quickly and easily (and basically anything else in life).

1. Learn How the Web Works.

We are going to learn web development pretty soon but we don’t yet know how the web works! A bit unfair, isn’t it? Yep, let’s learn the basic stuff about web. We don’t need to learn the complex underlying technology and their mechanism right now. We are just toddlers here. We’ll learn them once we learn to speak some language. For now, We need to know what a client is, what is a server, what is IP, HTTP, DNS and how they connect together. You’ve heard those words before, right? Yeah! Let’s get to know what the heck they mean! Read this MDN page which explains it all:

The article includes additional links at the bottom for detail explanations of each term. Read them if you feel like. And if you like visual presentation, Check out this bite-sized video playlist on YouTube:

2. Learn HTML and HTML5

Now we know how the web works! Let’s learn to create something that we can put on the web and call ourselves a master web developer!

These are the major aspects of HTML. As I’ve already said, I’ll write post on every single of these point I’ve mentioned here. I’ll also provide resources and supplementary elements to fulfill your learning. Stay tuned to this blog for some cool HTML lessons.

Until then, I recommend that you check the w3schools HTML tutorial.

3. Learning CSS and CSS3

Yeeeea!! We are the warriors! We have built web pages that work on the web!! How cool is that? We are superman! Nope, We are more than that cause superman can’t code! But we haven’t yet shared the pages we’ve created with our friends because,  let’s be honest, Our page looks terrible compared to the beautiful pages we see on the web every day. We don’t want to be called nerd, We want to be called web ninja! So let’s learn CSS and turn our page into visual apple for our friend’s eyes!

  1. Getting Started with CSS
  2. CSS Selectors
  3. CSS Box Model
  4. Element Positioning
  5. Float
  6. CSS Animations
  7. Responsive Layouts
  8. Every Resource about CSS on the web
  9. Finding a book for deep learning

CSS is a lot powerful than most people think of. We must have a good fundamental understanding of CSS for being a Front-End Developer. Later in the learning journey, We’ll learn responsive frameworks like Bootstrap and Preprocessor like SASS where understanding of CSS will play a vital role. We should put in enough time and effort in learning CSS which will save us a lot of time later.

w3schools CSS tutorial is recommended.

5. Learning PHP

If you wish to enter the realm of WordPress development, I recommend that you learn also PHP. It is a must for WordPress theme/plugin development.

Learn PHP.

4. Learning Basic JavaScript

This is probably the most important and also challenging part of the learning curve. In this part, we’ll be learning programming with JavaScript. We explore the structure of the language and we’ll try to convert ourselves into problem-solving minds. Because programming is not just syntax, it’s how someone takes a problem and how they approach to solve it. Be ready for the excitement!

  1. Variables
  2. Data Types
  3. Operators
  4. Functions
  5. DOM
  6. Control Flow (Looping, Conditioning)
  7. Array
  8. Objects
  9. Class

While I am sure I’ll be adding a lot more to this list when I start messing with this messy thing, but these seem enough for playing with beginner level problems for now. We are going to start problem-solving with our newly earned knowledge!

Learn JavaScript.

5. Learning Bootstrap

Bootstrap is a CSS framework for building responsive website. We use internet from variety of devices and there’s no alternate of responsive design in these days. Bootstrap makes it a hell lot easier and time-saving to create responsive websites. We need to have a good grasp on it so that the site/app we build works everywhere from desktop computer to our tiny smartphone.

Key Points in Bootstrap:

  1. Grid System
  2. Lists and Table
  3. Forms
  4. Bootstrap Components and Bootstrap JS plugins

Bootstrap tutorial from w3schools.

6. Basics of jQuery

jQuery used to the king of library in in the past. It is also used vastly till date. But modern development tools, libraries and frameworks like React JS, Angular.JS is slowly replacing jQuery day by day. Though we aim to learn the most modern development stack, it is still very useful to learn jQuery. jQuery is still extremely popular and there are tons of plugin built upon this library. Almost all the expert recommends learning it because it comes in really handy for quick fixing and getting things done easily. Additionally, jQuery is known to be a good tool for getting into the world of JavaScript. So, we’ll learn the basics of jQuery and then move on to the main vanilla JavaScript.

The learning key points of jQuery:

  1. Why jQuery?
  2. jQuery Syntax
  3. Selectors
  4. Event Handling
  5. Event Function and Properties
  6. Manipulating the DOM
  7. Dynamically applying Classes
  8. Learning to use external plugins

* I don’t have a crystal clear idea of jQuery just yet. So, this list might be changed over time.

Learn jQuery.

7. Practice and Building Projects

It’s not a fantastic idea to just keep learning one thing after another. We also need to put to test of what we are learning. And as surprising as it may sound, The things we’ve learned so far, is more than enough for creating almost any page you see on the web. We have the superpower of replicating (visually) any website! We need to put all these skills into action which will sharpen our saw and also inspire us, will make us feel proud of ourselves. Besides, we’ll finally be able to build something that we can show off to our friend!

  1. Cloning a nice looking web page
  2. Build a Tribute Page (FCC Project)
  3. Build your Personal Portfolio (FCC Project)

Don’t fall into the trap of perfectionism while doing these projects. We just need to create something and we can always come back and make it better. But I’m sure you’ll be amazed to see what you’ve created. That feeling of adrenaline rushing through your vein will keep you glued to your future work!

Let’s get a little deeper now!

8. Algorithm Scripting

For this section, we’ll rely heavily on Free Code Camp. They have a very good problem set laid out which everyone seems to find very hard. But we are the brave heroes, remember? We’ll also explore some other programming related sites and try to solve as much problem as we can. I’ll be posting all the problem I can find online which are worth for beginner to try. I’ll also write about strategy and guideline once I solve them. Remember, this is the part that will make us able to ‘create’ new things. What we were doing up until now was mostly ‘learn the rule and play the game’ thing. But this is different. So, convince yourself to put in hard work here. Even if it doesn’t feel very comfortable.

9. Learn 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.

10. 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.

11. 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.

  1. Build a random quote Machine (FCC Project)
  2. Build a weather app (FCC Projects)
  3. Wikipedia Viewer (FCC Project)
  4. Some other cool stuff using API

12. Learn SASS

SASS is a CSS preprocessor that boosts workflow tremendously. It can save you handful of time and make it far easier to edit and tweak things while doing bigger projects. And now that we have understanding of programming, working knowledge of CSS, I don’t think it will be hard to get SASS down within a short time! But the outcome will be a giant sweet.

13. 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 own personal project.

And even if you 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.

14. Explore the wonderland of JavaScript Library/Frameworks

The modern scenario in JavaScript industry is messy. There’s a ton of different libraries and framework that can be used to accomplish the same output. And then there is argument on which one rocks and which one sucks. But fear not. To be workable in the industry, you need be good at only one of these. And since you have a strong foundation of JavaScript, you can expect to be able to pick up any library/framework in a moderate amount of time.

We won’t listen to anyone who says ‘these one is the best and this one is the worst’. Every tool has its own purpose to fulfill and they provide advantage in getting that thing done. We’ll try out several of the most popular ones like React, Anguler.JS, Vue.JS, Meteor etc. I’ll provide tutorials and resources for you to choose the best one for you.

15. Build a Complete Application

Okay, So we have come a long way! Now we know almost everything that is mandatory for building a fully functional application to run on the web. Why not make one when we can? Build a complete project which later you’ll able to place in your portfolio. Share it with others and ask them for feedback and keep updating your application. Invite real user to use it. A real project is what you’ll learn the most from. We will discuss this final project in an individual post and we’ll share idea that we can build our application on. After you complete your project, you can call yourself a junior developer.

You are a Dev now! Time to celebrate!!

By that time, you are supposed to have a clear idea about what you know well and where you fall short. You’ll improve on things that you feel yourself inferior. You’ll have to keep improving constantly. And once you have confidence, you should start joining with your local community of the industry and connect with other people doing the thing that you wish to do. Talk with them and then start applying for jobs. Don’t be upset at all if you don’t hear from the other side in the beginning. Remember,

“Lady luck favors the one who tries.”

Same applies in this particular area as well.

16. This isn’t the end, This is the beginning!

Now you’re a developer and you know that you still have tons to learn. You also regret for cheating yourself in learning some stuff, but that’s okay. Going back and sharpening the saw never hurts. You also know that to be a great developer, there’s no end point of learning. You’ll feel the urge for learning things like Database, Command Line, App deployment, Node.js and other Back-End programming and a lot other exciting stuff. But for now, we are just beginner and we don’t want to bombard our head with those wired jargons. So, let’s take time to celebrate the amazing work we’ve done and share the happiness with others.

16. If you want to learn also WordPress plugin development…

In this case, I can recommend one of my courses I created on Teachable. Check it out now!

Now…I Need Your Help!

Hope you’ve got a clear idea about what I am trying to do here. But the thing is, I can’t do it alone! Involving other people and learning together is the whole point of all this. If you think it is possible to do amazing things together, if you think it will help you achieve your goal, then please, I urge you, please be with me on this journey. I’ll always look forward to your thoughts, suggestions, and advice. Please share this on Social Network to let others know that you’re embarking on this amazing web development learning journey. Get this message spared so that we can have more and more people in our learning journey. The more we are, The stronger we become!

Let’s create a beautiful future for the world, together!

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in coding

To Top
Grab the largest plugin bundle from CodeCanyon!