What languages and tools I used when learning web development

In this article I’m going to cover the languages, tools, libraries and frameworks I used that have helped me become the rookie-developer that I am. Maybe not so rookie for you! From Bootstrap to the react-intersection-observer - and the challenges that I faced.

FreeCodeCamp

Give credit where credit is due - Quincy Larson, the founder of freeCodeCamp.

FreeCodeCamp is where I wrote my first “Hello World”. It’s a free online platform that takes one from absolute zero to security and machine learning.

Its courses are clearly transparent and well planned. Each short lesson introduces you to a concept then gives you a test where you have to apply what you have learnt in its integrated code editor - all on one screen.

There’s a huge and ever growing online community and FCC has its own forum. They have dedicated developers roaming the forum, answering questions if it hasn’t been answered by other users.

At the moment FCC is trying to expand their audience by supporting other world’s languages, currently the forum supports Chinese, Japanese, Spanish, Italian and Portugues.

If you’re looking to start your journey, give FreeCodeCamp a go.

Online Code Editors

Online code editors are perfect for beginners. I started with CodePen after I was introduced to it by freeCodeCamp. I built my very first landing page on CodePen and to the present day I still use Codepen as a playground i.e. to quickly test a simple JavaScript function or try a new CSS property that I have learnt.

The beautiful thing about CodePen is that it’s beginner friendly and easy to use interface.

There are other online code editors that are more powerful, e.g. CodeSandbox, which allow its users to run complex frameworks and libraries such as React, Node js, npm packages etc.

HTML & CSS

I used FCC’s curriculum to learn the basics of HTML and CSS. It’s a good starting point if you have no previous knowledge. The curriculum starts with understanding HTML elements and tags and progresses to form elements and accessibility.

Meanwhile in CSS the learner begins with applying simple colour styles and understanding CSS selectors to flex-box, grids and media queries.

There is a complete course on responsive design which introduces design for mobile responsiveness.

Overall I certainly believe FCC is a good starting point for HTML and CSS.

CSS Preprocessors

What are CSS preprocessors? They’re essentially an extension of CSS. It helps us write CSS in a more flexible and efficient way and gives us more useful features. There are a few preprocessors out there but one the most popular ones are Sass, Less and Stylus. Though I believe Sass is the more popular one.

Whichever you choose just know that CSS preprocessors need to compiled - browser don’t understand Sass or Less. Depending on your working environment you may need a compiler.

I, personally, have learnt Sass - Syntatically Awesome Style Sheet. Sass introduces more powerful features over pure CSS. It allows one to use nesting, partials, mixins, variables, loops and allows you to design your own grid system if you wish.

I used a combination of learning resources when learning Sass or SCSS (Sassy CSS). There’s a short module on FCC that introduces Sass. After completing it I watched a brilliant video made by Patrick Muriungi who builds a portfolio page using Sass and Bootstrap 5. Be aware it’s a five hour video though all you’ll need is the first 1-2 hours to understand how nesting, partials, variables and mixins work.

One of the challenges I faced when incorporating SCSS and particularly when looking at other developers’ work is how to structure the files. From a simple two file structure - that is just an HTML doc and a CSS style sheet - I know have at least 10 files with SCSS. Staying organised is key and so you’ll need to learn about structuring and organising your files accordingly.

The other challenge I faced was learning how to write npm scripts in the package.json file. I needed to tell the compiler where the Sass files are and where do I need the compiled CSS file to be.

I’d strongly recommend learning a CSS preprocessor, especially Sass, as it’s used in many projects you come across.

Bootstrap

Bootstrap has been around for over 10 years. And it’s one of, if not the most widely used UI framework.

Bootstrap makes styling a thousand times easier. A simple example is if you wanted to style a button you would simply add the class .btn in the HTML element. If you want it to be a red button then add .btn .btn-danger - very simple and beginner friendly.

One of the most useful features is its grid system. Bootstrap is designed to be ‘mobile-first’ and thus its grid system revolves around responsiveness. You would not need to worry about media queries filling your style sheet, Bootstrap handles it.

I’m sure many developer would agree that positioning or sizing different sized images can be a nightmare! With Bootstrap all one needs to add is .img-fluid class and my image is now responsive!

Bootstrap & Sass

With all the beautiful things Bootstrap can do, to fully utilise it and appreciate its power is to use Sass alongside it. Unless you’re planning to use Bootstrap’s own theme, colours, variables and its grid’s breakpoints values then you would need Sass to edit Bootstrap’s default values.

Warning! If you install Bootstrap via npm or yarn, do not over-ride Bootstrap’s default values from Bootstrap’s own files, rather copy the values you need into a separate partial file and use that file for editing the values.

If you want to learn Bootstrap there are plenty of tutorials online. I watched dozens of videos to grasp the grid system. I then hopped on Codepen, used Bootstrap’s CDN and started experimenting. Once I learnt the fundamentals I watched Patrick Muriungi’s video that I referred to earlier to truly absorb the entire process of Bootstrap, Sass, creating custom styling and compiling.

Icons

Today’s websites and applications are filled with icons and it’s important to learn where to get them from and how to add them to your website.

There are hundreds of places to get icons from the internet, and they come in different forms such as SVGs and PNGs. The former is always preferred as SVGs provide better quality.

Depending on when you are in your journey and the nature of your project, you can install npm packages, copy CDN scripts in your document or download and use as PNGs. Then there’s the free ones and there’s the premium ones.

One of the most popular icon libraries is Font Awesome - an extensive library of free icons.

For the Bootstrap lovers, Bootstrap has its own library of icons.

If you’re learning React then one of my favourites is react-icons - a bundle of many libraries put together so you only ever need to go to one library to search across all libraries.

There are plenty of other icon libraries and they’re just a Google search away.

JavaScript

Ugghh.. this thing again.

I’m not going to explain what JavaScript is but simply share the best resources to learn from.

I need to put a disclaimer here: I did an engineering degree at university and have seen code before but in the C++ language. Even though it’s been about 6-7 years since I still remember the basics of arrays and loops, so some aspects of JavaScript was easier to understand.

I started with FCC’s JavaScript curriculum and was introduced to the fundamentals, arrays, objects, functions, variables, loops and the like. I completed most of the module before I was burnt out. Even though FCC does a good job at getting its users to practise and apply their learning I somehow still did not understand how the different areas of JavaScript tie up together e.g. I made a function to multiply two numbers together or a loop to iterate over an array but how do these apply in the real world of web development?

Off I went to do some research and I came across a fantastic course on LinkedIn by Morten Rand-Hendriksen. This is when I was introduced to the DOM (Document Object Model) which is what is used to manipulate a webpage using JavaScript. Morten Rand-Hendriksen was a carbon copy of my way of thinking. By this I mean I enjoy learning backwards i.e. learning how to manipulate the DOM before learning more of the tedious stuff e.g. variable scoping.

After watching Rand-Henriksen’s series of tutorials I felt I was confident enough to start creating some simple JS projects e.g. a weight converter. I built a few things after that and from there the ball started rolling quicker.

Time for a JavaScript library!

React

React JS is one of the most popular JavaScript libraries for building user interfaces. It was built by Facebook and uses a component-based approach i.e. breaks down a webpage into different components which makes displaying and coding a lot easier.

It has its competitors e.g. Angular and Vue. I chose React arbitrarily - I know at some point I would probably learn all three but for now React satisfies my needs.

React makes building websites easier as it gives us more useful features than vanilla JavaScript. We can control states e.g. isOpen or isClosed. We can choose what to render or re-render whenever we like. There are things called hooks which help us re-use our code instead of re-writing it again.

One of the advantages of React is the use of JSX - JavaScript XML. It allows us to write HTML in React, so we can have our JS code and HTML all on page with conditional rendering. So you’ll need to learn JSX, but worry less - it’s identical to HTML. It only takes a few minutes to grasp it.

There are of course many more benefits to using React that I cannot simply list here.

One of the best learning resource I used is a YouTube series published by Net Ninja. It takes you through the basics all the way through routing and creating a blog site project. It was all I needed to get a firm understanding of React.

Once I had learnt the fundamentals of React and made a few projects with it, I found some aspects of it more intuitive to code with than plain JS. It makes things easier but there is a big learning curve involved.

Gatsby

Gatsby is a static site generator. A ‘thing’ that generates static sites.

This portfolio is built using Gatsby. Why Gatsby? Because I can code with React, add plugins, choose a template to start with if I wanted to, comes with Webpack already integrated and graphQL - a query language for APIs.

It’s ultra-fast! Webpages are built at build time and so there are no requests to servers every time a user navigates to a different page. Lastly, it has improved SEO than React just because the pages are server-side rendered. So the content is available to Googlebot and other search engine crawlers.

The world of static site generators, because why make things from scratch?

Here’s two resources where I learnt Gatsby from, however be aware that there has been quite a number of updates so be ready to do some research when you get that ERR message! There’s a few things at play - Gatsby, its plugins, GraphQL and other features so you’ll need to be sharp at Googling when the time comes. But the feeling of accomplishment is ecstatic!

Ok to the resources:

• The Great Gatsby Bootcamp by Andrew Mead.

• Gatsby Tutorial by Net Ninja

One thing to note: GraphQL is better learnt from Net Ninja as it is more up to date. In addition, he also has another full series on just GraphQL.

Other Libraries I used in my projects

Luxon JS - a library that deals with dates and times in JavaScript. It is the newer more modern version than Moment - which is now considered a legacy project. I used Luxon in my weather app to retrieve dates and times in different time zones around the world.

Animate CSS - A CSS library that deals with basic animation. If you want a simple fade or a bouncing entrance then this is the go-to library.

React Intersection Observer - a react library that tells us when elements enter or leave the viewport. It’s mostly useful when triggering animation to play when entering the viewport.

Material Design for Bootstrap - this is a cross over between the Material Design UI framework and Bootstrap.

Should you choose the same path?

Absolutely not. There are many ways to learn web development and many, many, frameworks, libraries and tools to choose from.

One of the most common questions I see being asked in forums is whether to learn x framework or y library. For example, should you learn React or Vue? The answer is to understand the key underlying principles. Once you’ve picked up the skill of learning things quickly and being able to accomplish a task with it then you can easily switch and learn other tools.

From my rookie experience of web development, the process doesn’t stop at a particular framework or library, there’s always something else to learn. So focus on developing your skills to learn a new technology and you’ll go a long way.