Front-End Web Development

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:

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!