w3collective

## sidebar-navigation-menu,html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sidebar Navigation Menu</title>
  <style>
    nav {
      background-color: #ccc;
      position: fixed;

## geolocation.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Using the HTML Geolocation API to display a users location on a map</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</head>

## bootstrap-resume.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Develop a single page HTML resume using Bootstrap 5</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
  </head>
  <body>
    <header class="bg-primary bg-gradient text-white py-5">

## screenshot.js
const puppeteer = require("puppeteer");
const capture = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1024, height: 768 });
  await page.goto("https://www.wikipedia.org/");
  await page.screenshot({ path: "./screenshot.png" });
  await browser.close();
};
capture();

## css-tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Tabs</title>
  <style>
    .tabs {
      list-style: none;
      position: relative;

## js-scroll-to-top-button.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>How to create a scroll to top button with JavaScript</title>
  <style>
    html,
    body {
      padding: 0;

## restrict-file-upload-size.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Restrict file upload size using JavaScript</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <form>

## autocomplete-search-javascript.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Create an autocomplete search using vanilla JavaScript</title>
  </head>
  <body>
    <div>
      <input type="text" id="autocomplete" placeholder="Select a color..."></input>

## currency-converter.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Currency converter with HTML &amp; JavaScript</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <form>

## file-extension-javascript.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Get file extension using JavaScript</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <form>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Using the HTML Geolocation API to display a users location on a map</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
	</head>
	const puppeteer = require("puppeteer");
	const capture = async () => {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.setViewport({ width: 1024, height: 768 });
	await page.goto("https://www.wikipedia.org/");
	await page.screenshot({ path: "./screenshot.png" });
	await browser.close();
	};
	capture();