Congratulations on making it on to the School of Code bootcamp, and taking the first step on your coding journey! The following tasks are designed so that we can hit the ground running on the first day of the bootcamp. Work your way through the activities below to get set up for coding success and build a strong foundation in web development. Completing all of the activities in this guide will be essential before day one of the course, and will mean that you're up to speed with where the curriculum will start.
By the end of this material, you'll be able to:
- Set up your development environment (VS Code and other necessary software) so you're ready to start coding
- Understand how information flows over the internet
- Use Markdown, a markup language developers use when documenting and commenting on code
- Use HTML to build a static webpage and CSS to style it
- Know the basics of Git and GitHub for version control
- Start navigating through your computer using commands in the command line
- Create the first project in your portfolio
- Start to become acquainted with the basics of JavaScript
Your IDE (integrated development environment) will be where you write your code during this course - what is an IDE you ask? Just think about Microsoft Word for writing text - it's not just a notepad, there's a lot of added benefits to using it because it is designed to be a great environment for creating documents. That's what an IDE is for writing code.
Although there are many options out there, the one we use is Visual Studio Code (usually just referred to as VS Code). VS Code is infinitely customisable with extensions, and it has an integrated terminal, live share, and other handy capabilities that make our coding life easier. Watch this video to get started with the basics. Then spend some time just familiarising yourself with the program and practice the keyboard shortcuts. You can find a printable shortcut reference here (Mac) or here (Windows) or in the home screen of VS Code. You can also find a searchable reference here.
This guide will help you install VS Code along with the other software you'll need. Follow the instructions on each page that pertain to your operating system.
There is also now a version of VSCode you can use on the web.
You probably know how to create a file, and a folder... but believe us when we say it really will save you a lot of headaches to understand how we want you to start creating them.
The tasks so far will have given you a taste for the power that comes from knowing how your computer works behind the scenes. Alongside this realisation, it is essential for you become more conscious of how you use and maintain your computer. Gone are the days where you mindlessly let your downloads folder fill up until your system tells you you have no space remaining on your hard drive, or 'conveniently' saving every file on your desktop for quick access until your background is completely obscured by a mosaic of icons.
You need to be in control of the folder structures where your code is saved, and adhere to precise naming conventions so that other developers understand how you have categorsied your work. This is particularly important when using version control systems like Git, which rely on tracking files at the top folder level of each project. Everything you do as a programmer should be purposeful - don't be led by your computer, you are in control!
What even is the internet? Is it different to the world wide web? How does it actually work? What happens when you request a web page? These are things we might wonder about if we are going to start building things for the web.
We've selected a few videos for you to watch from a series of YouTube videos - if you like the series, then feel free to watch more! There is also a link to a document which provides a great overview and path to more resources.
Markdown is a lightweight markup language designed to make it easy to write for the web, with an emphasis on being as easy-to-read and easy-to-write as possible. Developers use it to write documentation about their code and communicate on GitHub. The readme you're reading right now is written in Markdown, in fact. It's also used by a lot of tech bloggers to create content. For example, if you wanted to write a post on dev.to, you'd do it in Markdown. In addition to being useful on its own, learning Markdown will help you get used to using a different syntax1 than you might be used to to make things happen on a page, which is good practice for coding! 💪
Now that your syntax muscles are limbered up, it's time to jump into HTML and CSS, which form the building blocks of the web. HTML stands for "hyper-text markup language", and CSS stands for "cascading style sheets". If a web page was a body, HTML would be its skeleton, the basic structure of the page. 🦴 💀 CSS would then be the skin, hair, clothes, jewelry, and anything else that falls under the design of the page, how it looks and how it's styled. 🩳 👗
FreeCodeCamp is a fantastic resource that makes learning HTML and CSS approachable and fun. Work your way through the Responsive Web Design activities here - you don't need to complete the certification; the aim is to work through the interactive activities so that you have a foundation of HTML and CSS knowledge at the beginning of the course. If you prefer to learn via video, you can watch their Learn HTML5 and CSS3 From Scratch video course here .
Alongside FreeCodeCamp, you could also complete this run through of HTML and CSS and this introduction to the fundamentals of designing user interfaces to help you learn basic design principles. You'll be bashing our website that not only work well, but look good too!
Finally, it's always good to understand the tools and the right way to use them. Semantic HTML is a vital part of the modern web, and learning how to use the right HTML tag for the job is key (which HTML more meaning that just using div tags everywhere). Here are some resources as to why and how to use them:
Most users interact with their modern computers using the GUI (graphic user interface) built into their operating system. This means that they can look through their files, open programs, etc. by clicking on icons like folders. 📁 However, as a programmer, you'll start to use the command line, where you type prompts into a text terminal, to tell your computer what to do directly. ⌨️ It might be weird at first, but trust us - when you get used to it, it's much faster. Plus, you'll start to feel a little bit like a hacker in a movie! 😎
Learning to navigate a computer using the command line is a skill that gives you lots of power. There are a few basic commands to learn first and more complex ones to learn later on. The important thing for you to take away is the pattern of a using a command, options and input. We've put together this challenge for you to play through which should help you get to grips with the basics and also do some cool stuff!
NOTE - on some versions of Windows the rev command will not work. Don't worry - it's not an essential command to have installed! If you find the 'rev' command does not work on your computer, just use this text reverser to complete the challenge.
The image of the lone coder sitting in a dark corner tapping away in solitude is a stereotype thanks to countless movies and TV shows. In reality, software engineering is a team sport. There are loads of benefits to multiple people working on the same codebase, but without a tool to manage how people can work on the same project simultaneously, the potential for getting wires crossed and overlapping each other's code could spell disaster... or at least be annoying. This is where a version control tool like git comes in to save the day. During the bootcamp, we will be using git every day - it's a developer's best friend (once you get used to it). Hand in hand with Git, we'll also be using GitHub (where you're reading this right now). Here's a quick talk on what version control is.
Be sure to follow the instructions here to ensure you've installed git correctly and have your credentials configured correctly. This will be a good chance to start practicing interacting with your computer using the command line as well.
If games are your thing, you can play through this to learn how git works and the advantages of using it when coding and collaborating.
Then, you can follow the tutorial here to start getting your head around combining git with GitHub. You can use this cheat sheet for a quick reminder of the new command line commands you'll use when interacting with git. If things get too complicated or you end up in a really weird place with git, you can use this site to help unpick common Git issues in plain English.
By this point, you've done a load of learning, and you might feel like you have lots of different pieces of information swimming around in your head. It's time to solidify what you learned and give you the opportunity for some creativity as well by putting that knowledge into practice.
We'd like you to complete the first project in FreeCodeCamp's Responsive Web Design certification, the tribute page. You can make your tribute page about anything you want. Let your personality shine through!
Your page needs to fulfill all of the user stories listed on FreeCodeCamp's requirements page. You can create a Codepen using their template and run their inbuilt test suite to check how you're doing, and then feel free to submit it to FreeCodeCamp to get your first step toward their certification. This will be great practice in building a project according to a set of requirements as user stories, just like software developers do in the tech industry.
However, we'd also like you to solidify the other knowledge you've gained in the activities above. Codepen is a great way to get started coding in the browser, but we'd like you to take it to the next level and get used to working with Git and in Github repositories. We use GitHub Classroom for our assignments during the course, so to give you your first taste of that, please click on the classroom link here and accept a new assignment. This will create your own personal repository that you can then clone down.
In this repository, please:
- Take your code from the Codepen challenge and insert it into the HTML and CSS files within the repository.
- Use your new Markdown skills to write a README for the repository. In it, you can talk about why you chose the subject you chose for your tribute page as well as what you learned making it and any reflections on the development journey.
- Add, commit, and push your changes to that repository using your new Git skills on the command line in the VS Code terminal.
- Host the website using GitHub pages
This way, you'll embed your skills and have your first project in your portfolio!
If HTML is the skeleton giving the structure of the page and CSS is what makes it look great (or not), JavaScript is the brains that power the muscles and allow it to do useful things. 💪 However, JavaScript isn't just for the web! JavaScript is a flexible, multi-paradigm language that can run just about anywhere. In fact, according to the oft-quoted Atwood's Law, "Any application that can be written in JavaScript will eventually be written in JavaScript". Learning JavaScript will empower you to code across the tech spectrum!
Here's our introduction to the History of JavaScript - there are some really great points about JavaScript in this video, see if you can notice them all. You may need to watch this a few times... apologies if the tune becomes stuck in your head.
Get your hands on JavaScript by progressing through the free interactive lessons available in the JavaScript CodeCademy course. Again, if you prefer to learn via video, you can code along with the FreeCodeCamp beginner JavaScript video instead. Or, if you're feeling like you want to blast through a lot of stuff... here's the FreeCodeCamp JavaScript track, but we're not expecting you to complete the whole thing just yet.
If you have any questions, comments, or discussion topics, or if you need any help, you can use the "Issues" tab at the top of this repository page. Here, if you click on "New issue", you can use the inbuilt templates or create a blank issue. Through this system, you can remotely interact with your fellow bootcampers as well as the School of Code staff.
If you've finished the activities above and are hungry for more, here are some optional further resources for you to check out. We'll keep adding to this list if we discover any nifty new resources we'd like to share with you between now and the bootcamp starting, so check back often.
- What really happens when you click on a link?
- All of the links from Quincy Larson's "Five Links Worth Your Time" emails - This is a really valuable newsletter sent out by the founder of FreeCodeCamp, so we'd encourage you to subscribe moving forward, but you can find all the past links here!
- Fireship's videos on the weird history of JavaScript and how JavaScript works under the hood
- PluralSight's JavaScript guide
- JavaScript Arrays and Objects Are Just Like Books and Newspapers
- JavaScript object keys tutorial – how to use a JS key-value pair
- Functional Programming in JavaScript Explained in Plain English
- If you finish your tribute page project, feel free to move on to the other projects in the Responsive Web Design certification such as the survey form.
Footnotes
-
Syntax is the rules that define the structure of a programming language Follow the tutorial here to learn the basics of Markdown. You'll have a chance to practice it soon. ↩