Cool Free Responsive HTML5 CSS3 Website Templates [2018 Edition]

Everyone knows building a website can be tedious. But there are simple ways (that still require some work to be done). For one, you can use WordPress (Marshall Hardy kindly explained everything in great detail) or you can use one of many free templates, that can be found all over the internet.

I’ve gathered some just for you. Enjoy!

Boxus — Free HTML5 Bootstrap Template for Agency, Web Design, and Software Company

Demo and Download

Boxus is a fresh, innovative, vibrant, and one page free creative agency website template. It’s stunning because of its unique layout which is responsive, as well. On the top of that, it comes up with the latest JavaScript plugins which make the template more efficient and robust. Keep in mind that, an illuminating and awe-inspiring free HTML template reduces time-consuming and increases productivity. Download Boxus and finish the project you have been dreaming for days.

AweSplash — Multiple Free HTML5 Splash Screen Pages

Demo and Download

AweSplash is a nice fit as a welcome page or any other landing pages to launch new products or announce upcoming events. Its main attractiveness is its 4 different demo pages. Ready to suit your various purposes.

Conceit — Corporate Category Bootstrap Responsive Web Template

Demo and Download

Conceit is a modern theme multipage multipurpose template for business and corporate related website. It is a great high-performance corporate theme with a modern creative design to delight a multitude of creative users for building their websites. This template comes with necessary features for your online existence like projects portfolio page, about page, contact page, 404 page, latest blogs, testimonials, team and newsletter subscribe form etc. It is a comprehensive business consulting theme that offers everything that a potential customer seeks from a website.

Asentus — Free Responsive Bootstrap Corporate Agency HTML5 Template

Demo and Download

If you are thinking of a light-weight, flexible, easy to customize, free for commercial and personal use, cutting-edge corporate agency website template; Asentus is for you. This is a free responsive bootstrap corporate agency HTML5 template. A super clean, elegant style, minimal agency website template.

Flex Art — a Corporate Category Bootstrap Responsive Web Template

Demo and Download

Flex Art is a neat template that is fully responsive, uses modern and elegant design and font awesome icons. Has a clean and clear structure, well commented code, cool hover effects. Built upon Bootstrap Framework Version 4.

Corporative — a Corporate Category Flat Bootstrap Responsive Web Template

Demo and Download

Corporative is a business and corporate themed multipurpose template, a smart choice for all your corporate related websites in order to boost your online presence and expand your business via online by using this smart and elegantly designed template.

Incorporated — a Corporate Category Flat Bootstrap Responsive Web Template

Download and Demo

Incorporated is a corporate themed multipurpose template a fine solution for your business to boost your profits via online by using this unique and modern design template. This elegant and creatively designed template is also a perfect choice for related websites like Agency, Company websites, promoting your services, Financial Services, etc. This template is 100% responsive cross browser template, compatible on all devices, displayed on all screen sizes. It is entirely built in Bootstrap framework, HTML5, CSS3 and JQuery.

CreativeX — Creative Flat Website Template with HTML, CSS, Bootstrap

Demo and Down

CreativeX is a creative and flat website template for designing organizational or corporate sites. It is amazingly designed with HTML, CSS, and Bootstrap. This template comes with 8 HTML pages which include the Home and About pages. It also includes animated portfolio listings with a single view.

Brandi- Free One Page Responsive HTML5 Business Template

Demo and Download

Brandi is free one page responsive HTML5 business template for office, agency or personal business like website. It is designed with HTML5, Bootstrap, CSS3 and jQuery.

Halo — A Free Multi-Page CSS Website Template

Demo and Download

Halo is a photography website built with CSS. It’s one of the best free website templates for personal websites. This is a multi-page CSS website template. The neat segmentations and layouts differentiate this template from the others in the list. No outlandish animation and interaction designs here — just simplicity.

Clean Blog — Free Bootstrap theme for blog website design

Demo and Download

Clean blog is a carefully styled Bootstrap blog theme that is perfect for personal or company blogs. This theme features four HTML pages including a blog index, an about page, a sample post, and a contact page.

Stylish Portfolio — Bootstrap portfolio theme

Demo and Download

Stylish Portfolio is a one page Bootstrap portfolio theme with off canvas navigation and smooth scrolling through content sections.

Sonar — Custom-scrolling free HTML5 photography template

Demo and Download

Sonar is the all-new free HTML5 photography template. It elevates your photography to a new level of creativity and engagement. No matter the destination, you can get there faster than ever with Bootstrap 4, unconventional design, brilliant graphics, and more.

John Doe — Free Responsive HTML5 One Page Template

Demo and Download

John Doe has an unusual classic design that surely will catch your clients attention. It is built with the best CSS Framework- Bootstrap and with the latest version of it. Also, it comes with eye catchy CSS3 animation and jQuery plugin. The color combination of John Doe is impressive and classy and just works great with the subtle design, which is perfect for your portfolio.

Free Responsive Design Agency Template

Demo and Download

This clean responsive theme is a perfect basis for displaying a vast amount of content in a coherent manner, thus promoting your web design agency or other projects related to this business niche. Though, transformative power of this theme allows you to customize it seamlessly to meet the needs of a particular website.

Free Responsive HTML5 Theme for Photo Site

Demo and Download

Welcome free responsive theme to set up online portfolio and share works online. Sleek design in popular today “flat colors”, gallery as a focal point and intuitive navigation will perfectly work for better online promotion of works.

Free HTML5 Single Page Theme

Demo and Download

The design is perfect for presenting design agency or CV of creative artists online. Its navigation is facilitated with fixed header (company logo and menu) and back-to-top button. Add minor changes into this design, and get the desired web presence.

Free HTML5 Theme — Design Studio

Demo and Download

Free HTML5 theme is what you need for an artfully tailored upgrade of web design agency, architecture bureau, art ‘photograph’ site, exterior & interior project, etc. Adding minor changes into its core, you’ll get the desired website design that will invite visitors with its contemporary clean look and user-friendly layout.

Global — HTML5 Website Template

Demo and Download

Global is a modern and sleek website template crafted for professionals in the creative industry. Global can serve as a single page portfolio or be easily modified to serve as the perfect beginning for a hip creative agency.

Photon

Demo and Download

Photon is a free one-page HTML5 template that supports images with parallax effect and buttons with some fantastic hover effects. Choose this template to give your online resume a striking look.

Landed

Demo and Download

If you need an up-to-date website with advanced functionality, the Landed template would be the perfect choice for you. It features a full-screen hero image at the top of the homepage, and comes with support for lazy-loading images, parallax effect layouts, and much more.

---

Have a nice day!

Different ways of defining functions in JavaScript (this is madness!)

This is madness! This… is… JavaScript!

In JavaScript, there’s many different ways of doing something. This is both a good thing and a bad thing. To the newcomer this is definitely a bad thing, as it means not only more things to learn, but more little caveats and more places to go wrong. And so it is with declaring functions!

The aim of this is just an accessible tour of the landscape, just so you know what’s out there and what the basic differences are. Do be sure to check out the “further reading” section as well! Much of this is based on Juriy “kangax” Zaytsev’s article, which goes into more depth. But I found that there wasn’t just one reference to show all the different variable declarations.

How about ways to execute functions? That opens up another can of worms, and incidentally opens up the possibility for a future post on that topic. 

Overview: different ways of declaring functions

view plaincopy to clipboardprint?

1. function A(){};             // function declaration  
2. var B = function(){};       // function expression  
3. var C = (function(){});     // function expression with grouping operators  
4. var D = function foo(){};   // named function expression  
5. var E = (function(){        // immediately-invoked function expression (IIFE) that returns a function  
6.   return function(){}  
7. })();  
8. var F = new Function();     // Function constructor  
9. var G = new function(){};   // special case: object constructor  

Function declarations: function A(){};

Function declarations are probably the most familiar and oldest way of doing things in JavaScript land. This creates a variable A which is accessible in the current scope. Scope is a separate topic, so we’ll do everything in the global scope for all these examples (something you want to avoid usually).

1. Hoisting

The interesting thing about these is that they are “hoisted” to the top of their scope, which means this code:

view plaincopy to clipboardprint?

1. A();  
2. function A(){  
3.   console.log('foo');  
4. };  

Gets executed as this code:

view plaincopy to clipboardprint?

1. function A(){  
2.   console.log('foo');  
3. };  
4. A();  

Which practically means that, yes, you can call the functions before they’re written in your code. It won’t matter, because the entire function gets hoisted to the top of its containing scope. (This is contrasted with variables, which only have their declaration hoisted, not their contents, as we’ll see in the next section).

2. No function declarations in If statements (or loops, etc)

You can’t define functions this way in expressions, for example if statements, which is common if we want to define different versions of a function for different circumstances, usually to address browser inconsistencies. Well, you can in some implementations, but the way the code is processed is inconsistent (kangax has documented the inconsistencies here). If you want to use this pattern, use function expressions instead.

3. Functions declarations must have names

This method doesn’t allow you to create anonymous functions, meaning that you always have to give it an identifier (in this case we’ve used “A”).

Function expressions: var B = function(){};

A function expression looks similar to function declarations, except that the function is assigned to a variable name. Though functions are not primitive values in JavaScript, this is the way they can be utilized to their full effect in this functional language. Functions are “first class“:

“[JavaScript] supports passing functions as arguments to other functions, returning them as the values from other functions, and assigning them to variables or storing them in data structures”

1. Anonymous functions (they don’t need names)

The function name is optional in function expressions, and we call these anonymous. Here we’re setting the variable B equal to an anonymous function:

view plaincopy to clipboardprint?

1. var B = function(){};  

2. Variable declaration hoisting

Variable declarations are hoisted to the top of their scope, somewhat similarly to function hoisting except the contents of the variable are not hoisted as well. This happens with all variables, and it means it’s now happening with our functions, now that we’re assigning them to variables.

This code:

view plaincopy to clipboardprint?

1. var A = function(){};  
2. var B = function(){};  
3. var C = function(){};  

Will be executed as this:

view plaincopy to clipboardprint?

1. var A, B, C;  // variable declarations are hoisted  
2. A = function(){};  
3. B = function(){};  
4. C = function(){};  

Therefore the order of setting and calling this type of function is important:

view plaincopy to clipboardprint?

1. // this works  
2. var B = function(){};  
3. B();  
4.   
5. // this doesn't work  
6. B2();  // TypeError (B2 is undefined)  
7. var B2 = function(){};  

The second example gives us an error because only the variable B2′s declaration is hoisted, but not its definition, thus the “undefined” error.

Function expressions with grouping operators: var C = (function(){});

These really aren’t different from plain old function expressions and aren’t really seen in the wild (so maybe they’re just good for JavaScript quizzes?). Recently this way of declaring functions was brought up in this article and confused some folks including myself.

Here’s a good way to see what’s happening:

view plaincopy to clipboardprint?

1. function(){};  // SyntaxError  
2. (function(){});  

Why does one work and the other doesn’t? The first example is a function declaration, and we learned above that we can’t declare them anonymously – that is, they must have a name. That’s why we’re getting the syntax error.

The second example is using parenthesis – grouping operators – and is therefore evaluated differently, as a function expression. The grouping operators are the things we use to help show what should be evaluated first, as in mathematical problems. We’re saying “evaluate this first, then take the result and do something with it”:

view plaincopy to clipboardprint?

1. (1 + 2) * 3;  // 9  
2. 1 + (2 * 3);  // 7  

In the first example we’re saying “first add 1 and 2, then take the result and multiply by 3″, whereas in the second example we’re saying “first multiply 2 and 3, then take the result and add 1″.

Because functions are first class, we can use similar grouping operators. Here’s a facetious example, but it shows how we can essentially drop in a function in the same way:

view plaincopy to clipboardprint?

1. (function(){} + 1);  // function(){}1  

The result is a string (because toString is being called on the function, then added/appended with 1), but you get the idea I hope.

When the JavaScript engine encounters the opening parenthesis here, we’re essentially saying “ok, start grouping this together with something else”. Using our technical terms, we’re telling the engine that we’re not making a function declaration, but instead a function expression. And then we can assign the result to a variable:

view plaincopy to clipboardprint?

1. (function(){});           // resulting function not assigned  
2. var foo = (function(){}); // resulting function assigned to foo  
3. var bar = function(){};   // resulting function assigned to bar  

Here we can see that foo and bar are really just the same, because in foo we’re not grouping the function together with anything but itself.

Named function expression: var D = function foo(){};

Here we have our same old friend, the function expression. But instead of assigning the variable to an anonymous function, we’re assigning it to a named function (with the name foo).

1. The function name is only accessible within the function

We haven’t exposed the function name (foo) to the enclosing scope (in this case the global scope):

view plaincopy to clipboardprint?

1. var D = function foo(){  
2.   console.log(typeof foo);  
3. };  
4. D();                       // function  
5. console.log(typeof foo);   // undefined  

2. Useful for recursion

Because the function’s name is accessible in the function itself, this turns out to be useful for recursive functions, much more useful than the plain old anonymous function.

Here’s a trivial recursive function to illustrate calling itself from within the named function expression:

view plaincopy to clipboardprint?

1. var countdown = function a(count){  
2.   if(count > 0) {  
3.     count--;  
4.     return a(count);  // we can also do this: a(--count), which is less clear  
5.   }  
6.   console.log('end of recursive function');  
7. }  
8. countdown(5);  

3. Useful for debugging

As a few have pointed out, giving previously anonymous functions names helps in debugging, since the function name shows up on the call stack.

4. Quirks: JScript’s bad implementation

kangax points out that named function expressions are basically poison to JScript, Internet Explorer’s implementation of JavaScript.

The named function becomes a global variable, is hoisted like a function declaration, and actually ends up creating multiple instances of the same function.

Immediately-invoked function expressions (IIFE): var E = (function(){return function(){}})();

“Execute this function, whose return value is another function, and assign that to the variable E”. This may seem like magic, but it’s actually quite simple, and the pattern is powerful and has useful applications, the most famous of which is the module pattern.

First we’ll use an example that doesn’t look like magic:

view plaincopy to clipboardprint?

1. var foo = function(){  
2.   return 'bar';  
3. };  
4. var output = foo();  
5. console.log(output);  // 'bar'  

We already learned about grouping operators above, so you should feel comfortable with saying this is equivalent:

view plaincopy to clipboardprint?

1. var foo = function(){  
2.   return 'bar';  
3. };  
4. var output = (foo)(); // note the extra grouping operators  
5. console.log(output);  // 'bar'  

Since foo is pointing to our function expression, we know that we can simply refrain from using the variable “foo” and drop in the entire function as an anonymous function (since functions are first class, after all!):

view plaincopy to clipboardprint?

1. var output = (function(){  
2.   return 'bar';  
3. })();  
4. console.log(output);  // 'bar'  

Hey wait, we just arrived at the magical resulting function! It turns out to be not so magical after all, once we break it down and see it for what it is. It’s simply shorthand for the code we wrote originally, where we defined a function, executed it, and defined output to be its return value.

I’ve included this method on the list of declaring functions because we can assign the return value to itself be a function:

view plaincopy to clipboardprint?

1. var E = (function(){  
2.   return function(){}  
3. })();  

Applications

There are good applications for this, including information hiding using in the module pattern, (partial application, for example), and other clever uses of it. It’s definitely not a trivial pattern.

Function constructor: var F = new Function();

This method is extremely old and it’s not recommended to be used. You pass in an unlimited number of arguments in the front, then the actual function body appears as a string in the last argument (because it’s a string, it’s effectively the equivalent of eval(), and isn’t recommended).

1. Defining the function

You can create a function like this:

view plaincopy to clipboardprint?

1. var F = new Function('arg1', 'arg2', 'console.log(arg1 + ", " + arg2)');  
2. F('foo', 'bar');  // 'foo, bar'  

2. You don’t need the new operator

You can simply write var F = Function(); to get the same result.

3. Quirks

The MDN docs have some good examples of the quirks, including the fact that functions declared with the Function constructor don’t inherit their current scope properly (i.e. a closure isn’t formed).

What this means is that they don’t have access to variables in their enclosing scope, which isn’t particularly useful:

view plaincopy to clipboardprint?

1. function foo(){  
2.   var bar = 'blah';  
3.     
4.   var first = new Function('console.log(typeof bar)');  
5.   first();   // undefined  
6.     
7.   var second = function(){  
8.     console.log(typeof bar);  
9.   }  
10.   second();  // string  
11. }  
12. foo();  

In the function “first”, we’re using the Function constructor, so it doesn’t have access to the variable bar. However, if we use the function “second”, which is a function expression, it does in fact have access to variables defined in its enclosing scope (via closure).

In other words, don’t use the Function constructor.

Special case – object constructor: var G = new function foo(){};

I saved this for last because we’re not really defining a function, though we are using the function keyword, so it’s worth noting at least.

new function(){}; creates a new object and invokes the anonymous function as its constructor. If an object is returned from the function, that becomes the resulting object, otherwise a new object is created from scratch and function is executed in the context of that new function (let’s save the details for another post!).

It’s a bit unusual to see it in this form. Let’s do it the proper way:

view plaincopy to clipboardprint?

1. var Person = function(){  
2.   console.log(this);  // Person  
3. }  
4. var joe = new Person();  

So really with the new operator, we are giving it a new ‘this’ context and then executing the given function with that new context. Much different than the function definitions we’ve been dealing with above! This does into a whole new topic, and we’ll save that for later!