Web Development Basics: Explaining the fundamentals of web development, including HTML, CSS, and JavaScript
If you were new to this space, you would probably describe the term web development as web design...or maybe its older sibling.
In a way, you might have a point. After all, there's been a long history of sibling rivalry between designers and developers. But that's just a story for another day. In actuality, they differ in role and functionality.
Web designers and web developers are two sides of a coin. They work together, but they function differently.
Web design is concerned with the look and feel of a website or application. On the flip side, web development creates the code that makes it work.
Designers are feelers. They design for excellent user experience and create emotional connections. Developers, on the other hand, are rather pragmatic. They convert designs into production-ready code, adding functionality to it. Sometimes, a designer can go over the moon and create designs that the developer might refer to as a pulpy romance. And there we go again!
What does Web Development even mean?
Web development is all about building and maintaining websites or applications. A whole lot of work goes on behind the scenes to make a good website or application. And there are three major roles in the web development field.
Specialization in Web Development
I published an article some time ago, on web development roles. There, I explained that there are three major roles in web development. With each role focusing on the different areas of web development.
Frontend Development
A front-end developer builds the front end of a website or application using web languages to allow users to access or interact with it. This is usually referred to as client-side, as the processing takes place in the user's browser. Frontend development emphasizes how a website looks and feels on all devices.
Backend Development
Backend development involves writing underlying code for running server-side operations. The Server-side contains the things you can't see on the browser that makes sure the site or application performs as it should.
In a nutshell, here's how it works. The server connects to the client side which is the front end, and makes sure that there's a smooth data flow and transactions work properly.
Full Stack Development
Full stack developers take on both frontend and backend responsibilities. From the client side which is the front end, to the backend server. A full-stack developer designs, create, tests, and deploys complete applications from start to finish.
Full Stack or Not
Some people say that there's no such thing as a full-stack developer. Here's why:
As a developer, you might have practical knowledge of how both frontend and backend programming languages and frameworks. However, there's a tendency that you would focus on one aspect. Still, your knowledge and experience in other areas are useful in Troubleshooting or speeding up a build or redesign.
Must-Have For a Successful Career in Web Development
Creativity
It is said that creativity blurs the line between programmers and designers. As a web developer, especially in the front end, being creative helps you to build awesome user experiences with uncommon interactions that can't be easily replicated.
It is one thing to translate a designer's work into sustainable code. It's another thing to be able to come up with a design and build on your own. For both instances, creativity is required to deliver excellence.
Attention to details
Paying attention to details can never be overemphasised in the world of web development. It not only helps in ensuring that your users' expectations are met but will be useful in debugging and testing. Attention to detail helps you see inconsistencies in alignments, spacing, text and the entire appearance of your work.
Strong Communication Skills
Even if you are a freelancer or you work solo. You can't avoid communicating with clients and customers alike, supervisors, colleagues and even collaboration. Strong communication skills help you to foster good working relationships and it also keeps everyone on the same page.
Frontend
If you want to be a frontend developer...or you already are. Proficiency in web languages and frameworks is crucial.
HTML
This is one of the first things to learn as a web developer. The good news is, it's quite easy to learn. Hypertext Markup Language (HTML) is the standard language for Web pages. It is a formatting system used for showing content retrieved over the Internet. A website is simply a collection of web pages that link to one another through hypertext links.
An HTML file has a .html extension. E.g. index.html, about.html, contact.html etc. Each of these .html files can be seen as web pages on the browser. A typical html structure looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Web</title
</head>
<body>
<div>
<h1>Hello World!</h1
<p>This is my corner.</p
</div>
</body>
</html>
<!DOCTYPE html> is a document type declaration required for HTML files. It makes sure that the web page is parsed the same way by different browsers.
The HTML opening and closing tags, <html> define the root of the HTML document. Everything must be inside the html tag; i.e, between the <html> and </html>
The <head> </head> is a container that houses the data about data known as metadata. It also contains elements like <title> </title> which defines the title of the web page, <link /> which connects the HTML document to external files etc.
Everything that the browser displays can be found inside the <body> tag. These include images, paragraphs, headings, links, buttons etc.
If you would like to learn more about HTML, W3Schools is an awesome resource.
CSS
Cascading Style Sheet or CSS is a style sheet language that describes how elements in a markup language should be displayed. In simple terms, HTML is concerned with the layout of the web page. And CSS adds style to it.
Adding the following CSS code to the HTML above will change the appearance of the HTML content:
body {
background-color: #000000;
}h1 {
color: #ffffff;
text-align: center;
}
p {
font-size: 16px;
color: #ffffff;
}
Here's another example. Imagine we have a div container with a class named shop_hero. We can use CSS properties to describe the width, and height and even change the background image.
.shop_hero{
height: 480px;
background-image: url(../images/food.jpg);
background-size: cover;
background-position-y: 74%;
width:100%;
}
JAVASCRIPT
I wrote a few things about JavaScript in my previous article, Introduction to Programming Languages. It is a high-level, object-oriented scripting language that allows you to dynamically update content, animate images, control multimedia and a whole lot more.
As you probably already know, it's all connected. HTML is the web page layout, CSS is the stylist and JavasScript is the spice that adds dynamic interaction to the entire thing.
Here's an example of using JavaScript to create a slideshow of food products:
<section>
<div class="row mb-5 mx-auto justify-content-around align-content-center" id="slider">
<div class="col-md-12 mt-5 text-center">
<h2 class="intro">BRINGING GOOD FOOD INTO YOUR EVERYDAY</h2>
</div>
<div class="col-md-2 mx-auto">
<img src="" alt="" name="slide" height="80" width="360" class="img-thumbnail my-5">
</div>
</div>
</section>
var i = [0];
var images = [];
var time = 3000;
images[0] = "./static/images/slides/a.jpg";
images[1] = "./static/images/slides/b.jpg";
images[2] = "./static/images/slides/c.jpg";
images[3] = "./static/images/slides/d.jpg";
images[4] = "./static/images/slides/e.jpg";
images[5] = "./static/images/slides/f.jpg";
images[6] = "./static/images/slides/g.jpg";
function changeImg() {
if (i < images.length) {
document.slide.src = images[i];
i++;
}
else {
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
Research shows that as of 2022, 98% of websites use JavaScript in their front end for dynamic webpage behaviour. It is lightweight and runs spontaneously.
There are awesome front-end frameworks for building modern websites and applications, depending on your choice of programming language. These include Vue, React, Angular, Next JS, Vaadin, Grails, Ruby on Rails etc.
Design
As a developer, one skill you cannot overlook is design. Having a good idea of graphics design and/or user interface and user experience is a great plus. Also, responsiveness in web development is a real biggie. It's not just about knowing how to build websites or applications. Your work has to be neat across all devices.
If you are a backend developer, you might not concern yourself with many design or frontend issues. But you will be in a better place when you understand how it works.
Content Management System
There are several Content Management Systems (CMS) like WordPress, Joomla, Wix, Squarespace etc. that help you build no-code websites. These can come in handy when you want to build simple websites. Having a good idea of how content management systems work can help you take advantage of headless CMS for your front-end projects. This will allow you to manage your content in one place, and deploy it on any digital channel of your choice.
Backend
As a backend developer, you should be familiar with one or more server-side programming and technical languages. Python, SQL, NoSQL, Java, JavaScript. Backend frameworks like Django, Flask, Node, Express JS Spring Boot etc. The backend is made up of the structure of the site, system, data, and backend logic.
Backend Logic
This is the process of how you execute your server-side code in the context of the application, it can handle both very simple and very performance-intensive operations.
Application Programming Interfaces (API)
This is a software go-between that allows two applications to interact with each other by sharing and extracting data. An in-depth understanding of APIs and backend logic is required for a successful career in backend development.
Version Control Systems
Understanding Git or other version control systems is extremely important to a web developer. The version control system helps you manage your source code by tracking all your modifications. Git is one of the most popular version control systems, with GitHub as a hosting service for Git repositories. You can start with working your basic git commands. And then grow into pull requests and collaborations.
SEO
Knowing about Search Engine Optimization helps you to build websites or applications that will easily rank high on search engines. Aside from using frameworks like Next JS which helps you scale better with SEO. When you understand basic SEO concepts and how search crawlers, you can be intentional about developing web projects that are SEO-friendly. Here are a few cards while building your web projects to rank high on Google and other search engines.
Use Semantic HTML Elements
Semantic HTML elements are tags that explicitly describe their meanings in a human-and machine-readable manner. This makes it easier for site crawlers to pick. Examples of these elements include <header>, <article>, <aside>, <main>, <nav> etc.
<header> <h1>The title here</h1> <p>Posted by Sade Audu</p> <p>More comments here</p> </header>
The above code is an example of a header element which usually contains introductory content or links for the navigation menu. Let's take a broader example:
<body>
<main>
<nav class="navbar bg-light" aria-label="Light offcanvas navbar">
<div class="container-fluid">
<span>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight">
<span class="navbar-toggler-icon"></span>
</button> 
<a class="navbar-brand text-success" href="index.html">chow</a></span>
<span>
<a href="cart.html"><i class="fa-solid fa-cart-shopping text-success"></i><span class="badge"></span id="cart"></a> 
<a href="login.html" class="btn btn-success">Log in</a> 
<a href="signup.html" class="btn btn-outline-success">Sign up</a> 
</span>
</div>
</nav>
</main>
</body>
</html>
Keyword Stuffing
This is an SEO technique that involves infusing relevant high-ranking keywords in content across your web project.
Frameworks
As much as it is good to know a programming language, you should also know and work with various frameworks that would make your life easier as a developer. Web frameworks provide libraries that help with templating, session management, access to databases etc. These frameworks also promote the reuse of code.
Testing and debugging
In web development, errors are inevitable. But the kinds of errors you encounter will differ in terms of skill and experience. However, your debugging skill will help you spot bugs in your code on time. Also, it is important to give quality time to test your code before and after deployment to ensure that there are no glitches for the end users to find.
Are Designers Even Needed?
The answer is Yes! Having to come up with everything from design to code can be overwhelming. Designers specialize in creating fantastic user experiences. This will give you ample time to focus on writing and implementing your code.
Tips For Building A Basic Website
For tips on building modern website development trends, you may check out my previous post. However, here are a few tips that can help in building a basic website.
Define the Purpose of Your Website
It's true what they say, when the purpose of a thing is not known, abuse is inevitable. Take the time to define what the website is about and what you hope to achieve with it. If you are building for a client, you would want to spend quality time with requirement gathering. This will go a long way in determining the website's features and how best to represent it.
Choose Your Development Process
Sometimes, the volume of your web project will determine what process you might choose to work with. If it's something simple, you might want to CMS like WordPress or Squarespace. However, if you want full control of your code, you might want to build a static HTML/CSS project and spice it up with JavaScript or typescript, SASS and other CSS frameworks. also, you might decide to use modern frameworks like React, Next JS, Vue JS, SpringBoot etc. All of these are dependent on what you hope to achieve with the website you are trying to build.
Outline Your Pages
There are a few pages that are common to every website. These include Homepage, About, Contact etc. You want to take the time to plan each content page by page and draw out a wireframe, or at least a web layout before you start building. When you plan well enough, you spend less time building or coding.
Build with SEO in Mind
The moment you start the development process, ensure that what you're building is SEO-friendly. Do thorough research on keywords that are relevant to the niche of the website you're about to create and plan your content in such a way that those keywords are spread across the entire site. Define your metatags and social links. Use semantic elements. You also might want to try out SEO-friendly frameworks like Next Js to give your site a proper boost.
Focus on the Basics
Try not to go out of point. Focus on centring your web content around its brand essence. Don't bore your site's prospective users with irrelevant content or information.
Test Your Work on Real Devices
When the performance of a website or application is not consistent or does not work on certain web browsers, it paves the way for browser compatibility issues, which gives users an experience that is not consistent. These are usually caused by differences in the support of HTML, CSS, JavaScript, and other web technologies by different browsers
These include HTML validation, CSS flexbox, CSS grid, CSS sticky positioning, doctype error, outdated browser detection etc.
Avoid unnecessary drama by making sure that you close all HTML tags in your HTML files.
Use specific CSS codes for specific browsers. When it comes to browsers and CSS commands, here's something to remember:
Chrome and Safari: -webkit
Mozilla Firefox: -moz
Opera: -o
Internet Explorer: -ms
To ensure that your web project is void of these issues, ensure that you test your work on real devices as well as different browsers. Don't just settle for what you see when you inspect your pages. These issues often happen. And you realize that your work is not as perfect as it was during the development stage.