Join Aaron Quigley for an in-depth discussion in this video Use the practice coding tool, part of Learning with Lynda.com.
- This video is specifically addressing those learning a coding language. Learning to code is a great example of an endeavor where active learning really makes the information stick. Writing code directly, in a hands-on way helps you internalize concepts and techniques and better understand how to apply code in a real world context. Many Lynda.com technical courses include in-browser coding environments called practice. This practice tool helps you quickly test out new knowledge and master core coding skills. Let's go ahead and write some code in our browser.
Here I'm watching HTML essential trainings. I'm in chapter two of this course and on video one, which is Exploring an HTML document. Now to make sure that I'm an active learner and not just a passive learner I want to follow along with the author and write the exact code that they're writing so I better understand the structure of the code that I'm creating. There's several ways I could do this. I could come up and just simply download the exercise files, but in order to use the exercise files I'd also have go out and download a code editor. I would then have to write in that code editor and preview in a browser.
This is a lot of steps. It's also a lot of windows to manage on my computer when I'm trying to watch the Lynda.com content. Instead, let's go and click on the code practice environment tab in the upper right hand corner. Here now that the practice environment window is opened up, there's three different panels that are available to me. Let's go and start on the far left hand side. Here in the exercise files panel I can open up any of the exercise files that are associated with this particular course. Because we are in chapter two, movie one, I'm going to go ahead and navigate there and I can see that there's the structure.htm course that I can click on.
When I open a particular exercise file I can see the code or in this case the HTML that's inside of that file here in the middle pane. On the right hand side I have a preview pane that's compiling all of this code and making it appear. Now once we have a file open, the two things we're going to be focusing on is writing the code and previewing the code. So we can go ahead and collapse or minimize our exercise file window by clicking on the left arrow in the upper left hand corner. In addition to maximizing these two screens which are now at a perfect 50/50 ratio I may also want to see more of the code or see more of the preview at some time.
In order to do that I'm going to hover my cursor directly between the two panes until I see the resizing icon appear. If I click and hold I can now move these panes around and either see more of the code or more of the preview. This becomes really important because sometimes a single line of code can be fairly long. For example here the code on line five, I can see is wrapping three different times. If I'm trying to understand what's happening on line five, it may make sense for me to see it in a single line of text. In order to do that, I'm going to go ahead and maximize the code window until line five is only on one line of text.
For the rest of this video though, I'm just going to go ahead and set these back to around a 50/50 ratio. Now as I make changes to the left hand side or to the code pane it's going to automatically update over here in the preview pane. ' I don't have to save anything. I don't have to export this file. I can make real times changes. For example, right here where it says page content let's just go ahead and capitalize that c. Right away we can see that there's a capital C now in the preview pane. In addition to automatically compiling this information for us, it also has a lot of built in features such as code hinting.
Right below this paragraph tag let's go ahead and add an ordered list I'm going to put my cursor right after the closing paragraph tag. I'm going to hit enter and I'm going to start writing the mark up for an ordered list. Now right away you can see that I've got some code hinting coming up. Ordered list or OL is the first tag that appears. If I want, I can click on a tag and it will complete typing whatever was there. The other thing that happens is when I finish typing the opening tag the closing tag automatically appears. All I had to do was type the opening OL tag and there's my closing OL tag that appeared on the screen.
Now I can hit enter a couple of times and create a few spaces. I'm going to go ahead and add some list items to this and you'll notice once again I'll type LI for list item, once I finish the opening tag, my closing tag automatically appears and my cursor is right in between the two tags so I can go ahead and start typing. Let's just go ahead and make a few items here such as item one. And I'm just going to copy and paste this list item a few times. We'll change these to item two and item three. Now while code hinting as well as auto closure can be a great thing while we're starting to learn to code sometimes it can get in the way.
For example, here in list item two, if I wanted to italicize list item two I would use an emphasis tag. So let's go ahead and write an open for the emphasis tag. It's going to auto close for me but it's going to auto close in the wrong position. I want this closing EM tag to be on the other side of item two. So if I were to use code hinting and auto complete I would have to basically cut and paste these various tags into the right position. And that could take some time. As we continue to learn to write code you may want to turn these off and you can do that.
In fact, if I come up here to the gear icon and select it I can see that there's a variety of options available to me including changing the font size for the practice window, choosing whether I want a light or dark theme and as I work all the way down I can finally come down the auto complete field. Let's go and select auto complete off and then come down and let's italicize item number three. So here, as I type my opening tag, you'll notice that it's not going to automatically close for me. Now even though auto complete is off there's still some great features to allow me to catch errors inside of the code that I am writing.
On the far left hand side of the screen you can see that these red x's have appeared. These x's are telling me that I have tags that are closing too soon. If I hover directly on top of one of the tags it's going to tell me that I have a end tag or an LI tag that's seen too early and should be expecting another end tag before it sees that LI tag. You can also see the cascading effect of having one unclosed tag and how it impacts the rest of your HTML. In order to fix this, I'm going to come to item three and I'm going to go ahead and close that emphasis tag. You'll notice in the left hand side that the x's went away.
These practice environments allow you to quickly dive in to using and writing code along with the author. You no longer have to take the time to install software and juggle multiple applications open at the same time that you're learning. I highly recommend that you use this code environment and make sure that you're actively learning when learning to write code as it's going to help the information stick so much more than just simply being a passive learner and watching what the author's doing.