After graduating from Sixth Form in the month of May 2021, I had gained an interest in web development in the transition period by spending a couple of hours a day on my old laptop, learning how to design web pages from scratch using simple HTML and CSS. A few months later, I have had the opportunity to work as part of the team at WayMaker Digital as a Full-Stack Web Developer, and it has helped me gain an understanding of the software I use around me.
Here’s what I’ve learned from this experience so far.
HTML, CSS & JS (and Variants)
These 3 coding languages (incl. variants) are the building blocks (or the foundation) of most static websites today.
HyperText Mark-up Language (commonly known as HTML) Is the backbone of any web page. It provides structure and core functionality to a website. The code consists of paired elements, classes and ids. All of which can be utilized by CSS and JS to make the HTML document prettier or to add more functionality to the web pages. The example is shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>
<body>
<h1>
Hello World!
</h1>
</body>
</html>Cascading Style Sheets (commonly known as CSS) contain the design rules and aspects of any web page that can be seen today. It pulls classes and ids from HTML or JSX (we will go over JSX in a later part of this Blog) to create styles. for example, you can change the margin or padding of a section by declaring these specific design rules in a CSS file. Example below.
section {
padding: 0;
margin: 0;
font-family: '...', sans-serif;
}There are tools such as TailwindCSS, Material UI, Bootstrap and many more which make this design process much easier. I personally have found it much easier to style a website with Tailwind, simply due to the fact that you only need a couple CSS files for an entire project, since it provides utility-classes that can be used and composed together to style HTML elements. It is also fully customizable with a config file and comes with tons of presets by default. This has helped me a lot, and I intend to keep using it to make CSS easier for me. Tailwind Example below.
// HTML Code
<h1 class="font-black text-xl">
<!-- font-black = font-weight: 900;
text-xl = font-size: 1.25rem; -->
This is a title
</h1>JavaScript (also referred to as JS) is an interpreted language which can be used on websites to help provide extra functionality to an already functional HTML website. It allows for more dynamic web pages, including adding functional Buttons, Switches and anything of the sort. It can also change valuable data, which may be useful to some websites. I have used JavaScript for creating simple and complex features for static websites and more responsive pages.
JSX
What is JSX? JSX is known as JavaScript Syntax Extension and It is used almost exclusively in React.js. it allows HTML elements to be converted into React Components. I have learned about it and I have used it for creating projects, including our Team Hackathon event that took place in October of 2021. It really helped creating components and getting the project functional. Here is an example.
// Function.jsx (Located in components folder)
// import React from 'react';
const UserData = ({ name, title }) => {
return (
<div>
<h1>{name}</h1>
<p>{title}</p>
</div>
)
}
export default Function;// App.jsx (Located in src folder)
// import React from 'react';
import UserData from './components/functions/UserData';
<div className='App'>
<UserData
name='John Doe'
title='Software Developer'
className='...'
/>
</div>
export default App;TS/TSX
What is TS or TSX? It’s a variant of JavaScript and JSX, with only one slight difference. Using TS (more commonly referred to as TypeScript) would mean you would have to determine the Types of the code, hence the name. This could be as simple as determining a username as a string, a number value as number or defining a simple true/false boolean, or it can dive into more complex terms where you can define certain types using custom text. Here is an example.
type Result = "pass" | "fail"
function verify(result: Result) {
if (result === "pass") {
console.log("Passed")
} else {
console.log("Failed")
}
};This can be used as a way to add a custom boolean (true/false statement) to a function, which can then be outputted. TSX is the same as JSX, but using TypeScript instead of JavaScript.
React.js/Redux
React.js is a well-known and popular library used for creating websites, utilized by big brands such as Facebook, Netflix and Dropbox, just to name a few. It is widely known for how modular it can be. It is based on JavaScript mainly but can be converted to TypeScript to make it easier to understand and debug. It also has a very expansive and extensive library full of features for pretty much anyone’s needs. During my time at WayMaker Digital, I have used this library exclusively and I have found many benefits to creating with React, such as manageability of code, the built-in error screens, etc.
For my first project as part of WayMaker Digital, we had to create and develop a CMS (Content Management System) Application as part of a small team. In this, we had to figure out how to go about this, and so we decided to pick React for our library. We used modules such as react-router-dom for page linking and navigation and CKEditor (WYSIWYG) to allow us to export Rich Text into the database we used for the CMS app. During this time, I learned a lot about what to do with getting said components to work successfully.
What is Redux? Redux is an open-source library in React, which can help with state management in a React Application. State helps us determine what should be displayed or updated accordingly. React already does this, and it’s called React Context, but it doesn’t store state across the whole web application, unlike Redux. Redux uses a thing called Reducers to change the application-wide state. This can include showing two different navigation bars on an application, depending on if you’re signed in or not.
Summary
To conclude this post, I have learned how to use languages such as HTML, CSS, JS, JSX, TS, TSX and libraries such as React.js to help me understand more about how websites work and the code behind them.
Ben Newman works as a full-stack software developer at WayMaker Digital, helping clients to solve business and technology challenges.
WayMaker Digital provides technology consulting, product design and information products, that enable our clients to consistently thrive and innovate to meet user needs. The quality of our experiences and ideas set us apart when it comes to service delivery, customer experience design and product development.
Our team of consultants have built digital experiences for leading brands with complex business scenarios ranging from startup companies to public services and from telecoms to e-commerce; no project deliverable is too complex.
Our approach: we adopt human-centred & design thinking models to solve complex business challenges, which ensure our clients are on top of their business.
Do you have a question or an enquiry; you want to discuss a project or need a free consultation? Give us a shout here.