Learning Front-End Web Development the Easy Way

A friend invited me over for her birthday party but I had no idea the route to take to the location. Assuming it was during the pre-internet era, she'd start some explanations that may end in confusion. Thanks to Google Maps, I was able to navigate to the venue without stress. Knowing where you are headed is one thing, finding your way there is another ball game entirely.

Are you eager to learn Web Development but you are confused about the path to take?

I was in the same position that some years back🥺but unlike me, you'll be getting a free guide right from your current location to your desired destination🤓. Look no further as this article will help you find your way. So, grab a bottle of water and read on...👍

Web Development at a glance

Web Development involves the building and deploying of websites or web applications using programming languages, database systems and other resources necessary. The advent of the internet brings about the need for individuals and organizations to own spaces on the world wide web through the use of a website. Behind that beautiful and interactive web application or website you visit, there are several techniques and stages to arrive at that usable product.

Every website is made of the:

Front-End

When you stop by at the grocery store downstreet to window-shop, you are often attracted by the display and may be pushed to even pick up an item off the shelf. This experience is similar to what you get when you visit a website with an aesthetic and functional interface. The front-end of a website is the part that has to do with how the user interacts with the site. It is also referred to as the Client-Side. To build the front-end of a website, you’ll need to learn HTML5,CSS3,JS and at least one JS framework.

Back-End

Also referred to as the server-side, the backend is concerned with saving the resources of the website in a database somewhere on the world wide web. The backend is responsible for ensuring that a user’s request is successfully replied with the right answer. You could think of the Back-End as the grocery store attendant, who accepts your order, processes your payment and packages your requested product from the display shelf right into your hands. This store attendant also ensures that products are always available for display and sale. To build the backend of a website, you’ll need to learn at least on database management system such as SQL, and programming language such as PHP, Python, Nodejs etc.

This article will focus on Front-End Technologies, subsequent articles may be based on BackEnd Development.

Read more on the stacks for the different ends of website development

So far, I have mentioned Web Application a couple of times and you may be wondering what exactly it is. It’s not my intention to make this a boring long read but a brief stopover at what a Web App is, won’t hurt right?

Difference between Mobile App & Web App

Bootstrap (3).png

A Mobile Application is a software product with different feature and runs only on a mobile device and mobile Operating system.

A Web Application is a lightweight application built to run on your browser. Let’s say it’s a low scale version of a mobile Application. Unlike a Mobile Application where you need to download, install and sometimes register your details to get started with the App, a Web App runs without any of the rigors of a mobile App.

A major advantage of a Web App over Mobile App is its cross-platform ability; this means that it can run on any device or Operating System (OS). In the case of mobile apps, the app needsto be built specifically for a device or OS. Web App is also lower in cost to build and easier. A common framework for building Web Apps is Reactjs while Flutter and Kotlin are popular for Android Apps. Websites and Web Applications are built using almost the same techniques; this is our area of focus, so when I use the word: “Web Dev”, I am basically referring to both.

Let’s go on to the technologies for frontend development; what to learn and where to learn.

Technologies used in Front-End Web Development

Bootstrap (2).png

HTML5

Although not classified as a programming language, Hypertext Markup Language(HTML) is the foundation of web development. Irrespective of your stack, it is advised that you have a basic knowledge of a Markup Language where HTML sits as king.

HTML is used in creating web files to be run on a browser. It has gone through different stages of development from XML through to HTML5 which is the current version. HTML5 has features like placeholder, multimedia, mass storage and JavaScript APIs. Adequate knowledge of HTML5 will help you build your project easily and also plug in APIs without stress. Every aspect of HTML5 is very important but some aspects are more important across every project.

These Areas of HTML5 are worthy of more focus when learning HTML5

HMTL5 Basics: Navigation, Lists, Forms, Tables, Inputs, Multimedia(audios, videos, images, plugins),Responsiveness. Any of the sites listed below can get you started with the basics:

HTML APIs: Drag & Drop, Web Storage, Geolocation, Web Worker, Server-sent Events(SSE). To learn about each of these APIs, check any of these links:

CSS

Cascaded Stylesheet (CSS) can be likened to the gorgeous attires your favorite friend wears to look beautiful. HTML creates the web documents and cares little or less about its ”beauty”, hence CSS is responsible for the colors, fonts, display and indeed the entire appearance of your web page. In other words, CSS is used for styling web pages.

Most Developers refer to CSS as the simple looking technology with too many technicalities because a little error can mess up your entire web page appearance. With more practice, you’d grow into developing appealing user interfaces.

In learning CSS, you should pay more attention to:

CSS Basics: Selector, Tables, Display, Margin, Padding, Border, Background, Pseudo-class, Pseudo-element, Font, Multimedia, Inheritance

Responsive Web Design: Grids, Flexbox Media query

CSS Preprocessors: When styling a web page, there’s a possibility that some elements will be styled alike. Instead of rewriting codes over and over, preprocessors allow you to write your style rule once and call it where and when necessary using the specified method of the preprocessor.

The two major preprocessors are Synthetically Awesome Stylesheet (SASS) and Leaner Stylesheet (LESS).

To learn SASS:

To learn LESS:

JAVASCRIPT (JS)

A very popular multi purpose programming language, JavaScript is known for its efficiency in being used to create interactive websites or applications. JS is the coordinator of movement on a website, this means that without it, what you simply have is a static website. JavaScript is quite broad, hence you should be more interested in building solutions with it instead of trying to be a “wizard” at it. In order words, learn with a project based mindset, else you may find yourself in an endless loop of haphazard learning.

Here are some areas of JS to pay more attention to:

JS BASICS: Statements, Data Types, Logical Expression, Functions, Objects, Arrays, List, Conditionals, Scope.

JS ASYNC: Promises, Callback, Async/Await

JS WEB APIs: Web Storage API, Web Worker API, Web From API, Web Fetch API, Web Geolocation API

JS AJAX: Http request/response, XML file

Here are links to tutorials on JS for beginners:

JS Libraries

Asides learning the fundamentals of JS, there are JS libraries that you should get acquainted with. These libraries aid the functionalities of your web pages , as the vanilla javascript is restricted to little operations.

JQUERY

JQuery makes it easy to manipulate HMTL page on the DOM (Document Object Module)

JSON

JavaScript Object Notation (JSON) is a JS library for storing, importing and exporting data in text-format.

Frameworks

Bootstrap CSS

Bootstrap is a popular framework that uses HTML,CSS, and JS. In fact, you could buy some Bootstrap template online and tweak it to suit your website’s needs. It uses the SASS preprocessor methods, some media queries and JS operations to build responsive web pages.

Bootstrap makes frontend development easier, faster and easy to debug. It is also quite easy to learn and uses styling in the form of classes directly in the html element’s opening tag.

Although some of its earlier versions are still available, check your PC and development environment for compatibility before installing any version. You can learn Bootstrap extensively by checking the documentation and/or any of these links:

Reactjs

The trending JavaScript Framework in Front-End Web-Development is Reactjs, it is an open source framework built by Facebook known for building interactive websites and Web Applications. It comes with a complete development package that you can install and edit to your taste.

React completely builds your website or Web App by separating each section into tiny components. These components are linked together to form a meaningful whole. You can easily learn React using these tips. If you want to build ecommerce sites, e-learning portal, blog, or any Single Page Application then Reactjs is your go-to option

Check any of these sites, to learn Reactjs:

Vuejs

Another popular is framework for building user-interfaces is Vuejs, it uses components and declarations to build simple or complex user interfaces.

Vuejs has some similarities with Reactjs such as the component based style and they both work with HTML,CSS and JS. Unlike Reactjs, Vuejs uses either of these two API methods for its build setup: the Option API & the Composition API.

You can start learning Vuejs via any of these links:

Where do I Begin?

Bootstrap (1).png

Now that you know the various streets that lead to the Front-End Web Development junction, the next question will be, how do I get there? You can become efficient at front-end Web Development when you:

Start by Learning HTML5

Learn HTML concepts and pay more attention to the areas listed above but above all, let your learning be project based. So, begin by building a static web page, that is a page with just texts alone. Write the HTML codes and run it on your browser worry less when it looks funny, it’ll make some sense later on.

Move on to CSS

Now that you have your static web page running on the localhost, won’t you want it to look more appealing? Learn some CSS and apply it to your web page. Pay attention to the positioning and other areas listed above, also ensure to interpret designs correctly into CSS rules.

Learn and practice JS

Congratulations as you now have a pretty good-looking web page but sorry, it is still static! Take a deep dive into JS and learn the functions and other operations to make your web page interactive. Perform JS operations repeatedly on your HTML codes, look out for the error messages and debug where necessary.

Pick a Framework (CSS & JS Respectively)

You sure deserve an applause for learning this far. Now that you are done with “Vanillas”, it is time to go a step higher by learning frameworks. There are tens of CSS frameworks out there, in order to get overwhelmed, select one and learn till you are conversant with it

Choose a JavaScript Framework: Just like in the case of CSS Framework, also pick one JS Framework out of the numerous ones there, learn and build mini-projects with it.

While the emphasis remains on learning plus practice method, resist the urge to learn more than one framework simultaneously. The reason is that, you may end up mixing the syntax and trust me, it is not good for your learning. Rather, be conversant at one before moving on to the next. Nothing and None stops you from being the best you can be

Conclusion

I’m glad that you were able to read this far. You can begin your learning immediately and also look out for learning partners to aid your learning. Do not limit yourself to the links shared in this article, feel free to utilize your search engine. A journey is twice easier and faster when traveled with a companion, you can make this guide your companion in your front-end development journey. I look forward to congratulating you for a job well-done.