A journey through front end development

Updated: Sep 20


At the beginning of my journey with WayMaker Digital, I wasn’t familiar with front end development. Being informed of our tech-stack of choice to build a Web app prototype, I realised I would have to develop my skills in Front End development.



HTML and CSS


A large amount of front-end development is built on top of HTML and CSS. It is the bread-and-Butter of Web development.


HTML stands for HyperText Markup Language, and it is the language that is used to define the structure of a web page. It has different classes, attributes, and elements with different properties.

CSS stands for Cascading Style Sheets, and it is used to style web documents. Such as providing background colours, size changes and font. Any alterations you want to make to your web page can be handled by CSS.


Javascript


Once we have Structured and Styled our webpage, we can now enhance it with JavaScript.

JavaScript is programmatic code that enhances functionality and adds interactivity to web pages.


When you click a button, it actually works! *Gasps*. Usually, our HTML will have classes that we can then access with Javascript to add functionality. JavaScript also handles complex functions and features.


With the Three Pillars of web development, I was able to make small projects such as a stopwatch and a colour guessing game.


React.js


After coming to grips with HTML, CSS, and JavaScript. It was time to learn a Javascript framework, WayMaker digitals framework of choice was Reacts.js!


Using React we’re able to still incorporate HTML and CSS into our project development. Through its JSX markup Language, JSX stands for JavaScript XML. The mark-up syntax between JSX and HTML are very similar, you are able to use familiar syntax as opposed to learning something different and you’re able to build further experience with HTML5. The JSX is then styled by CSS.


Reacts arguably biggest positive is its component-based architecture and modular structure.


Components serve the same purpose as Javascript functions, but they work in isolation.


This allows for faster development; team members can work on different components and not worry about collaboration-based complications. It also allows you to produce independent and reusable bits of code. Saving development costs and simpler maintenance.


Once completing the font end react components, we want to make our front end interactive, to simulate the back end as a prototype. We then used react-router-dom library to handle navigation to different pages in the application. We also utilised Javascript events to handle the interactivity.


Through this, we were able to build out our web app prototype.


Kash Adeshina is a full-stack software developer with our partner company WayMaker Digital working on some ongoing software development projects. Kash is fascinated by anything Artificial Intelligence (AI) technology and has a couple of presentations on the subject matter on our Knowledge Sharing sessions at WayMaker Digital.

7 views0 comments