Recently, a friend contacted me asking for advice on how to get into front-end development. As a beginner it's always hard to start and follow a new passion, I know from experience. You don't know where to start, what resources to use or what language to learn first. Now add the fact that technologies and frameworks are ever-changing, it can be quite difficult and overwhelming starting out in the field of front-end development.
The general advice: Get used to the shallow waters before taking a deep dive!
This sounds obvious, but so many people rush through the basics so they can build cool things. Programming is iterative, and everything builds off of one another. If you want to become a good developer, it is crucial that you actually understand what is happening on the ground floor.
Let's get started!
Let's break it down!
HTML stands for HyperText Markup Language. It is not actually a programming language. Just like in the name, it is a markup language, responsible for defining your content, hence, the most basic building block of web coding.
Every piece of HTML code has these four elements:
▪️ An opening tag sets up the beginning of your chosen element, like emboldening, italicizing, or creating hyperlinks.
▪️ An attribute sets up the code for styling and/or manipulation through events.
▪️ The content that is being manipulated by the element, which might be an image or a text - or something else.
▪️ A closing tag, which always includes a slash before the element’s name... This signifies that the element has ended in that location. If you do not use a closing tag, the HTML code will result in an error (...I know firsthand the stress it can cause.) As a rule, I saw fit (adopted when you use tools like VS Code), I always closed my tags immediately after I open them.
NB: Some tags are self-closing while others are empty i.e. they do not open, close, or take any content.
CSS stands for Cascading Style Sheets. It is responsible for how your HTML elements are displayed on websites regardless of device. It's like a responsible adult making sure kids don’t talk too much or get out of line. The biggest advantage of CSS is that it allows the separation of style and layout from the content of the document.
This tool is important to use if you want to have more ability to stylize your web pages - working with HTML - including the overall layout, design, and design variations. Also, for varying screen sizes on different devices.
CSS does what you might think HTML was designed to do.
Here's what I mean...
With our house example, HTML is only the small unit of brick (which could form parts of the wall or pillars) in the whole house while CSS adds the structure (more like piling the bricks, leaving space for the cupboard and windows and doors).
HTML is just a mark-up tool. It was never meant to format a web page! CSS fills that gap, letting you apply advanced changes to font, color, and other attributes that are important for making a web page look awesome.
Now that you know all these, what's next?
So one of the things I had to get used to is how to use a search engine (google, duckduckgo, bing e.t.c.) to get answers because more often you'll find that someone has already solved something related.
Here are some helpful resources that I have found very useful.