Search for a command to run...
I am a Sr. Frontend Engineer, Team Lead, with 10+ years of experience. I have experience building scalable, accessible, and responsive web applications. I enjoy writing about frontend development and hope to help you on your dev journey.
Well composed list of all the basic and necessary resources for development. I had like 50 extensions a while back and could hardly write a single line of code cuz the editor was super slow, learning from my mistakes, have come a long way now and much more to go. Thank you R
Really well organized so it’s easy to digest and just the right amount of info to get started with any of these technologies. Love stuff like this. Looking forward to that startup script article sometime in the future.
Thanks Sean! I Appreciate it. The startup script should be a fun one :).
In this week's article, I want to jump right into building a simple navbar using HTML and CSS. Let's take a look at the design we will be building and review the requirements. Table of contents: What we are building Requirements Implementation Concl...
When starting to learn HTML you will hear the term semantic markup. What does this mean and why is it important? Let's break it down and take a look at some examples. What is semantic HTML? Why is this important? Examples of semantic elements Conclu...
In this article, we are going to continue our Basic HTML series. Over the last couple of weeks, I have discussed basic HTML structure (Basic HTML Structure Explained) and explained what the head tag is (HTML Head Tag Explained). This week let's take ...
In last week's blog post Basic HTML structure explained I covered the basics of HTML structure. In this article let's go more in-depth on the purpose of the head tag. Table of contents What is the head tag? Title Tag Meta Tag Link Tag Style Tag Scri...
HTML is one of the first building blocks to learn how to build websites. There are a set of rules that must be followed in order to build HTML documents. Let's break down the basic structure of an HTML document to help us start building websites. Tab...
When beginning to code, sometimes it can feel overwhelming to create your ideal setup. When starting your web development journey in HTML, CSS, and JavaScript, it is helpful to have a starting point for getting set up. With so many different languages, programs, and free resources, you often find yourself wondering where is best to start. I've created a list of applications to help you get started in your journey to becoming a programmer. There are many ways to get yourself going, and I encourage you to do your own research to see what works best for you. Here are some great applications to help you get setup and on your way:
Homebrew is a package manager (see definition below) that allows you to install applications (packages) via the command line. One of the benefits of using a package manager is it allows you to automate your system install. This is helpful when you upgrade to a new computer and aren't restoring from a backup. What might take you hours to setup your system could take minutes with a startup script using a package manager (be on the lookout for a future article breaking down what a startup script would look like). If you are familiar with Linux this is similar to the apt on Debian or pacman on Arch.
A package manager keeps track of what software is installed on your computer, and allows you to easily install new software, upgrade software to newer versions, or remove software that you previously installed. As the name suggests, package managers deal with packages: collections of files that are bundled together and can be installed and removed as a group. - debian.org
NOTE: You don't necessarily need this to be a developer or to get started but it could become beneficial and I recommend installing it.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)". After running the previous command you may be prompted for further instructions.Git is a version-control system for tracking changes. Version control is the practice of tracking and managing file changes to your code or assets. Think about it as saving changes to a file in word or google docs, but keeping a record-of who changed the file, when it was changed, and what changes occurred at each save point.
NOTE: Version control is an important concept to understand. You will encounter this on your journey and I recommend installing.
git depending on your OS. The above link will have a breakdown of Link, Mac, or Windows. Here is a quick reference:git --version. If git isn't installed, it will prompt you with instructions to install.homebrew installed you can paste the following command in a terminal brew install gitgit. We can do this in one line sudo apt update && sudo apt install gitMy browser of choice for development is Google Chrome. I use chrome because I prefer the dev tools over firefox. In my opinion chrome's dev tools are easy to use, has a variety of extensions, and I like the built in feature that allows you to simulate mobile screen sizes. However, firefox is great and I use multiple browsers while developing to test my code and ensure it is working in all browsers.
There are many editors you can choose from. It will come down to personal preference in which one you choose. My editor of choice is VS Code. It integrates well with many programming languages and has a plethora of extensions to choose from. Below is the link to VS Code along with some alternatives you may like.
NOTE: You can use any text editor to develop. Even a plain editor like notepad. I recommend installing one of the below editors as it will provide additional tooling that will help you develop. Such as syntax highlight, code formatting, debugging tools, and more.
NOTE: You don't necessarily need any of the below extensions to develop. For each of the below extensions I explain why I use them and what they are used for. I encourage you to try them and see which ones you prefer.
.env files rather them appearing as plain text files.ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
git integration into VS Code. This allows me to quickly see when, why, and who changed a line of code without having to use the command line or another tool.There are a variety of terminal emulators to choose from. I develop on a Mac and my go to terminal is iTerm2. It offers a split pane feature that I like and use all the time. On windows I use cmder and on linux I use terminator.
NOTE: Most computers come with a built in terminal and you don't need to install a different one. I recommend becoming familiar with one as you will be interacting with a terminal when developing.
sudo apt update && sudo apt install terminatorNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. If you are on Mac or Linux you may want to install nvm which is a version manager. This allows you to switch between node versions.
NOTE: To be a web developer you don't need node.js. However, when you install node it comes with npm (node package manager, definition below from npmjs). I recommend installing this as you will encounter node.js and npm when learning from tutorials or classes you may take.
npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you’re sharing, so you can build amazing things.
nvm, open a terminal and enter nvm install node "node" is an alias for the latest versionnode you can replace node with the version you prefer.A HTTP and REST client allows you to send requests, view responses, and debug APIs. Postman and Insomnia both provide nice user interfaces to interact with APIs. I use these daily to ensure the APIs I am using are working as intended.
NOTE: You don't necessarily need to install a HTTP and Rest client to be a web developer. However, as I mentioned this will be beneficial to test APIs you are working with. I recommend installing at least one of the follow.
The term docker has become synonymous with the term container. From the Docker website:
A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another.
In simplest terms, a container allows you to run your application code segregated from other code on your system. This eliminates the need to install all of the necessary dependencies on your local machine. For example, I use docker to run WordPress without having to install all the dependencies WordPress requires such as apache, php, and MySQL.
NOTE: Docker is not a requirement and not needed to be a web developer. I included docker because it is something I use daily and is popular within the dev community.
There are a lot more tools out there that you will run into. I hope my list gets you started on your development journey. I encourage you to try them out and see what's right for you. I personally use each of these daily and have enjoyed working with them.
Check back soon for more posts where I outline how to break down a project, how to use project management tools, and keeping yourself on task and on target.
Most importantly, I would love to hear feedback on what you found helpful and if there are resources that you think would be helpful and/or could be added. You can leave comments down below or find me on twitter.