a site for beginner front-end web developers

Templates

Useful templates for basic page layouts

In order to show a page of code but not actually run the code it's common practice to replace opening and/or closing brackets with an HTML entity or number code:

ampersand-l-t-semi-colon is the HTML entity of the

<

symbol
ampersand-g-t-semi-colon is the HTML entity of the

>

symbol
ampersand-a-m-p-semi-colon is the HTML entity of the

&

symbol
ampersand-c-o-p-y-semi-colon is the HTML entity of the

©

symbol
ampersand-e-m-s-p-semi-colon is an "em space", as much as four real spaces.

ampersand-n-b-s-p-semi-colon is a "non-breaking space" character that prevents an automatic line break.

I typically start every page with the following, I cut out the tags that aren't necessary.

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>"SITE NAME" - "PAGE NAME"</title>

  These are pretty standard settings to enable the latest HTML for multiple devices
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  These are helpful for browser results and social sharing:
  <meta name="description" content="..." >
  <meta name="keywords" content="..." >
  <meta property="og:title" content="SITE NAME | SITE PAGE">
  <meta property="og:site_name" content="SITE NAME (ex: Web Design Tips)">
  <meta property="og:url" content="SITE URL">
  <meta property="og:type" content="website (standard, more available "https://ogp.me/")">
  <meta property="og:image" content="IMAGE YOU WANT TO BE USED AS THUMBNAILS (exclude .webp)">

  link "FONT STYLES" BEFORE CSS files for smooth transition between set font styles and their default
  <link rel="preload" as="font" rel="stylesheet" href="EXTERNAL FONT LINK" >

  <link rel="stylesheet" href="EXTERNAL CSS STYLESHEET" >

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  Unless your page requires JS to run before the HTML page is read, scripts typically run faster in the body
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="icon" type="image/png" href="FOR TAB IMAGE" sizes="16x16">
  <link rel="canonical" href="CURRENT PREFERRED SITE PAGE YOU WANT INDEXED">
  OR:
  <meta name="robots" content="noindex"> IN CASE YOU DONT WANT BROWSERS TO INDEX

  Style your page with CSS as needed
  <style>
   * {box-sizing: border-box}

   running local fonts makes the page speed run faster
   @font-face {
    font-family: "Ubuntu Condensed";
    font-style: normal;
    font-weight: 400;
    src: local("UbuntuCondensed-Regular"), local("UbuntuCondensed-Regular"), url(UbuntuCondensed-Regular.ttf) format("ttf");
    font-display: swap;
   }

   media queries: in case you want to change specific properties of elements according to screen size
   /* smartphones, iPhone, portrait 480x320 phones */
   @media (max-width:320px) {

   }

   /* Small devices (landscape phones, 576px and up) */
   @media (min-width:576px) {

   }

   /* Medium devices (tablets, 768px and up) */
   @media (min-width:768px) {

   }

   /* Large devices (desktops, 992px and up) */
   @media (min-width:992px) {

   }

   /* X-Large devices (large desktops, 1200px and up) */
   @media (min-width:1200px) {

   }

   /* XX-Large devices (larger desktops, 1400px and up) */
   @media (min-width:1400px) {

   }
  </style>
 </head>
 <body>
  ...
  External files: Bootstrap, in this case
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
 </body>
</html>

For more helpful info on page speed, visit PageSpeed Insights as well as HTML meta Tag for info on meta tags

Sometimes you have to write your CSS a specific way to make certain selectors act the same for different browsers.

::-webkit-input-placeholder { /* Chrome and Safari */
    color: red;
    font-weight: 700;
    opacity: .5;
}

::-moz-placeholder { /* Mozilla Firefox */
    color: red;
    font-weight: 700;
    opacity: .5;
}

::-ms-placeholder { /* Microsoft Internet Explorer*/
    color: red;
    font-weight: 700;
    opacity: .5;
}

::placeholder {
    color: red;
    font-weight: 700;
    opacity: .5;
}

Sitemap Example (sitemap.xml)

If you want any browser(Google for example) to "crawl"(inspect) your site, you'll need a sitemap.

This is a good SEO tool and it's fairly accurate

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
  <loc>https://www.yourdomain/pagetitle</loc>
  <lastmod>2021-06-01</lastmod>
 </url>
 <url>
  <loc>https://www.yourdomain/pagetitle</loc>
  <lastmod>2021-06-01</lastmod>
 </url>
 <url>
  <loc>https://www.yourdomain/pagetitle</loc>
  <lastmod>2021-06-01</lastmod>
 </url>
 <url>
  <loc>https://www.yourdomain/pagetitle</loc>
  <lastmod>2021-06-01</lastmod>
 </url>
 <url>
  <loc>https://www.yourdomain/pagetitle</loc>
  <lastmod>2021-06-01</lastmod>
 </url>
</urlset>

Fixed Sidebar

This is a basic sidebar. It'll stick to one side of the screen on larger devices and then move to the top on smaller devices.

...
  <style>
   .wdh-main,#main{transition:margin-left .4s}

   nav {
    height:100%;
    width:200px;
    background-color: #006699;
    position:fixed!important;
    z-index:1;
    overflow:auto;
   }

   nav a {
    color: white;
    text-decoration: none;
   }

   nav a:hover {
    color: #85a3e0;
    text-decoration: none;
   }

   @media (min-width:993px){
    nav{display:block!important;}
    .wdh-main{margin-left:340px;margin-right:40px;}
   }

   @media (max-width:992px){
    nav {
     width: 100%;
     height:120px;
     overflow-y: hidden;
    }

    .mobile div a {font-size: 24px;}

    .navbar-nav {display: inline-block;}

    .wdh-main {
     margin-left:0!important;
     margin-right:0!important;
     margin-top: 100px;
     margin-bottom: 50px;
    }

   }
  </style>
 </head>

 <body>


  <!-- Page Content -->
  <div class="wdh-main">

   <nav class="navbar fixed-top navbar-light mobile">
    <div class="navbar-nav text-center pb-4">
     <a href="Template_5_Demo.html#home" class="h3 p-2" id="logo">Home</a>
     <a href="Template_5_Demo.html#gallery" class="h3 p-2">Gallery</a>
     <a href="Template_5_Demo_Studio.html" class="h3 p-2">Our Studio</a>
     <a href="Template_5_Demo.html#location" class="h3 p-2">Location</a>
     <a href="Template_5_Demo_Classes.html" class="h3 p-2">Classes</a>
     <a href="Template_5_Demo_Schedule.html" class="h3 p-2">Schedule</a>
     <a href="Template_5_Demo_Packages.html" class="h3 p-2">Packages</a>
     <a href="Template_5_Demo_Contact.php" class="h3 p-2">Contact</a>
    </div>
   </nav>

...REPEAT AS NEEDED FOR MORE SECTIONS

   <footer>
...
   <footer>
  </div><!--END wdh-main-->

 </body>
</html>