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!
Who is a front-end developer?
A front-end web developer is a software engineer who implements web designs through coding languages like HTML, CSS, and JavaScript. If you head to any site, you can see the work of a front-end developer in the navigation, layouts, and in the way that a site looks different on your phone (thanks to mobile-first or responsive design). It's important that the information presented is user-friendly and effectively placed.
That said, to get the hang of front-end web development, you need to learn HTML and CSS, as a basis. More and more front-end developers are expected to know some JavaScript, too. Think about a website/web application like a house. You first have the foundation and structure (HTML) in place before making it aesthetically pleasing (CSS) and finally, you connect the electricity and other gadgets (JavaScript).
Let's break it down!
HTML
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
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.
Spoiler 🙃🙃!
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.
JavaScript
No, JavaScript is not a scripted version of Java...lol! In fact, it is not related to Java in any way.
So you know when you mouse click on a button to take an action; maybe submit a form and you see some kind of response to your action with some animation sometimes...yup, that's all JavaScript trying to manipulate the parts of code (like a switch manipulating the lights in the house) identified using the attribute of the HTML tag.
JavaScript is the most popular and widely used language for front-end content manipulation (all of the events that create a response that alter the original structure of the web page) also referred to as client-side scripting. Client-side scripting refers to scripts that run within your web browser. JavaScript is designed to add interactivity and dynamic effects to web pages by manipulating the content returned from a web server.
JavaScript was originally developed as LiveScript by Netscape in the mid-1990s. It was later renamed JavaScript in 1995 and became an ECMA standard in 1997. Now JavaScript is the standard client-side scripting language for web-based applications, and it is supported by virtually all web browsers available today, such as Google Chrome, Firefox, Apple Safari, etc.
JavaScript is officially maintained by ECMA (European Computer Manufacturers Association) as ECMAScript. ECMAScript 6 (or ES6) is the latest major version of the ECMAScript standard.
Now that you know all these, what's next?
Learn, Unlearn, and relearn!
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.
Now, you don't have to stop at learning pure javascript, you can learn how to use frameworks like VueJs, ReactJs, Ember, Angular to build sophisticated single-page applications.
Here are some helpful resources that I have found very useful.
📰 Articles - Dev.to, Medium, Daily dev, Hackernoon
🎓 Learn Online - Freecodecamp, Codecademy, W3Schools
📽️ YouTube Channels - NetNinja, WebDevSimplified, Academind
⁉️ Questions, check here - StackOverflow, Google
Top comments (0)