I want to be a Web Developer, but where do I start?

The demand for experienced web developers grows steadily as more and more businesses approach an internet presence. This growth in demand makes web developer positions more attractive. You get a better salary and better accommodations at your working place. But becoming an experienced web developer is hard. The web development landscape is broad, and picking up a single technology or programming language is often not good enough. I am a FullStack developer myself. I underwent the very challenges that lay ahead of your journey. My process of becoming a web developer was a grind. I dumped countless hours into learning all web technologies that I came across. It was only years later that I would find out that a few simple rules could have made my journey much shorter and much easier. To teach you, those simple rules will be the subject of this post. Table of Contents What is the difference between Frontend -/ Backend and FullStack Developers? What Web Developer Skillset should you develop? Comparing “T” and “I” shaped Developer Skills Democratization of Software Architecture, how can you stand out? Programming Concepts vs. Technologies How to learn any Technology, fast The Balance of Concept Learning and Practice Listings of Basic and Advanced Concepts & Technologies you should learn Frontend vs. Backend vs. FullStack Developer Photo by on Scott Blake Unsplash There are a plethora of job titles in the field of web development. But to simplify things, here are the three fundamental types of web developers. Frontend Developer Backend Developer FullStack Developer The Frontend Developer Frontend Developers work on the face of the web application, the User Interface. Working as a software developer typically involves working with the holy trinity of web technologies JavaScript, HTML, and CSS. The Backend Developer Backend Developers work on the business logic of the web application. That logic is the “server” part of the application. In most cases, the Frontend of the application communicates with the Backend (the server) through a protocol called HTTP. Backend developers also work with databases such as MySQL or MongoDB. Databases are not reachable through the Frontend (User Interface) directly. Instead, the Frontend must request data through the backend. So, it is also your job as a Backend developer to create that bridge, also called API. API stands for Application Programming Interface and is a term used in programming abroad. You can think of APIs as bridges. They connect two technical systems, in our case the User Interface (Frontend) and Server (Backend). The FullStack Developer FullStack developers combine the skillset of a Front-end and Backend Developer. That is the reason we call them FullStack. They can use the full technology stack from Frontend to Backend. A common misconception is that the FullStack Developer needs to know all technology stacks in web development. But the idea of the FullStack developer is not to know everything, but to know technologies that go into the Frontend and Backend category alike. What type of Web Developer should I become? Here is my take on that. You should become a FullStack developer first, and then you should focus on what you like more Frontend or Backend development. By saying “become a FullStack developer-first”, I mean you should learn the basics of Frontend and Backend development before specializing. Becoming a FullStack developer first has many advantages. Your foundational skills and knowledge reach from the User Interface over the Server to the Database technology stack. You built a solid foundation. You can work on your projects and ideas. Furthermore, you have all the tools that you need to build an app from User Interface to Server. You are autonomous. Potential employers can apply your skills in Frontend and Backend topics alike. That makes you more attractive as an applicant. You are more hireable. You can discuss and analyze problems with Frontend and Backend developers alike. You have better communication skills. Employers can shift you from Backend to Frontend or vice versa if they have a resource exuberance. It is less likely that you get fired when your company needs to cut one Front-end or Backend developer down. You have higher job security. You don’t know now yet whether you prefer to work with Frontend or Backend technologies. Become a FullStack developer first, and you have the chance to explore both sides of web development. You have the chance to explore the entire technology stack. By now, you are excited to become a FullStack developer. So, you go through the internet and learn every technology associated with Frontend and Backend development. And that’s it, you are a FullStack developer, right? No, that would be terribly inefficient. Instead, we will focus on building a “T” shaped web development skillset. Being a “T” Shaped Developer Have you ever heard about T-shaped skills? Having a “T” shaped skillset means that you have a broad understanding of the foundation, but you are highly trained in a sub-category of your profession. Transferring it to web development, the horizontal line in the letter “T” stands for your fundamental FullStack knowledge. Once you have a solid FullStack foundation, you can go ahead and specialize deeper into Frontend or Backend development (the “I” in your “T”). The goal, for now, is to focus on the basics. Don’t bother learning everything about web development, but learn instead something of everything. Being selective with what lessons you learn first boosts your learning progress. The “I” Shaped Developer In contrast, developers with an “I” shaped web development skillset concentrate on Front-end or Backend development right away. These developers often lack foundational knowledge in either the Front-end or Backend department. That makes them less hireable and will give you a competitive edge. But they land a job faster than you, aren’t they? They don’t have to learn all the basics first before they specialize. No, I don’t think so. Getting a solid foundation in web development goes a long way. It enforces your future learning efforts. You spent more time on the basics now and spend less time specializing later. You are not convinced? Then have a look at aspiring and popular technologies like NextJS. Essentially, NextJS is a Front-end technology. But NextJS comes also with a Server and does something we call Server-Side Rendering (the server pre-evaluates JavaScript and sends static content to the client). Sounds confusing? Yes, but only because you have not learned the FullStack basics. ¯_(ツ)_/¯ The gotcha is that our technologies have become increasingly more complex. They are easier to use on the surface. But that’s just because the developers of new technologies do an impressive job of building abstraction layers. Abstraction layers hide implementation details from the user and make the API to a framework or library more accessible. But if you want to understand the technologies that you use, and believe you better do, then you need a broad understanding of the FullStack. Architecture is Not a One-Way Street There is another reason why you should bring skills in both Frontend and Backend development. It is not possible to create separate software architectures (a construction plan for your application) for the Backend and Frontend of a web application. Conceptual decisions that you make in the Frontend affect the Backend and vice versa. — a password reset button in your Login Form (User Interface, Frontend) implies that you have a Backend logic that sends password recovery links to the user E-Mail. And that implies that you save the user's E-Mail in the first place. Example #1: Frontend affects Backend — a dashboard application can only visualize metrics for which your Backend can compute graph data. Computing this data is costly and often exploits the limits of your Backend system capabilities. Example #2: Backend affects Frontend But why should you care? Architectural decisions get done by architects. More and more companies democratize architectural decisions. They let the team make the plan of the application instead of only one or two individuals. And that’s great, that’s an opportunity for an aspiring Junior Developer like you to stand out. Developers that contribute to architectural decisions prove themselves as “problem solvers”. And the whole point of the programming industry is to solve problems. In case your company follows the classical enterprise model of a few people decides the fate of an entire software department. It is still a good idea to learn the basics, so you can transition into an architect role someday. How do I learn new Skills, efficiently? We know already what skill profile you need for the job. Let us now find out how you can learn these skills efficiently. It is difficult to give you an estimate of how long it will take you to land a junior position. That depends on various factors. How much (previous) programming practice do you have. How much time can you dedicate to learning? every day How efficient do you learn? I cannot help you with the first two factors. But I can help you with learning more efficiently. Spoiler alert, excessively binging programming books and Udemy courses is not efficient. Don’t get me wrong, Udemy courses and programming books have their place. But they are a passive way of learning. And less engaging learning efforts yield lesser results. That is especially true for programming. So, we abandon all forms of recorded knowledge in the form of books, online courses, and blog posts? Of course not, how should I get anyone to read my blog posts otherwise? ( ͡° ͜ʖ ͡°) Instead, we will split our future learning efforts into two categories. — theoretical knowledge about the technologies and things we want to build. We get new concepts from books, videos, and blog posts. Concepts — expanding our programmings skills by working on our projects. Practice Learn new Technologies, fast The heart of becoming a good programmer is learning new technologies fast. Programmers live in a fast-paced and ever-changing environment. New technologies appear in a matter of months while existing technologies change. And you need to be on top of that change. Being able to adapt and to will define your career as a developer. self-learn But how do we do that? We code, a lot. We make up projects and built them with the technologies that we want to learn. The truth is, you don’t have to read tutorials, listen to online courses, or complete books about new technologies. Just start with a project and learn on the way. Learning on the way is powerful. It takes the idea or concept of new technology and applies it to real-world things. And the best part is that you have something (your projects) to show to potential employers in the future. This is especially important for junior developers. You have to have a project portfolio with no record of professional working experience. Your project portfolio is a testament to your skill as a developer. But be aware, learning on the way while building your projects does not mean that you open the code editor and plug of the internet connection. You will have to read articles on the internet on “how to do X and Y”. Google is the sharpest tool in a developer's tool belt. But what is then the difference between following an Udemy course and working on your project? It is simple, the first one will teach you technology from A to Z, while the latter will teach exactly what you need to know. And that is precisely the reason it is more efficient to learn by building projects. Learn the Concepts There is a concept behind every technological revolution. You don’t believe me? Have a look at newer JavaScript frameworks like VueJS, ReactJS, and AngularJS. Web frameworks like Ruby on Rails or Django are used to render HTML, CSS, and JavaScript into static templates. And that is still great for certain websites or applications. But it is not so great that we have to make a full page reload (in the browser) to display changes in the user interface. And that is the point where ReactJS, VueJs, and AngularJS shine. The newer JavaScript frameworks introduce a new concept called . And that tips the scale into their favor. Virtual Dom The (Virtual Domain Object Model) copies the real DOM (the state of our HTML page in your browser) into the memory of your JavaScript application. React and Co. can do partial re-renders of your application with the in-memory DOM (virtual DOM). So, you don’t have to make a full page reload (refresh of the entire browser DOM) to change a small part of the User Interface. Virtual DOM Read the [React Virtual DOM Documentation] for more information on that topic. Why did we pick the Virtual DOM example? The point is that you barely transform a technology landscape like Front-end development with little improvements. Revolutions in technology always come with concept changes that yield powerful benefits. The Virtual DOM concept brought such a powerful benefit along. It improved the responsiveness of websites drastically. The bottom line, concepts matter, and you should learn concepts. Keep the Balance But how much time should you spend working on your projects (practice) and how much time on learning concepts? This is a subjective debate that depends greatly on your personal goals. I tend to keep a 60%: 40% balance. That is 60% practice and 40% learning concepts. But I am at another point in my career than you. I suggest you spend more time in practice and less on concept learning until you reached some level of proficiency. Summary And this concludes the conceptual part of this blog post. We learned that a “T” — shaped skillset for developers is very desirable. You should master the fundamentals of web development before concentrating on Front-end or Backend development. We also saw that you can divide the programming learning journey into two parts. Learning the concepts Practice — working on projects While learning, it is important to keep a healthy ratio between learning the concepts and practicing. That ratio is subjective to your experience level and goals. But in general, you should practice more than you learn concepts. The next section includes links and proposals for technologies and concepts that are worth learning. These suggestions derive from my own experience as a FullStack Developer. Those are the things that I use on a daily basis. But be aware that this is by no means a complete listing. I can only give you suggestions based on my journey. But it is important that you customise your learning path once you grasped the basics. Perhaps you have suggestions on your own. What should we add to the link list, what is worth learning for a newcomer? Concepts Protocols 🔎 An overview of HTTP — MDN Web Docs SSL-/TLS Encryption Layer & HTTPS 🔎 What is HTTPS? — CloudFlare 🔎 Transport Layer Security — MDN Web Docs 🔎 How does public-key encryption work? — CloudFlare 🔎 HTML Basics — MDN Web Docs Software Architecture 🔎 Client - Server Model — Wikipedia 🔎 What is an API? — Redhat 🔎 Representational State Transfer, REST — Wikipedia 🔎 MVC - Framework - Introduction — tutorialspoint 🔎 Model - view - viewmodel — Wikipedia 🔎 Model - view - presenter — Wikipedia 🔎 Flux Pattern - Facebook 🔎 Microservice Architecture — microservices.io 🔎 Client — Side vs Server — Side Rendering — freecodecamp.org 🔎 What is a static site generator? — cloudflare Data Services 🔎 Relational Databases — IBM Cloud 🔎 What is a Document Database? — MongoDB 🔎 Key - Value Database — Wikipedia 🔎 What is Time Series Data? — Influxdata.com Authentication & Authorisation 🔎 Authentication vs. Authorisation — Auth0 🔎 What is Token - Based Authentication? — okta 🔎 Introduction to JSON Web Tokens — jwt.io 🔎 Lightweight Directory Access Protocol (LDAP) — Wikipedia 🔎 What the heck is OAuth? — okta Languages 🔎 JSON Introduction — w3shools 🔎 CSS introduction — w3shools Miscellaneous 🔎 What is Git? — w3shools 🔎 What is Scrum? — scrum.org Hosting 🔎 Scaling Horizontally vs. Vertically — section.io 🔎 What is a Reverse Proxy - nginx 🔎 What is a Load Balancer - citrix Technologies Frontend 💪 JavaScript — w3shools 💪 ReactJS — reactjs.org 💪 CSS — w3shools 💪 SCSS — sass-lang.com 💪 Bootstrap — getbootstrap.com 💪 Redux — reduxjs.org 💪 NextJS — nextjs.org Backend 💪 ExpressJS — expressjs.com 💪 Protobuf — developers.google.com 💪 GRPC — grpc.io 💪 GraphQL — graphql.org DataBases 💪 PostgreSQL — postgresql.org 💪 Redis — redis.io 💪 MongoDB — mongodb.com 💪 Prometheus — prometheus.io Find me On Twitter @gdennci On LinkedIn dennis-groß On Ghost https://gdenn.ghost.io First Published here