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
3.Understanding the meaning of CSS and how it works
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.
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.
- 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
9.Learn Node, ExpressJS, NPM, MongoDB and Deployment
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
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