Code your beginner HTML and CSS projects way faster with these 2 tricks!
As a beginner in web development, working on projects mainly involving HTML and CSS in a local environment using a browser ( like Firefox or Chrome) and a code editor ( like VS code), I have personally found that having to frequently save my code and refreshing my html file in the browser to see how I am progressing can be a bit of a slow down and quite an annoyance. However, I have found these two tricks to eliminate that annoyance, while helping me code even faster!
- Setting your code editor to Auto-save.
When writing code, you probably don’t always have to manually hit CTRL + S each time, when your code editor can do that for you. With auto save, by the time you are done typing your last character, your editor would have already saved everything for you, and that saves you a couple of seconds!
Below are steps on how to set your editor to auto save. These setting apply specifically for VS Code, but you can make inferences from these steps for other code editors;
i. Open your code editor
ii. Go to “File” on the top most left corner
iii. Select Auto save on the drop down menu
To know that auto save has been selected successfully, there will be a check mark, as indicated on the screenshot. And that’s it! no more saving manually each time you type your code.
2. Install an Auto Refresh Browser Extension
Having to always manually refresh your browser to see how you are progressing with the changes in your code editor can also eat up a little bit of your time. Fortunately, browsers like Chrome and Firefox have extensions that help you automatically refresh your page. To benefit from this, follow the steps below;
i. Install your preferred auto refresh browser extension. If you are using Chrome browser you can find a number of these extensions in the chrome web store.
ii. Add the extension to your browser as indicated below.
Most auto refresh extensions will let you decide the frequency for refreshing, in seconds. For instance, you can set it to be refreshing your page after every 2 seconds. Again, you can infer from this example to implement similar tricks to other browsers.
These two tricks combined will enable you to be making changes in your code editor(without wasting time having to save manually), and at the same time monitor your changes in your browser as it automatically refreshes.
I hope this helps you code a little more faster. Happy coding!
