HTML & CSS: Creating Well-structured, Visually-appealing Web Pages | Web Development Essentials
Almost 65% of the world looks for information from 1.8 billion websites on a daily basis. Only thirty-two years after the first website was launched by Tim Berners-Lee — the architect of the World Wide Web himself.
So, with this remarkable increase in adoption since then, there’s a growing demand for web developers (and designers), amounting to an 8% increase each year.
As heartening as this stat might be, web development and design are increasing in complexity so as to meet the growing needs of users each year. Popular trends reflecting this in web development include a mobile-first approach, responsive design and the use of AI in voice search. As a consequence, a number of technologies have been built in order to support these trends from the ground up.
Through the Web Development Essentials blog post series, we will cover the absolute fundamentals of web development, which discusses technologies used in the current iteration of the web and which should serve as a strong foundation prior to getting started with all that Web3 has to offer.
Now, before one delves into such technologies and their implementations, most beginners in web development need to identify what makes up the World Wide Web, the web development tech stack and the role that each component plays.
Understanding the Layers of the World Wide Web
As one can tell, the idea of two computers communicating with each other over long distances is not a simple one. In fact, the actual implementation of the World Wide Web was based on the OSI model, which was later simplified to the TCP/IP model.
As you can see in the model to your right, the Transport, Internet and Network Access Layers lie below the Application layer. These layers consist of proprietary protocols that serve certain functions apart from the hardware that is used to get two devices to communicate with each other.
As you begin your journey as a web developer, your concern will be to focus on technologies that are relevant to the Application Layer. Speaking of which, your built web applications or pages and their data stored on a server will be accessed by making requests through a client’s human-computer interface.
Yes, we’re talking about the ubiquitous browser that we often take for granted as power internet users. Of course, the Presentation and Session sub-layers in the Application layer ensure that the data is encrypted and transmitted in a secure session.
So, as a web developer, learning technologies such as HTML, CSS and JavaScript is your starting point. Yet again, each of these technologies serves a particular function when it comes to building webpages or web applications, from the front-end development aspect.
As you can see below, there are several technologies that comprise full-stack web development that we will explore in future posts. But for now, let’s begin with the absolute basics.
Where Does HTML & CSS Fit In?
Now, if you’re serious about web development, one thing’s for sure: you have to learn both HTML and CSS. Right from the ground up.
Considered to be the most fundamental building block of the World Wide Web, HyperText Markup Language (HTML) is a markup language that offers meaning and structure to the page.
Otherwise known as elements, these tags are used to break the page into divisions of text. Some of these include <title>, <body>, <h1>, <h2>, <div>, <ul>, <ol>, <img>, <canvas> and <audio> among others.
Now, just as the content on the page is important, appearance matters just as much. This is where Cascading Style Sheets (CSS) comes in as it helps you add colours, fonts and layouts to your web pages, by means of a stylesheet. In other words, CSS will style any HTML element provided you define it properly in the aforementioned sheet.
Speaking of which, if you look at the code above, you’ll find that the sheet contains styling instructions for any h1 or h2 element on the said webpage. Of course, this is a generic snippet of code but if you must know, you can style specific elements either by class or id too.
Working with HTML & CSS — An Example
Now, even if we’ve looked at HTML and CSS separately, let’s see how they work in tandem as part of a static web page that deals with the topic of Thorium and its use in nuclear fission experiments.
As in the code given below, we see HTML elements such as h1, h2, p, img and ol. Just about anyone who has used a word processing application will tell you that these are divisions commonly used as headers and their paragraphs. Of course, images and lists are also added here.
Here’s the HTML markup written to create this section:
So, what about CSS? For this simple static page, we’ve used the stylesheet provided by the Bootstrap framework, where you can also find plenty of examples, combining both HTML and CSS.
For this simple example, we created a simple HTML file and ran the code above in a browser. However, developers can use VS Code along with a host of extensions to build appealing web pages and applications too. A couple of VS code extensions that can make a developer’s life much easier and that come to mind are Auto Rename Tag and Prettier.
A Note About HTML5 and CSS3
With the first web page being launched as far back as 1991, there have been several versions of both HTML and CSS used by developers. Only now, HTML5 and CSS3 are being adopted by developers given that they offer a wide range of features that weren’t available in prior versions.
As budding Web developers, it’s necessary to learn about the latest features offered by both in order to design and build web pages, thanks to these technologies. Still, despite several changes made over the years, using both HTML and CSS together for front-end development continues as a best practice.
📌How will HTML and CSS benefit my Web3 development journey?
This works for Web3 development as well where using these two core technologies for front-end development will remain along with learning how to work with popular JS frameworks such as React, Vue and Angular. What will change, for sure, is that you will not need a centralized server or database but replace it with the blockchain or even P2P file storage services such as IPFS or Swarm.
We’re building a developer-centric metaverse for you to learn, earn and get hired. Sign up to join the Lumos Metaverse Whitelist for exclusive access!
