VS Code (getting started)

Getting Started with Visual Studio Code (VS Code) for Vanilla Websites

Welcome to VS Code! It’s a fantastic tool for web developers, whether you’re just getting started or you’ve been coding for years. We’ll guide you through setting up VS Code for creating vanilla (HTML, CSS, JavaScript) websites, integrating Git for version control, and setting up a live server to see your changes in real-time. Let’s get started!

Step 1: Download and Install VS Code

Visit the VS Code website: Go to code.visualstudio.com.
Download the installer: Click on the download button for your operating system (Windows, macOS, or Linux). The website usually detects your OS automatically and provides the correct installer.
Run the installer:
- Windows: Open the downloaded .exe file and follow the installation wizard.
- macOS: Open the downloaded .dmg file, drag VS Code to your Applications folder.
- Linux: Follow the specific instructions provided on the download page for your distribution.

Step 2: Open VS Code

After installation, launch VS Code. You should see the Welcome screen, which provides quick links to various features and resources.

Step 3: Install Essential Extensions

Extensions add extra functionality to VS Code. Let’s install some key extensions for web development:

Open the Extensions view: Click on the Extensions icon in the Activity Bar on the side of the window (it looks like four squares) or press Ctrl+Shift+X.
Search for and install the following extensions:
- Live Server: This extension launches a local development server with a live reload feature, perfect for web development.
- GitLens: Supercharges the built-in Git capabilities.
- Prettier - Code formatter: To keep your code looking neat.
Click the Install button on each extension. Once installed, you may need to reload VS Code.

Step 4: Open Your Project Folder

VS Code organizes your code in folders or workspaces. Here’s how to open one:

Open a folder:
- Click on File > Open Folder...
- Navigate to the folder containing your project and select it.

Step 5: Using Git for Version Control

VS Code has excellent Git integration, making it easy to manage your project’s version control.

Initialize a Git repository:
- Open the Source Control view by clicking the Git icon in the Activity Bar or press Ctrl+Shift+G.
- If your project folder isn’t a Git repository yet, click Initialize Repository.
Stage and commit changes:
- Click on the plus sign next to the files you want to stage.
- Write a commit message and click the checkmark to commit.
Push to a remote repository:
- You’ll need to create a repository on GitHub, GitLab, or another Git service.
- Follow the instructions provided by the service to link your local repository to the remote one.

Step 6: Setting Up Live Server

The Live Server extension allows you to see your changes in real-time as you develop your website.

Open a file to start your server:
- Open an HTML file from your project.
Start the Live Server:
- Right-click on the HTML file and select Open with Live Server.
- This will open your default browser and display your webpage. Any changes you make to the HTML, CSS, or JavaScript files will automatically reload the browser.

Step 7: Create and Open Files

Create a new file:
- Click on File > New File or press Ctrl+N.
Open an existing file:
- Click on File > Open File... or press Ctrl+O.
Save your file:
- Click on File > Save or press Ctrl+S.

Final Tips

Shortcuts: Learn the keyboard shortcuts for efficiency. You can find a list in the Help menu or press Ctrl+K Ctrl+S.
Command Palette: Use the Command Palette (Ctrl+Shift+P or F1) to access all of VS Code’s commands.
Customize settings: Go to File > Preferences > Settings or press Ctrl+, to customize VS Code to your liking.

And that’s it! You’re all set up to start developing awesome vanilla websites with VS Code. Happy coding!

Bonus Starting Vanilla Website

Laying Out a Basic HTML, CSS, and JavaScript Project in VS Code

Now that you’ve got VS Code set up, let’s create a basic vanilla website project. This will include an HTML file, a CSS file for styling, and a JavaScript file for functionality. We’ll also see how to use the Live Server extension to run your website locally and see changes in real-time.

Step 1: Create the Project Folder

Open VS Code:
- Launch VS Code if it’s not already open.
Create a new project folder:
- Click on File > Open Folder...
- Navigate to where you want to create your project and create a new folder named my-website.
- Select this folder to open it in VS Code.

Step 2: Create the HTML File

Create a new file:
- Click on File > New File or press Ctrl+N.
- Save the file as index.html in the my-website folder by clicking File > Save As... and navigating to the correct location.
Add basic HTML structure:
- Copy and paste the following code into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vanilla Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my vanilla website.</p>
    <button id="myButton">Click Me!</button>

    <script src="script.js"></script>
</body>
</html>

Step 3: Create the CSS File

Create a new file:
- Click on File > New File or press Ctrl+N.
- Save the file as styles.css in the my-website folder.
Add some basic styling:
- Copy and paste the following code into styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Step 4: Create the JavaScript File

Create a new file:
- Click on File > New File or press Ctrl+N.
- Save the file as script.js in the my-website folder.
Add some basic JavaScript:
- Copy and paste the following code into script.js:

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

Step 5: Run Your Website with Live Server

Open index.html with Live Server:
- Right-click on the index.html file in the Explorer sidebar.
- Select Open with Live Server.
View your website:
- Your default browser will open with the URL http://127.0.0.1:5500/index.html (or similar).
- You should see your “Hello, World!” message, styled paragraph, and a button that displays an alert when clicked.

Final Tips

Editing and saving: As you make changes to your HTML, CSS, or JavaScript files, Live Server will automatically refresh your browser to show the updates.
Project structure: For larger projects, consider organizing your files into subfolders (e.g., css for stylesheets, js for scripts, img for images).
More styling and scripting: Explore adding more complex styles and scripts to enhance your website.

You’re now set up to build and run a basic vanilla website using VS Code.

More complex Cool

Absolutely! Let’s add some cool CSS tricks to make your website more attractive and interactive. Below are some ideas and examples you can incorporate into your style.css file.

1. Gradient Background

Replace the existing body background color with a gradient.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, #f06, #f79);
}

2. Box Shadows

Add some depth to your elements with box shadows.

h1 {
    color: #333;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

3. Hover Effects

Make elements change appearance when hovered over.

button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

4. Responsive Design

Make your website look good on all devices.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, #f06, #f79);
}

h1 {
    color: #333;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

p {
    font-size: 18px;
    color: #666;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    h1 {
        font-size: 24px;
    }
    p {
        font-size: 16px;
    }
    button {
        font-size: 14px;
    }
}

5. Animations

Add some animations for better interactivity.

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    animation: fadeIn 2s ease-in-out;
}

6. Custom Fonts

Use Google Fonts to add custom fonts to your website.

Add this to the <head> section of your index.html:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Update your CSS to use the new font:

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, #f06, #f79);
}

7. CSS Variables

Use CSS variables for better maintainability and theming.

:root {
    --main-bg-color: linear-gradient(135deg, #f06, #f79);
    --text-color: #333;
    --btn-bg-color: #007bff;
    --btn-hover-bg-color: #0056b3;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 20px;
    background: var(--main-bg-color);
}

h1 {
    color: var(--text-color);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--btn-bg-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

button:hover {
    background-color: var(--btn-hover-bg-color);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

8. Flexbox for Layout

Use Flexbox to create flexible and responsive layouts.

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 20px;
    background: var(--main-bg-color);
}

h1 {
    color: var(--text-color);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--btn-bg-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

button:hover {
    background-color: var(--btn-hover-bg-color);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

9. Responsive Images

Make your images responsive.

<!-- Add this inside the body of index.html -->
<img src="your-image.jpg" alt="A cool image" class="responsive-image">

/* Add this to style.css */
.responsive-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

10. Cool Hover Effects for Links

Make your links more interactive.

<!-- Add this inside the body of index.html -->
<a href="#" class="cool-link">Cool Link</a>

/* Add this to style.css */
.cool-link {
    color: #007bff;
    text-decoration: none;
    position: relative;
}

.cool-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #007bff;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.cool-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

Feel free to experiment with these CSS tips and tricks to make your website more dynamic and visually appealing. Happy coding!