Three simple ways to practice HTML, CSS and Javascript

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.

If you’ve been doing some reading on HTML and CSS (or even Javascript, you overachiever), watched some videos, done some tutorials, and now want to know how you can easily practice what you’ve learned by creating and viewing basic web pages — this is the post for you.

Online HTML practice

First up is the most basic option. For a straightforward way to futz around with HTML, CSS or Javascript, use W3Schools’ online Try It site, found here.

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:

online html practice
Screenshot from W3Schools

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:

CSS practice.png
Screenshot from W3Schools. 

You can even try your hand at Javascript:

Javascript.png
Screenshot from W3Schools.

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:

new doc textedit preferences.png open and save textedit.png

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” />

As for practicing Javascript with TextEdit, I can’t tell you much as I haven’t learned even one drop of the language yet. But I did find this video, which shows someone writing a very basic Javascript command directly into the HTML document. Skip to 3:30 to avoid info on changing settings.

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

CodePen is like if the TryIt editor had a baby with Instagram.

It’s an online editor where you can write HTML, CSS and Javascript, all on the same screen. It gets 5/5 in prettiness and has all the color-coded, responsive helpfulness of a Visual Studio Code without needing any know-how. Just make an account and go.

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:

Screenshot 2018-09-30 15.37.10
Pen by Elena. Find it here

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.

Last Thoughts

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.

giphy2