DEV Community

Cover image for Transitioning From the Frontend to Full Stack Web Development
Alvin 💻
Alvin 💻

Posted on

1

Transitioning From the Frontend to Full Stack Web Development

I've been learning front-end web development for a while now. My stack now consists of four primary technologies: HTML, CSS, JavaScript, and React. On top of that, I also work with Sass and Tailwind CSS and, in a previous life, Boostrap.

However, while my front-end development skills can take me far, learning about the backend can help me go even further. That's why I started learning server-side development using Node and the Express framework. In other words, I'm going full stack.

I started learning Node using Maximilian Schwarzmüller's NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno). I haven't finished yet, but the course is pretty thorough, starting with the basics and building from there. On top of that, I've also been reading numerous articles because I learn best by combining videos and articles/books.

Building projects is just as important, so I took a simple 2-hour course on YouTube from JS Mastery that builds an AI image generator web app using the MERN stack (MongoDB, Express, React.js, and Node). The course has a good overview of creating real-world full-stack apps from scratch to deployment.

With this knowledge, I'm currently building a URL shortener, part of Frontend Mentor challenges. You can check out the challenge on Frontend Mentor and give it a try if you want.

However, since I'm learning full stack, I want to build a backend from scratch and an API that shortens URLs (instead of using available ones). You can check out the project's progress on my GitHub.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series