The Three Pillars When Starting Learning To Code

A common way into the world of programming is to learn the languages and technologies used to create a modern website.

Anyone who've learned English and some basic Math is able to pick up these languages quickly. If you put in a little dedicated practice you can setup a pretty decent webpage, from scratch, based on your new-earned skills within a month.

By building a website you have the skills to plan, design, structure and think logically how a good webpage could be used effectively.

And voilá, you are deep down into the realm of software development.

When we learn to program a webpage we have also created an interface into the digital world. We are opening up a way for humans to interact with machines, other humans and entities around the world.

As humans, we experience life on Earth by living and experiencing the physical world we transfer information from one place to another in an organic way.

On a similar way, a webpage works as an interface on the Internet where information travels in light speed between continents and entities around the globe, connecting us all.

To support this information flow, these three pillars that we are learning to master are vital to make it cohesive, making it…

• Structured - Organized content.
• Styled - Visually appealing.
• Interactive - Bring life and logic.

Stabilizing Structure with HTML - The Bones

Just like the bone structure in our bodies, HTML is the backbone of a webpage. It provides more than elements, id's and classes. This versatile language lays out the foundation for how we can interact with a web application.

Just like the bones in our body are connected to muscle tissue which together makes up a function (i.e flexing your arm or pointing your feet) in the human body the elements and sections in the index.html file can be used for interactive and cool behaviours in the web application.

The way we structure the backbone using HTML sets the standard for how easy it will be to style the webpage and make it more interactive.

Learn more about HTML 🤓 👉🏽 Structuring The Web.

Styling Look & Feel with CSS - The Body

Using CSS, or Cascading Style Sheets in this little basic webdev-stack we can refer to the HTML structure mentioned above and we can start style the page to make it more visually appealing.

This is the language that use the structure from the HTML to set colors, sizes, positions and much more. This is when things starts to get visually appealing.

I was surprised how far you can go with the interactivity of a webpage by just using plain CSS.

Some web dev practitioners move further into using CSS frameworks like Tailwind or Bootstrap to save mental space and improve their efficiency.

But learning and mastering CSS can be a really powerful skill if you want to improve the styling of your webpage.

Learn more about CSS 🤓 👉🏽 Learn to style HTML using CSS.

Scripting Behaviors with JavaScript - The Brain

And finally we come to the juicy parts. The brain of a webpage. The language enabling interactivity, more advanced functionality and improved responsiveness.

Some quick examples of what JavaScript can do for us:

• Dynamically updating content created in the HTML file
• Animate images
• Manipulate and control multimedia
  ...and much, much more.

With JavaScript we can start manipulating the elements we have created in our HTML file. The limits for what we can do with this language are almost infinite.

Something interesting is happening with this language, and I am not sure if we underestimate or overestimate the impact of it...

Learn more about JavaScript 🤓 👉🏽 What is JavaScript?.

Thank you for reading, below you can find some online resources on where you can start learning these powerful skills 👇🏽

Resources and links

If you are curious to learn more, here are some great resources to get started:

👨🏽‍💻 Read, explore & practice - here is a short, mixed list:

• Freecodecamp
• CodeAcademy.com
• Pluralsight
• Coder-coder.com
• Hackerrank
• Mozilla Web Docs

Photo by Joyce McCown / Unsplash