What are the 3 Layers of Web Development?
You are getting into web development and need to know the fundamentals of building a web page. To summarise, the 3 web development layers consist of Content, Style and Behaviour. This post will go into further detail for each layer to help you gain a better understanding.
Content (HTML)
The Content Layer is considered the skeleton of a web page. This should be the foundation for all the content you wish to display on your website. Hypertext Markup Language (HTML) is the major markup language used to display web pages on the Internet. There is a wide variety of content elements to use and those types of content can include:
- Text
- Images
- Videos
- Links
- Tables
- Lists
- etc.
HTML should be readable and make sense without any visuals. Keeping your content simple will make it easier for the viewer to intake. Also, when using images, applying ALT text will allow visually impaired viewers to read your content without any images.
Just keep in mind that the next two web development layers are reliant on the Content Layer.
Style (CSS)
Next up of the web development layers is the Style Layer. This is where we start improving the look of your web page. Cascading Style Sheets (CSS) are properties are defined within selectors by defining a property and a value. In layman terms, after applying a class or ID to an HTML element, you can implement styling to elements with that class or ID. Making your web page prettier.
Applying, the correct CSS styling can make your web page mobile responsive, adding colours, hover effects and more.
Behaviour (JavaScript)
Let’s add functionality. The final part of the web development layer in the behaviour layer or JavaScript. JavaScript (JS) is a scripting language used to create and control dynamic website content. Adding scripts will give life to your web page. You are able to:
- Animate Elements
- Transitions
- Sliders
- Forms
- etc.
There is an abundance of JavaScript Frameworks that make developing easier. We have previously talked about Vue, Alpine.js, Laravel Echo, Electron and React Native.
Those are the 3 Web Development Layers
There you have it, the 3 Web Development Layers. Pretty simple to understand, but can be hard to implement. If you are unfamiliar with HTML, CSS or JavaScript, check out w3Schools for everything web development related.
