$99 Websites + Website Design: November 2020

Monday, November 30, 2020

Tony Hsieh Used to Ask a Really Weird Question at Zappos, and It's Definitely Worth Remembering

It wasn't just the question. It was the idea behind it.

What’s More Important, EQ or IQ? It’s More Complex Than You Think

People like to pit IQ and EQ against each other. But the truth is they're both important, for different reasons.

Uploading Files With AJAX

I can’t seem to reach the end of the fun stuff you can do with web technologies. Today, I’m going to show you how to upload files via AJAX.

First, we'll see how to upload files using vanilla JavaScript. And later on, I'll show how you could use the DropzoneJS library to implement drag-and-drop file uploads.

Looking for a Quick Solution?

If you're looking for a quick solution, there's a great collection of file upload scripts and applications over at CodeCanyon.

How to Upload a File With Vanilla JavaScript

There are three main components to our project.

The multiple attribute on the file input element.
The FileReader object from the new File API.
The FormData object from XMLHttpRequest.

We use the multiple attribute to allow the user to select multiple files for upload (multiple file upload will work normally even if FormData isn’t available). As you’ll see, FileReader allows us to show the user thumbnails of the files they’re uploading (we’ll be expecting images).

For older browsers that don't support FormData or FileReader, the upload behavior will fall back to a normal, non-AJAX file upload.

With that out of the way, let’s get coding!

Step 1: The Markup and Styling

Let’s start with some basic markup and styling. Of course, this isn’t the main part of this tutorial, I won’t treat you like a newbie.

The HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HTML5 File API</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="main">
    <h1>Upload Your Images</h1>
    <form method="post" enctype="multipart/form-data"  action="upload.php">
      <input type="file" name="images" id="images" multiple />
      <button type="submit" id="btn">Upload Files!</button>
    </form>
 
    <div id="response"></div>
    <ul id="image-list">
 
    </ul>
  </div>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="upload.js"></script>
</body>
</html>

Pretty basic, eh? We’ve got a form that posts to upload.php, which we’ll look at in a second, and a single input element, of type file. Notice that it has the boolean multiple attribute, which allows the user to select multiple files at once.

That’s really all there is to see here. Let’s move on.

The CSS

body {
  font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
  padding:10px;
}
 
h1 {
  margin-top:0;
}
 
#main {
  width: 300px;
  margin:auto;
  background: #ececec;
  padding: 20px;
  border: 1px solid #ccc;
}
 
#image-list {
  list-style:none;
  margin:0;
  padding:0;
}
#image-list li {
  background: #fff;
  border: 1px solid #ccc;
  text-align:center;
  padding:20px;
  margin-bottom:19px;
}
#image-list li img {
  width: 258px;
  vertical-align: middle;
  border:1px solid #474747;
}

No shockers here, we're just creating some basic styling for our upload form.

Step 2: The PHP

We need to be able to handle the file uploads on the back end as well, so let’s cover that next.

upload.php

<?php
 
foreach ($_FILES["images"]["error"] as $key => $error) {
  if ($error == UPLOAD_ERR_OK) {
    $name = $_FILES["images"]["name"][$key];
    move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
  }
}
 
echo "<h2>Successfully Uploaded Images</h2>";

Bear in mind that these were the first lines of PHP I’d written in easily a year. You should probably be doing a bit more for security; however, we’re simply making sure that there are no upload errors. If that’s the case, we use the built-in move_uploaded_file to move it to an uploads folder. Don’t forget to make sure that the folder is writable.

So, right now, we should have a working upload form. You choose an image (multiple, if you want to and your browser lets you), click the Upload Files! button, and you get the message Successfully Uploaded Images.

Here’s what our mini-project looks like so far:

But, come on, it’s 2020: we want more than that. You’ll notice that we’ve linked up jQuery and an upload.js file. Let’s crack that open now.

Step 3: The JavaScript

Let’s dive right into the JavaScript code for file uploading!

(function () {
  var input = document.getElementById("images"),
      formdata = false;
    
  if (window.FormData) {
    formdata = new FormData();
    document.getElementById("btn").style.display = "none";
  }
  

}();

Here’s what we start with. We create two variables: input is our file input element, formdata will be used to send the images to the server if the browser supports that. We initialize it to false and then check to see if the browser supports FormData. If it does, we create a new FormData object. Also, if we can submit the images with AJAX, we don’t need the Upload Images! button, so we can hide it. Why don’t we need it? Well, we’re going to auto-magically upload the images immediately after the user selects them.

The rest of the JavaScript will go inside your anonymous self-invoking function. We next create a little helper function that will show the images once the browser has them:

function showUploadedItem (source) {
  var list = document.getElementById("image-list"),
      li   = document.createElement("li"),
      img  = document.createElement("img");
  img.src = source;
  li.appendChild(img);
  list.appendChild(li);
}

The function takes one parameter: the image source (we’ll see how we get that soon). Then, we simply find the list in our markup and create a list item and image. We set the image source to the source we received, put the image in the list item, and put the list item in the list. Voila!

Next, we have to actually take the images, display them, and upload them. As we’ve said, we’ll do this when the onchange event is fired on the input element.

if (input.addEventListener) {
  input.addEventListener("change", function (evt) {
    var i = 0, len = this.files.length, img, reader, file;
    
    document.getElementById("response").innerHTML = "Uploading . . ."
    
    for ( ; i < len; i++ ) {
      file = this.files[i];
  
      if (!!file.type.match(/image.*/)) {

      } 
    }
      
  }, false);
}

So, what do we want to do when the user has selected files? First, we create a few variables. The only important one right now is len = this.files.length. The files that the user has selected will be accessible from the object this.files. Right now, we’re only concerned with the length property, so we can loop over the files... and that is exactly what we’re doing next. Inside our loop, we set the current file to file for ease of access. Next thing we do is confirm that the file is an image. We can do this by comparing the type property with a regular expression. We’re looking for a type that starts with “image” and is followed by anything. (The double-bang in front just converts the result to a boolean.)

So, what do we do if we have an image on our hands?

if ( window.FileReader ) {
  reader = new FileReader();
  reader.onloadend = function (e) { 
    showUploadedItem(e.target.result);
  };
  reader.readAsDataURL(file);
}
if (formdata) {
  formdata.append("images[]", file);
}

We check to see if the browser supports creating FileReader objects. If it does, we’ll create one.

Here’s how we use a FileReader object: We’re going to pass our file object to the reader.readAsDataURL method. This creates a data URL for the uploaded image. It doesn’t work the way you might expect, though. The data url isn’t passed back from the function. Instead, the data url will be part of an event object.

With that in mind, we'll need to register a function on the reader.onloadend event. This function takes an event object, by which we get the data URL: it’s at e.target.result. We’re just going to pass this data RUL to our showUploadedItem function (which we wrote above).

Next, we check for the formdata object. Remember, if the browser supports FormData, formdata will be a FormData object; otherwise, it will be false. So, if we have a FormData object, we’re going to call the append method. The purpose of a FormData object is to hold values that you’re submitting via a form; so, the append method simply takes a key and a value. In our case, our key is images[]. By adding the square-brackets to the end, we make sure each time we append another value, we’re actually appending it to that array, instead of overwriting the image property.

We’re almost done. In our for loop, we’ve displayed each of the images for the user and added them to the formdata object. Now, we just need to upload the images. Outside the for loop, here’s the last piece of our puzzle:

if (formdata) {
  $.ajax({
    url: "upload.php",
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function (res) {
      document.getElementById("response").innerHTML = res; 
    }
  });
}

Again, we have to make sure we have FormData support; if we don’t, the Upload Files! button will be visible, and that’s how the user will upload the photos. However, if we have FormData support, we’ll take care of uploading via AJAX. We’re using jQuery to handle all the oddities of AJAX across browsers.

You’re probably familiar with jQuery’s $.ajax method: you pass it an options object. The url, type, and success properties should be obvious. The data property is our formdata object. Notice those processData and contentType properties. According to jQuery’s documentation, processData is true by default, and will process and transform the data into a query string. We don’t want to do that, so we set this to false. We’re also setting contentType to false to make sure that data gets to the server as we expect it to.

And that’s it. Now, when the user loads the page, they see this:

And after they select the images, they’ll see this:

And the images have been uploaded:

So that's how you can upload files using the vanilla JavaScript. In the next section, we'll see how to implement file upload with the DropzoneJS library.

How to Use the DropzoneJS Library

The DropzoneJS library is a popular free library which allows you to implement the file uploads functionality the blink of an eye. It also supports drag-and-drop file uploads along with a beautiful preview feature.

Let's have a look at the following code which implements the file upload functionality with DropzoneJS.

<!DOCTYPE html>
<html>
<head>
    <script src="./dropzone.js"></script>
    <link rel="stylesheet" href="./dropzone.css">
</head>
<body>
    <form action="/upload.php" class="dropzone">
      <div class="fallback">
        <input name="images" type="file" multiple />
      </div>
    </form>
</body>

You'll have to download the dropzone.js and dropzone.css files locally first.

Apart from that, you just need to use the dropzone class in the form tag, and the DropzoneJS library will handle the rest!

Let's see how it looks like when you load it in your browser.

As you can see, there's a section which allows you to drop files on it, alternatively you could also select files from your computer by using the default file selection dialog box. Go ahead and drop a few image files on it and it should present you a nice preview as shown in the following screenshot.

Isn't that look amazing with just a few lines of code? In fact, the DropzoneJS library also allows you to customize the UI and other stuff. I would encourage you to check the configuration options provided by this library.

Apart from this, there's the filepond library which is also a popular file upload library you could use. It provides all niche features like drag and drop, progress bar, previews, reordering and alike.

That’s a Wrap!

Uploading files via AJAX is pretty cool, and it’s great that these new technologies support that without the need for lengthy hacks.

Learn JavaScript With a Free Course

If you want to master JavaScript, be sure to check out our free course to learn the complete A-Z of modern JavaScript fundamentals.

In this course, you'll learn all of the essential concepts of the JavaScript language. That's right: all of them! Including the most important recent improvements to the language, in JavaScript ES6 (ECMAScript 2015) and JavaScript ES7 (ECMAScript 2016).

You'll start with the very fundamentals of the language: variables and datatypes. Then in each lesson you'll build knowledge, from data structures like arrays and maps to loops, control structures, and functions. Along with the basics of the language, you'll also learn some key built-in APIs for manipulating data, AJAX, and working with the web browser DOM. Finally, you'll get a look at some of the most powerful and widely used web APIs that are supported by all modern browsers.

FREE

JavaScript

Modern JavaScript Fundamentals

Dan Wellman

This post has been updated with contributions from Sajal Soni. Sajal belongs to India and he loves to spend time creating websites based on open source frameworks.

An Open Letter to Ken Jennings About Replacing Alex Trebek on 'Jeopardy!'

Jeopardy! just announced that Ken Jennings will be the first interim host after the passing of Alex Trebek. How should Jennings tackle the role?

25+ Amazing Bootstrap Templates to Try in 2021

Sometimes getting a fully custom-built website isn’t an option. For that reason purchasing an already made HTML template can be a lifesaver, especially when the template is easy to customize! Bootstrap is a superb framework because it’s well-supported, well-documented and very well-liked by developers, designers, and business owners worldwide.

Bootstrap is one of the most widely used frameworks and statistics don’t fall behind on proving that. Out of the top 1 million websites in the world, more than 20% use bootstrap in their libraries which proves that Bootstrap is rather helpful if you’re working in a mobile-first front-end web development environment.

Ever since its release in 2011, the framework has been constantly updated and supported. While in 2013 it only had 1.6% of the market share, that grew more than a dozen times. The best part about Bootstrap is its flexibility which allows for it to be supercharged with a plentitude of Bootstrap UI kits and be integrated with Design Language Systems.

Bootstrap is a great tool for maintaining design patterns and consistency in design, but also in code. The fact that it’s the sixth most-starred project on GitHub proves that the repository isn’t only popular, but an ever growing and constantly used library.

Top 10 Best Bootstrap Templates

Strapped for time? Check out this video version of our best premium Bootstrap templates roundup:

Where to Find the Best Bootstrap Templates

If you're a web developer or a programmer and you constantly work with Bootstrap, I'm sure you're looking for the best source of Bootstrap website templates.

The best place to get premium Bootstrap templates is Envato Elements. You'll get unlimited downloads of amazing Bootstrap websites for a low monthly fee.

Enjoy unlimited downloads of Bootstrap website templates in Envato Elements

Get all the Bootstrap website inspiration you need and download as many as you need for your projects. In Envato Elements you can also download all kind of web templates, like CMS templates and WordPress themes.

But if a subscription isn't your thing and you only need one Bootstrap admin template or a single Bootstrap form template, then check ThemeForest, our single purchase marketplace. You'll find premium Bootstrap website templates to buy one at a time.

25+ Premium Bootstrap Templates Available From Envato Elements

I’ve gathered together over 25 amazing Bootstrap websites templates that will work perfectly for your static or CMS powered website.

1. DAdmin - Responsive Bootstrap Admin Template

Admin is one of our most popular Bootstrap admin templates. It was designed to build any kind of software Admin Dashboard Panel. This HTML5 Bootstrap template is based on the latest stable Bootstrap 4.1.1. Some of its features are:

Bootstrap 4 Framework
Fully Responsive Pages
Clean Design
Vector Maps Included
Retina Ready
800+ Google Fonts
W3C Validated Code
Modern Cross Browser Supported
In-depth Documentation

2. Classic - Responsive Bootstrap Form Template

This Bootstrap form template is very complete and will cover all your needs. Classic is a Bootstrap form template that includes 8 professional and customizable form designs. See what you'll get:

Registration form
Login Form
Contact Form
Payment Form
Review Form
Subscribe Form
Forgot Form
Reset Form

This Bootstrap form template features:

100% Responsive Layout
3 different Color Theme
7 different Google font setting
Google Web Fonts
Documentation included
Clean Design and Well Commented Code

3. Pheromone - Smart Multi-Concept Template

We’re starting this list with the Pheromone Bootstrap template; a versatile and multi-purpose template that puts the focus on your site’s content. It comes with over 80 HTML files alone. Its overall minimalistic design is excellent for anyone looking to build a portfolio, blog, an online store, or even a full-blown corporate website.

4. Corporate MultiPurpose HTML Template for Business

Up next, we have a beautiful Bootstrap template that’s very well-designed. Visually, it has a clean look, with simple but attractive design elements, creatively used imagery, and uses stunning typography.

The template includes more than 120 demo page examples and has 32 block elements in hundreds of variations which is why this template can efficiently serve a wide range of needs.

5. Coeus - Cryptocurrency Landing Page HTML Template

Even though Coeus focuses heavily on cryptocurrencies, I like this Bootstrap landing page template for its fantastic color scheme. It’s bold, trendy and eye-catching. Whatever your industry may be, you can most certainly repurpose Coeus to make a fantastic impression on your visitors.

It comes with both light and dark color schemes, animations (including transitions, smooth scrolling, and parallax). Moreover, being built with Bootstrap, it’s mobile-friendly too. Coeus is a must have Bootstrap template if you’re looking to make a bold statement.

6. Brehoh - One Page Bootstrap Template

Brehoh is a fully responsive, single page design Bootstrap template. It’s perfect for online portfolios and resumes. It’s an excellent template for creatives such as photographers, videographers (you can use videos from Youtube as backgrounds), developers, writers or designers. It comes with a fully functioning contact form, sliders, and Ajax functionality.

7. Andior - Bootstrap Website Templates Pack

The Andior Bootstrap website template is massive. It comes with over a hundred (yup, you read that right) HTML templates, as well as over thirteen homepages alone. It works well as a single page portfolio and a full website (even an online store).

Andior is (logically) fully responsive and very well-designed. It will do an excellent job for a freelance portfolio, an eCommerce shop or a corporate website.

8. Candy - One & Multi Page HTML

I like Candy because it has a creative but simple visual design. It’s not over the top, which helps make it elegant, and the overall visual design of Candy comes across as trendy and modern. It’s a great template for anyone who wants a good looking website without having to make one from scratch.

9. Celia - Innovative Portfolio HTML5 Template

Looking for Bootstrap website inspiration? Next up we have Celia–a multipurpose website that’s best suited for online portfolios. It comes with a variety of pre-made templates, designs, and blocks:

200 blocks and options
145 HTML5 pages
24 homepages
25 portfolio pages with 7 layout variations
12 blog pages
6 shop pages
14 sliders
….and a lot more!

It’s a massive Bootstrap template! Celia comes with many well-designed features and functions. It will be a wonderful template for you to customize for your next project.

10. LifeCoach - Coach, Speaker & Mentor Template

LifeCoach is a Bootstrap template designed with coaches, speakers and mentors in mind (yup, its name is very much on point). The template files include PSDs if you want to redesign anything or if you want to see what your ideas would look like before taking the time to customize it with code.

11. Grandin - Responsive Bootstrap Admin Template

Grandin is a Bootstrap admin template. It’s a great template if you need to create an admin dashboard for yourself, your clients or your company. It’s a large and diverse template that comes with multiple UI components, widgets, forms, tables, chars and the like. It will also function well for any custom eCommerce store if you’re looking to build a dashboard for it.

For more Bootstrap admin templates, take a look at this roundup:

Bootstrap

15 Feature-Packed Bootstrap Admin Templates

Ian Yates

12. Flone - Minimalist eCommerce Bootstrap 4 Template

Flone is the first exclusive eCommerce template we have on this list today! It has a huge collection of over forty customizable pages including over ten homepages, over seventeen shop pages, and more than six blog pages.

It’s cross-browser compatible and mobile friendly meaning you won’t have to worry about your website working in any browser or on any device.

13. OOPS - Perfect 404 Pages Pack

OOPS is a collection of 404 Bootstrap pages. These pages are clean, simple and beautiful. Error pages like these can be really beneficial to a user journey, helping avoid confusion and assisting visitors on their way. I was super eager to include this one on the list. OOPS gives you a chance to make the best of bad situations when things go wrong on your website.

14. Parker Software and Startup Landing Page Template

Looking for the best Bootstrap templates? I like Parker very much; this Bootstrap template is extremely handy. It has a simple and elegant look to it, which is often all that you need. It’s well documented, fully responsive and W3C Validated.

It can be customized to any business whether it be service or product based, and any website type from SaaS, to agency portfolios, to eCommerce.

15. Seven - Portfolio Template for Creatives & Agency

I love Seven because it’s a super clean yet creative Bootstrap theme. It’s exceptional as an online portfolio for creatives, however I feel it’s also perfect for those outside of the creative industry as well. It will help make an enjoyable and memorable first impression, whatever the subject matter, thanks to its well-designed look and feel. Of course, this Bootstrap template is mobile friendly, well documented and versatile. What else could you ask for?

16. Iosoon Vol1 - Stunning Coming Soon Template

Iosoon is an amazing Bootstrap template collection for two reasons. First, the visual design is bold, colorful and eye-catching. It’s distinctive, and that’s important for a coming soon page. Secondly, coming soon pages are often an after thought (like 404 pages). I love this template because it makes announcing your new business or website a lot more exciting for both you and your visitors.

17. Crispy - One & Multi Page HTML

Crispy is another Bootstrap template on our list that has a beautiful visual design. The typography, spacing, and visual elements have clearly been seriously considered when making this template. The template can be used for a variety of purposes such as a corporate website, a blog, an online portfolio, or a resume. It’s responsive and cross-browser compatible, and features a pricing table, milestones, app icons, client/team carousel, and video backgrounds.

18. Jestem - Elegant & Minimal Resume vCard Template

Jestem (which means “I am” in Polish) is a designated online resume Bootstrap template. It has an elegant and minimal visual design, which is naturally fully responsive. It’s not a very complicated theme, but it’s certainly a quality one. It comes with two default homepage designs that in turn come with six color combinations.

19. Haswell - Multipurpose One & Multi Page Template

Once again, I include Haswell on this list because it’s absolutely stunning. It's one of the best Bootstrap templates we have. This template is exceptionally well-designed. It’s sleek, elegant and minimal in its visual design, however, this Bootstrap template is also very diverse. It comes with over 500 function blocks that allow you to thoroughly customize every detail. The code of Haswell is clean, non-dev friendly, and well commented too. It’s a beautiful and large template that’s simply a dream to work with!

20. Pogody – Responsive HTML5 Coming Soon Template

Pogody is another “coming soon” template that you must check out. It’s an exceptionally good looking template; it’s clean, it’s lovely, and it’s the perfect coming soon page. The visual design isn’t overwhelming, and it catches attention pretty well–all important aspects for a coming soon page. Additionally, it’s well documented, easy to use, and full of features such as a “Special Typewriter Text Effect” and an Ajax contact form.

21. Oumaila - Music Band and Musician Template

Last on our list today is Oumaila. This Bootstrap template has fantastic energy and vibe, because it was designed with bands and musicians in mind. It’s a single-page landing page that can actually be used in any industry. It’s fully responsive and retina-ready. It comes equipped with a Twitter feed, an Instagram feed, and a single album page.

22. App Landing HTML Template

App Landing is a creative, clean and modern-looking responsive HTML5/CSS3 landing page that is based on Bootstrap. With a great looking design on a wide range of screen sizes, Cooper is a beautiful theme that could be used for showcasing your next application or product.

23. Bacchus - One Page HTML Template

Bacchus is creative one-page HTML template that is a great solution for any corporate website, a personal portfolio or a creative agency. With its ease of use and customization and a fully responsive design, this template proves to be a great choice when it comes to picking a template that is both functional and modern-looking

24. Metrica - Multipurpose HTML Template

Metrica is a fully responsive, multi-purpose HTML5 template that’s based on Bootstrap. With a robust design yet built with flexibility in mind, this template will work great as the foundation of a corporate, portfolio, or one-page website.

The theme, which is component-based, comes with over 200 components that can be edited and rearranged for maximum flexibility.

25. Stellar - One page multipurpose html template

Stellar, is a premium-looking template that puts an accent on beautiful design that is observed through beautiful typography choices, unusual but interesting content blocks and thematic imagery. For this reason, Stellar will be a great choice for freelance designers and photographers who seek to stand out with their portfolio.

26. Nobel - Minimal & Versatile Multi-Concept Template

Nobel is a minimalist yet versatile template that puts heavy accent on imagery and photographs in design. With 5 unique landing page designs, unlimited custom slideshows and 4 portfolio layouts - this theme will be a great choice for photographers or videographers because of the unusual layout structure of the website.

Bootstrap’s Main Features

You've seen a selection of the best Bootstrap templates we've got in Envato Elements. But if you'd like to know more about amazing Bootstrap websites and this framework's features, keep reading:

1. Bootstrap’s Basic Framework

The main purpose of building with Bootstrap is to apply its choices of size, colors, fonts and grids which come in a form of basic style definitions across the full spectrum of HTML elements. This results in a robust and uniform appearance for certain elements and containers.

Although the predefined style is good for building stuff straight out of the box, it is easily possible to modify and edit to your needs.

bootstrap grid — Bootstrap’s grid is flexible and robust—check out more examples in the docs

2. Bootstrap’s JavaScript Components

Bootstrap comes with several JavaScript components in the form of jQuery and JavaScript plugins which allow for additional UI elements to be added, such as tooltips, dialog boxes and sliders. The components in Bootstrap consist of an HTML structure, a CSS declaration and sometimes additional JavaScript code, permitting further functionality for certain interface elements.

3. Bootstrap’s Layout Tools

Some of the most important features of Bootstrap are the layout components that are implemented through a CSS grid layout. The layout component of Bootstrap defines rows and columns and has come to become an industry standard used by both developers and designers alike.

“The [...] important benefit of open source is the vast community that surrounds this tool. If you ever run into issues with using Bootstrap there is a big community that is ready to help.” – Brenden Thornton

Explore More Bootstrap Resources and Tutorials

Build Amazing Bootstrap Websites Today!

So there you have it, our newest roundup of amazing Bootstrap website templates. What did you think of our list? I hope you’ve found one that’s going to help make your next website project a marvellous one. Feel free to add comments about other worthwhile Bootstrap templates you want us to look out for!