It wasn’t long ago that I was so intimidated by code editors like Visual Studio Code and Atom that I avoided practicing HTML and CSS altogether. I didn’t even know which program to download, let alone how to create a project in either of those, or open the project in a browser to see how it looked.
In the last couple years, as I tentatively explored my interest in front-end development and poked around online tutorials, I would find myself wanting to make basic websites — and just not having the tools to do so easily. I would abandon my interest in HTML/CSS until the flicker of interest sparked again, only to find myself eventually in the same place.
This online editor is super simple to learn and easy to use. On the left hand side of the screen you can write your code. Hit “Run” and it will appear over on the right, like so:
The program gives you the option to orient the screen vertically or horizontally, and you can save your work as a link or to a Google Drive folder.
To practice CSS, just wrap it in a <style> tag:
The best part of this option are the resources supporting the Try It editor. Clicking the home button (top left) will take you to W3Schools in-depth tutorials, which are a great supplement to a coding bootcamp like LC101 or a standalone learning tool.
I’d recommend this tool for someone just starting out with learning front-end development, as help is never more than a click away.
Use a built-in application
Lets get a bit more technical. If you’re a Mac user, fire up your TextEdit app. If you’re on a Windows machine, open NotePad. (Note: that’s where my Windows knowledge ends, so take the rest of this section with an Apple-flavored grain of salt.)
Now, the first thing I did in my TextEdit app was set my background color to dark grey and my font color to white. I did this mostly because it looks cool. But also because it’s easier on the eyes. I would show you how to do this yourself, except I realized that there’s no way to set the cursor color in TextEdit to anything other than the default black. *thumbs down emoji*
A black cursor is impossible to see on a dark background, making editing a pain, so you’re pretty well locked into the default color scheme. This gives TextEdit 0/5 prettiness points. Oh vell, ve continue.
After resigning yourself to a white background, the first thing you’ll want to do is change some settings under Preferences. (I learned all of this by watching this video.)
The short version:
- Format should be “Plain text.”
- Smart quotes, dashes and links should be unchecked.
- Choose “Display HTML files as HTML”
- Uncheck “Add .txt extension to plain text files”
Here’s what your two preference screens should look like after changing your settings:
You’re ready to write some HTML! Check out W3Schools HTML tutorial if you want a quick intro.
Now, add some pretty. To practice CSS in TextEdit, you’ll need to create a new file and save it with the .css extension (convention dictates you name this file “stylesheet.css”).
A few more basic points (which I learned by watching this video):
- Make sure you save the stylesheet in a folder with your HTML document
- In your HTML document, link to your style sheet with this tag:
- <link rel=”stylesheet” type=”css/text” href=”stylesheet.css” />
If you feel like you’ve gotten a decent handle on HTML and CSS and want to also start practicing your filing system, but don’t want to learn a full-fledged code editor yet, TextEdit is the option for you.
CodePen is like if the TryIt editor had a baby with Instagram.
And, most awesome, it’s got social baked in. From the home page you can explore recently-created pens by the CodePen community, like this adorable little panda by Elena:
You can ask for feedback on your Pen and others are able to comment. The community still feels small and personal. I imagine CodePen will only gain in popularity, making this the perfect time to get in. Another cool feature: if you find a Pen you like, you can save it to a collection for future reference. AND, CodePen has maybe the best web development podcast I’ve listened to so far. My recommendation: start with episode 190, Getting a Gig.
If you’ve got any interest in front-end web development, learning HTML and CSS is the place to start. Eventually you’ll need (and want!) to know how to design a website in a code editor. But if you’re just looking to practice, you need ZERO technical knowledge — just a computer with an internet connection.
Do a little every day — I’m looking forward to catching you on the CodePen home page.