Web Development Bootcamp

Week 1: Understanding Web Development - Roadmap

Here, you will find brief descriptions of the components that make up the branch of web development, to ensure that you understand the overall flow of web development and get a glimpse of what you'll be learning.

Frontend

The frontend refers to the user interface or and the user experience of the application. That means it is the part of the program that users directly interact with. Moreover, it is the part that is responsible for presenting data and functionality in an accessible and user-friendly way. The technologies that are used are HTML (HyperText Markup Language), which is used for defining the structure of the page, CSS (Cascading Styles Sheets), which will aid you in styling and developing the layout of the said structure, and JavaScript, which will add the interactivity and functionality to your application.
Backend

The backend part refers to anything that happens behind-the-scenes of your application. This part is responsible for ensuring the management and processing of data, interactions with external services and other server-side operations. Read this article to get a quick overview of backend development, and explore upon concepts such as the server and some programming languages that can be used for backend development.
Database

Databases are where you actually organize and store the information you use on your application. This information could be user data, such as names and emails, blog posts, product details or anything else that your site might need. When anyone uses your application, it will often envole creating, reading, updating, and deleting ( CRUD ) information. All this information will be saved in tables, each having rows and columns. For example, imagine a "Users" table with rows for each user, and columns for their names, emails etc.

Week 2: Essential HTML tags

We're going to be starting out with HTML. HTML pages are the very base on which web applications are built, hence the foundation of learning web development. Essential HTML tags are fundamental elements for structuring a web document, ensuring proper rendering and functionality across browsers and devices.

DOCTYPE tag

The DOCTYPE tag is the very first tag that's used in an HTML page, so, in order to better understand the syntax of an HTML page, you can start by researching this one tag.
HTML tag

The HTML tag is also a highly important tag that needs to be added at all times in the HTML page. You only need to focus on the HTML part of this article.
Head tag

The head tag is another element that provides our HTML file with some additional structure.
Body tag

The body tag is the last that is used standardly in every HTML file, thus you should know a bit about what it does as well.

Week 3: Other HTML tags

These HTML tags aren't necessarily compulsory to add in your document, but they're what actually makes up your markup and give you the chance to customize it the way you see fit.

Headings

Heading tags are widely used in HTML pages. They are used to define the structure and hierarchy of content on a web page and serve as a way to organize and categorize information, making it more accessible and understandable for both users and search engines.
Button

The button tag creates interactive buttons for user input and form submission on web pages.
Lists

List tags provide list structure for displaying items sequentially, without order, or in term-explanation pairs.
Forms

Forms are made up of multiple elements, all included in this article. Forms are used for data submission to servers. They're crucial for various web-based applications, from search bars to contact forms.
Tables

Tables are used to organize and display data in rows and columns, facilitating the presentation of information and enhancing the structure of web content.
HTML tags

This is a comprehensive guide to HTML tags. You'll also find some you've already read about more thoroughly if you're following this checklist in order. Consider this a sheet you can refer back to whenever you need to.

Week 4: CSS

CSS is another basic web development technology, providing web applications with styling. It will help you create attractive designs, thus enhancing User Experience.

Week 5: JavaScript

Javascript is the main language used when it comes to web development, which makes it a fundamental language to learn if you wish to build web applications.

Week 6 - 8: Interesting projects using HTML, CSS and JavaScript

Here are some inspiring projects that you can make with what you've learned so far! Go ahead and choose a few in order to get a good sense of how to use HTML, CSS and JavaScript together.

Week 9: Version Control Software - Git

Since we've been developing so many projects, it is only natural that we begin to learn other means of storing our code.

Week 10: Frontend JavaScript Frameworks / Libraries - React, Angular, Vue

This section is not to say that the frontend can't be done on vanilla JS, but using a frontend framework abstracts some of the intricacies of javaScript away, therefore making your work as a developer much easier. You DO NOT have to learn all frameworks. Simply pick one and stick with it. The most popular one at the moment is React.

Functional programming

Functional programming is a concept widely implemented by frontend JavaScript frameworks, so it is great to learn a bit more about it before delving in.

Basics of React

This article covers much of what you need in order to get started on your first simple React app.
React Hooks

React Hooks are another crucial concept to learn if you wish to use React to develop projects. For example, from the above article, we used a hook: useState. However, there are many more hooks that can help us do several other actions, such as: useEffect, that responds reactively (pun intended) to any state changes in your code, or even optimizing hooks, such as useMemo or useCallback. This is definitely a subject worth delving in if you want to work with React.
React Routing

React Routing brings a bit of backend logic into the frontend, by allowing developers to create multi-page interfaces only using the frontend.
Angular

Angular is a frontend framework for building dynamic web applications. It is developed by Google and enables developers to build applications, minimizing the need for manual DOM manipulation. Here is a guide on how you can install Angular on Ubuntu.
Vue

If you'd prefer to get started with Vue, or you have a particular project that you feel would be easier to implement using Vue, worry not! Here is a quick introduction to Vue to get you started.

Week 11 - 12: Backend JavaScript Framework - Node.js (Express)

This is the section for learning a JavaScript backend framework. For the sake of this curriculum, you should either choose a JavaScript framework, or a Python framework (next section).

Introduction to Node.js

Here is an introduction to Node.js , so that you can install it and understand what it actually represents.

Creating a simple web app

Here is a tutorial you can use to set up a really simple web server for the first time using Node.js.
Node.js Routing

Node Routing is basically the process of determining how an HTML request is supposed to be handled based on the URL and HTTP method. This process is simplified by a lot if you use a framework such as Express.js.
Creating an API using Node.js

Creating a web API is the next step in your learning journey that is worth taking, for this will often come up in projects if you continue working with Node.js
Express. Express Routing

Express is a framework built on top of Node, that abstracts some concepts in Node, making them easier to code using Express. One example that we mentioned earlier was routing. Read this article to find out how to set up an Express app and utilize Express routing.
Express Middlewares

Middlewares are what is between the client and the server within the request-response process. They do tasks such as processing and modifying requests as they pass through the web server, making them crucial to learn. This tutorial can get you started.
Interesting Node projects

Here are 31 Node.js projects that you might want to try in order to test your new-learned skills and, based on difficulty, acquire new ones!

Week 13 - 14: Backend Python Framework - Django

This is the section for learning a Python backend framework. For the sake of this curriculum, you should either choose a JavaScript framework (previous section), or a Python framework.

Introduction to Django

Here is an introduction to Django , where you will learn a bit more about what it actually is and how you can integrate it in your own project.

Application structure of Django

Here is an guide to the application structure of Django , so that you can understand the overall flow. We will be expanding upon these subjects further, this is just an overview.

Models in Django

Models are Python classes that act as intermediaries between your Python code and the database and a fundamental concept to learn.
Templates in Django

Templates are a fundamental part of Django, that allow you to generate dynamic HTML web pages.
Views in Django

Views are another very important concept in Django, determining the logic of a web page and how it is displayed. Their purpose can be processing requests, retrieving data from the database, or rendering HTML templates.
User Authentication

Read this article for a walkthrough of how to set up user authentication in Django.
URL Routing

URL routing is a fundamental concept that helps you map incoming URLs to specific views, so that you can define how different parts of your application are accessed. All the urls are defined in the 'urls.py' file of the application, inside an array called 'urlpatterns'. You have to import the 'path' function from django.urls (from django.urls import path) and the views, from your current application (from . import views). In order to define a path, you must specify three parameters: the coressponding url, the view that should handle it, and a name. For example, a url pattern for a page displaying all the products of a website could be path('products/', views.products, name="products-list"). In order to define dyanmic URL segments, you must mention them within angle brackets ( < > ): 'products/<int:product_id>'
Follow-through project

Go ahead and try to follow through the creation of a full-fledged project using Django with this article. You will be creating your first-ever project using Django, a library app!
Project ideas

Some interesting project ideas that you could create using Django would be a blog application, that would include user registration, article publishing, comments and the search functionality. Another great idea could be an e-commerce website, which would include product listings, a shopping cart and the corresponding logic, user accounts, order history, and reviews. If you'd like some other ideas and a more detailed explanation of the projets, you can also check out this article, where you won't necessarily find Django projects, but software development ones, most of which are entirely doable using Django! Happy coding!

Week 15: Databases

Database introduction - different types of databases

Learn a bit about what databases are, what kind of databases there are out there, what is the difference between them and figure out some examples of databases by reading through general classification of databases.

SQL database commands

Take a look at this comprehensive list of SQL commands, which will help you easily interact with a SQL database.
NoSQL databases

If you decide to go the other way, and a NoSQL database appears best for the project at hand, you can check out this article, which will help you make an informed choice over what database it is that most nearly tends to your projects' needs.
NoSQL database - MongoDB

One of the most widely used NoSQL databases is no other than MongoDB, being included in many tech stacks such as MEAN or MERN. Here is everything you need to learn in order to get started with MongoDB.
MongoDB + Mongoose

Following the current stack we're working with, it's only rational that we add another tech to our aid: Mongoose, which is often used with Node.js and is great for keeping MongoDB structures. Here is an introduction to working with MongoDB and Mongoose.

Further directions

Here are some further topics that you could cover in order to help you develop a career with the information you've acquired.

HTML Interview Questions

Here are some intersting HTML interview questions .
CSS Interview Questions

Here are some intersting CSS interview questions .
JavaScript Interview Questions ( Promises )

Here are some intersting JavaScript interview questions .
Git Interview Questions

Here are some intersting Git interview questions .
Web Development Stacks

Here are some of the most popular web stacks at the moment. Some of them are from technologies already covered in this checklist, others from some we might have not even mentioned. Consider them to be something to research if you want to enrich your capabilities even more. Remember that they're just material, and you don't have to learn them all comprehensively! Moreover, if you learned those features in this checklist, you're most likely to be able to implement apps much easier using any technology, even if you haven't worked with it before!

Web Development Bootcamp 📌