Have you been thinking about whether to pursue a career in website or software development? Hi, I’m Alton and I’m here to share my story about being a web developer for the past 3 years. I am currently studying Design Computing and Computer Science. I believe in the integrations of smart usable interfaces with programming to bring these designs to life (Being able to provide value to a handful of people is more than satisfying for me).
Most of you reading most likely visit websites almost every day, whether it is to shop, socialise, or even communicate with your co-workers. If anything the medium you are probably reading this blog now is on a website! Being a freelance web developer has offered me the freedom to work from home but also build meaningful products and web pages not just for clients but even friends.
The internet is now such a large part of society and the world in general and websites are a way of putting your information, content, or story out to the world. Sure you can send out the mail of your posters, cards, or advertisements but how much would that cost in the long run? And how long would that take for the mail to reach them? How would you know that they won’t just throw out your mail once it gets to them? Websites are a much more efficient way to push information to a large audience.
This career is extremely competitive especially in bigger firms but every business, freelancer, or even government are needing people to build their ever-changing platforms. Only recently I got offered a contract role from a recruitment company to join a team and localise one of the product launches from a big technology firm’s webpage. Unfortunately, I had to turn this down due to it being a full-time role but these opportunities don’t come every day.
Having a flashy degree is important in getting into the FAANG companies as a software developer or UI/UX designer. However, to successfully become a contract worker, freelancer, or being hired by a startup you would need a fleshed-out portfolio with many useful projects in your arsenal. Having projects that you have completed in the past not only shows you are competent in what you are doing but it also shows employers your progress that you are always constantly learning. The most common first project would be a portfolio website.
More often than not a lot of the technologies learned are extremely primitive and there are newer more efficient ways to solve these problems. This means that the only way to learn these new technologies and packages is to have projects. This blog is not designed to be an in-depth tutorial into building a website as these are stuff that can be easily found in the documentation that will be linked throughout if you are keen to find out more information. This blog is meant to inspire you that you too can create different web applications that can be extremely helpful in both your career or as a hobby passion!
The most beginner-friendly start to building a webpage would be through the Vanilla stack of HTML/CSS and JavaScript. This is going to be a very beginner-friendly and shallow review on functionalities that you can incorporate into your web pages or a quick start guide.
HTML
HTML is essentially the building block to any webpage. In this illustration, HTML is like the backbone of the entire website; put it simply the structure of the content of the website. Back to the house analogy, as shown above, this would be the foundation of the house.
Getting this initial part neat, functional, and most importantly sustainable and scalable is an extremely important aspect of writing HTML. Getting the foundations of HTML right is extremely important, especially content that you don’t generally see on the webpage itself. These are called meta-data.
Metadata
Metadata is data populated generally in the <head>...</head> element of the HTML. This can be where you populate your initialisations of the web page.
These generally include:
- Style sheets
- Fonts
- Title (What your browser shows)
- Documents character encoding
An example of a basic unpopulated HTML structure would look like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link rel="stylesheet" href="my-css-file.css">
</head>
<body>
.
.
</body>
</html>
Another example of Metadata would be features such as aria-labels, alt tags, and other attributes that go directly into the element
Attributes: All HTML elements can have attributes that provide additional information about the HTML element and this is defined in the start tag. These need to come in key and value pairs e.g key = “value”
Most of the information for these meta tags is often in the documentation from the elements themselves.
Meta tags are extremely under utilised especially in beginner developers but they help out with accessibility
As you can see here, indentation is extremely important to ensure readable code. HTML is one of the most annoying languages to debug simply because there is no error handling. Meaning that if you happened to forget to close one of your tags your page would simply look funny but it would still run. This becomes incredibly annoying as you build larger web pages or apps.
CSS
This is often the more fun part of developing a webpage. This is where you can include all the colours that style your HTML elements. As mentioned early this CSS document needs to be linked in the <head>...</head> component of the code so HTML knows where to reference the selectors.
Selectors
CSS selectors are important to memorise as this is how you would reference HTML and CSS. You may be wondering how would HTML know what CSS styles to choose if you want to specifically target a single element, this is where selectors come into place. These CSS selectors become extremely important once it gets to the JavaScript phase especially your choices in class names and IDs.
An important thing to note to how CSS handles overwriting styles (For example if you have already set a style for all H1 elements you can still style it with a class or id)
CSS Hierarchy
The way that CSS does this is through the Hierarchy of importance. This can be manually overwritten with the !important CSS rule. However, CSS has its own in-built hierarchy that goes by specificity. This means you need to think about which selector is the most specific.
Example of hierarchy
ID > Class > Element > Global
Types of CSS Selectors
- ID: #example → Can only be used on one specific element
- Class: .example → Can be used multiple times
- Global: * → Assigns styles to the entire document
* {
margin: 0;
padding: 0;
font-family: "san-serif"
}.main-heading {
font-size: 2 em;
font-weight: 700;
}#name {
text-decoration: none;
}
JavaScript
JavaScript in the house analogy is the appliances, that make the house liveable; this can be toasters, ovens, fridges, etc.
In programming terms, JavaScript provides the interactions of web pages. This turns your static website into a dynamic website. This allows the users to interact with the elements that you have created including making your buttons do other things than redirect to different routes. This means that you can add different logic and algorithms to your website. For example, if you have learned P5.js from the Design Programming unit, you can include this within your script file.
This is done by creating a new JavaScript file in your project and linking this script file from your HTML similarly to your CSS file. The difference here is that you would link it at the bottom of your <body>...</body> tag.
Why?
This is due to the way HTML reads and compiles its code. It reads from top-down and logically you would want to render the most important things first and if anything goes wrong with the webpage you want the content and styling to be displayed. For a webpage you would want:
Styles / Fonts → Content of the webpage → Script for interactions
The script file should always be loaded in last because the webpage would often run without the JavaScript component and some browsers do not support JavaScript or people can disable JavaScript. Loading it in first would have many issues like the entire page not loading if they do not have this feature enabled. JavaScript is often the cherry-on-top for most cases.
There are two ways of referencing code from HTML to JavaScript
The first method is manually calling your CSS selectors. This can include selectors, class names, and even elements.
This is done by three functions to manipulate the DOM (Document Object Model)
The DOM is a programming interface for web documents. This allows the programmer to change the document’s structure, style, and content and allows different programming languages to select and interact with different elements on the page.
The DOM comes with different functions that can be used in JavaScript to select different components in your HTML document. This is called by document followed by the selector function.
Main types of DOM selectors
These selectors will then need to be stored into their own variables in their own data types. A full in-depth overview of how this is done can be found here:
QuerySelectorAll can get extremely complex in terms of selecting elements and can be a very powerful tool. Feel free to look at more examples provided by W3 Schools:
The way I learned how to develop was not because I read most textbooks or documentation but rather learn by doing. In this blog, I want to share exactly the methods I learned how to build. The way I will explain these concepts will be to explain extremely simple JavaScript interactions as part of a website I made enabling charities to create a call to action.
In this case for the website, I wanted to create a call to action that was clustered together. This makes all the options available to the user easily accessible and everything in one place. One user feedback I got from my mockups was that the call-to-actions were all too far apart and it was difficult for users that wanted to donate and get introduced to a community in the same step.
The way I solved this issue was to create a dynamic component that depending on which tab the users chose it would display different information. This is done using basic conditionals. If donate is selected display Donate etc.
To start off the JavaScript file we would first have to create variables based on things that we are controlling including the things that are dynamically displayed. This includes the container, interactive bar, buttons, and which elements were active.
<section id='fullwidth-container'>
<div id='interactive-bar'>
<button class='btn active'>Donate</button>
<button class='btn'>Volunteer</button>
<button class='btn'>Community</button>
</div>
<div class='toggle-div activated clearfix'>
<p>This is your opportunity to spend money on something that is greater than yourself. <em>Remember it is not about how much you give but your attitude of giving that matters!</em></p>
<hr class='toggle-rule'/>
<div class='toggle-donation'>
<!-- Here I'm going to need round buttons -->
<button class='active-donation'>$5</button>
<button>$10</button>
<button>$15</button>
<button>$20</button>
<button>$25</button>
<button>$30</button>
</div>
<hr class='toggle-rule'/>
<p>Let us send you a thank you!</p>
<input type="text" placeholder="Email">
<button id='donate-btn'>Donate</button><!-- <img class='full-image' src="assets/kerin-gedge-a9CE7d_Kaq4-unsplash.jpg" alt="Kangaroo Image"> -->
</div><div class='toggle-div'>
<p>Volunteering is one of the most direct ways you can impact the world with your hard work. This is the most hands on experience you can get as a youth and we will provide all the training needed!</p>
<hr class='toggle-rule'/>
<div id='toggle-interests'>
<button>
<strong>Sports</strong>
<img src="assets/icons/001-community.svg" alt="CommunitySVG">
</button>
<button>
<strong>Animals</strong>
<img src="assets/icons/koala.svg" alt="KoalaSVG">
</button>
<button>
<strong>Kids</strong>
<img src="assets/icons/002-social.svg" alt="SocialSVG">
</button>
<button>
<strong>Volunteer</strong>
<img src="assets/icons/001-volunteer.svg" alt="VolunteerSVG">
</button>
<button>
<strong>Social</strong>
<img src="assets/icons/003-chat.svg" alt="ChatSVG">
</button>
<button>
<strong>Funds</strong>
<img src="assets/icons/online-donation.svg" alt="FundRaiserSVG">
</button>
</div>
<input type="text" placeholder='Other...'>
<button class="confirm openModal">Confirm Interests</button>
<hr class='toggle-rule'/>
</div><div class='toggle-div'>
<p>Communities are a great way to meet like minded people that want to help out and gain new lifelong friends in the process!</p>
<hr class="toggle-rule"/>
<h3>Why join a YWC community?</h3>
<p>Joining a community is the best and most engaging way to interact with what we do here at YWC. Find training programmes and friends to sign up with to both learn new skills and have experiences that cannot be found anywhere else!</p>
<button class='confirm openModal'>Join Community</button>
</div>
</section>
<section class='content-container'>
<div class='content2'>
<div class='section2-text'>
<h3 class='content-headers'>Communities</h3>
<hr class='title-border'>
<p class='content-text'>As you probably already know communities is one of the things we are promoting very heavily and this is for good reason! Joining communities not only allows you to make new like minded friends in terms of characters and hobbies but also allows you to find events and get updated!</p>
<h4 class='content-headers'>Community volunteering opportunities involve:</h4>
<ul>
<li>Setting up and clearing traps</li>
<li>Land management</li>
<li>General sanctuary maintenance and repairs</li>
</ul>
</div>
<img class='display-image' src="assets/community.jpeg" alt="Image of hands">
</div>
</section>
<section class='footer'>
<h4>Join us on social media!</h4>
<div>
<a href="<https://www.facebook.com/AWConservancy>"><i class="fa fa-facebook media-icon"></i></a>
<a href="<https://twitter.com/awconservancy>"><i class="fa fa-twitter media-icon"></i></a>
<a href="<https://www.instagram.com/australianwildlifeconservancy>"><i class="fa fa-instagram media-icon"></i></a>
<a href="<https://www.youtube.com/channel/UCCAuftd0CLk8SWTd0KMzs7g>"><i class="fa fa-youtube media-icon"></i></a>
</div>
<h4>Or subscribe to our mailing list for updates on upcoming events!</h4>
<div id='subscribe'>
<input type="text" placeholder='Email'>
<button>Submit</button>
</div></section>
--------------------------------------------------------------------
//Toggle initialisation
const togglePage = document.getElementById("fullwidth-container");
const toggleBar = document.getElementById("interactive-bar");
const btns = toggleBar.getElementsByClassName("btn");
const toggleDiv = togglePage.getElementsByClassName("toggle-div");
const activeBtn = toggleBar.getElementsByClassName("active");
const activeDiv = togglePage.getElementsByClassName("activated");
The next portion would be to use DOM manipulation to manipulate the class names to choose which elements are active states and those are the ones to be displayed.
//This for loop loops over the three toggle buttons and adds a click listener
//Since we didnt want to individually select each button using the in built
//Js onclick doesn't work anymore. We use these buttons to inject the class
//Active
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
activeBtn[0].className = activeBtn[0].className.replace(" active", "");
this.className += " active";
activeDiv[0].className = activeDiv[0].className.replace(" activated", "");
toggleDiv[i].className += " activated";
});
}
Just with this simple component alone, it turns our static webpage into a very simple dynamic webpage that changes the content based on what the user does or intends to do. Obviously, this can be scaled massively, and incorporating different interactions can give users whole different dimensions to the user experience.
If you are still starting off with the journey of web development with HTML/CSS and Javascript there are many ways to learn. However, the pay-offs of being able to build web pages that can impact a lot of people or even bring your insights and work to life are simply fulfilling.
Another important DOM function is the create element function. This literally allows you to create HTML elements in JavaScript. Do note it is better to dynamically create elements in JavaScript (although this is subjective) but it just helps to keep a much cleaner HTML document as seen above my incredibly long HTML file. Personally, I only did it in HTML due to the nature of the work where they required it in HTML.
Syntax
let newParagraph = document.createElement("div");
With this new DOM, function comes into play the advanced component React.js.
As usual, this blog post is not designed to give you a history on React.js (As there are many starts to finish tutorials on React) but rather give you my insights from the past few years that I’ve started developing as well tips and tricks on what I found important.
React.js is one of the many JavaScript frameworks that many developers use to make extremely scalable websites. This framework is built upon the createElement method that allows you to create HTML elements directly from JavaScript. One of the benefits of using React.js is its component-based nature as well as the many packages and libraries that are available for use.
One thing to note is that since React and JavaScript are constantly updating to allow developers to make web apps a lot quicker some or most of the documentation and tutorials you find online would be outdated. To be fair by the time you read this in a couple of years’ time this would be outdated too and there are many other better ways that you can solve the issues I am trying to solve. One of the most common changes is JavaScript’s revision to ES6 (ECMAScript 6) introducing new features and methods to the JavaScript language.
This means even if you look at the React documentation you would need to translate that into ES6 format or most of your code would not work with up-to-date packages.
Why do so many developers choose React over the traditional vanilla stack (HTML/CSS)?
Component-based structure
The way I think about it React works like lego similar to how HTML/CSS is like a house. Building each React component is like building a lego piece that can be reused over and over by adding new props into each component which dynamically changes how they work. Each prop that gets added changes the content, interaction, and usability of the component making them unique.
Remember the HTML component you saw earlier (yes the 100 lines of HTML), imagine if you can create one lego block and populate each lego block with children elements without having to rewrite that many lines. That is all possible with React.
To get started with this project (Which is fairly advanced to note) you would need to have the NPM package installer on your computer’s terminal.
There is an in-depth beginner guide on React by Tania Rascia
Unfortunately, I am unable to share my industry work with React from startup companies due to an NDA.
Since I am part of a society called CatSoc I helped develop their sign-up page to allow new users to register their interest and find a way for us to connect to them. This simple project was designed by the talented Jessica Cabrera and was built on React.js. Having a well-built and structured design template including reusable components such as form fields, color palette, buttons, and many many more; is integral to building this app efficiently.
There also needed to be form validations such as warning messages for when the users have entered an incorrect email or USU number by using regex expressions only allowing the users to submit once they have correctly entered in all the details. We do not want our excel sheet getting messed up by incorrect details.
The form submission had to then be linked to an API call that automatically populates a google sheet that we have created to monitor those that we need to stay in contact with.
This then needed to be hosted and the hosting platform we have chosen was firebase CLI owned by google. Overall the production took around 3 days and the success rate and interaction were quite high.
Here is a link for the page if you would like to check it out!
If you are keen to find out more about React and how I incorporated react.js into my workflow as well as how we produced this app; Feel free to let a SUEDE executive know and I would be more than happy to write my thoughts and experience on React.
Learning to program more than just HTML/CSS helps a lot in getting into this industry just because the vanilla stack is usually the barebones of what people can do on the web. Full-stack developers are more commonly employed especially by small companies because even being able to develop successfully in HTML and CSS but not being able to host it and get it live does not help the business.
There are many forms of developers, going from:
Front end — Handing the user interface of the project, going into more complex projects the front end developer needs to know basic algorithms such as regex expressions, handling workflows, and arranging arrays. This helps when dynamically rendering content especially with managing many layers of states which is a more advanced concept of React.
Back end — This developer usually handles the things that you don’t see on the browser. This involves the step after the front end does the API (Application programming interface — Basically how two applications can talk together in this case back end and front end software) call and the back end developers are the ones that develops these APIs and servers. The backend is often also in charge of hosting and maintaining the security and authentication of the website.
Full-stack developer — This developer is the most sought-after. Being able to handle both front end and back end at a decent level, most smaller startups and business often seeks someone that can handle both at a decent level. From designing a webpage to hosting a webpage and simple servers being a full-stack you need to understand a range of topics at a decent level.
Bigger companies however have different teams of back-end and front-end developers because they believe in specialising in the developer’s skills. Choosing someone purely for the front end ensures that the developer knows exactly what he is doing back to the front.
After learning the basics of HTML/CSS and JavaScript, I initially thought I was well equipped to face the industry and help develop web pages for small clients, businesses, and friends. For a while this worked out well however, those are often simple static pages that businesses use such as a landing page or Shopify website.
Only after I discovered the excitement it was to build actual web apps that I decided to start venturing into pure JavaScript frameworks which allow dynamic content right into the element itself. This helped me get an interview with the employer of a small startup where they were willing to help develop my skills further. Although this was unpaid work I gained a lot of experience in terms of business, development, design, proper use of Git as well as resolving conflicts. I worked here as a casual intern for about a year and during this time I was busy building my portfolio and different applications I could make.
Truthfully following tutorials won’t help you become a better developer but instead find passion projects or even work for people for free as long as you can use it to build your portfolio and skills. People often dread working for free but the stigma behind being a fresh graduate and needing 3 years of experience is real. The only way to have this experience is to prove to others that you can develop meaningful pages. Even now I still work on projects for my friends, family, and even small clients for free as long as I can reference my work, but obviously paid work in industry is important too.
There are many paths to actually being a developer but overall I hope this blog has inspired you to start to create meaningful projects and to always be seeking to learn new packages, features, and problems to solve. Being a developer has allowed me to solve many problems that people say are “too complex” and even up to today there are still so many things I have yet to learn.