Once you pick a text editor, it is time to get organized and set up your workspace. Staying organized is essential for developers since it makes things easier to work with and later find files. Think of this step as the developer's form of a mise en place where everything is organized and gathered together.
Like a chef making a recipe, getting everything ready will be less of a headache later down the road. Reading and looking at code will help you understand what you are doing and how the code works on a website. If you are using an online text editor, you still need to do this step since it is a good way to back up your code files.
Most importantly, this is a step you'll need to know for any tech job or freelancing. It is also a great way to practice reading code which is an important part of your coding journey when you are starting.
1. Create a new folder on your desktop and name the folder.
This folder is going to be the home for all the files for the website we are building today. I recommend naming your folder based on the project you are building so you know what it is.
2. Open your text editor.
Run through any updates that pop up first.
3. Add meta tags.
Once the updates finish, open a text file and start adding your meta tags. Once you are finished, your code should look like this.
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>Your Name</title>
</head>
<body>
</body>
</html>
You can create a style sheet for this website if you want to practice using CSS or just want to have fun styling your website. To connect your style sheet to your HTML file, go to the head tags and add link rel="stylesheet" href="style.css". This link will connect the two files just like the code sample featured in this post below.
4. Save the text file to your folder.
Now it is time to save your brand new text file into your folder. Go to File in the navigation menu and click "Save As". Go to the folder you just made on the desktop.
At the bottom, go to "Save as Type" and click the drop-down menu. Look for "HyperText Markup Language File (.html)" and click on it. If you don't do this, it will not save as an HTML file and won't work in the browser.
Go to file name and name the file that you'd like. I like to keep mine as index.html since it is easier for me to remember, but you can name it whatever you like. Developers often stick with names that make it easy for them to understand what the file is about or how the file functions.
Click save once you name your file. Now, this file should appear in your brand-new folder. If it doesn't, check the location you put for your file and if the file was saved as an HTML file. These are the common problems that might appear when saving your file.
5. Save your style sheet to your folder.
If you are including a style sheet, now you need to save your style sheet to the same folder. Click "Save As" and go to the folder you just made. When you click on the "Save as Type" menu, look for "Cascade Style Sheet File (.css)" and select.
This lets the computer know this is a CSS file. Name the file what you want. I often name my style sheet files as style.css, but another variation is main.css.
Just make sure the name you save on your style sheet matches the URL you put in your HTML file. If they don't match, they won't connect and you'll not be seeing any of your styles in the browser later. Save your files when you are done.
If you have problems with this step, double-check the type you selected for your file and make sure your file name for your style sheet matches the one you put in the HTML file. These are some common errors that pop up for newbies so start there if you are having trouble.
Top comments (0)