Front End Developer’s Toolbox

Photo by Greg Rakozy on Unsplash

Recently, I was asked about the various learning materials I have been using as a self-taught developer. I thought, “Why not write about it & spread the wealth?” Keep in mind that there are a plethora of resources available beyond what I have listed and that these are the few that have allowed me to grow as a Front-End Developer.

Let’s get to it!

The Basics

Note-taking with Notion

• Notion is for notes, tasks, wikis, and databases. It serves as an all-in-one workspace for note-taking, task management, and project management.
• Features: highlight text, apply font color, add images, embed or bookmark links, nest notes, add call-outs, and utilize note-taking templates.

Save Code with repl.it

• Repl.it runs right from your browser with GitHub integration and support for nearly every major programming language.
• Feature: save code snippets or write examples to review any time.

Code Editor with VS Code

There are several code editors you can use. Visual Studio Code is fairly easy to install, easy to understand, and customizable. Here is a list of a few of the code extensions I use for autocompletion and formatting purposes.

• Auto Close Tag — Automatically add closing tag when you type in the closing bracket of the opening tag.
• Auto Import — Automatically finds, parses and provides code actions and code completion for all available imports.
• Auto Rename Tag — When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.
• Bracket Pair Colorizer 2 — Allows matching brackets to be identified with colors.
• Color Highlight — Styles CSS/web colors found in your document.
• Document This — Automatically generates detailed JSDoc comments for both TypeScript and JavaScript files.
• Dracula Official — A dark theme for VS Code.

• HTML Format — Formats HTML documents by auto-indenting, wrapping and removing unnecessary whitespace while preserving newlines.
• IntelliSense — Autocompletion for CSS class definitions that can be found in your workspace.
• Live Sass Compiler — Compile your SASS/SCSS files to CSS files in realtime with live browser reload.
• npm — Manage npm commands.
• Path Autocomplete — Provides path completion for visual studio code.
• Path Intellisense — Autocompletes filenames.
• Sass —Syntax highlighting, autocompletion, formatter.
• vscode-icons — Icons customization.

Study Materials

This is another friendly reminder that these are the few study materials which have allowed me to grow as a Front-End Developer. You can certainly find more resources online.

Enjoy!

How the Internet Works

• How the Internet was Created
• Fun Look at Internet Cables
• How do web browsers work?
• What is a browser console?
• General Understanding of How HTML, CSS, & JS Work
• Java & JavaScript are not interchangeable terms

HTML5

• Free Code Camp (FCC) Responsive Web Design — Basic HTML & HTML5
• W3School’s HTML5 Resources
• Syntax Podcast on Accessibility

CSS3

• FCC Responsive Web Design — Basic CSS, Applied Visual Design, Applied Accessibility, Responsive Web Design PrinciplesCSS Flexbox, CSS Grid
• CSS Flexbox Froggy & CSS Grid Garden
• CSS Cheatsheets — CSS Almanac, Flexbox, Specificity Calculator, CSS Grid
• W3School’s CSS3 Resources with emphasis on properties, selectors, modifying text, font, images, BEM, px vs em vs rem, responsive UI, media queries.
• FCC Responsive Web Design — BUILD YOUR PROJECTS!

It isn’t mandatory that you build your FCC projects with codepen. Instead, I opted to learn about Git & Github so that I would be better equipped to use the Terminal in VS Code.

Build Projects

Git & Github

• Sign up for Github if you are interested in being a part of a large open-source community. Prospective employers and the general public will be able to see your code and how often you commit your code. You can always make your repositories private.
• Learn some basic command lines with Git.

Additional Resources

• Animations
• Browser Support
• Colors — Paletton, Color Hunt
• Fonts
• Icons — Font Awesome, IcoMoon
• Images & Videos — Pexels, Unsplash

Other Ways to Design

• FCC Front End Libraries Certification Sass Section, Jonas Schmedtmann Advanced CSS Course on Udemy
• FCC Front End Libraries Certification Bootstrap Section
• Tailwind CSS

JavaScript

• Read documentation & try to understand it
• Before jumping into JS, I did a bit of side research on using node & npm.
• Syntax Podcast on The Fundamentals of JS

You don’t need to memorize the syntax. However, you should know how to use the tools in your toolbox.

Delve into:

• Numbers, NaN, infinity
• variables, let, var, const
• Unary operators, booleans, strings
• Methods, object, typeof operator, parseInt & parseFloat
• Comparison operators, double and triple equals
• If statements, else if, else, nesting conditionals
• Truthy and falsy values
• And(&&) Or (||) Not(!)
• Arrays & array helpers: push, pop, shift, unshift, includes, join, slice, splice, sort, find, filter, every, reduce, spread, rest
• Objects & nesting
• Loops: for, while, for of, for in
• Scope: function scope, block scope, lexical scope
• Higher order functions, functions as arguments, callbacks, hoisting
• Keyword this
• DOM manipulation: document object, getElementById, getElementsByTagName, getElementsByClassName, querySelector, innerHTML, innerText, append, prepend, remove, DOM events
• Asynchronous code, callbacks, promises
• Async, Await, API

If you are starting to doubt yourself after seeing all of this, do not let imposter syndrome consume you. Learning is a process, not a marathon!

• FCC JavaScript Algorithms and Data Structures Section
• How to set up your own testing framework
• BUILD YOUR PROJECTS!

Other Means of Interactivity

• FCC Front End Libraries Certification jQuery, React, Redux, React and Redux sections
• FCC Front End Libraries Projects

More Tools!

• Udemy courses by Andrei Neagoie, Angela Yu, Colt Steele, Stephen Grider, & more!
• The Odin Project
• Twitter #100DaysOfCode

What are some other resources and tools you have used or currently use? I would love to see them in the comments!