How to start learning web development? - From Front-end to Back-end

This is the post where I shared my experiences on how to learn full-stack web development with Node.js and MERN stack

How to start learning web development? - From Front-end to Back-end
Photo by Luca Bravo / Unsplash

 Hi there, my name is Mark, a computer science student and an undergraduate researcher. So far, I am starting a new venture with my business partner from the U.S to empower our users to catalyze ideas with AI. But it all started from the day when I began to learn web programming with React. It enables me to have the ability to build prototypes to test out product-market fit. It empowers me to think in a way that helps me to solve problems for my clients with programming and software engineering.

Start from the building you love with front-end development.

 I learned how to design and build my personal website with a front-end library, React.js, which is quite popular these days. With experiences in DOM, UI Kit, and other features like hook and state, it helps me to think in a React way to realize my idea in the brain to the actual website you can browse through the Internet. If you want to learn how to do web development, I would suggest starting from front-end development, which from my experiences, brings me the most joy from it.

 However, there are many ways to build a front-end website nowadays. From React.js to the Vue framework, it can be overwhelming at the start, especially for beginners, to choose a particular stack to learn from. From my personal option, I would start from React library and learn more about the React framework like Next.js to deploy an actual front-end website by yourself. This way helps you understand more about the overall pipeline from end to end in web development (Front-end Part).

 Also, there are a lot of resources to learn from as well. For example, one of the best UI libraries I would like to introduce is Material UI (See the bookmark below).

MUI: The React component library you always wanted
MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.
React – A JavaScript library for building user interfaces
A JavaScript library for building user interfaces
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

Learn to build features with back-end engineering

 However, learning more about back-end development with frameworks like Express.js in JavaScript or Django in Python is also important. Back-end engineering enables you to build customized features and routing to your website. With a back-end server and well-architected architecture, you can even make a profitable side hustle with a platform like InkDrop.

Inkdrop - Note-taking App with Robust Markdown Editor
The Note-Taking App with Robust Markdown Editor

 But it can be difficult from non-CS background to learn back-end development since it involves more computer networking and system architecture. However, I suggest starting with a simple product or side project you want to build. And divide deeper to learn more about the technical stack you need to complete the project. If you still imitate the diverse stack of frameworks to choose from, I suggest you start from the MERN stack, which is the composition of the following technologies.

  • MongoDB (No-SQL Database)
  • Express.js (JavaScript Backend)
  • React.js (Frontend Library)
  • Node.js (JavaScript Runtime)

 And that is the end of this short blog on web development and some of my suggestions for beginners to kick-start their projects. Web development can be hard at first, but it can be a lot of fun after the "break-even point." If you would like to learn more about setting up your first web development repository for your kick-start project, feel free to check out my YouTube video on setting up your React development environment.

 In the end, if you have any ideas for your next web development project, or you would like to ask questions about web development, feel free to join my free Ghost website membership program and leave your comments below. Can't wait to see what you can create with your laptop and, more importantly, your creativity.