Step by step guide to build a full stack app even as a beginner

Step by step guide to build a full stack app even as a beginner

Table of contents

At the time I started my career as a web developer in April 2020, I didn't know what a full stack (dynamic) website meant. In fact, I believed that you could do anything with only HTML and CSS. But I was wrong! However, When I discovered the differences between a static and a full stack website, I was dazzled with the amount of things I didn't yet know about web development.

A Static Website is a website displayed in a web browser exactly as it is stored by the developer. It contains web pages with fixed content coded in HTML, CSS and stored on a web server. It does not change, it stays the same, or "static" for every viewer of the site.

A full stack (dynamic) website is a website that requires web programming and database design. A dynamic website contains information and content that changes, depending on factors such as the viewer of the site, etc.

To create a full stack website you essential need to have knowledge of both frontend and backend web development. However, I present the path I recommend to learn how to build a full stack website in the shortest period of time as a beginner:

1.Understanding what a website is and how it works

A website (also written as web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Notable examples are bonarhyme.com, hashnode.com, and twitter.com.
Read more on Wikipedia

2.Understanding the meaning of HTML and how it works

The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It is one of the most basic building blocks of every website, so it's crucial to learn if you want to have a career in web development. Read more on freecodecamp

Learn about HTML and earn a certificate on freecodecamp

Learn more about HTML tags on w3schools

3.Understanding the meaning of CSS and how it works

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Learn about CSS and earn a certificate on freecodecamp

Learn more about CSS on w3schools

4.Practice your knowledge of HTML and CSS

To truly show that you have learnt a particular skill, you have to build something with it. Hence, I recommend you build a simple static website with the new skills you have learnt.

I suggest you checkout this simple tasks on freecodecamp:

You can also checkout some tutorials on youtube. For example this: Starbucks landing page clone

5.Learn about version control, git, github and hosting on vercel

Version control, also known as source control, is the practice of tracking and managing changes to software code. Version control systems are software tools that help software teams manage changes to source code over time. Learn more about version control

Git is a free and open-source version control system, originally created by Linus Torvalds in 2005. Unlike older centralized version control systems such as SVN and CVS, Git is distributed: every developer has the full history of their code repository locally. This makes the initial clone of the repository slower, but subsequent operations such as commit, blame, diff, merge, and log dramatically faster. Learn more about git

GitHub is a web-based interface that uses Git, the open source version control software that lets multiple people make separate changes to web pages at the same time. As Carpenter notes, because it allows for real-time collaboration, GitHub encourages teams to work together to build and edit their site content. Learn more about github

Vercel is a platform for static sites and frontend frameworks, built to integrate with your headless content, commerce, or database. Learn how to host static sites on vercel

You can check other platforms such as Netlify, Heroku, etc.

6.Learn about JavaScript

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area. Learn Javascript on freecodecamp

7.Practice your knowledge of JavaScript

Test and enhance your knowledge of JavaScript by completing these tasks on freecodecamp.

8.Learn Front-end Frameworks

A Front-end Framework is a platform/tool to build the front end of your website. Bootsrap and tailwind are used for styling while ReactJS and VueJs are used for building user interfaces. You can pick either ReactJS or VueJs.

  • Bootstrap: Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. Learn Bootstrap by build a Landing page
  • Tailwind CSS: Tailwind CSS is a utility-first framework for rapidly building custom designs. It is different from Bootstrap because it doesn't come with prebuilt components. Learn TailwindCSS

-ReactJS: React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. Learn ReactJS

-VueJS: Vue.js is an open-source model–view–view model front end JavaScript framework for building user interfaces and single-page applications. Learn Vue Js

9.Learn Node, ExpressJS, NPM, MongoDB and Deployment

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Learn NodeJS and ExpressJs

NPM is a package manager for Node.js packages, or modules if you like. Learn NPM

MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. Learn MongoDB

Deployments can be done using Hosting sites like Heroku, Vercel, AWS and Netlify. Learn how to deploy using netlify and heroku

Remarks!

After Learning the things mentioned above, you will be ripe to build your own full stack website.

Below I list out 2 full stack projects you can code along with:

Follow me on twitter Bonaventure Chukwudi

Support me on patreon