This is the 2nd part of my Learn To Code For Free series. If you haven't read the 1st part, you can check it out here.
In this part, I'll be covering the fundamentals of the Terminal, Git, HTML, CSS, and JavaScript & NPM. That's a pretty long list and this one post should cover months of learning and practising (unless you're Superman...) but by the end, you should be able to make a great looking, responsive website from scratch which is a huge achievement!
Check out the contents below for what this series covers if you haven't already and let's get crackalackin'.
Contents
- How the web works
- Setting up your dev environment
Part 2: [this part]:
- Terminal Fundamentals
- Git Fundamentals
- HTML
- CSS
- JavaScript fundamentals & NPM
Part 3: [coming soon]:
- SASS
- Bootstrap
- Bundlers
- React
- Redux & State Management
Part 4 [coming soon]:
- Node.js & APIs
- Databases & Docker
- GraphQL
- TypeScript
- React Native
Part 5 [coming soon]:
- Getting job ready
- How to deal with your first job
- Further study resources
Terminal Fundamentals
Hopefully you’ve already had a play around with the terminal when you set it up and installed a package manager, but if you haven’t, don’t worry - this is where you learn the basics.
I recommend starting by going through Terminal Crash Course by Traversy Media. Once you’ve finished it, you’ll be in a good place to start using the terminal as part of your workflow and it’ll put you in great shape to start learning Git. If you’re anything like me, you’ll start seeing the productivity benefits of using the terminal for tasks even outside writing code and it’ll become one of your most used apps.
To help you out, here’s a cheat sheet of some common terminal commands you’ll need.
| Command | Description |
|---|---|
| ls | Lists the files and directories in the current directory. |
| cd | Changes the current directory to the specified directory. |
| mkdir | Creates a new directory with the specified name. |
| touch | Creates a new empty file with the specified name. |
| rm | Removes the specified file or directory. |
| cp | Copies a file or directory to another location. |
| mv | Moves a file or directory to another location. |
| pwd | Prints the current working directory. |
| cat | Displays the contents of a file. |
| grep | Searches for a specified string within a file or multiple files. |
| chmod | Changes the permissions of a file or directory. |
| ps | Lists the processes currently running on the system. |
| kill | Terminates a specified process. |
| ssh | Connects to a remote computer using the SSH protocol. |
| ftp | Connects to a remote computer using the FTP protocol. |
| ping | Sends a ping to a specified host to check for connectivity. |
Git Fundamentals
Git is a version control system (VCS) that is used to track changes to files and directories. It was created by Linus Torvalds in 2005 and has since become one of the most widely-used VCSs in the world. Git allows multiple people to collaborate on the same project by keeping track of changes made to the project's files and directories. It also allows for easy rollback of changes in case something goes wrong. If you would like to read about Git in further detail, check out the documentation.
For a quick video introduction as to what Git is and why you need to learn it, I recommend watching What is Git? Explained in 2 Minutes! by Programming With Mosh.
To learn the fundamentals of Git and how to set up a remote repository, I recommend the video Git and GitHub for Beginners by FreeCodeCamp. It goes over the full install process, including authentication via SSH and teaches all the common features you’re ever likely to use.
There are 2 other shorter crash course videos which I recommend that cover the fundamentals but in less detail. The 1st is Git & GitHub Crash Course For Beginners by Traversy Media, and the 2nd is Git Tutorial for Beginners by Tech With Tim.
Atlassian have put together a nice resource for Git commands and a glossary of terms, and it's always a good idea to read through the official docs with all available commands and flags, but below is a cheat sheet of the most common commands I think you’ll need:
| Command | Description |
|---|---|
| clone | Bring a repo down from the internet (remote repo like Github) to your local machine. |
| add | Track your files and changes with Git. |
| commit | Save your changes into Git. |
| push | Push your changes to your remote repo on Github (or another website). |
| pull | Pull changes down from the remote repo to your local machine. |
| status | Check to see which files are being tracked or need to be committed. |
| init | Use this command inside of your project to turn it into a Git repository and start using Git with that codebase. |
| checkout | Navigate through branches and commits. |
| branch | Branch administration tool. |
| merge | Integrate changes from divergent branches. |
HTML & CSS
HTML (Hypertext Markup Language) is the markup language used to create web pages. It provides a structure for the content on a web page, such as headings, paragraphs, images, and links. HTML documents are made up of elements, which are represented by tags. These tags are used to define the structure and content of a web page. For example, the <h1> tag is used to define a heading, the <p> tag is used to define a paragraph, and the <img> tag is used to embed an image (simple, right?).
You can think of HTML as the structure and content of a website, whilst CSS (Cascading Style Sheets), you guessed it, adds the styling. This would include things like the placement and sizes of images, fonts and text size, colours and even animations. Because of this, HTML and CSS are often taught together as they work hand in hand.
I recommend the following resources to get a good working knowledge of both HTML and CSS.
First, sign up to FreeCodeCamp and go to their Responsive Web Design course. This alone will take you through all the fundamentals of both HTML and CSS. However, I wouldn’t stop there. I would then solidify your knowledge by following along to some Traversy Media crash courses:
- HTML Crash Course for Absolute Beginners
- CSS Crash Course for Absolute Beginners
- Flexbox CSS in 20 Minutes
- CSS Grid Layout Crash Course
- Build an HTML5 Website with A Responsive Layout
I also recommend the course Build A Responsive Website with HTML & CSS by Kevin Powell. This course covers some more advanced things in the tooling, but don’t let that put you off — follow along and learn and solve problems as you go. After all, that’s what being a developer is all about!
Finally, you may want to try the course, Learn HTML & CSS in 2022 by DesignCourse. This is a more advanced follow along but it does give you a glimpse into real world front end development by having to follow certain conventions like ‘mobile first’, and working to a design brief. It also includes a little bit of JavaScript which may peak your interest for what’s next!
The 3 steps to take when learning anything to do with coding and software development are 1, build. 2, build again. 3, build some more! It’s only by building things that we come up against problems and challenges that we have to overcome either by debugging and figuring things out ourselves, or by learning how to efficiently traverse documentation and forums to find an appropriate working solution. Ultimately, this is the job of any software developer at all levels and the only way to gain experience in this area is by building. My strong recommendation over all ‘follow along’ crash courses and tutorial videos is to build your own projects - even re-building tutorial projects with the aid of the tutorial will be really beneficial.
If you’re not into designing things yourself, an amazing resource I love for honing HTML and CSS skills is Dribbble. You can look at beautiful designs made by other people and use them as a design brief and, don’t forget, everything you build can form part of the portfolio you use to get your first job, so you should always have the motivation to make everything as great as you can make it.
Achievement Checkpoint
Before you move on, you should have achieved 3 goals:
You should be able to code a responsive website from scratch following a design (whether your own or someone else’s).
You should be familiar using Git in the terminal to commit meaningful changes to your projects as you go.
You should be pushing your Git repositories to a remote repository like GitHub or GitLab. This will get you used to working with remote repositories and will give you a Git commit history that you can show potential employers to prove your coding prowess and determination!
JavaScript Fundamentals
Whilst you can think of HTML as the structure or content of a website, CSS as the styling (with some extra modern features), at this stage you can think of JavaScript as the ‘interactivity’. You will learn, though, JS goes far beyond just interactivity on a web page.
JavaScript is a programming language that may be primarily used to create interactive and dynamic websites, but did you know it can be used to create server-side applications, desktop apps and even Android and iOS apps? This is achieved through technologies like Node.js, React, React Native, Electron and more which we will discover later.
There are several ways to run JavaScript code:
In a web browser: JavaScript can be written in an HTML file, and executed by a web browser when the HTML file is loaded. To include JS in a HTML file, you just have to include it using the
<script>tag.In a JavaScript console: Most web browsers have a JavaScript console, which allows you to enter JS code and run it directly in the browser. This can be useful for testing and debugging code.
Using a JavaScript runtime environment such as Node.js: A JS runtime environment allows you to run JavaScript code outside of a web browser, and can be used to create server-side applications.
To run JS you need to write the code in any text editor (like your code editor or IDE), save it with the .js extension and run it using any of the above methods.
I recommend the following resources to get a good working knowledge of JavaScript.
JavaScript Basics by MDN. The MDN guides are a great resource for all things coding related. The intention of this guide is to cherry pick from the best free resources we can find, but we recommend spending some time on MDN to absorb as much as you possibly can!
JavaScript Algorithms and Data Structures by FreeCodeCamp. This course will give you a great interactive overview of the fundamentals of JavaScript.
JavaScript Tutorial For Beginners by Mosh is great for an overview, and as an alternative, you could watch Traversy Media’s JavaScript Crash Course For Beginners, depending on whose teaching style you prefer. They largely cover the same things though.
FreeCodeCamp's 7 hour epic JavaScript Programming - Full Course is a fantastic video covering the core fundamentals of the JavaScript programming language, however, I have recommended the sections of this course that I feel are the most important at this stage, and feel that the remaining sections are covered by other resources I've recommended. Having said all that, it wouldn't be 7 hours wasted should you go through the whole thing.
Lastly, you may want to have a look at DOM manipulation by FreeCodeCamp.
Now let’s put it all together!
I recommend adding JavaScript to your existing knowledge of HTML and CSS by incorporating JS into a web page, adding that ‘interactivity’ people keep talking about. I think a great place to begin is with navigation bars. Here are some of my favourite tutorials for some interesting nav bars you could build. You should build at least one of these (or equivalent) until the point you can do it without the help of any videos, and then try building one from scratch for your own design. Don't forget to incorporate Git and remote repositories.
- Responsive navbar tutorial by Kevin Powell
- Animated Responsive Navbar by Fireship
- Responsive Navbar Tutorial by Web Dev Simplified
Lastly, you may want to do something a bit more advanced by building your own shopping cart like in the Build A Shopping Cart with JavaScript course by FreeCodeCamp, or JavaScript Shopping Cart For Beginners by WebDevSimplified.
NPM
What is NPM?
NPM (Node Package Manager) is a package manager for JavaScript and is the default package manager for Node.js. It allows users to install and manage packages (collections of code, like utilities) for use in their own applications, making it easier for developers to share and reuse code. NPM includes a CLI for accessing a public registry of packages (kind of like an app store), as well as tools for publishing packages to the registry and managing dependencies between packages. Dependencies are simply the packages that an app relies on in order to work.
I should note here that there are other package managers for Node and JS available. Arguably, the most popular alternative is Yarn. Feel free to look into Yarn after learning NPM. There are some advantages, but the functionality is near identical in that once you’ve learned how to use NPM, you’ll pretty much know how to use Yarn!
Learning NPM
NPM is not a difficult thing to learn or use. It’s something you’d actually pick up along the way (and may already have). However, to avoid the confusion when it inevitably comes up, I thought it important to make it a learning topic. Don’t worry or spend too much time here though as you will get a lot of experience using NPM as you learn and work.
As always, it's always a good idea to check out the official documentation and registry and I recommend the video, NPM Crash Course by Traversy Media to learn all about it. This video is quite old now, but the fundamentals haven’t changed.
End of Part 2
That concludes my Fundamentals section. There’s a lot of material above for you to work through and, as always, it’s imperative that you use these new skills and tools to build things yourself from scratch to affirm your knowledge, and learn how to solve problems you run into.
Before you move onto JavaScript back ends and front end frameworks like React, you should feel confident in using all the concepts taught throughout this section.
Top comments (0)