DEV Community: Adegboyega Adedamola Wilson

The Basics of Web Development: A Comprehensive Guide for Beginners

Adegboyega Adedamola Wilson — Fri, 18 Aug 2023 11:44:40 +0000

A beginner guide to the basics of web development

Table of Content:

Introduction to Web Development
Frontend Development
- HTML
- CSS
- JavaScript
Backend Development
- Server-side languages
- Databases
Frameworks
- Frontend frameworks
- Backend frameworks
Version Control
Responsive Design
Web Hosting and Deployment
Conclusion

Introduction to Web Development

Web Development involves building or creating websites that are accessible over the internet. The websites are developed using different programming languages, tools, and frameworks.
The person who develops a website is called a web developer. Web developers ensure that the websites created are accessible over the internet.

Frontend Development

Frontend Development involves developing the visual part of the website that users interact directly with. Below are the technologies that web developers use to build the frontend interface:

HTML: HTML(Hypertext Markup Language) is not a programming language but a markup language used to create and structure the content of a page.
Some people call HTML the skeleton of a webpage simply because it's the backbone of all web pages. Using ‘elements’ and ‘tags’ to structure how different parts of a webpage should appear.
CSS: CSS(Cascading Style Sheets) is used to style HTML elements. Elements like texts, headings, and images. It works with HTML to apply appropriate designs and styles like colors, spacing, and font size of the webpage content, ensuring it is beautifully structured and appealing.
JavaScript: JavaScript is a programming language that adds functionality and interaction to a website. It is used to create dynamic web pages that respond to different actions from the user—for example, clicking a button, submitting a form, manipulating data, and updating page content without reloading the page.

Backend Development

Backend development involves developing the server side of a website or web application. It involves dealing with databases, server logic, and APIs, in short, the behind-the-scene activities of a website. Developers use backend languages and their frameworks to build server-side functions.

Server-side languages: These are languages that are used to build the logic and functionality on the server side of a website. Examples of these languages are PHP, Python, Ruby, Java, Node.js, and others.
Databases: Databases are used to store, retrieve and manage data used by the application. Examples of databases are MySQL, MongoDB, SQLite, PostgreSQL, and others.

Frameworks

Frameworks are a set of pre-built tools, functions, and collection of libraries that assists developers to create websites or web applications faster and easier. Frameworks are structured, reusable, and usually built on a programming language.

For Web development, we have a Frontend framework and a Backend framework.

Frontend Frameworks: These are a pre-built set of tools and codes that accelerates the building of user interfaces - the visual parts of a website or web app that the user interacts with. They provide developers with pre-built solutions that facilitate the development process and allow them to start building without starting from scratch. Below are some examples of frontend frameworks and their programming languages(in brackets):

React(Javascript)
Angular(Javascript)
Vue(Javascript)
TailwindCSS(CSS)
Bootstrap(CSS)

Backend Frameworks: These are a pre-built set of functions that makes it easier for developers to build the server side for a website or web application. Backend frameworks simplify complicated processes, allowing the developer to focus on improving the website's or web application's efficiency and functionality. Below are some examples of backend frameworks and their programming languages(in brackets):

Laravel(PHP)
Django(Python)
Express.js(Node.js)
Ruby on Rails(Ruby)
Flask(Python)

Frameworks accelerate building by providing a pre-built set of tools and codes, this simplifies website creation and allows developers to build more efficient websites and web applications with less effort.

Version Control

Version controls are systems and tools that enable developers to track and maintain their codebase. They also allow collaboration between multiple developers. Version control enables developers to return to their code's previous version.
For example, if you write a program and save it as ‘first program’, then you update or make changes to it and save it as ‘first program update’, later you decide that you want to go back to the first version of the program, version control enables you to revert to the first version(saved as first program) of the program.
A famous example of version control is Git/Github.

Responsive Design

Responsive design also known as responsive web design involves creating websites or web applications that automatically adapt and adjust their layout irrespective of the screen size or device on which the website is being accessed.
To learn more about responsive design here is a linkto an article that discusses extensively on responsiveness.

Web Hosting and Deployment

Web hosting and deployment involve making your website available to the public by hosting it on a server. When you are done creating and testing the functionality of your website, you need to make it available to the public, this is where deployment comes in, with the necessary resources you deploy your website (the files of your website such as HTML, CSS, JavaScript, and other files it comprises of) to a web hosting server, this enables people to access the website.
To host your website you’ll need a domain name and a server:

Domain name: A domain name is a unique name your website is associated with. For example, ‘www.google.com’, your unique domain name is what users will enter into the browser to access your website.
Web Hosting Server: A web hosting server is a provider that allows you to store your website’s files on its server space. Examples of web hosting server providers are Amazon Web Services, Microsoft Azure, Heroku, Netlify, Vercel, Github pages, and others.

In summary, web hosting and deployment is an important process that allows people to access your website. By getting a domain name and deploying the website to a server space users will be able to access it.

Conclusion

As a beginner, there are many opportunities in web development, but to find these opportunities, you need to start with web development basics which are HTML, CSS, and JavaScript. After the basics, progress to backend languages, then frameworks. While learning don't forget to put what you learned into practice. Continue learning and improving your skill because web development keeps evolving, then you will discover rewarding opportunities in web development.

A Step-by-Step Guide to Building a Responsive and Mobile-Friendly website from scratch

Adegboyega Adedamola Wilson — Sun, 13 Aug 2023 10:33:21 +0000

A Web developer’s step-by-step guide to creating and designing websites that are fully responsive in the multi-device world we are in today

Table of content

Introduction
Prerequisite
What is website responsiveness?
Implementing media queries for different screen sizes
Optimizing images and assets for faster mobile loading
Testing on various devices and browsers for cross-device compatibility
HTML and CSS best practices for responsiveness
Conclusion

Introduction

We live in a multi-device world, and because of this, front-end developers must build fully equipped, compatible, and responsive websites on all devices. In this guide, we will learn how to build responsive and mobile-friendly websites.

Prerequisite

This guide is for people with basic knowledge of HTML and CSS, If you are not familiar with these you must familiarize yourself with them before going through this guide.

What is website responsiveness?

First, we will understand what responsiveness is.
Responsiveness is the ability of the interface of a website or application to change or adapt to changes in the environment or device.

Now we will understand what website responsiveness is.
Website responsiveness popularly known as responsive web design focuses on creating websites that automatically adjust and optimize their layout and content based on the screen size and device used to access the website.
Contents like images, texts, videos, and navigation bars automatically resize themselves to fit the screen size of the device being used to access the website. This is essential for optimal user interaction and experience on the website.

Implementing media queries for different screen sizes

What are media queries?
Media queries are CSS(cascading style sheets) rules that allow web developers to create responsive websites. Media queries allow web developers to conditionally apply styles based on the device or browser screen size, orientation, and resolution.
For example, they can apply styles for small screen sizes (280px-760px), medium screen sizes (760px-1440px), and large screen size (1440px and above), doing this makes the website adjust automatically to different screen sizes and layouts.

Use the '@media' rule followed by the condition you want it to meet and the styles you wish to apply to implement the media query. An example of this will be shown below.

The image above shows the '@media' rule, followed by the condition, and the styles to be applied.

Optimizing images and assets for faster mobile loading

Optimizing images and assets for faster mobile loading involves compressing and reducing file size, and improving the efficiency of images to ensure that assets load faster. Below are techniques and tips which you can use to optimize images and assets for faster loading:

Lazy Loading: Lazy loading simply means delaying image loading until it the image becomes visible to the user. This enables the initial load of the page to be faster, and loads only the image in the user’s viewport
Use the proper image format: Using the proper image format enables your website to load faster on mobile. The popular image formats are:

PNG: PNG is preferred for images with transparency such as logos.
JPEG: JPEG is the best choice for photographs and images with many colors.
SVG: SVG(Scalable Vector Graphics) is the best choice for icons or simple graphics on your website.
WebP: WebP provides high-quality images with lower file sizes, but not all browsers support this format. It is recommended to use this format if the web browser supports the format.

Compress images: This involves the use of image compressing tools to significantly reduce the size of an image while keeping its original quality.
Use responsive image: Use of ‘’ tag, and CSS media queries enables you to serve suitable and different images for different devices or screen sizes.
Use SVG icons or Icon fonts: Using image files for icons can increase your website load time because of their sizes, instead use icon fonts or SVG icons. These are some examples of icon fonts and SVG fonts: IcoMoonApp, Material Design, Font Awesome, free Icons, and Icon Packs. They are scalable and have lower file sizes compared to using image files.
Test and Monitor: Test and Monitor simply means using tools like WebPageTest, Google PageSpeed Insights, or GTmetrix to test and monitor your current load speed and ensure necessary improvements are made.

Testing on various devices and browsers for cross-device compatibility

Testing on various devices and browsers for cross-device compatibility simply means ensuring that your website appears and functions well on different devices and browsers, ensuring users enjoy a smooth experience on any device or browser they use.
Below are some examples of testing tools:

Browser DevTools
CrossBrowser Testing
Lambda Test
Screenfly
BrowserStack
Sauce Labs

These tools enable developers to ensure that their website works effectively on multiple devices.
By testing for cross-device compatibility web developers detect issues with their websites and fix them.

HTML and CSS best practices for responsiveness

Below are some tips on best practices for responsiveness:

Use media queries appropriately
Use relative units like 'vh', 'vw', and '%' instead of fixed pixels, this ensures that elements resize according to the screen size.
Use CSS Flexbox or Grid for creating responsive layouts.
Use relative font sizes like 'em' and 'rem'.
Apply the mobile-first approach.
Compress images with large file sizes to reduce page load time.

Following this best practice will help you to create websites that are responsive easily.

Conclusion

In conclusion, it is vital as a Web developer for your websites to be compatible and fully responsive on all devices. Following the techniques in this guide will enable you to build responsive websites that are mobile-friendly and compatible with all devices.
Now that you have learned how to build responsive websites, consider learning the significance of responsive design in a multi-device world.

Form validation in React is made simpler by using JavaScript libraries

Adegboyega Adedamola Wilson — Wed, 09 Aug 2023 18:33:24 +0000

A Web developer’s step-by-step guide to implementing JavaScript libraries for validating forms.

Table of Content

Introduction
Prerequisite
What is form validation
Creating a form in React
Top 4 form validation libraries
Validating a React form with a library
Conclusion

Introduction

Almost all available website in the world has a form. Therefore it is important to get the correct details filled in those forms. In this guide, we will learn what form validation is and how to validate forms more easily by using JavaScript libraries.

Prerequisite

This guide is aimed at people with basic HTML, JavaScript, and React knowledge. If you are not familiar with these we recommend you to familiarize yourself with them before going through this guide.

What is form validation?

Form validation is the process of making sure that the text or details that a user is inputting into a form are in the correct format and within the restrictions of the application. For example, an email field is required to have at least one ‘@’ and one ‘.’, if the user inputs an email without ‘@’ the validation process kicks in and informs the user that the inputted email is invalid. The same process and rules go for other fields in your form.

Creating a form in React

In this part, we are going to create a simple react form.

From the above image, we can see the code of a simple React form.
After setting up our environment, we have our form tag, input tag, and placeholder. (Ignore the tailwind styles from the above picture, it is there just to add little styles to form which we will see in the output below).

Above we have the output of our simple React form, displaying the Name, Email, and password just as it is written in the code.

Top 4 form validation libraries

React Hook Form

React Hook Form is a lightweight, flexible easy-to-use form validating library. React Hook Form reduces the amount of code you need to write while removing unnecessary re-renders.
Features of React Hook Form:

Minimal re-renders
Flexibility
Useable with external UI Libraries
Form State Management
Error Handling
Built-in Validation Rules

Formik

Formik is another popular and open-source form validation library. It offers a set of easy-to-understand components and utilities for form management and validation
Features of Formik:

Declarative API
Well documented
Large and active community
Error handling
Asynchronous validation
Validation schema integration
Form events

Yup

Yup is a form validation library used in conjunction with form management libraries to handle form validation.
Features of Yup:

Asynchronous validation
Conditional validation
Declarative Validation
Flexibility
Schema-based validation

React Final Form

React Final Form is a form validation library for managing complex forms in React. It is suited for projects that require robust form validation, asynchronous form submissions, and dynamic form fields.
Features of React Final Form:

Asynchronous validation
Validation schema integration
Form events
Performance optimizations
Form state management

The above libraries are some of the most popular form validation libraries available.
As you continue with this article you will see how you can validate a form with one of the libraries listed above.

Validating a React form with a library

In this example, we will use React Hook Form library for the form validation.
To get started with this library, you need to install it with this single-line command below.

npm install react-hook-form

After the installation, we can import the ‘useForm’ hook and use it to validate our form.
In the image below we’ll see how we can use the react hook form to validate our form.

Image 1.0

From the ‘useForm’ hook we can destructure it and get three properties out of it:

The ‘Register’ function
The ‘handleSubmit’ function
The ‘formState’ object

The ‘register’ is a call-back function that returns props and is used to register the input fields.
When an input is registered the form can track its validation process and other properties.
The ‘handleSubmit’ function is passed to the ‘onSubmit’ event handler in your form tag, and this function handles the validation process and form submission for all registered inputs when the submit button is clicked passing the 'data' as an argument as you can see in image 1.0 above.
The ‘formState’ object contains multiple properties, but we use the ‘errors’ property in this example.
The ‘errors’ property contains validation errors if the details inputted in the input fields are not according to the rules you set, as you can see in image 1.0 above.
To make any input field required, you can add the ‘required’ object with the ‘message’ you want to display to the input field as seen in image 1.0 above.

The image below shows the result if the input field is empty

Image1.1

When it comes to validating an email field you will need a regular expression, the regular expression is stored in the ‘pattern’ object as seen in image 1.0 above as well as the error message you want to display.

The image below shows the result if the email format provided is invalid

Image 1.2

As we can see from the image above, the email provided does not have a “.com” so it displayed the error message we stored in the ‘pattern’ object.

As we can see in the image above, the data fields are not empty and the details inputted into the fields are in the right format so there are no error messages.

Conclusion

In conclusion, it is important to make sure that your forms are properly validated and the JavaScript libraries listed above are a very good and easy way to validate your web forms.

Now that you have learned how to use JavaScript libraries to validate your form, consider learning how to send email from an HTML contact form without any server code.