4 Free Tech Tools to Learn HTML, CSS and JavaScript

4 Free Tech Tools to Learn HTML, CSS and JavaScript

·

3 min read

First tech blog post on Hashnode.dev - IT'S LIT!

The goal with this blog is to NOT overthink the writing style and structure. I have a serious tendency to apply unnecessary pressure to myself. Especially when the purpose is documentation with the goal of inspiring and being an impact to someone else on their journey.

So without further ado, here are 4 tech tools I am using to (re)learn HTML, CSS and JavaScript.

GitHub.com

  • Every person who works in Information Technology or has an interested in the field should have an account for this FREE web/cloud-based Git repository hosting service.

  • Even if you do not plan to be a developer, having a GitHub.com account can be beneficial especially when you speak with the DEVs on your team. Speaking their language will earn you some brownie points.

VS Code

  • Now if you do plan to be a developer having a code editor is a MUST in your toolkit.
  • This is the one that I use professionally (aka for my day job) and I decided to include it for my personal projects to keep things simple for myself.

  • I may introduce myself to other code editors in the future, but for now VS Code gets the job done.

Let's Talk Extensions

Under the VS Code umbrella there are a number of extensions that I am using to help make coding easier for me. As if VS Code doesn’t already do that, lol.

These were recommended by Brad (instructor of #50ProjectsIn50Days on Udemy) and Mischa (DEV buddy, work colleague, pretty cool dude).

  • Auto Rename Tag - This will automatically rename the end tag for any HTML or XML tag.
  • Bracket Pair Colorizer - Makes it easy to see where you brackets start and end by using colorization.
  • Live Server - Allows you to preview your code as you make changes before you Go-Live in a production environment.
  • Prettier Code Formatter - Realigns your code to keep the format consistent.
  • Git Blame - Tells you who the last person was to commit the code to Git. Great for collaborative code.

Git Kraken

  • Another recommendation from a DEV buddy and colleague, Marc, I was struggling to wrap my brain around Git.
  • This visualizer has helped me to start to process the version control that is Git.
  • I definitely have much more to learn in the space. As I tinker with various projects, I know it will start to click.
  • Being able to visually see what is happening has been CLUTCH for me.

Safari

  • As a Mac user, I’ve decided to use the one that is native to MacOS for my development projects.
  • Honestly any web browser will do. I do have Chrome and Firefox on my machine and will definitely test my projects in those browser as well to take note of differences that I may need to code for.

If you are just starting your coding journey and HTML, CSS, and/or JavaScript are on your learning list. I definitely recommend that you check these tools out. All are FREE so there is no need for you to feel a sense of worry that you may not be able to afford it.

Hopefully this post was helpful to you. If you have any questions or additional resources, drop them below! I’ll definitely be back to provide updates of new tools I come across my coding journey…