CodeNewbie Community

Cover image for Pillars
Jeff Mitchell
Jeff Mitchell

Posted on • Updated on

Pillars

There is so much pressure to build and develop faster, faster, faster. The end result of the rush is a creation that can't carry its own weight and buckles under pressure. It's important to master the pillars of web development. Effort to master the pillars will reward you with skills that stand the test of time as well as creations that users will enjoy.

I'm an engineer and I work in the construction industry. I see many parallels between constructing a building and constructing a website. On my own journey to learn web development, I've flitted between shiny frameworks, but have come to see there are four pillars...foundation, structure, form, and power. Not being intimate with each of them puts any skills with a framework on shaky ground.

Foundation - Separation of Concerns

Every building needs to rest on stable soil, have solid footings, and sound structure to support itself and its occupants. A website is no different. Set up a clean folder structure and have separate files. HTML should be on its own, CSS should be on its own and properly referenced from your HTML files. JavaScript should be on its own and properly reference from your HTML files. Separating things out serves three purposes, it makes code easier to debug and maintain, it makes it understandable by others, and it makes the web site function efficiently. Attention spans are ever shorter, long load times will cause readers to move on to the next thing. The choices made in laying out the site will have a significant impact on performance.

Structure - HTML

Solid HTML is the next important piece. HTML is the skeleton, keeping everything upright. It's the floors and shearwalls. If you do it right, your site will function and be useful to someone on an enormous range of devices, some of which may not have a screen. A key point is that HTML should explain what the elements of the site ARE (or should be), not what they should look like...that's the job of CSS. Spend some time laying out your information and give it good structure. You'll have a solid fallback.

Form - CSS

CSS breathes life into the HTML skeleton. Like the exterior envelope of a building, it gives form, colour and shape. Responsive design principles are brought in through CSS. There's a lot of beauty that can be brought to bear with CSS on its own. Take some time to learn its nuances thoroughly and gain appreciation for its capabilities. Don't use HTML where you should be leveraging CSS to create the look and feel you want.

Power - JavaScript

The addition of some JavaScript gives a site functionality and juices it with power which enables users to get things done. If you've setup the structure and form correctly, JavaScript adds spice and that little "something" that puts the site over the top. JavaScript should be used sparingly. Most of the functionality of a site should come from proper design of the layout with HTML and design of styling with CSS.

Summing up

There's a rush today that makes everything frantic and borderline unsustainable. The rush, when applied to web design, can result in products which are difficult to maintain and perform poorly for their intended audience. Take your time, smell the flowers, and make sure your creation has a solid footing with the pillars of web technology.

Discussion (2)

Collapse
anitabe404 profile image
Anita Beauchamp

I completely agree. I am currently working through the Foundations path of The Odin Project, which covers the basics of HTML, CSS, and JavaScript.

I discovered that even after doing the lessons, I was struggling with one of the projects. This prompted me to take a step back and think about why I was having so many problems. I realized that I did not understand CSS well and that I needed to spend more time learning and practicing the basics. It's made a big difference in my understanding.

Rushing through the fundamentals to get to the fancy stuff is a recipe for disaster. Eventually, you hit a wall and it's hard to go forward. Thanks for the reminder. 😎

Collapse
sentinel1909 profile image
Jeff Mitchell Author

It's been something I've been thinking about a lot as I noodle around with React. As much as I can see it's a good tool for the toolbox, one really does need a grounding in the fundamentals first. Otherwise, your React project will be a mess of spaghetti :)