The thumbnail is a blue card with the title, "Learning & Growing: My Path to Front End Web Development", written on it. In the top left corner is the Logical Developments logo which is a diamond with the letters L and D inside of it. The letters are offset from each other vertically while also overlapping horizontally. The each sit inside of their own rectangle.

Learning & Growing: My Path to Front End Web Development

Aaron Muilne - Jul 2, 2021

For a list of links to the courses and resources that I have found useful read to the end!

 

Learning is complex. I imagine that it often starts by asking a question. For me, right now, it started by asking the question “How hard can it be?” It might smack of bravado, but we have probably been there more times that we would care to admit. I was asking this question about two years ago trying to update our ageing website, and due to budget constraints sticking with WordPress or porting over to another service was not an option.

 

On the surface, building a website from scratch is not hard. Assuming you have somewhere to put it, writing a static (a page that does not change or have interactable elements on it – Facebook is a dynamic site) website is not too hard – HTML is quite approachable. What you are doing is ‘marking up’ a document, telling the web browser (Chrome, Firefox, Safari etc.) what each part of the document is. Getting started is easy enough, but adding any sort of complexity is where the difficulty comes in. Searching for how to implement an item here or there is a great way to learn, but (at best) if you try to do that for everything it can all become an incohesive mess. At worst, you have duplicated what someone else has done without understanding it.

 

That is what happened to me. I got my head around static pages quickly, but as I started to think about what our site needed, I realised how much I did not know or understand. This makes it hard to coherently build out features (for the big-ticket item, Paul bailed me out with his CodeIgniter codebase). The ‘simplest’ issue to address was making our site look good on different devices. A common list of devices are phones, tablets, and desktops (or laptops). In version 1 of the website, I repeated myself a lot which led to many conflicts within my code, this made it hard to confidently make changes. I began to look for resources that would help me understand how CSS works.


One of the first resources that I made use of was the W3 Schools. It is a good place to learn the basics of HTML and CSS. It has a list of many of the properties of CSS and the semantic tags used in HTML with brief explanations of how each work and how to use them. It also has small interactive code snippets demonstrating the basic execution of many elements on a web page. However, many components were demonstrated in isolation which made it hard for me to understand how they work in a broader context.

From W3 Schools I began to search high and low for ways to improve my coding skills. If you look at Google Chrome on my workstation there is a folder labelled “(Web) Dev” which is an arm’s length long. Eventually I found Conquering Responsive Layouts, a free course taught by Kevin Powell. A low-risk opportunity to help improve my skills. Described as a course to help participants build websites that had responsive layouts – layouts that could change to suit the device the page was being viewed on. It worked, as the course progressed, I would make changes to my code that helped style up our website. Additionally, Kevin would link to his YouTube channel where he has many ‘deep dives’ into specific CSS properties and common layouts. He also linked to other skilled coders and resources – such as the Mozilla Develop Network Web Documents (MDN).

 

A while after I finished CRL, Kevin released a new course – CSS Demystified. This is the course for getting into how CSS works, particularly the Cascade in Cascading Style Sheets. The course encourages the user to embrace the nature of CSS, not fight it – which many non-CSS coders are doing. This allowed me to really cut down on the style sheet governing our page. Before I had a stylesheet for each page which often was a duplicate with small changes of the previous page. Now, as good as I found Kevin’s courses, this is not just a Kevin Powell appreciation post. Throughout the courses, I found my way onto other resources – some through Kevin (and his community’s Discord server) and some through Twitter recommendations.

What makes each resource valuable is they all enforce the idea of learning by doing, not just by ‘repeat after me’, but by explaining and showing why to do things – there is a learning section as part of the MDN. The more you create as part of the learning journey, the more opportunities there are to learn more about the subject matter. As I finished up the previous iteration of this site I found other learning areas – particularly in the realm of optimisation and ‘DRY’ (Don’t Repeat Yourself) programming. Thanks to tools like Lighthouse, I was aware of the pain points that needed to improve, combined with the courses that I had and was taking, I could make those changes quickly. Currently I am happy with how the site is now however, I have learned more since then and am still learning, so I hope to revisit and redo a lot of the current work.

 

With my head mostly around the fundamentals of CSS, I’ve been looking for ways to begin to get my head around JavaScript – like why does it have a mixed reputation, why are there just so many frameworks (and libraries) for it, how to write cohesive ‘vanilla’ JavaScript (that is, without a framework) and when to use it so that it will complement what the site (and user) need. To aid me so far in this stint of the journey has been the Front-End Developer Career Path over on Scrimba. It is a unique way of presenting their tutorials through an interactive video player cross code editor. With what I have learned there I have been able to add some simple dynamic content to our website for Admin 5 – each time the home page is loaded, a new image from Unsplash.com is loaded. The layout for the site was also inspired by what I have learned through CSS Demystified (and was what I was working my way through when I started to build the website).

 

A repeated mantra throughout all the courses and resources that I have found useful is this – do not just watch or read and be content you learned something, try it for yourself. Break it, fix it, and understand what the code does and why it works. In doing so, you can find all new avenues to explore and to grow in. As I mentioned earlier, I make use of the tool called Lighthouse to assess our website. It analyses the site for any performance issues and then makes suggestions on what could be changed. Currently we can optimise our images and I can shore up the layout so that text does not jump around as the page loads in.

 

Starting something new can be overwhelming, or just outright confusing. The “now what?” for me is often trying to figure out where to start. Start small and start at the beginning – it took me a few goes before I did that, but I am glad I did. I feel confident in my styling skills (even though I am still new to it) and am looking to keep learning. Remember, if you let it, every topic is a world unto itself – go as deep as you want!

Here is a list of all the various courses, resources, and materials that I have used and come across:

 

If you have any recommendations for JavaScript (and particularly Angular and Node) I am all ears! Yes, I do plan to start pulling up the documentation.