How To Save Time On Your Next Project?

Photo by Malvestida on Unsplash

How To Save Time On Your Next Project?

Do you create a new set of HTML, CSS, and JS files for every new project and start from scratch? It is a time-consuming and repetitive task.

Even though they are simple things to do, they take time to set up.

Instead, you can create a sample folder with index.html, style.css, and script.js files and create the barebone structure of code to use for upcoming projects.

There is a way you can automate it and get a quick head-start. Here's how:

Here's How to do it:

  1. Create a folder and name it "Web Dev Projects". You can name it whatever you want.

  2. Inside the web dev projects folder, open a new folder and name it a sample website.

  3. Open up the sample folder in VS Code editor.

  4. Create index.html, style.css, and script.js files. Also, create an image folder within your project folder.

  5. Open index.html and insert the boilerplate code by pressing "!" and then hit tab. It will insert the boilerplate code.

  6. Connect CSS and JS files in the head by using the link tag in the index.html file.

  7. Embed font awesome icons using CDN.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="HandheldFriendly" content="true" />

    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />

    <!-- font awesome icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
      integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <title>First Demat</title>
  </head>
  1. Import Google fonts in the style.css file and margin and padding to zero, box-sizing to border-box.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}
  1. Add comments to every section to identify the code with ease.

  2. Finally, you can copy the sample folder, rename it, and use it for the next project.