How to Create a Website in Minutes Using HTML5 Boilerplate

Source: https://www.makeuseof.com/tag/html5-boilerplate-tutorial/
Capture Date: 16.09.2018 22:59:05

When you’re building a new website, these days you’ll want it to be HTML5-compatible. But you also don’t want to spend unnecessary time learning the intricacies of HTML5 from scratch, do you?

Fortunately, the HTML5 Boilerplate template can help. It’s a simple front-end template that you can use to create a HTML5 website in just a few minutes. But it’s also powerful enough that you can use it as the foundation of a complex, fully featured site.

This HTML5 Boilerplate tutorial will go over what comes in the template, the basics you need to know about how to use it, and some resources for further learning. I’ll also show you how I used the template to create a very basic site with only a few lines of HTML.

The HTML5 Boilerplate Template

When you download the template from HTML5 Boilerplate, you get a number of folders and files. Here are the contents of the ZIP file:

css ---main.css ---normalize.css doc img js ---main.js ---plugins.js ---vendor ---jquery.min.js ---modernizr.min.js .editorconfig .htaccess 404.html browserconfig.xml favicon.ico humans.txt icon.png index.html robots.txt site.webmanifest tile.png tile-wide.png

We won’t be going over every element in the template here, only the basics. To make sure you have the resources to use all of the files, though, we’ll start with the help documents.

HTML5 Boilerplate Help Documentation

Boilerplate has a collection of help documents hosted in GitHub. This is a big help when you have technical questions or are wondering why something was designed the way it was.

Almost everything in the documentation is also included in the doc folder of the template. You’ll see a number of Markdown (.md) files that are a big help in figuring out how to build your Boilerplate site.

create website from scratch with HTML5 boilerplate template

If you want to read through everything, start with TOC.md and follow the links from there to other Markdown files. If you’re looking for help on a specific issue, find the file that sounds like it might be related; usage.md is a good place to start.

Starting With HTML5 Boilerplate’s CSS

The HTML5 Boilerplate template comes with two CSS files: main.css and normalize.css.

The second file, normalize.css, helps different browsers render elements in consistent ways. To learn more about how it works, check out the normalize.css project at GitHub.

Meanwhile, main.css is where you’ll put in any code that you need to format your site with CSS. The standard CSS included with the template is the result of research conducted by developers and the HTML5 Boilerplate community. It’s readable and displays nicely in different browsers.

10 Simple CSS Code Examples You Can Learn in 10 Minutes 10 Simple CSS Code Examples You Can Learn in 10 Minutes We’ll go over how to create an inline stylesheet so you can practice your CSS skills. Then we’ll move onto 10 basic CSS examples. From there, your imagination is the limit! Read More

If you want to add your own CSS, you can add it to the Author’s Custom Styles section. I’ll add a bit of link styling for our example page:

create website from scratch with HTML5 boilerplate template

There are also a number of useful helper classes included in the base CSS. Some of them hide items from standard browsers and screen readers (or some combination).

Also in main.css you’ll find support for responsive design and helpful print settings.

All of these items are clearly explained by comments in the CSS:

create website from scratch with HTML5 boilerplate template

In general, you can get started with the base CSS.

Adding Your Own HTML to the Template

Boilerplate includes two HTML files: 404.html and index.html.

The index page is where you’ll create your homepage (or your only page, if you’re going for a simple one-pager).

Just a Single Page Website: 3 Reasons Why It Can Work For Your Idea Just a Single Page Website: 3 Reasons Why It Can Work For Your Idea Read More

If you open the index page in a browser, you’ll see a single line of text. But looking into the HTML reveals a lot more hiding in the code. The only thing that you really need to worry about changing is the Google Analytics code (find the text “UA-XXXXX-Y” and replace it with your own tracking code).

The rest of the HTML on the index page includes information for web apps, notifications for old browsers, and useful JavaScripts. When you’re getting started, you shouldn’t need to mess with any of this.

Having them already pre-populated, however, is a good way to make sure that your site is prepared to get the most out of HTML5.

To create your page, insert your HTML between the <body> tags in the file. Here’s some basic information that I’ll add about myself:

create website from scratch with HTML5 boilerplate template

Want to create more pages? Create copies of this file and rename them so you don’t have to copy and paste all of the HTML over. Then add your content.

If you’d like to customize your 404 page, just modify the HTML file. Not sure what to put on your 404 page? Check out these great 404 page design examples.

How To Make a Great 404 Error Page & 10 Examples How To Make a Great 404 Error Page & 10 Examples A smartly designed 404 error page can be the difference between a boring website and a memorable website. Read More

Adding a Favicon (and Other Icons)

Want to replace your favicon? Then favicon.ico is the file you’ll need to replace.

If you don’t have one yet, you’ll need to create one. You can use an online favicon generator or design your own. Just make sure that it’s 16 x 16 pixels and has the .ico file type.

It’s a good idea to put some thought into your favicon. Use these famous favicons to guide your brainstorming. Make sure that when you add the new favicon it’s called favicon.ico.

Your Favorite Icons: 14 Favicons That Stand Out From The Crowd Your Favorite Icons: 14 Favicons That Stand Out From The Crowd Once you start noticing favicons, you realize how much they differ. Most are boring, predictable, and instantly forgettable. But some are good enough to stand out from the crowd. Read More

You may notice that there are three other images in the root directory of your site: icon.png, tile.png, and tile-wide.png. What are these for?

  • icon.png is used for Apple touch icons. If you build a web app, this icon will be used when an iPhone or iPad user adds the app to their homescreen.
  • tile.png and tile-wide.png are for Windows’ “pin” functionality, and will show up in Windows 10.

It’s a good idea to provide icons for all of these cases—but if you’re not building a web app, it can be a lower priority.

Adding More Functionality

Once you’ve added your HTML and a favicon (as well as any CSS you may want to include), your site is ready to be published. That’s how easy it is to use HTML5 Boilerplate. Upload it to your server, and you’re done!

Here’s what our page looks like:

create website from scratch with HTML5 boilerplate template

As you can see, just a few lines of text has created a fully functional (if a bit bland) website. It’s not much, but it only took a few minutes. And it’s highly extensible with HTML5. That’s the power of the Boilerplate template.

But there’s plenty more you can do with the Boilerplate template if you’d like. If there’s something specific you’re looking for, there’s a good chance you’ll find it in the help documentation.

If you’re not sure what you can do with HTML5, but you’d like to find out, there are plenty of web design tutorials out there to help you out.

Need a Website Design Tutorial? Use These 10 Awesome Resources Need a Website Design Tutorial? Use These 10 Awesome Resources Web design is a great skill to have — it lets you create your own website and can be a great path to a new career. Here’s how to learn the basics. Read More

11 CSS Template Sites: Don’t Start From Scratch!

Source: https://www.makeuseof.com/tag/css-templa…-dont-start-scratch/
Capture Date: 11.03.2018 15:10:51

Advertisement

Web design is more accessible than ever, but it still takes a lot of work — and plenty of skill — to produce professional looking results. Want to Learn Web Design? 7 YouTube Channels to Get You Started Want to Learn Web Design? 7 YouTube Channels to Get You Started YouTube has thousands of videos and channels for web design beginners. Here we look at some of the best ones for getting started. Read More

Fortunately, you don’t need to start from scratch every time. There are thousands of free CSS templates available online, all embracing modern design trends and technologies. You can use them in their original form, or customize them to make them your own.

In this guide we’ll take a closer look at CSS templates, and where to find them.

What Is a CSS Template?

A CSS template doesn’t just contain CSS: it gives you everything you need to create a fully functioning website. When you download one, you will typically get a folder containing the following:

  • HTML files — You’ll get an HTML file for every page of the website. It will contain sample text and images that you’ll need to replace with your own content. You’ll also need to be able to adjust the meta data, relating to things like the site description.
  • CSS file — You usually get one main CSS file containing all the styling for the site, plus any extras like a reset stylesheet, or one for web fonts.
  • Javascript file — If the site contains Javascript functions they should ideally be included in their own separate file, rather than incorporated into the HTML docs.
  • Images, fonts, and icons — Any images used in the template should also be included. You may want to keep things like icons and backgrounds, but will need to replace the other placeholder images with your own. Some custom fonts might also be included.

11 CSS Template Sites: Don't Start From Scratch! css template

Unlike most other types of template you’ll encounter — be it WordPress, Excel, or InDesign templates — CSS templates do require a certain amount of technical knowledge. 6 Awesome Places To Find Free InDesign Templates 6 Awesome Places To Find Free InDesign Templates How about using a professional-quality InDesign template instead of making your own? This article discusses the best free template sites on the web. Read More

There’s no friendly interface to edit them in, so you will need to know at least how to find your way around an HTML document just to add your own content. To make your own customizations you’ll need a decent knowledge of CSS.

What to Look for in a CSS Template

There are so many free CSS templates to choose from. So how do you know which is right for you? Here are a few things to look out for:

  • Design — Obviously, you want a site that looks nice and reflects whatever image you want to portray. But also consider whether the template is right for your needs both now and in the future. Many are for one-page websites; some are designed for multiple pages. If you need the latter, consider whether you might be better off using a CMS like WordPress instead.
  • Mobile-Optimized — Mobile web usage is now higher than desktop, so it’s essential that your site functions properly on smartphones. Any decent CSS template should use responsive design so that the site works perfectly on any sized screen. If your chosen one doesn’t, switch to one that does.
  • Well-Written — Download the template and take a look at the code before you commit to using it. It should be clean, well structured, and easy to edit. It should also be SEO-aware, with correct use of title and heading tags.
  • License — Be sure to check the license for your chosen CSS template. Many are available under a Creative Commons license, but different versions of this license determine whether you can edit the template, whether you can use it commercially, and whether you need to credit the original designer.
  • Addons — Some CSS template developers offer their work on a “freemium” basis. You get the template for free, but have the option to pay for additional customizations to make it unique to your site.

With all that explained, let’s take a look at the best places to find free CSS templates.

1. Templated.co

This stunning collection of more than 800 CSS templates contains styles for every class of website. They’re all created especially for the site, so you shouldn’t see them cropping up anywhere else.

11 CSS Template Sites: Don't Start From Scratch! templated

All the templates are responsive, and built with HTML5. They’re small and lightweight, with extra Javascript features, like a video lightbox or scroll effects, only used where they add real value to the experience.

2. Styleshout.com

Styleshout offers a large range of both free and premium templates, the former released under the Creative Commons license.

11 CSS Template Sites: Don't Start From Scratch! styleshout

The free templates cover a wide range of categories, from full websites to Coming Soon pages, and even the often overlooked 404 error page. You can customize them yourself and adapt them to the style of your existing site, or you can pay to get Styleshout to do it for you. How To Make a Great 404 Error Page & 10 Examples How To Make a Great 404 Error Page & 10 Examples Read More

3. HTML5Up.net

This super-stylish collection of templates is also super-popular. Most have been downloaded hundreds of thousands of times, and it’s easy to see why.

11 CSS Template Sites: Don't Start From Scratch! html5up

All the usual categories of site are catered for, like blog and product page, and there are some particularly nice designs for photographers to show off their work. The basic grid-style templates are extremely customizable, while the flashier ones do tend to use Javascript quite heavily so may be less suited to your tweaks.

4. Freebiesbug.com

What Freebiesbug lacks in quantity it more than makes up for in quality. A site where young developers showcase their skills, it includes many high-end, premium designs.

11 CSS Template Sites: Don't Start From Scratch! freebiesbug

The site’s impressive collection of free templates are perfect for agencies, photographers, app developers, and other creatives. Packed with Javascript and CSS effects and animations, you can customize the sites, although they’re often so nice you might not want to.

11 CSS Template Sites: Don't Start From Scratch! freebiesbug2

In addition, Freebiesbug.com includes all kinds of free resources for web designers, including fonts, stock photos, Illustrator sketches and PSD files, and more. Don’t Pay for Adobe Illustrator: This Free Alternative Is Great Don’t Pay for Adobe Illustrator: This Free Alternative Is Great Adobe Illustrator is awesome but it costs quite a bit due to the Creative Cloud subscription. This web app alternative is almost as good and costs nothing! Read More

5. Free-CSS.com

Free-CSS.com is a no-frills website offering — at the time of writing — some 2503 free templates, plus plenty of premium ones too, in case you still can’t find what you’re looking for.

11 CSS Template Sites: Don't Start From Scratch! free css

With so many to choose from it can be a little hard to settle on the perfect design. The quality is generally good, although the site’s 10-year existence means it still hosts templates written in XHTML. You’ll want to avoid these. The other thing is to make sure you check the license for your chosen template. They’re all free, but some are public domain, some Creative Commons, and some use an author specific license.

6. OS-Templates.com

28 pages of free CSS templates, mostly using modern, grid-based layouts on a single page. If simple is what you’re after, then this is the place to look. The designs are clean, attractive, and easy to customize.

11 CSS Template Sites: Don't Start From Scratch! os templates

OS-Templates.com also offers a large collection of “basic templates”. These give you the basic structure for a website in various popular layout schemes (two-column, three-column, etc), while being completely unstyled. Like using the default theme in WordPress, the blank canvas enables you to turn your site into anything you want.

7. boag.online

Maglev is a single one page website template that can be downloaded from Github or previewed in action at boag.online.

11 CSS Template Sites: Don't Start From Scratch! maglev

It’s a fast, clean template, ideal for a product page. The minimalist design is augmented only by a few Jquery effects to help you scroll between sections. The simple layout works in its own right, but it also makes for a great starting point for your own customizations.

8. Pixel Buddha

Pixel Buddha’s templates are not just limited to websites, they include some for email newsletters as well.

11 CSS Template Sites: Don't Start From Scratch! pixel buddha

Either way, they’re all designed with HTML5 and CSS3, and are responsive so look great on any device. Highlights include Howdy HTML, a beautiful portfolio/resume template, and SOHO HTML, an awesome looking eCommerce page that includes the source PSD files on top of the HTML and CSS. The Last 5 Resume-Building Apps and Sites You’ll Ever Need The Last 5 Resume-Building Apps and Sites You’ll Ever Need Use these fantastic resume building sites and apps when you need to make your CV stand out in the crowd. With the right tools, you can build a unique resume quickly even without design skills. Read More

9. Templatemo.com

Nearly 500 free templates are available from Templatemo. Some of the best are the ones that break free from the Bootstrap-style grid system to try something different.

11 CSS Template Sites: Don't Start From Scratch! templatemo

Most of the templates are simple and uncluttered, although features like lightboxes and content carousels are included where they’re needed. We also like the fact that several of the templates are set up to work with as many as six pages by default. This makes it easier if your content doesn’t fit the increasingly common one-page layout.

10. Startbootstrap.com

Bootstrap is an incredibly popular front-end framework that enables you to build high quality websites in no time at all. However, it does take a little bit of time to learn, which is where Start Bootstrap comes in.

11 CSS Template Sites: Don't Start From Scratch! startbootstrap

This collection of free, open source templates are all built using Bootstrap’s grid system. There are more than 30 to choose from. Some are fully designed, and intended for apps, blogs, and landing pages, while others are blank layouts waiting for you to style up. Creating Web Interfaces: Where to Start Creating Web Interfaces: Where to Start We’ll show you how web interfaces break down, then point out the key concepts, tools, and building blocks needed to make yourself a 21st century web designer. Read More

11. Bootswatch.com

Finally, something a bit more hands-on. Bootswatch offers 16 open source themes to style sites built using Bootstrap.

11 CSS Template Sites: Don't Start From Scratch! bootswatch

You can either build your site’s layout yourself using Bootstrap, or download one of the blank templates from Start Bootstrap. What Bootswatch does is change the fonts, background colors, and the styling for buttons, menus, and other elements. It gives your site a unique look while staying true to Bootstrap’s ultra-clean ethos.

It’s easy to throw together a basic website with Bootstrap, and Bootswatch gives it some instant polish.

How to Use CSS Templates

Broadly speaking, there are two ways to use templates. You either use them as-is or you use them as the basis for your own design.

The danger when using templates is that you end up with a website that is identical to someone else’s. Pick a popular template and there could be literally tens of thousands of identical sites. This is the main argument in favor of customizing them.

11 CSS Template Sites: Don't Start From Scratch! css template downloads

CSS templates are a great shortcut for experienced web designers who have a basic layout in mind and want to jump straight into styling it up.

They’re also perfect for anyone new to web design. If you know your way around HTML and CSS but don’t yet have the confidence or knowledge to build a site from scratch then a CSS template serves as both an easy way to get a great looking site, and an awesome learning tool.

You can treat it as a work in progress. Start off by switching out the fonts and changing the color scheme, and over time you can redesign existing elements, add new ones, and so on. There’s no better way to learn anything than through practical, hands-on experience. Want Gorgeous Free Fonts? Here’s 25+ Sites Where You’ll Find Them Want Gorgeous Free Fonts? Here’s 25+ Sites Where You’ll Find Them Rather than wade through hundreds of fonts, here are a few sites that’ll help you keep up with all the new fonts you’ll want to use in your next design. Read More

Do you use CSS templates when building websites? What are your favorite places to find them? Share your experiences and tips with us in the comments.

Enjoyed this article? Stay informed by joining our newsletter!