Guide to Learning Web Development
Introduction
If you want to build and host web apps this guide will show you how. Building your own website gives you creative control over the product and you will gain a valuable skill in the process. In this guide, you will be given a list of free resources you can use to learn how to build a website with code. These resources are tailored so that you learn the MERN stack (MongoDB, Express, React, and Node.js). The MERN stack was chosen so that you only have to learn one language, JavaScript, making it easier and quicker for you to get started. This guide is intended for anyone who is an absolute beginner to coding or just a beginner with these technologies. It is assumed you have basic computer skills. Whether you want to become a full stack developer or just want to learn web application development, this guide will equip you with the skills to build anything from a website with static text to more robust applications like a marketplace.
Contents
HTML and CSS
Design
JavaScript
Frontend frameworks - React
The server - Node.js and Express
Databases - MongoDB
Testing
Hosting
1. HTML and CSS
HTML is the language you will use to build the structure of your pages. This lets you add elements to a page like paragraphs, links, and tables. CSS is the language used to style the page. This allows us to change the font of a text, add color to backgrounds, or set the size of an image among other things. You can create beautiful websites with HTML and CSS alone. After learning HTML and CSS, you should familiarize yourself with using UI toolkits.
A UI toolkit is a library of code that helps you design the user interface (UI) of your web page. It comes with predefined styles that can be added to page elements. Directions will usually include code samples of HTML to create the components. A toolkit may require the use of JavaScript depending on what kind of components you are using. However, you may not necessarily need to write JavaScript to use the components. You can create your own toolkit or you can use one from a vendor. Bootstrap is a free toolkit for designing responsive websites. You can link the files to your HTML document or download it and customize the styles. KendoUI is a paid UI toolkit that is much more robust and helps you create complex components like graphs.
Resources
2. Design
You can make your website look professional without being an expert in design. Using a UI toolkit like Bootstrap can help, but you may want to customize the appearance to suit your style. There are high-quality resources available for free that you can include on your website. This will make your designs more professional and save you time in development. The basic aspects of a website that you will need to design include layout, color, fonts, icons, and images.
Before you begin building, you can create a mockup of your web app. Wireframing tools let you design the views of your web app without having to write code. They usually come with shapes and common components that you would find on a website. You can use wireframing to experiment with different layouts and see how different views link together. Wireframing is helpful because it allows you to plan what you will be building first. Also, it is easier to iterate on the design when you want to make changes. Framer and draw.io are two tools that can be used to design websites.
Next, you should consider a theme for your website. The theme is the style of your website. It includes the colors you use to style the elements in your app, the fonts for the text, and the layout of pages. The theme you design determines the look and feel of the entire website. Color palettes can help you choose complementary colors and generate ideas for themes. A resource to learn about using color in design is the Material Design color system. It provides examples of color palettes and guidelines for creating themes.
There are default fonts that you can use to style your website, but choosing a custom font can add personality and contribute to branding. You can use custom fonts to create text logos as well. Some sites sell fonts, but you can get free fonts from Google. Google has over 1000 fonts to choose from and they can be downloaded or linked as a stylesheet in your project.
Icons can be a great visual to include with text or as stand-alone elements. You might need icons on your website to represent your social media links or to indicate actions you want your users to take. Icons do more than just dress up a website. They communicate useful information quickly. This improves the usability of your website making it easier for users to understand regardless of their language. Ordinarily, you might have to design icons in a graphics editor. But others have made icons that you can use freely like Font Awesome and Bootstrap.
Great images go a long way to making your website beautiful and interesting. Images can be used to set the background of your website, or you can use them to accompany your blog posts or the products you’re selling. Whatever your needs, Unsplash has free high-resolution pictures that you can download and use. There are pictures of many different themes and styles so you can find whatever you need for your needs.
Resources
3. JavaScript
JavaScript is a programming language used in web browsers. You can use it to do things like create animations, display charts, and make web games. It is also used to fetch data from a server. If you are new to programming, you can start with a beginner course on Codecademy to learn JavaScript. You will learn the building blocks of programming like variables, functions, conditional structures, and repeating structures. There are also some specific concepts to pay attention to. The document object model (DOM) is a representation of the HTML elements on a webpage that you can access using JavaScript. Asynchronous programming allows you to control the execution of code that runs at different times.
Resources
4. React
Frontend frameworks make building large and complex web apps much easier. For example, a social media site can have millions of users. It would be impractical for developers to code a web page for each profile. The code base would grow exponentially large and it would be impossible to maintain as users are added and removed from the site. With a framework, you can code just one template for this page and fetch the data for a specific user to load into the HTML. React is a JavaScript library for building user interfaces on websites. A library is a collection of code that can be reused. React is often used with a framework like Next.js to provide other functionality to build your web app like routing.
Resources
5. Node.js
Node.js is a program that lets you create server-side applications written in JavaScript. The server sends and receives data to and from your webpage. For example, if a user logs into your website, their username and password are sent to the server to check if they exist. The server will look up the user’s login information in the database and respond to the webpage indicating if the credentials are correct. Express is a common framework for Node.js that provides features for building web applications. Other helpful software tools are Swagger, which automates the creation of documentation for your APIs, and Postman which lets you test your APIs.
Resources
6. Databases
A database is software that permanently stores data. The data can be retrieved and manipulated by your application. Different types of databases structure data in different ways. A relational database structures data as a table with rows and columns similar to a spreadsheet. A programming language like SQL is used to query a relational database.
A NoSQL database does not store data in a tabular form. MongoDB is a specific kind of NoSQL database that stores data in a JSON format.
Conclusion
Learning web development with the MERN stack (MongoDB, Express.js, React, and Node.js) offers a powerful, full-stack approach to building modern, dynamic web applications. By mastering each component, you gain the ability to handle everything from database management to frontend user interfaces using a single programming language: JavaScript.