DAWID SIBIŃSKI CODEJOURNEY.

NET

How to become
.NET full stack
web developer
in 2023
 Hi
there!
WELCOME TO YOUR GUIDE TO BECOMING
.NET FULL STACK WEB DEVELOPER IN 2023
I’m Dawid and I'm so excited you decided to get on that train and
become an independent, full stack developer, leveraging the .NET
skills you already have. That’s exactly what I went through.

Back in 2019, I’ve been working as a .NET backend developer for

4 years. I knew how to build a backend application talking to an SQL
Server database. I could also create a desktop WinForms/WPF
application. However, the terms like webpack, npm, node, React,
JavaScript, TypeScript were quite mysterious to me at that time. I only
heard them being mentioned somewhere in the corporate kitchen
or at conferences 😉
4 years later, after thousands of hours of learning and struggling, I can
say that I am now an independent full stack developer. I work fully
remotely while traveling the world. However, this transition was not an
easy one and often confusing. That’s why I created this guide.
I want you to make your transition from a backend developer to full
stack smooth and well-planned.

In order to become a full stack web developer as soon as possible,

I encourage you to keep .NET and C# in your toolbox. Why learn
something new while you can leverage your existing skills? .NET is
quite robust ecosystem and I think it’s wise sticking to it. Especially if
you already have experience working with this framework.

Each step of this guide ends with a list of resources I recommend you
to follow, step-by-step. Next, there are questions you should be able
to answer. You can also treat them as the most popular interview
questions that you might be asked when applying for a .NET full stack
web developer position.

Let’s dive in! 💪

1. Learn basics of HTTP and REST
One of the things that will follow you along your whole web development journey is
HTTP. This is what today’s Internet is based on. HTTP not only provides a security
on the web, but also structures how the APIs are built. Learn the basics of the
protocol.

Next, read on what REST and RESTful APIs are.

As soon as you know the basics, try to debug some websites online using your
browser's built-in developer tools. See how network requests flow from the
website to the server. See from where the website's resources are fetched.

Learn from:
1 MDN HTTP documentation
https://developer.mozilla.org/en-US/docs/Web/HTTP

2 RESTful .NET API tutorial

https://restfulapi.net

3 Inspect network activity - Chrome Developers

https://developer.chrome.com/docs/devtools/network

You should know:

what is REST?
what are GET, POST, PUT and DELETE?
the difference between HTTP and HTTPS
what is HTTP client?
what is HTTP server?
what does the HTTP 200 response status code mean?
when to return HTTP 400 (Bad Request) vs HTTP 500 (Internal Server Error)?
an example of a RESTful API
how to check an HTTP request response in Google Chrome?
2. Create and understand
ASP.NET Web Api application
Simply go on and create an ASP.NET Web API application from a template in Visual
Studio. For starters, use ASP.NET Core Web API template with the newest .NET
framework version. When creating the project, select Configure for HTTPS and Use
controllers options.

Explore the folders and files in the project. Next, run the application. You will see
a Swagger page. Swagger is a kind of API explorer. You can use it to play with the
exposed API.

Now, use the HTTP and network requests' debugging knowledge you already have
to examine how the request are sent to your API.

Place a breakpoint in WeatherForecastController's Get action. Get to the point

when the breakpoint is hit after you send a request from the Swagger page.
Play more with the app, add new actions/controllers, try to break stuff😉

Learn from:
1 Tutorial: Create a web API with ASP.NET Core
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?
view=aspnetcore-7.0&tabs=visual-studio

You should know:

what is a controller?
how do you mark ASP.NET controller’s actions with HTTP verbs?
how does routing work in ASP.NET Web API?
if I send a GET request to https://localhost:7715/Users/All, which method and
in which class (C#) will be called?
how to check how much time an HTTP request took?
what is a good (fast enough) time an HTTP request to the API should take?
how do you make sure Swagger page is only used in development?
3. Get familiar with VS Code
According to Stack Overflow Developer Survey 2023, Visual Studio Code is the
most popular code editor today. From the beginning of its existence, it’s been built
to support web development. VS Code is built mostly with TypeScript, which
makes is a perfect editor for working with this language. Visual Studio Code is very
lightweight, especially compared to complex IDEs like Visual Studio or Rider. It's
also completely free to use and works on every platform. You can even use it
in your web browser.

I suggest you get familiar with this editor from the very beginning of your full stack
developer’s journey. Long story short, it doesn’t make sense to use a C# IDE (like
VS or Rider) for frontend development. Having your frontend code in a separate
editor allows you to mentally separate concerns when working on a project.
🙂
Just take my word for it. Even better - simply try it

For C# development, stay with your favorite IDE (e.g. Visual Studio or Rider).
While .NET development is easily possible in VS Code, in my opinion the
fully-featured IDEs are more convenient. Plus, we stick to the separation of
concerns mentioned before.

Learn from:
1 Visual Studio Code home website
https://code.visualstudio.com

2 Getting Started with Visual Studio Code - YouTube playlist

https://youtube.com/playlist?list=PLj6YeMhvp2S5UgiQnBfvD7XgOMKs3O_G6

3 10 VS Code Extensions I Couldn’t Live Without - CodeJourney

https://www.codejourney.net/10-vs-code-extensions-i-couldnt-live-without

You should know:

why would you use VS Code for JavaScript/TypeScript programming?
list a few VS Code extensions that might be helpful in your everyday work
the most useful shortcuts for smooth VS Code development
4. Learn basics of HTML and CSS
HTML and CSS will follow you for a long time 🙂These two are the foundation of
the web. If you ever heard of them or even tried to build a website using pure
HTML/CSS, you may be surprised why you would need to know these
technologies as .NET full stack web developer.

HTML and CSS are not going anywhere. When using a web development
framework like React or Angular, the end visual effect is always HTML styled with
CSS (and made interactive with JavaScript, but we'll come to this later). Frontend
frameworks are just made for developers to make our lives easier.

You don't need to be an HTML or CSS expert at this stage. Learn the basics: what
are the HTML tags, what are the attributes, IDs and classes. How to connect
these HTML elements to CSS styles?

Next, read about the most popular CSS frameworks like Bootstrap and Tailwind.

Learn from:
1 HTML tutorial - W3 Schools
https://www.w3schools.com/html

2 CSS tutorial - W3 Schools

https://www.w3schools.com/css

3 Get started with Bootstrap

https://getbootstrap.com/docs/5.3/getting-started/introduction

4 Get started with Tailwind CSS

https://tailwindcss.com/docs/installation

You should know:

what are the tags and attributes in HTML?
different ways to style an HTML element
what are the 3 most popular CSS frameworks?
why do we need CSS frameworks?
what is Flexbox?
what's the difference between div and span?
what's the difference between <b> and <strong> tags?
is it worth testing a webpage in different web browsers?
5. Start coding with JavaScript
You might have expected to learn TypeScript at this stage. Maybe you heard that
TypeScript is very popular today and most web developers tend to use it over
JavaScript.

This is however not entirely true. Soon, you will see why. For now, I can only tell
you that in order to be a good TypeScript developer, you need to know
JavaScript.

At this stage of your full stack journey, forget about TypeScript. Focus on
JavaScript.

Learn the basics of the language. Direct your attention to the differences
between C# and JS. Add interactivity to the HTML pages by embedding some
JavaScript there.

Learn from:
1 The Complete JavaScript Course - Udemy
https://www.udemy.com/course/the-complete-javascript-course
Free alternative: MDN JavaScript guide
2 10 Most Shocking JavaScript Features for C# Developers - CodeJourney
https://www.codejourney.net/10-most-shocking-javascript-features-for-csharp-
developers

You should know:

what does it mean that JavaScript is a dynamically-typed language? May it be
a source of some problems?
what is hoisting?
the difference between const and let
why should var be avoided?
the difference between == and === operators
what are falsy values in JavaScript?
what are Higher-Order Functions?
5 differences between C# and JavaScript
what is a closure in JavaScript?
6. Discover TypeScript
As you already know JavaScript, you might have started noticing its flaws.
Especially coming from a strongly-typed language like C#. That's where
TypeScript comes into the game. It has been invented to be a remedy to
JavaScript's chaos😀
TypeScript is a superset of JavaScript. In other words, any JavaScript code works
in TypeScript. What's more, TypeScript is present only to developers. You
basically take your JavaScript code and add types to it. However, those types are
only there to help you in development. When your application is deployed and
executed in the web browser, you will not see any types there. Only pure
JavaScript. That's how TypeScript works in a nutshell.

That's also why it's very important to know JavaScript first. Programming in
TypeScript is basically writing JavaScript with types annotations.

As soon as you learn TypeScript, I suggest you to always use it. Never go with
pure JavaScript anymore. I think you'll see the obvious benefits yourself.

Learn from:
1 The TypeScript Handbook
https://www.typescriptlang.org/docs/handbook/intro.html

2 Is it worth migrating to TypeScript? - CodeJourney

https://www.codejourney.net/is-it-worth-migrating-to-typescript

You should know:

what does TypeScript compile to?
give an example when TypeScript types system might fail (i.e. even you
defined some expected types, a different actual type will come, and it will not
be detected at runtime)
can you use JavaScript and TypeScript in the same web application?
how does types narrowing work in TypeScript?
what do Omit and Pick do?
the difference between an interface and type in TypeScript
will you choose TypeScript for working with your next web application? Why?
7. Make sure you know git enough
Maybe you have already worked with git and this step is obvious to you. It wasn't
for me when I started my web development journey.

Git is very popular amongst full stack developers. Almost everyone hosts their
code in GitHub nowadays.

If you apply for a full stack position, you will most probably cooperate in a git
repository. Make sure that you feel comfortable with git, so it doesn't block your
cooperation with fellow developers.

Fortunately, to be able to cooperate smoothly, you don't need to be a git expert.

However, if you want to work on your own or lead a team of developers, a bit
more in-depth knowledge might be useful.

Learn from:
1 Git - introductory videos
https://git-scm.com/videos

2 Learn Git Branching - interactive tutorial

https://learngitbranching.js.org

3 Git Book
https://git-scm.com/book/en/v2

You should know:

how to create a new branch using git command line?
what is git stash, and when can it be useful?
the difference between merge and rebase
when working on a feature branch shared with few other developers, is it
better to, from time to time, rebase with the base branch or merge the base
branch to your feature branch? Why?
what is a remote in git?
how to prepare for working offline when the team uses git repository?
cons and pros of using git CLI vs graphical git tools
8. Find your project idea
I'm a huge fan of learning by doing. You can read hundreds of tutorials, watch
a ton of videos on how to program, but creating your own application will move
you forward 100 times faster.
Our goal at this stage is to find an idea for a project you will build. However, we
don't want to spend a lot of time here. Let me give you some tips on how to get
started.

Maybe you have something in your everyday life (or work) that frustrates you, and
you would love to have it solved or automated? Like an Excel sheet you fill
manually, but would love to have an app for it? This could be your project idea.
The advantage here is that it will solve your actual problem, so you will be auto-
motivated to work on it.

However, if nothing comes to your mind, don't worry. Simply take something that
already exists and copy it. Don't spend too much time thinking about the idea
or a design for the app. Literally copy something that already exists. In the
resources below, I'm linking a few resources that could be your inspirations.

Remember: you can even build a simple application that lists some dummy stuff,
allows seeing its details etc. Nothing fancy. Just pick up your idea and get going.

Learn from:
1 App ideas collection
https://github.com/florinpop17/app-ideas

2 35 App Ideas For Beginners

https://shoutem.com/blog/app-ideas-for-beginners

3 Dummy JSON - fake REST API of JSON data

https://dummyjson.com/docs

You should know:

what are you going to build?
5 features of the app you are going to build
where will you store your source code?
how will you deploy your app, so it’s publicly available?
which database will you use?
how will your UI look like (remember: you can copy something existing!)
9. Choose your frontend framework
The goal is for you to become a .NET full stack web developer. At this point, you
should choose your frontend framework.

You have probably heard about Blazor, which seems like a nice solution for C#
developers who want to start doing web frontend development. However, I'll
straightaway encourage you to not go this way. Blazor is nice, and I even know
people who built robust production apps with it, but it's still quite immature as for
web development. To me, Blazor is a kind of "workaround" for doing web
development. I think it's a great solution for someone who really doesn't want to
dive more deeply into JavaScript, which is a basis of today's web applications.
But you have already done that, right? 🙂
I will be straight now: I suggest you to go with React, which is still the most widely
used web development framework. There are new players in the game, like Svelte
and Solid, but React has strong foundations and a lot of learning materials online.
What's more, you will find a lot of helpful materials for React on my blog🙂
As a final thought, remember that framework is only a tool. Once you grasp the
general concepts like component and state, you will be fine switching frameworks
to your liking.

Learn from:
1 Top 10 best frontend frameworks in 2023
https://www.imaginarycloud.com/blog/best-frontend-frameworks

2 React.dev documentation and tutorials

https://react.dev/learn

You should know:

what are the most popular web frontend frameworks today?
the difference between React and Angular
what is a component?
the difference between class and function components in React
should your components be classes or functions? Why?
what are props and state in React?
what is JSX?
how does React make sure that no unnecessary renders of a component
take place?
how do you set up a new React application?
10. Demystify web dev terms
JavaScript's development ecosystem might be overwhelming. I remember working
in a corporation office and only hearing about these weird terms in the kitchen.
Webpack, npm, yarn, bundles, packages.json... One guy once told a story on how
he spent the whole night fighting to configure webpack. What are they talking
about? 🤪
Before you dive into building your project, search for those terms. Google.
YouTube. It's all there. Just demystify them one by one.

If there's anything you have ever heard about web development, but don't really
know what that is, it's time to find out. Don't let frontend development make you
feel overwhelmed from the very beginning.

In the Questions section below, I'm trying to point out the most mysterious things
that were completely new to me when I started with web development. Avoid
staying in the dark like I was and discover them right now, before you immerse
🙂
yourself in coding

Learn from:
1 Webpack concepts
https://webpack.js.org/concepts

2 Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack

https://www.youtube.com/watch?v=5IG4UmULyoA

3 Webpack 5 Crash Course

https://www.youtube.com/watch?v=IZGNcSuwBZs

4 Google, YouTube
Simply Google or search on YouTube for any terms you still don't know 🙂
You should know:
what is npm? how is it different from yarn?
what’s the difference between npm and Nuget?
what are package.json and package-lock.json files?
what happens when you execute npm install?
can you delete node_modules folder?
should node_modules folder be checked in to source control?
what is webpack?
why is webpack's configuration so complex?
list 3 alternatives to webpack
what is a JavaScript bundle?
11. Build your frontend app using
built-in state management features
Here we are - you're ready to start creating your first frontend application🎉
For this moment, forget about the backend. Forget about the data, authorization
and authentication. Our goal is to get you writing frontend code as soon as
possible.

For the app, you will need some data to work with. You can use a service like
https://dummyjson.com or store your sample data in JSON files in the project.

As this stage, I recommend you to build a simple app composed of a list of items
(grid/table) and a possibility to view and modify an individual item's details (edit
form).

It's very important that you build your first frontend application using as many blocks
built-in the framework as possible. Try not to resort to external libraries, especially
when it comes to state management.

If you chose React, build your app with useState and useEffect hooks for managing
the state of your app's components. React docs should be more than enough here.

Learn from:
1 State: A Component's Memory - React Docs
https://react.dev/learn/state-a-components-memory

2 Tutorial: Tic-Tac-Toe - React Docs

https://react.dev/learn/tutorial-tic-tac-toe

3 Fetching data with effects - React Docs

https://react.dev/reference/react/useEffect#fetching-data-with-effects

You should know:

what is a hook in React?
what is a useState hook?
when does a React component re-render?
how does React know what to re-render?
the difference between state and props in React
how to debug React components?
what is the second parameter of useEffect hook?
what is the return value from a callback function provided to useEffect hook?
12. Refactor your frontend app to
use a state management library
Frontend frameworks like React and Angular don't force you to manage state in any
given way. The framework provides built-in mechanisms which you used when
building your first web app, but it's often insufficient.

As soon as your app gets bigger and packed with more features, you will
encounter issues with state management. Your data will get much more complex.
Most probably there will also be some logic associated with data manipulation,
which doesn't really fit in the components themselves.

The solution is a state management library. It's sometimes even more of a state
management philosophy than only a new npm package you will need to
understand.

Assuming you went with React, rebuild your app to use a state management library.
I recommend you to get familiar with Redux, which is often asked about at job
interviews, but then switch to MobX. The latter is much simpler and I recommend
you to develop your first apps with MobX.

Learn from:
1 Redux Tutorial - Beginner to Advanced - FreeCodeCamp
https://www.youtube.com/watch?v=zrs7u6bdbUw

2 Redux Saga vs Redux Toolkit Query - Jack Herrington

https://www.youtube.com/watch?v=0W4SdogReDg

3 Ten minute introduction to MobX and React

https://mobx.js.org/getting-started

You should know:

what is Redux?
what is Redux-Saga?
what is Flux, and how does it differ from Redux?
the difference between Flux and MVC
describe what are the observer and observable in MobX
what's the advantage of using an external state management approach/library?
what are the downsides of using an external state management library?
why would you choose MobX over Redux for your React application?
if MobX is used in a React app, can useState and useEffect still be used?
If yes, in which cases would it be preferred?
13. Create .NET Web API for your
frontend app
It's time to connect the dots. Enough playing with dummy data - your current task
is to create the backend for your web application.

Create a .NET Web API project which will serve as an HTTP API for your frontend
app.

Use your existing .NET skills and knowledge to build this backend solution,
including data storage (database and database framework of your choice).
You don't need to worry about security (authentication and authorization) for now.

I suggest you to ignore tutorials which use .NET + React Visual Studio templates
for now. These templates include too much code and too many details, which
you won't understand at first. It's better to build the API separately for now and
make your React app talk to it, as it would be an external HTTP API.

Learn from:
1 Intro to Web API in .NET 6 - Tim Corey
https://www.youtube.com/watch?v=87oOF9Ve-KA

2 Your existing .NET skills 🙂

You should know:

how to debug a Save button click in a web application from the click’s callback
on the client, through getting the data from the database until the result is
returned to the browser? Describe, step by step, which tools you would use
for that and how. For instance, how will you know which controller's action is
hit after clicking the Save button?
how to debug an unexpected HTTP 401 response
how to debug an unexpected HTTP 500 response
the popular tools for testing / playing with REST APIs
14. Learn authentication & authorization
Until now, we didn't want to get you blocked by security of your web application.
However, your data obviously can't freely flow between the frontend application
and API. It must be properly secured.

At this stage, it's time for you to learn authentication and authorization.
To begin with, read about good practices in web applications security. Read about
OAuth, OpenID, security tokens, bearer tokens, refresh tokens, HTTPS headers and
cookies.

In the end, add login and registration pages to your web application. The goal is that
you will have to log in in order to even see your actual website (or register to create
a new user account). Anyone who is not authorized should not be able to get any
data from your API (HTTP 401 should be returned to unauthorized clients).

Also, your login data (session) should be retained, i.e. you should still be logged in
after closing and opening the web browser.

Learn from:
1 Authentication and Authorization in ASP.NET Web API - Microsoft Docs
https://learn.microsoft.com/en-us/aspnet/web-
api/overview/security/authentication-and-authorization-in-aspnet-web-api
2 IdentityServer Quickstarts - Duende Documentation
https://docs.duendesoftware.com/identityserver/v6/quickstarts

You should know:

what is a Bearer token?
what happens when the user clicks the login button in a web app using OAuth
and OpenID (e.g. IdentityServer)?
what is OAuth?
what is OpenID Connect (OIDC)?
the difference between authentication and authorization
what is a refresh token, and why would we need one?
why would you use IdentityServer over .NET's built-in mechanisms
for managing tokens?
can IdentityServer be used for free in your project?
15. Deploy your app to the cloud
In order to be an independent .NET full stack web developer, you need to know
how the cloud works.

At this stage, you should deploy your application to AWS or Azure. It would be
perfect if you set up a CI/CD flow with something like GitHub Actions. Meaning that
your application will be automatically re-deployed when a commit is made to your
git repository.

For now, I recommend you to get familiar with Microsoft Azure. It's obviously the
most popular cloud within .NET world. The concepts are similar for other cloud
providers.

Learn from:
1 DevOps for ASP.NET Core Developers - eBook
https://dotnet.microsoft.com/en-us/download/e-book/aspnet-azure-
devops/pdf

2 How to Deploy React App using Azure Static Web Apps

https://www.geeksforgeeks.org/how-to-deploy-react-app-using-azure-static-
web-apps

You should know:

what is Azure App Service?
how to configure automatic Azure deployment of an ASP.NET API application
after a commit in GitHub?
list some differences between Azure DevOps and GitHub Actions
why is it important to use CI/CD?
16. Dive deeper
In all the previous steps to become .NET full stack web developer, I deliberately
suggested you to ignore some aspects like security or testing. In my opinion, it's
better to understand the big picture as quickly as possible and dive deeper later.

This time to dive deeper has just come. As you progress with building full stack
web applications, you will notice that your code evolves. Every component you
create will be a bit better. Each next TypeScript file will contain better typings.
With time, you will start using more sophisticated features. However, it's OK to start
simple. Don't overcomplicate stuff, especially at the beginning - it may block you
moving forward.

I'm pretty sure that if you followed the path proposed in this roadmap, you now feel
quite confident about building full stack web apps with .NET and React. You should
have a feeling of where is what in this ecosystem.

As the next step, I suggest you learn frontend testing - both component-level and
E2E. Next, master what you already know. I'm pretty sure it will all come naturally.

I'm linking some of my favorite resources below.

Learn from:
1 React Component Testing - Cypress Documentation
https://docs.cypress.io/guides/component-testing/react/overview

2 Writing your first E2E Test - Cypress Documentation

https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-
end-test

3 Zod - Introduction
https://zod.dev/?id=introduction

4 Bulletproof React - React good practices set

https://github.com/alan2207/bulletproof-react

5 useHooks - The React Hooks Library

https://usehooks.com

6 CodeJourney - your .NET full stack web developer's guide

https://codejourney.net

You should know:

what's the next thing you are going to build? 🙂
 BECOME .NET FULL STACK
WEB DEVELOPER IN 2023

Want more stuff like this?

CodeJourney.net
Follow the blog and newsletter for more on .NET full stack web development

SEE MORE ON THE BLOG