Learn web development, system admin, devops, digital marketing, project management and more
Front-End Web Development
Book Shelf:

Front-End Web Development

The front-end development shelf includes topics like HTML, CSS, JavaScript and various JS frameworks.  It is an attractive area of computing to be a part of because you are working with the more visual side of building applications.  Being able to make changes to your code and see the results can make this area a creative skill to have.

Getting started with Front-End Web Development

Getting started with front-end web development may not be as difficult as you think. For most coders, it's the place where they start on their journey. Most likely playing around with some HTML and CSS to create basic web pages.  

Today, back-end development has become a very diverse field and has many specialised skill sets.  This may be such things as working on user interface design, coding for mobile applications, building progressive web apps, creating elaborate dynamic graphs and so much more.  Not to mention all the various JavaScript frameworks front end developers can work on.  React, Angular, Vue.js, Next.js, Nuxt.js and so much more. 

In an exciting and highly visual area of computing to be into. If web development was like being in a band, front end developers would be like the lead singer and lead guitarist!

HTML

HTML is the building block of web pages and generally where you will start learning about front-end development.  It is more a formating language as opposed to a programming language.  For example, if you want a block of text to be itemised in a list of items you will format this with HTML.  A programming language will enable you to take variable data to manipulate or process a result, not always visible to the end-user. 

CSS

Cascading Style Sheets (CSS) relates to the styling applied to HTML to alter the way it displays to the viewer of your website.  Nearly all websites these days use CSS in one form or another.  The technology depends on the inbuilt functionality of the browser as to what features can be used or not.

Here is a simple example of CSS where inline CSS styling is added to text. The code is given first then the result is displayed as rendered by the browser... 

Without CSS:

<div>This text has no CSS styling applied</div>

With CSS:

<div style="color: green; font-weight: bold;">This text has CSS styling applied to make the text green and bold</div>

Now to see the result rendered by the browser:

This text has no CSS styling applied

This text has CSS styling applied to make the text green and bold

JavaScript

JavaScript is like the brains of front-end development and a programming language in its own right. It allows you to manipulate HTML to achieve particular dynamic objectives. This possibly might be validating a form to make sure the correct data has been entered. It may be used to hide and display an HTML element on the page based on the user's action. The possibilities are vast when it comes to JavaScript. Unlike HTML, the learning curve is more steep, however the rewards are great!


Video learning resources on the Front-End Web Development shelf

How to Create a Wordpress Theme from an HTML Template

Author: FollowAndrew

Visual Studio Code Tutorial

Author: James Q Quick

Free HTML Course - Tutorial on How to Build a Website

Author: Mike Dane

Complete Guide to Open Source and How to Contribute

Author: freeCodeCamp.org

Related Video Tutorial Categories:

HTML/CSS Programming Version Control Wordpress

Books on the Front-End Web Development shelf