If you've been playing with the idea of building your own website or ever had to manage someone else's, you will probably have come across HTML, CSS, and JavaScript. These are the three primary building blocks of any website or webpage, working together, yet in distinctive roles, when it comes to coding and web creation.
What is HTML?
HTML is the acronym for Hypertext Markup Language. Hypertext is essentially the structural text" and a markup language is a special "language" or "content" that computers understand, which was originally designed to describe web pages and make content interactive; think of it as the skeleton of a website:
HTML was released in 1989 as an official publishing language of the world wide web and is the initial building block webpage creation.
There are three main elements of HTML; tags, elements and attributes.
Its most recent version is HTML5, which bears all the original trademarks of regular HTML and is more dynamic and needs far less code.
What is CSS?
CSS stands for Cascade Styling Sheets and as the name suggests, CSS defines the appearance and style of the website, determining the color, font, and positioning of every element that makes up the website. CSS is quite important for your website; CSS was created after HTML with the purpose of making websites look nicer–and indeed it did.
An easy way to think of it is like this: if HTML is the skeleton, CSS is the skin, eyes, hair, nose and feet of a website that makes it unique and distinguishable.
While HTML and CSS work nicely together, they're pretty distinct languages. And learning them both means you can also use them separately too, as they both have a myriad of different applications!
What is JavaScript?
This is where things get a little more complicated. JavaScript is present on almost every functional website and it allows websites to be dynamic and interactive. It's the language web developers use to create websites that respond to the user's commands and movements and JavaScript can actually give you the power to change the HTML and CSS on a website. It's like the puppet master.
With JavaScript, you can do the following:
Play a preview when your cursor hovers over a video
Play an animation when you scroll down
Make a menu pop out when you hit a button on the keyboard
Make keyboard shortcuts for your site
Create a moving photo gallery so users can switch between slides
And the list goes on and on.
How do HTML, CSS, and JavaScript Work Together?
If you’re browsing an online store and the first thing you see on the website is a pop up "10% off if you sign up today," that is JavaScript. HTML, on the other hand, is the price, sizes, description, and picture of an item, while CSS will be how your online store looks: its colors, typeface, image size, visuals and more.
With the difference between HTML, CSS, and JavaScript firmly under your belt and a clear understanding of how they help one another, it’s time to dive into some essential tips for starting to plan your website.
Building a Website From Scratch
Pick your poison
Choose what you want to put into practice, like writing a CV, Portfolio, or landing page about a particular service offering.
And this is important: take that pressure right off! You will get to improve your website soon, but you just need to get the basics of the structure and content sorted at this stage.
Create a rough draft
There's a reason for the word draft; it's a rough copy of your brilliant idea soon to come to full fruition. Think of it as a rough diamond soon to be polished.
You can always look at other websites you like for inspiration but keep it simple to start with. For example, think of where you want the main navigation to be and what you want in the footer. Honestly, many developers just grab a pen and paper and quickly draw to imagine the basic layout. This doesn’t need to be a masterpiece; focus on getting your ideas down on paper.
Plan your text and visuals
If you feel your creative juices flowing already, just roughly write out the copy you’d like to have on your design. This will save you from going back as the text will be there, ready and waiting–and you can always improve upon it later.
Do some visual inspiration research. When it comes to CSS, you'll have to think about the design itself, like width, height, margin, padding, position, background color, font size, and more. To get a better idea of what you like, visit some websites to find reference points or benchmarks to have a clearer visual concept.
Get some online help
Allow us to assist you! Trust us, it's way easier to be walked through the process–and we’re quite friendly! Our webinar is almost like a private class and you will be done in just 60 minutes!
After you finish, you’ll be able to take what you’ve learned and make even more complex sites.
That was easy, right?! We think so–and most importantly, you’ve taken the first steps towards transforming your career in web development. So now that you've read this article and know a thing or two about building a website from scratch, check out our bootcamps in web development, offering in-person across the world remotely, permitting you to learn the necessary skills to work as a web developer.
We can’t wait to see you in class!
