When we write code like CSS, we need to do it in a plaintext format. You might be more familiar with "richtext" formats like Microsoft Word or other business document products. When you are writing in a richtext format, you can do fancy stylistic things like fonts and colors. Richtext formats were designed for the business world to share nice looking reports and documents with each other.
In the coding world, all of the programming languages use simple plaintext similar to this input box you see:
To write code, you can use any plaintext editor you want to. If you're on Windows, you might be familiar with Notepad. Technically you can use that to edit all your code, but simple tools like Notepad don't offer the wide range of helpful features that a professional code editor does.
There's several professional code editor options out there. In my time doing development, it seems like there's a new "best code editor" that's even better than all the previous ones every 3-6 years. Don't be surprised if you start your career using one editor and then switch to a newer better one later.
Today, VSCode is the most popular editor to use. I'm not a fan of using something simply because it's popular, but VSCode happens to be popular because it's very good.
If you want, you can use Sublime Text or Atom which were the very popular ones before VSCode. Some of you might be coming to this course with previous experience coding and you already have your preferred code editor. That's totally fine too, but since I use VSCode and it does have the market share right now, all the setup and editor advice that I give for these courses will be for VSCode.Download VSCode
If you're using Linux or Windows, you might need to check your system settings to see which download option is most appropriate for you.
Once it's installed, you'll be greeted by a "Getting Started" screen similar to this:
You don't really need to do their whole introduction thing unless you want to. Notice they have this "Getting Started" content as a tab. You can just close that tab to exit.
At this point we recommend you watch the VSCode setup video that we have above to learn more.
Windows compared to Mac and Linux
The operating system you use to do programming can matter sometimes. Here's the high-level details that you need to know about.
- The underlying software that drives how the operating system works is different from Windows vs Linux and Mac computers. Linux and Mac use something called Unix while Windows uses it's own proprietary software.
- One main difference is how file paths work. In Unix systems, paths use a forward slash
/to delimitate while Windows uses a backslash
- Even though Windows uses backslashes at the operating system level for your file paths, the web uses forward slashes (which is why you always do forward slashes for websites regardless of the operating system).
- In Windows, files need to have extensions but on Unix systems like Mac and Linux they are optional. However, when you have a new computer that is Windows or Mac, the operating system hides the extension from you. Just to make sure this is clear, the extensions are there for all windows files and probably most Mac (Unix) files, but the OS is simply not showing them to you. This is mostly because that's what everyday computer users want. As a programmer though, I highly recommend changing your settings to show the extensions. We have instructions on this below.
You might notice in the business world that the proportion of people using Windows over Mac is much higher, but in the programming world the proportion of mac and linux users is much higher than Windows. Even though there's plenty of Windows users doing web development, I believe many more are using Mac and Linux. This is not based on any actual research, it's just what I notice.
Perhaps the reason for this is because historically, the tools for web development have catered towards Unix systems. The web was invented using a Unix system. In today's world, most web servers are Linux (Unix). I've even noticed that most programming languages except for the ones that Microsoft made even cater towards Unix based systems.
Windows has come a LONG ways in the last few years though and for basic web development with CSS and HTML, it won't matter what OS you're using. I'm only pointing this out so you can remember to take notice as you move forward into other web development areas that not every article and piece of documentation you read out there will work for every computer and you might notice a bias towards Unix systems. They won't outright say "Unix" as apart of their guide, but you might notice that the authors are using Mac and Linux and now you know how those things are closely related.
As we previously stated, you're going to want to see file extensions on your computer. It's not an absolute requirement but I recommend it to any programmer.
On a Mac computer, open your Finder app and in the menu, choose
Finder > Preferences.... On my newer Mac, I see a window that pops up with an option to go to the
Advanced tab. Then I have an option for "Show all filename extensions". Make sure that is checked. If you have a different flow than this it might be a difference in your Mac version. It might be best to lookup different ways online as to how your version sets it.
On a Windows computer, open your File Explorer app. If you don't know where to find it, start by clicking the "Start" button and then
Windows System > File Explorer. When it's open, click the
View tab and look for a checkbox called "File name extensions". Make sure it is checked.
If you're on a Linux operating system, as you know there are so many variations of systems that it I'm not sure I could provide an accurate guide for. But chances are, if you're using Linux in the first place, you're already a pretty savvy computer user and I'm sure you'll be able to find it 😎.
As a web developer, you're going to need to test your websites out in all the browsers so eventually you'll need to get all of them. As your primary development browser though, I recommend using either Chrome or Firefox because they have excellent "dev tools"
The term "dev tools" is somewhat of a generic term that means the browser's built-in tooling panel for developers. But it mostly comes from Chrome having named theirs "DevTools". This image is of a website and I have DevTools open at the bottom. As you can see, it's a utility panel that opens over the website and it will do lots of cool stuff for us as we move forward with learning web development.
To open your Chrome or Firebox's respective dev tools, the command is usually:
- On Windows:
Shift + Control + J
- On Mac:
Command + Option + I
This command should also close dev tools. Note that you do have to have the focus on the browser for this to work.
If it's not working for you, go to menu of your browser (usually the or the icon) and look for
More Tools > Web Developer Tools on modern versions of Firefox and
More Tools > Developer Tools on Chrome. If you don't actually click the menu button, you can use the menu just to see what keyboard shortcut your browser uses to open and close dev tools.
Since you're going to be a web developer now, we might as well get you caught up on the nerdy terminology that we use for things as they come up. When we see this icon for menus 👉🏻 , we call that a "hamburger icon". Why, I guess someone thought it resembled the stacking layers of a hamburger 🍔. I know, welcome to the dork club.
You're going to see me do clever things as I'm typing code in my videos. I might do a keyboard shortcut that selects a whole lot of text, or another one just to quickly select two words. I'll even do "multiple cursors" at times. As a software developer, you're probably going to want to learn these shortcuts but don't make them your main priority. I'd even say it's best to try and learn one per week. Write it down and study it throughout the day. Practice it, even if it takes more time to remember how to do it than your go-to non-shortcut way, practicing it will pay off and I guarantee you will thank me later for knowing this stuff. It will make your programming experience really nice.
All together, I probably use about 10 shortcuts 99% of the time. So it's not like you have to learn 100s of these things. The shortcuts are going to fall into one of several possible categories:
- Operating System Specific
- Code Editor Specific
- Snippets (Emmet)
I'll go into more detail about these three categories of shortcuts in the Code Editor Tips and Tricks lesson.
I would recommend getting organized as soon as possible before things get out of control and you have a mess for where all your material is. You're going to start to collect links to resources like the cheat sheet URLs above. You're also going to possibly have many projects whether they are official work projects or exercises from these courses. Here's my very strong recommendations for organization:
Make a "Sites" or "Projects" folder
Put it somewhere on your computer. You might put that on your desktop but I've noticed a lot of professional developers (including myself) put that directly in their user folder. On your computer, you have a user folder located somewhere like this:
- Mac and Linux:
Don't use spaces
For reasons I won't get into now, I don't want you to name files or folders that are a part of your projects with spaces. It will cause you huge headaches later. As a general rule for now, until you become more experienced, just name all your projects and sub folders and files of those projects with lowercase letters and no spaces. You can use underscores, hyphens, or camel case if you want to.
Notice the three different ways I wrote the file name:
- 👎 Bad (has a space):
Sites/CSS Bootcamp/images/my pic.jpg
- ✅ Good:
- ✅ Good:
Organize your links.
I know there are newer fancy ways to organize links, but I'm still a fan of good old fashion browser bookmarks (or favorites as they're sometimes called). If you use Chrome and you're logged into your Gmail account, then you'll be pleased to know that when you add bookmarks to Chrome, they sync with your account. If you ever get a new computer, you just have to open Chrome and log into your account and your bookmarks will show up. I think Firefox has something similar but I'm not sure how that one works.
Personally, I use bookmarks and I think it's a good idea to start organizing things into folders like this because you'll eventually have too many resources to remember: