Is there an environment to practise?

Hi Everyone! My name is Millie and i’m very new to coding but loving it so far!

Im 3% into my web development course and wondered is there a environment where you can build code from scratch to practise and experiment what you’ve learnt so far?

Thanks so much!

Hi there, glad to hear you’re enjoying coding!

There’s a few ways you can go about doing it. At the end of most of the lessons you are presented with an empty environment on which you can practise, you’ll find this as you go along as well, some come with pre-made CSS and HTML templates for you to mess with. If you really want to get building from complete scratch, then I recommend getting set up with VS Code. It’s a lovely text editor to use, with a ton of helpful auto-complete features you can install. That way you can hold all the coding files on your own PC, and build whatever you want from scratch!

I have quite an extensive library now for all my projects, and it can be really helpful when as a database of sorts for code that you can quickly refer back to if you wish to reuse elements.

Alternatively you can also use something like repl.it, which is an entirely free browser based coder for practising. It works much like Codecademy’s editor but gives you the freedom of being outside of any sort of lesson. VS Code is worth setting up in the long run if you plan on coding for a while, but this can be a nice quick solution for testing code before that’s set up.

6 Likes

Hi,

Thank so much for your reply both of these sound perfect for what i’m looking for.

Is VS Code free to use and download?

Yep VS Code is completely free, as are all the extensions for it! It’s basically a fancy text editor with a built in terminal, although it does of course have a lot more to it than that.

If you install node.js you can also run javascript from your terminal. I find it quicker when I just need to make quick throw-away tests while writing my main code in the text editor.

2 Likes

Thank you so much, is the terminal the window that shows what appears after you ‘run’ the code you’ve created? (sorry im v new to this!)

Great thank you I haven’t gotten to Javascript yet but will remember this for when I do.

To clarify do you mean installing node.js as an extension to VS code?

Also @toastedpitabread your name is tops :+1:

1 Like

So if you’re running html/css, then you do all your coding in VS Code, and then open the index.html or whatever you have called it in the browser of your choice, and then you can view it from there. For the JS elements, you can see console.log outputs in Chrome DevTools in the terminal (hit F12 on the page), or run it on its own using node.js in VS Code.
But for websites you will want to have your html file open in a browser with DevTools open, and then in VS Code make your changes, save the file and then reload the page in your browser.

1 Like

Not sure this is what you mean, but codepen is a quick tool where you can try some code and even save snippets, all in your browser, no need to download anything.

Later on the path, you’ll be guided through installingg and setting up you own coding environment in your desktop, so no rush. :slight_smile:

3 Likes

You could install VS Code then install the Live Preview extension. That would allow you to work on local projects and live edit them. Well, you would need to change the auto save setting to delay to allow it to live update in the browser. This solution would work if you are learning HTML and CSS.

2 Likes

Alternatively, if you prefer a challenge, write a small JavaScript file which will refresh your page on a timer in your regular web browser…

1 Like