Unleashing Your Inner Web Designer — A Quick Dive into Front-End Development
Have you ever clicked on a website and found yourself marveling at the overall aesthetics of the website? Or perhaps have you ever used a mobile application with a UI (User Interface) that is gorgeous enough to make you keep coming back to the app just to goggle at the application’s designing? Have you ever felt your heart slightly flutter or your eyes go anime- like starry eyed, every time you visit a particularly well designed website? And maybe.. perhaps have you ever had a tiny voice in your head convincing you to try designing an aesthetically pleasing website yourself?
Well if you have, congratulations because you probably have a flair for drama as myself but more importantly, you probably have a good eye for design. So why not rally the odds in your favor and take your first step onto the path of front-end development?
Mastering front-end development will not only make you finally understand why websites behave the way they do, but it will also allow you to finally build your own website/mobile application with that jaw dropping UI you have always wanted to create!
Before we dive into the specifics of front-end development however, in the chance you haven’t heard of the term front-end development, let’s demystify it.
In layman terms, front-end development is the creation of things that the user sees in a browser, using the 3 front end programming languages. In a nutshell, a front end developer is responsible for designing the UI — User Interface of your website/web application.
So how do you get started on building your dream website? Like every glamorous success story to be told, it begins with a not so glamorous beginning — roll up your sleeves and grab that big mug of coffee, because dear amateur front-end developers, you’re going to have to do some solid studying before you build your first ever website.
If you want to be the next whizz at front-end development, you need to master the 3 front end programming languages, namely- HTML — Hypertext Markup Language, CSS — Cascading Style Sheets and JS — Java Script. In case the technical jargon is already making you regret your choice of choosing to build your end website, worry not, I promise you learning these 3 languages is not as hard as it sounds. (well mostly speaking).
A very simple way to understand how these 3 languages work is to use the analogy of creating a human figure, similar to building a website.
HTML — This is the skeleton of the human body. Similar to how bones provide structure and support to the human body, HTML provides structure to your webpages.
CSS — This is the clothing and appearance of the human body. Just as clothes, hair color and makeup determine how an individual looks, CSS styles the HTML elements, making the webpages visually appealing.
JavaScript — This represents the actions of the human body. Similar to human actions like walking, jumping, JavaScript adds interactivity and dynamic functionality to webpages, allowing elements to respond to user inputs and perform various tasks.
All 3 languages work together to produce your final product — a website.
Now that you’ve hopefully understood the 3 front end programming languages in brief, let’s analyze them in depth.
What is HTML?
HTML — Hyper Text Markup Language, is the standard markup language for creating web pages, providing the structure of the website. HTML uses predefined tags and elements that tell the browser how the content has to be displayed. It is used to annotate text in order to make it understandable by machines, storing the code files with a .HTML extension. So every webpage of your website is made up of HTML tags denoting the type of content on each page. With the help of HTML, you can add headings, format paragraphs, insert images, create links etc.
Figure 1 below shows the basic structure of an HTML file.
Unlike other programming languages, HTML doesn’t produce its output on a compiler, instead web browsers( Google, Mozilla Firefox etc) are used to show the output of your HTML code, so your HTML document can be opened as a web page in the browser.
HTML was first introduced by Tim Berners-Lee in 1991, with the very first version being HTML 1.0. It has long since evolved to HTML5 which is the most recent version of HTML. HTML has various advantages including its versatility which allows it to be supported by all browsers and integrated with languages such as CSS and JavaScript.
However, HTML has one major disadvantage — it allows you to create only static web pages; web pages with content that does not change dynamically, unless manually updated.
Now that we’ve covered HTML, let’s stop to take a look at CSS.
What does CSS do?
CSS (Cascading Style Sheets) defines styles for your web pages including the layout and design of each web page. CSS is essentially the decorations you are adorning your webpages with. Without CSS, your webpages will look bland and visually unappealing, like in Figure 2, pictured above.
With the help of CSS, you can format all your HTML elements, whether it be changing the color of your header or adding a background image to your website.
The CSS of your webpages are generally stored in an external stylesheet file with the extension .css, providing a convenient way to adjust the look of your website by accessing only the .css file.
Figure 2 below shows the css added to the index.html file we created in Figure 1, as pictured above.
CSS frameworks, which are pre-prepared, ready to use CSS libraries, are often used to make the task of formatting webpages easier, as opposed to formatting every webpage from scratch. CSS frameworks aids with responsive design, cross-browser compatibility and customization, proving to be an essential tool to have under every front end developer’s belt.
So now that we’ve created our skeleton (HTML), clothed it (CSS), how do we make it interactive? How do we do make our website interact with users and provide outputs based on user inputs? This is where the scripting language, JavaScript comes into play
What does JavaScript (JS) do?
JavaScript allows you to create and control dynamic content ; without requiring manual intervention.
If you’re having trouble picturing how JavaScript works, think of how Google automatically suggests search results based on the few letters you’ve entered or how your Instagram homepage automatically updates when new posts are uploaded, without you having to intervene and hit refresh.
JavaScript is often used to fetch data, manipulate the DOM and handling events through user interactions.
A few examples of JavaScript at play in a webpage is displaying alerts and prompting user input, form validation, changing content dynamically such as a button changing color when you hover over it.
JavaScript code can be added to a webpage directly using <script> tags or the JavaScript code can be maintained in a separate external header file saved with a .js extension.
Figure 3 below shows some basic JS added to the Click Me button created in the index.html file. Once the Click Me button has been clicked, an alert dialog box opens up, displaying the message “Button was clicked!”
You might be wondering how the final webpage would look like, once we’ve correctly linked our styles.css and script.js file to our index.html file. The picture below shows you your output — the alert box pops up once the Click me button has been clicked.
In conclusion, front end development is the art and science of crafting visually appealing, interactive and user-friendly websites. By mastering HTML, CSS and JavaScript, developers can create a rich user experience that will keep visitors engaged and satisfied. Whether you’re just starting out on your front end development journey or you’re looking to enhance your skills, understanding the very basics of front end development is a pivotal step towards building the web of tomorrow.
So cross your fingers and take that first step towards bringing your web design visions to life today!
