Intro to Web Dev — Frontend
The field of web development is vast: new technologies, libraries, and frameworks are popping up on a weekly basis and it can be challenging for a beginner to wrap their head around it. This is the first of a two-part introduction series to web development. (Note: This is not a step-by-step guide to building your first web app, it is simply an attempt to expose you to the various parts involved in web dev.)
Let’s start with the basics. Web applications can be split into two primary components — frontend and backend. Traditionally, the frontend or
client-side of the app is what the user sees and interacts with. The backend or server-side on the other hand is concerned with the working of the app — communicating with the database, managing data updates, etc. In this post, I will focus on the basics of frontend development, share a few tips along the way and end with suggestions on what you can do to further your knowledge. Frontend development begins with the holy trinity of HTML, CSS and JavaScript.
HTML (HyperText Markup Language)
HTML represents the structure of a web page and is used to specify its contents. When we visit a website, our browsers receive the HTML document for that web page and render it. The document consists of elements that are the building blocks of web pages. The elements are defined using tags, for example, <h1> denotes a heading, <p> denotes a paragraph and <ol>denotes an ordered list.
Using different elements, we can translate what we picture in our minds onto a web page. A good way to start is by creating a web page that describes yourself, exploring the various elements that HTML has to offer along the way. I recommend using an online code editor such as CodePen, where the interface helps you visualise code changes instantly.
CSS (Cascading Style Sheets)
You probably noticed that while HTML helps us define elements for web pages, the content can look quite bland. That’s where CSS comes in. CSS helps us style web pages — giving us the power to add borders, change font colours and sizes and even add animation. HTML elements have properties and using CSS selectors, we can change their values as such:
selector {
property: value;
}Let’s use the previous example and change the colour of the text in the paragraph to red and the font style to italics.
Often, we will have multiple elements of the same type. We can group some of those elements together using the class property or specify an id for an individual heading whose property we want to change. To better understand this concept, let’s use the analogy of a school. Every student in a school has a distinct student number (id) and different students may be in the same grade (class). In the CSS stylesheet, we can select by class or by id as shown below:
To use a class selector, we use a dot (.) followed by the class name whereas for an id selector, we replace the dot with a hash (#). If you notice carefully, the first paragraph has both an idintro and a class para. However, only the styles pertaining to the id get applied because id takes precedence over class. Codecademy has a great tutorial for learning CSS.
Once you have a good grip on the basics of CSS, you can start looking into using a CSS framework for your projects. Frameworks do most of the heavy lifting and enable you to style web pages quickly and efficiently. Think of them as a pre-computed theme that can be plugged into your project. Twitter’s Bootstrap, Foundation and Semantic UI are some of the most widely used CSS frameworks in 2017.
JavaScript
We created a web page with some elements and styled them. JavaScript enables us to make web pages interactive — responding to clicks, fetching data from a server, dynamically updating pages and so much more. It is a fully-fledged programming language and requires more time to understand than HTML or CSS. If you have any prior programming experience with other languages like Java or Python, a lot of the concepts will seem familiar — variables, functions, arrays, etc.
Let’s look at how JavaScript can help us dynamically update the content of the page.
With no change to our original HTML elements or CSS styles, we updated the document using JS. Additionally, we used the getElementById() function to retrieve the first paragraph and a variable named element to store it. While our example may not seem all that impressive, the real-world applications of JS are phenomenal. Imagine a scenario where you are using a social media website and you scroll down to the end of the page, the web page will dynamically fetch data and update the content using JS.
Could you write your entire app in vanilla JavaScript? Yes.
Should you? The answer depends.
As a frontend beginner, if you are building a light web app with minimal HTML manipulation and event handling requirements, you would be fine using pure JS. On the other hand, you can drastically reduce time spent on complex operations for feature-rich apps by using a User Interface library. The easiest one to begin with is arguably jQuery.
jQuery
jQuery is a JavaScript library that implements a “write less, do more” philosophy and helps speed up development time with rich DOM manipulation, event handling and animation features.
jQuery is similar to CSS in the way that it makes use of selectors and allows us to call functions on the selected element. Continuing from our previous example, let’s use jQuery this time around to carry out the same changes.
To use jQuery, we first need to import the library in the HTML. Elements can be selected using the dollar sign ($). As you can see, we can write shorter code using jQuery to achieve the same result. The official jQuery site has good documentation on the various available functions and features. Do keep in mind that by importing the jQuery library, we are adding a bit of overhead which can contribute to performance issues. Generally, jQuery is considered to perform slower than vanilla JS.
Where do you go from here? Start working on mini-projects, structuring your pages using HTML, styling them using CSS, adding interactivity using JS and implementing animations using jQuery. Kamran Ahmed’s front-end developer roadmap is a good guideline to help you navigate through the journey to becoming a front-end developer.
The next steps would involve learning to use a UI library like Facebook’s React, or frameworks like Angular or Vue.js. As you start building larger applications, the question of which design pattern to comes into the picture as well. I hope you have learned something useful, stay tuned for the second part where I focus on backend development.
“If debugging is the process of removing software bugs, then programming must be the process of putting them in.”
— Edsger W. Dijkstra
