Prerequisites
Tutorial
8 min follow •
Section 1
Signing up for CodeSandbox
Signing up for CodeSandbox
In the Modern HTML and CSS Basics course, you'll be using CodeSandbox to create a website.
Sign up for an account, and start a new project.
Step 2
Once you find the Sign in button, sign up in whatever way that works best for you.
Section 2
Beginning a new project in CodeSandbox
Beginning a new project in CodeSandbox
CodeSandbox has various templates, but you'll be using one that's appropriate for learning HTML and CSS in your new project.
Step 1
Click the New Sandbox button in CodeSandbox's Home tab.
Step 2
You'll see a list of templates when you click the button. Select the 'static' template to create a new project.
For projects made with templates,
you'll have editable code displayed on the left. The resulting website based on your code will be displayed on the right.
Section 3
CodeSandbox Settings
CodeSandbox Settings
Much like Word, CodeSandbox is an editor made with a specific purpose in mind. In this case, that would be editing code.
Now, we'll try editing our tool preferences to our liking.
Step 1
Click the [File] menu on the top left of the editor Go to [Preferences] - [Settings] to access the Settings window.
👉 A shortcut you can use to quickly access your Settings is: [Cmd + ,]
Step 2
Type 'theme' in the search bar to find the 'Workbench: Color Theme' option.
Select whatever theme you want to change the appearance of your editor.
In this tutorial we've chosen the theme Default Dark+.
Step 3
This time, type 'wrap' in the search bar to find the 'Editor: Word Wrap' option. Switch the settings to on, instead of off.
This will ensure that you'll be able to see all of your code without having to scroll down.