Responsive Web Design Tutorials, Resources and Templates

How To Create a Responsive Timeline with Image Thumbnails

Shruti Balasa — Wed, 22 Jul 2020 13:00:59 +0000

In this tutorial you will learn how to create a responsive timeline for a set of related events you wish to display in a chronological (or reverse chronological) sequence. This can be used to display significant company milestones, news or personal events. I have used personal travel events as an example in this post. Here’s what you will be able to create by the end of this tutorial.

Desktop View

Small Tablets / Mobile Landscape View

Mobile Portrait View

You need to have some basic knowledge of HTML and CSS to follow along. Let’s get started.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Setting up

Create a blank HTML document and name it index.html. Add the basic HTML skeleton. If you use Visual Studio Code, all you need to do is type “!” and hit enter. You will end up with this.




   
   
   Document

I have used the font ‘Noto Sans’ – with font weights 300 and 700. So add the following line below the title tag to embed this font using Google fonts.

Create your stylesheet and name it style.css. Link the stylesheet to your HTML document below the Google fonts CDN link using:

The bare bones structure

Let’s first create the timeline structure, and in the next part we will add and style the content.

HTML

Add this to your markup:

CSS

In style.css, begin with some common styles for all elements:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

Add these styles to the body element:

body {
   background-color: #EDF2F7;
   font-family: 'Noto Sans', sans-serif;
   font-size: 1em;
   color: #4A5568;
}

To the timeline, add the following styles. Let’s restrict the maximum width to 1200px and center the content using margin.

.timeline {
   position: relative;
   max-width: 1200px; /* Restrict the width on large screens */
   margin: 0 auto; /* Center the content */
   padding: 30px;
}

Now, we can use the ::after pseudo element to create that actual line in the center for timeline. Add these styles:

.timeline::after {
   content: '';
   position: absolute;
   width: 6px;
   background-color: white;
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -3px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Width of the line is 6px. Hence, we have used left:50% and margin-left: -3px to position the line at the exact center. Read more about centering an element using absolute position.

You will now see a very tiny line at the top of your webpage, vertically centered. As we add some content, this line lengthens.

Let’s style the left and right containers that hold the timeline elements.

.container {
   position: relative;
   width: 50%;
}
.container-left {
   left: 0;
}
.container-right {
   left: 50%;
}

You will still not see anything on the web page until we style the .content element within.

.content {
   padding: 30px;
   background-color: white;
   position: relative;
   border-radius: 6px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

You should be able to see this now.

Our timeline is taking shape. Let’s add those tiny arrow marks pointing to the line using a ::before pseudo element.

.container .content::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 40px;
   width: 0;
   z-index: 1;
   border: medium solid white;
   right: -10px;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent white;
}

This will add all arrow marks pointing to the right, positioned to the right edge of the box. But for the boxes on the right, we need an arrow pointing to the left and positioned to the left. So, change of all this to:

.container .content::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 20px;
   width: 0;
   z-index: 1;
   border: medium solid white;
}
.container-left .content::before {
   right: -10px;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent white;
}
.container-right .content::before {
   left: -10px;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
}

Read more about how to create these CSS triangles using borders. Of course the output now looks a little odd because the boxes are sticking to the line. Add some padding to the container to space them out.

.container-left {
   /* Existing styles here */
   padding-right: 70px;
}
.container-right {
   /* Existing styles here */
   padding-left: 70px;
}

This is perfect.

Adding and styling content

Let us first add the images and position them on the “line”.

HTML

Change your markup to this, by adding 3 div elements with background images.

As you can see, I have directly linked 3 images from Pexels. You can choose to include your own.

CSS

Let’s add some size and shape to this image div.

.image {
   width:90px;
   height:90px;
   background-size:cover;
   background-position:center;
   border:solid 5px #ffffff;
   border-radius:50px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Now position them centered on the line, appearing next to boxes.

.image {
   position: absolute;
}
.container-left .image {
   right: 0;
   margin-right: -45px;
}
.container-right .image {
   left: 0;
   margin-left: -45px;
}

But the images appear behind the line! This is easily fixed with some z-index.

.timeline::after {
   /* Existing styles here */
   z-index: 1;
}
.image {
   /* Existing styles here */
   z-index: 2;
}

Don’t mind the images overlapping each other right now. It will be fixed when we add some content within the boxes. But if your content is going to be very little, add a minimum height to the container.

.container {
   /* Existing styles here */
   min-height: 120px;
}

Next, add the actual content.

HTML

Add this markup within each .content block. Change the text as you wish.

July 2020

Visit to Spain

Et hinc magna voluptatum usu, cum veniam graece et. Ius ea scripserit temporibus, pri cu harum tacimates neglegentur. At adipisci incorrupte nam. Cu qui sumo appareat constituto.

CSS

We need to position the arrow marks such that they align with the center of the image.

.container .content::before {
   /* Existing styles here */
   top: 35px;
}

Align the text on left side boxes to the right and right side boxes to the left.

.container-left {
   /* Existing styles here */
   text-align: right;
}
.container-right {
   /* Existing styles here */
   text-align: left;
}

Now some styles for the actual content.

.content span {
   color: #2C7A7B;
   font-size: 1.1em;
   font-weight: bold;
}
.content h2 {
   font-size: 1.8em;
   padding-top: 5px;
}
.content p {
   line-height: 1.6;
   padding-top: 5px;
}

Isn’t this neat? Great! Now resize your browser window to make it smaller, and things start to look messy when the screen size is too small.

Make it responsive

In smaller screens, when there are boxes on both sides of the line, the boxes become too narrow. Time to add some media queries. Let’s add a breakpoint at 767px width and position both the boxes on one side when the screen width is smaller than this width.

@media screen and (max-width: 767px) {
   /* Add styles to change the behaviour for screens smaller than 767px width */
}

First, position the line to the left of the page. Add the below styles within the media query:

.timeline::after {
   left: 65px;
}

Make the containers full width and position them correctly by overriding the previous styles.

.container {
   width: 100%;
   padding-left: 100px;
   padding-right: 0px;
}
.container-right {
   left: 0%;
}
.container-left {
   text-align: left;
}

Add some top margin to all the containers, except the first.

.container {
   /* Existing styles here */
   margin-top: 30px;
}
.container:first-of-type {
   margin-top: 0px;
}

Override image styles to position them on the line.

.container .image {
   left:-10px;
   top: 0px;
   margin-left: 0;
   margin-right: 0;
}

The arrows on the “left” boxes need to change position and direction.

.container-left .content::before {
   left: -10px;
   right: auto;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
}

This is what we have now:

Further reduce the screen size and you will notice that on really small screens (less than 400px width), the boxes again get narrow. Which is why, below 480px, let’s push the containers below the image giving them full screen’s width to occupy.

@media screen and (max-width: 480px) {
   .container {
       padding-left: 0px;
       padding-top: 105px;
   }
}

To prevent the line from appearing on top of the boxes instead of below, just add a z-index to the container and give a higher value than the “line”.

.container {
   /* Existing styles here */
   z-index: 3;
}

The only pending thing right now is to position the arrows on top and make them point upwards.

.container .content::before {
   left: 25px;
   top: -10px;
   border: medium solid white;
   border-width: 0 10px 10px 10px;
   border-color: transparent transparent white transparent;
}

You got it! Resize your browser making it smaller and larger to see how responsive your timeline is. Go ahead and customize it to suit your needs. Just in case you didn’t get this working as expected, download the full source code and feel free to make changes as you wish.

Download Source Code

Examples of Excellence in Modern Responsive Design

Eric Karkovack — Fri, 12 Oct 2018 08:31:07 +0000

Over time, responsive design has matured quite nicely. In the beginning, it was just about providing something to accommodate different screens – even if it wasn’t all that great. But modern responsive design has unleashed a lot of creativity. Instead of thinking of small screens as a burden, many designers are finding new ways to embrace the challenge of creating something with both beauty and function.

With that established history, we thought it would be interesting to take a look at a few sites that are really at the forefront of great responsive design.

Here they are, complete with responsive views and some thoughts on what they bring to the table (or should I say, tablet?):

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

The Washington Post

One of the great challenges of responsive design is taking a content-heavy website and making it work on smaller screens. The Washington Post does a fantastic job of making the most out of whatever screen real estate is available.

While the desktop version takes advantage of a multi-column grid, the tablet (portrait) and phone versions handle the challenge of compressing content quite well. The dead-simple slide-out header navigation on small screens is to be commended for its ease of use. The experience is optimized for mobile while still feeling familiar.

99U

99U is Adobe’s online magazine for creative professionals. One of the aspects to love about this site is the utter simplicity of its layout on any screen size.

The use of a light background and large black typography make everything easy to read from desktop to mobile. A unique feature to look for is that, on a mobile device, the site’s footer is actually hidden in the hamburger menu. This little trick saves some space and reserves it to maintain focus on the content.

Vox

Vox is a news site that takes a bit of a different route with mobile navigation.

Instead of the ubiquitous hamburger menu, the standard text navigation bar shrinks down as the screen gets smaller. But instead of trying to squeeze several items in a small space, categories are gradually removed from the menu and hidden under a drop down menu called “More”.

Etsy

Perhaps no one designs to their audience better than Etsy. The crafty marketplace does responsive right, as well. Among the mobile highlights is a header that gives you all the basics (a logo, links to Sell, Sign In and a Shopping Cart icon) in an incredibly clear and concise manner.

Their shop by category section transforms from multi-column photo cards to a clean, vertical icon menu. This is a great example of progressive enhancement at work.

KFC

KFC, the finger-lickin’ good purveyor of chicken, has really done some outstanding work on their website.

The UX is incredibly consistent between different devices and screen sizes. The use of both a hamburger menu and horizontal scrolling on all viewports means that users will know exactly what to do – regardless of what they’re using to browse the site.

Honda

The maker of many things, Honda has several product lines and brands users may be interested in. Their use of color in each alternating banner makes it quite simple to find what you’re looking for (which looks particularly cool on tablets and phones).

Again, this is a site that brings a very similar experience on different viewports.

The National

Indie rockers The National make great use of screen real estate. In fact, their grid-style layout for news and information stretches across the entire width of an HD screen.

This type of layout lends itself well to going all-out on page width. Smaller screens get treated to a similar vibe, with the news items being listed side-by-side and still easy enough to read. This site is a reminder that responsive design also includes taking advantage of higher screen resolutions, not just making sure everything fits on smaller ones.

The Responsive Revolution

Looking at the sites we mentioned above, none of them are particularly revolutionary on their own. But each has their own interesting technique and philosophy for how responsive design should work (not to mention lots of challenges to overcome in getting there). They may not be revolutionary, but they are certainly part of the revolution.

How to Make a Website Responsive in Just 15 Minutes

Editorial Team — Tue, 17 Jul 2018 13:00:41 +0000

Learn how to make a website responsive in this quick CSS and HTML5 tutorial. Both video and text versions are available.

Tutorial Level: Beginner
Skills Required: Basic knowledge in HTML5 and CSS
Completion Time: Approximately 15 minutes
Warning: This responsive HTML and CSS tutorial is targeted towards beginners, but it can also be for designers and developers who want to have fun!

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

How To Make A Website Responsive (Text Version) – Preparation

We promised that it will only take about 15 minutes to build a responsive website, and we will hold true to our word. We’ll start by creating a simple single-page website.

What is Responsive Web Design?

If you are fairly new to the term, then we have the perfect reading materials for you!

Responsive Design Breakpoints: The Ultimate Overview

Our Goal

This is our goal.

By the end of this responsive CSS tutorial you will end up with something similar to the page above. It is a very plain design, but it will do the trick for now. It is fairly easy to clone the image as seen above, but the main goal here is to make it responsive. To make the website respond based on the size of your device’s screen size.

Try opening the demo on your smartphone and you will see this:

This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.

Before moving on, download the Foundation Web Framework and unzip it to a folder where all of your files for this tutorial will be located. It should look like this:

Open index.html and see several elements blasted in one page as a demo. We won’t use everything you will see in it, but you can learn a lot from it. Now, delete it or move it somewhere else so that we can start from scratch.

Our goal is to create a website which has the basic areas of a website: header, body, sidebar, and footer. Of course, everything will be responsive, from images down to text and elements placement.

Step 1: Understanding the Foundation

Okay, it is already given that we will use the structure above, but how will we translate that to HTML? Easy!

First, you need to understand a few things about Foundation and how creating layouts works. It uses 12 columns to define the width of each “section”, which is derived from foundation.css‘ width of 1000px. So, if we write:

The above code would mean that in this certain row, you will occupy twelve columns with the width of 1000px. While on the code below:

We placed two “six columns” inside of “twelve columns”, this would mean that “six columns” will occupy 50% of the width of “twelve columns”. The same is true for other number of columns:

For “seven columns” we placed another row inside which occupies “twelve columns”. This means that the “twelve columns” will take the maximum width of “seven columns” and divide it into “twelve columns”. It’s a nest of rows and columns, which is important for our goal layout. Now that rows and columns, and nested columns, have been explained, let’s move on to the main show.

Step 2: Laying Out the Foundation

Using your favorite text editor, create a file named index.html then add the following at the very beginning of the file:

Welcome to Foundation

The above code is where we deal with the evil of Internet Explorer. It is also where we call on to different stylesheets which are necessary to make the whole thing responsive and run on mobile devices. It comes with Foundation. Then type the following code:



Header Twelve Columns






Body Seven Columns


Sidebar Five Columns






Footer Twelve Columns

We have already explained what these “rows” and “twelve columns” are above.

Tip: if it’s not clear to you why we should wrap the sidebar and body with “twelve columns” you can try removing it and see what happens!

By now it should look like this.

We haven’t added stylings yet, but you can already see how it jives with our goal. I’m not much of a designer but we will do our best to make this look amazing.

Wait, wait, wait! What’s that navigation bar, you ask? As we have mentioned earlier, this is one of the beauties of Foundation. It has extensive documentation that will teach you how to properly use forms, navigation, buttons, grids, CSS, and other elements covered by Foundation.

Everything is basically done now, all we need to do is add some images and paragraphs and design the whole thing. If you followed this tutorial, then by now you have already created your first responsive web page!

Step 3: Adding Content To Web Design

This step is needed to actually see how the webpage will look in its full glory. Copy some Lorem Ipsum and paste it on your “body” div, then insert images using tag, then you’re on your way to becoming a superstar with this!

If you’ll go back and check the demo, you might notice that the background isn’t exactly white, but with a subtle pattern. Choose one on SubtlePatterns and see for yourself which works best.

Step 4: There is no Step 4

Well, actually there is a step 4. The next thing you need to do is study the files you downloaded and start creating your own responsive web page from scratch.

There are a lot of other tools you can use aside from Foundation, but the idea is basically the same. Don’t forget to check the documentation!

How To Make a Website Responsive Video Tutorial

Now if you were looking for a video and you’re ready to build a responsive web design with HTML5 and CSS3 – you are in the right place. Just download the source files, view the demo, and click play on the video – let’s make a responsive website!

10 Code Snippets for Creating Responsive Navigation Menus

Jake Rocheleau — Wed, 27 Jun 2018 19:47:40 +0000

Whether you’re studying responsive design or looking for code snippets to use for your own layout, this collection is sure to please.

1. Responsive Button Nav

Nested menus are crucial for any detailed site with 10+ pages. This responsive menu supports nesting with rounded link button styles.

As the page resizes the buttons hide behind a three-bar hamburger menu. But they still maintain their sub-menu links which appear on click/hover using CSS3 transition effects. Clean, efficient, and easy to add into any layout.

2. Flat Nav Box

Square flat navigation is usually the most popular style to work with. This pen makes it even easier where you can support 2nd and 3rd tier links in dropdown menus on smaller screens.

The color scheme needs some work because it’s tough to tell the different menus apart from each other. But the usability is perfect for all screen sizes no matter how many links you have.

3. Smooth Fade

Fading navigation menus are popular with creative agencies and they’re really easy to create. This smooth fading menu created by Mehmet Burak Erman adds an over-the-page window for the mobile navigation.

It works by using CSS classes to restyle the menu as a full-page interface for smaller screens. JavaScript handles the user click effects but the design is all CSS.

4. Material Design

Google’s Material Design is wildly popular among designers for its clear implementation and quality user experience. That’s why I love this material menu created by Hanlin Chong.

It uses the sliding hamburger-style flyout on smaller screens with a crisp animation effect. And when the menus open you can click/tap anywhere outside the menu box to auto-close. This feature really makes a difference in the user experience and it’s one of the reasons I recommend this code snippet.

5. Pure CSS Mega Menu

Modern online magazine themes use mega-menus to include extra links & recent articles in larger dropdown menus. These menus look great on desktop but can be tough moving over to mobile.

That’s where this snippet can help. It’s built entirely on CSS so it’s a totally JS-free option. The mega menus look fantastic and the responsive menu includes all of these links, thumbnails, and the main hierarchy found in the original dropdowns.

6. Overlay Menu

One thing I like about this overlay menu is the columned link structure. It still uses the hamburger icon but the responsive menu overlays the entire page.

Each top link is listed side-by-side with sub-links organized into columns. This makes scanning the menu a lot easier and provides plenty of room for sites with lots of pages.

7. Responsive with Dropdown

For a simple on-page slidedown menu check out this snippet created by Jean Law Yim Wan. it’s powered by jQuery and uses a lengthy dropdown function to control the responsive navigation and the sub-menus.

It’s a relatively simple solution to the complexity of multi-level menus. But this only works for sites with a small handful of primary nav links.

8. Multilevel Flyout

One of the toughest responsive nav styles is the multi-level responsive navigation. This would ideally support dozens of links including dropdown links.

I think this code snippet handles the situation well using arrows to indicate sub-menu links. Responsive users can click between the main links or sublinks while browsing the flyout menu.

The animation effects are quick, yet consistent, and they add some vivacity to the interface. Plus the flyout is lengthy enough to support dozens of links making this perfect for content-heavy websites.

9. Batman Nav

I’m not sure why this is called the Batman nav but it’s a very high-quality menu. It’s built for a single page website so each link jumps between page sections on command.

These nav links hide behind a hamburger icon for smaller screens but they’re still easy to access. They appear in a drop-down menu which makes navigation a breeze.

If you’re building a single-page website and want a clean responsive solution, then the Batman nav is a stupendous choice.

10. Bootstrap 3 Navigation

Every web developer loves Bootstrap and with free snippets like this responsive menu it’s super easy to create fully-dynamic websites on the fly.

This snippet from Bryan Willis offers nine different menus ranging from fullscreen navbars to logo alignments on the left, right, or center of navigation links. It runs purely on HTML & CSS so if you’re building with Bootstrap, this is one of the simplest menus to use.

Wrapping Up

Responsive navigation doesn’t have to be difficult. Just make sure to consider the user experience rather than just creating a responsive navigation that looks good.

These code snippets should offer a solid base for getting started on your own ideas. But if you’re looking for more examples, take a look at this collection.

The 50 Best Free Responsive Web Templates

Editorial Team — Wed, 20 Dec 2017 05:39:35 +0000

Many web designers share free responsive web templates so that others can either learn from them, take inspiration from them, or simply use them as a standalone template for a new website.

While always built on a rock-solid HTML base, quite often you will find that the designers of these web templates will use experimental techniques to push the boundaries of web design ever further, and will more often than not make use of the latest design trends, like flat design, minimalism, parallax scrolling, and many more.

In this collection, you will find over 50 responsive web templates, covering many popular web design niches, like eCommerce, business, portfolio, blogging, and so many more. They have all been professionally designed and developed, all responsive, and all are free to download and use however you like. Enjoy!

You might also like these 50 Premium Responsive HTML & CSS Templates for 2017.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month!

Escape Velocity Free Responsive Template

Euclid Free HTML Template

Big Picture Free Web Template

Blog Magazine Flat Free Responsive Template

Grayscale Free HTML Template

Green Village Free Web Template

Grid Free Responsive Template

Halcyonic Free HTML Template

Blogin Free Web Template

Amoeba Free Responsive Template

AppLanding Free HTML Template

Aqual Free Web Template

Calm Free Responsive Template

Caprice Free HTML Template

Clean HTML5 Template Free Web Template

Coupon Free Responsive Template

Cuda Free HTML Template

Dopetrope Free Web Template

Elegance Free Responsive Template

Flat Single Page Free HTML Template

Hawthorne Free Web Template

Intent Free Responsive Template

Jetro Flat Free HTML Template

Juntos Free Web Template

Kala-Free Free Responsive Template

Landing Page Free HTML Template

Landy Free Web Template

Leoshop Free Responsive Template

Limelight Free HTML Template

Mamba Free Web Template

Minima Free Responsive Template

Miniport Free HTML Template

Motive Free Web Template

My Kingdom Free HTML Template

Nina Free Responsive Template

Obscura Free Web Template

Organic Free HTML Template

Overflow Free Responsive Template

Paradise Hotel Free Web Template

Parallelism Free HTML Template

Picku Free Responsive Template

Pinball Free Web Template

Produkta Free HTML Template

Prologue Free Responsive Template

Sharwadarma Free Web Template

ShowPage Free HTML Template

Simple Free Responsive Template

Singolo Free Web Template

Skokov Free HTML Template

Smoothy Free Responsive Template

Striped Free Web Template

Strongly Typed Free HTML Template

Swiss Free Responsive Template

Telephasic Free Web Template

Tessellate Free HTML Template

Treviso Free Responsive Template

Twenty Free Web Template

Wijayakusuma Free HTML Template

5 Services to Create a Responsive Website

Howard Steele — Mon, 11 Sep 2017 20:31:54 +0000

Responsive web design has become one of the major web building trends. That’s not surprising as over 70% of web searches are done on different mobile devices today. Users find this option more convenient and time-saving. Thus, if you have made up your mind to launch a website, be sure to make it mobile-optimized to increase traffic, drive new leads and boost your business popularity.

How can that be done effectively? With so many website builders available these days, finding the best one seems to be a challenge for the majority of users. The choice of the most suitable option depends upon your web building skills, expertise, available time, budget, etc.

Whatever option you explore, using a website builder will still remain the simplest and the most convenient solution. These services are specially created with users’ convenience and ease of use in mind. If you are currently interested in this option, then take a look at the review of 5 services that are considered the most successful solution to build responsive websites nowadays.

SITE123

SITE123 is an easy-to-use and simple website builder, which is used for a variety of purposes. It’s possible to build websites for personal and business use here. These include landing pages, blogs, promo websites and even online stores. The latter option will make it possible for you to control and manage your products and online store options, encouraging customers to come back to the website again and again.

SITE123 is also a nice choice to create promo websites and blogs here. Whatever website you are going to build with the system, it will come with responsive design that adds to its functionality.

SITE123 is primarily oriented on business owners and other users, who need quality websites created within a short time interval. The system has the multilingual feature, which makes it possible to create different language versions of a website. This is a real benefit for business websites targeted at foreign markets. The availability of design customization settings, user-friendly interface, no coding need and ease of use make it possible to use the system even for newbies.

It’s worth mentioning that the pricing policy of the service is not the same for all the regions. The costs of plans differ with regard to the location chosen, making the system a more affordable option than other services.

All in all, there are five plans here, including a free one. The latter, however, may be used to test the options of the system only. What you should know is that the service allows creating the unlimited number of websites on one account. Thus, the final cost will depend upon your objectives. The more websites you plan to build – the more expensive plan you’ll have to go for. This is explained by the disk storage space volume and bandwidth limitations implied by them.

SITE123 is a pretty simple, affordable, but powerful cloud websites builder. It comes with a variety of features and options required to build different types of websites, such as landing pages, promo websites, blogs and small eCommerce websites.

The availability of the multilingual tool makes it possible to create different language versions of a website, boosting its popularity with foreign users. It’s possible to build the unlimited number of websites on one account here, so, if you are going to build client websites, then SITE123 is a nice solution for you.

Create a Website with SITE123 →

IM Creator (XPRS)

IM Creator (XPRS) is a drag and drop website builder, which comes with a variety of stylish, appealing templates and basic settings understandable even to a newbie. The service makes it possible to create promo websites, portfolios, landing pages and websites for personal use. It also offers a convenient eCommerce solution, using Shoprocket for this purpose.

IM Creator is an ideal solution for business owners as well as for creatives, who need professional looking and functional websites to showcase their works and services. It works great for fashion designers, photographers, artists, musicians, business owners, etc. The only thing is that having chosen the template, you won’t be able to change it afterwards. So, pick wisely to avoid the need to reload the content.

IM Creator has a great offer for creatives, who don’t know much about website building but still need a quality website to publish their content. They make it possible to use the system for free with a few limitations only. The rest of the features are enough to let a newbie test the system and create a website for personal or business use.

Apart from that, the platform has one premium plan only, which comes with unlimited hosting and bandwidth, 24/7 tech support and other features you might need to get your website running. There is also an advanced “Pro and White Label Plan,” which allows using the website builder under your own brand. All in all, IM Creator is a reasonable investment for creatives and professionals, who need quality and appealing websites for personal or business use.

IM Creator is one of the most stylish and simple website builders available out there. It is easy to use and affordable. It doesn’t require any coding skills to be used by newbies. What’s more, the service is one of the best white labeling solutions available in the market these days. It will be of great help to professional web designers and web studios that have a large client base.

Create a Website with IM Creator (XPRS) →

Mobirise

Mobirise is the only website builder in this review that notably differs from the rest of the services. The thing is that the system is not web-based. To use it, you’ll need to download and install it first, but this is not actually a big problem if you need a quality well-structured website. The service is mainly used to build landing pages and promo websites, but you can also create websites for personal and business use here.

Mobirise is basically meant for newbies, since its use doesn’t imply any coding skills, web design knowledge or experience. The system is so simple that anyone can master it in a few hours only. There are no templates here, which seems surprising and unusual at first sight. You are free to create your own website structure by using free and paid blocks available in the system.

Nothing limits your imagination and creative freedom, making it possible to build unique website structure from scratch.

Speaking about the cost, Mobirise is absolutely free for personal and business use. You’ll just need to pay for hosting and domain name. You may also buy several paid extensions to be further used during the web building process, but this is an optional offer. Even if you don’t purchase them, you won’t find any limitations in the system, so, feel free to experiment and enjoy the web building process to the advantage!

If you are looking for a decent website builder available at affordable cost and offering creative freedom, then Mobirise is that very solution you should go for. The only nuance is that this is the downloadable software, but that’s not a problem for the majority of users, who consider quality a priority.

One of the major benefits of the system is absence of plans and fees. Users have to pay for hosting, domain name and extra extensions only, which is very convenient and appeals to many users.

Download Mobirise for Windows or for Mac.

Ucraft

Ucraft is a cloud website builder, which is primarily used to launch landing pages and different types of business websites, irrespective of the niche specialization. The system is known for ease of use, convenience, excellent designs, affordability and nice customer support.

The website builder comes up to the needs of professional web developers, but it may also be mastered and used by newbies, who don’t have any coding skills and web design experience at all. With Ucraft, you can create multilingual websites with ease, thus contributing to their popularity.

When it comes to the cost of using the system, Ucraft offers three plans. The first one is primarily meant for testing the service, while the second one aims at the needs of web design pros. The plan meant for testing is completely free, but it unveils lots of options needed to build a quality website.

The cost of the plan meant for beginners is not that high as well and constitutes $8 per month only. There is also the 20% discount for an annual subscription. The Lifetime plan offers the same terms as the previous plan. The only difference is that you won’t have to bother with monthly/annual payments. Having paid for the plan once (the cost constitutes $149), you will be able to use it for as long as you need. This is a worthy investment.

Ucraft is a stylish, trendy, functional and easy-to-use website builder. It works great for newbies and web design pros, who aim at creating functional, appealing and professionally-looking websites meant for personal or business use, which are not that large. Availability of quality responsive templates, nice choice of widgets, a set of design customization settings and other features make it possible to create small websites of high quality.

Create a Website with Ucraft →

uKit

uKit is a small business website builder, and this is the fact that speaks for itself. The system is initially geared towards the needs of people looking for the most affordable and quality way to bring their business ideas online. By using this decent service, you will be able to create any small business website, irrespective of the niche you specialize in.

uKit is stylish and user-friendly. It’s really convenient for all users, regardless of their web design experience. A rich collection of responsive templates subdivided into thematic categories, absence of code editing options, abundance of design elements and understandable design customization settings make the system a nice choice for small business owners as well as for people of creative professions willing to showcase their works.

Whether you are a newbie or a web design pro, you’ll find something useful here for projects of any complexity levels.

uKit comes with four pricing plans users may choose from. There is no free plan here, but you are allowed to test any plan for free prior to choosing it. The cost of the plans is more than affordable, considering that the website builder is basically oriented on small businesses. Thus, getting a Premium Plan for $4 per month only seems more than affordable for any business owner. The same is about other plans, because the result is definitely worth the investment.

To sum it up, uKit is a decent small business website builder that is worth the attention of those users, who are going to launch a website for effective business promotion, but haven’t made the final choice yet. The system is easy to use and convenient for newbies and advanced users. It has a rich collection of responsive templates and powerful functionality available at reasonable cost.

Create a Website with uKit →

Bottom Line

Making a website responsive is crucial for any user willing to reach personal or business goals. There are various website builders that make it possible to create functional, appealing and well-structured websites. The services reviewed above are the best of all the available variants.

Each of them comes with its features and aims at achieving different goals. They are oriented on users with versatile web design experience. They differ in cost, functionality, and usability. However, there is one thing that unites these platforms – the ability of each service to create stunning, visually appealing responsive websites, the functionality of which is out of the question.

This article has been sponsored by Syndicate Ads.

How to Convert a Static HTML Template into a Responsive WordPress Theme

Editorial Team — Fri, 21 Jul 2017 18:27:38 +0000

As online business are grows, more and more clients are willing to pay large amounts of dollars for their sites to those with the right skill sets. You probably have learned how to create an HTML and CSS website but, chances are, these sites won’t make any more sense for a big business or even blog site nowadays.

This is the very reason why it’s important that you should learn how to convert your static HTML & CSS web template into a dynamic WordPress theme.

Resources You Need to Complete this Tutorial:

NeoBlog HTML and CSS theme
Basic Knowledge of the WordPress Codex
Intermediate Knowledge of PHP and jQuery

What We Are Going to Build:

A WordPress theme is a way of ‘skinning’ the external design of your website. The theme can make a big difference to the overall look of your site. It offers a graphical interface via the WordPress template files.

When creating a WordPress theme, it is worth noting the following:

Be careful of the name of the templates file you created. By default, WordPress recognizes the default template name such as single.php and page.php file. I recommend checking the name of the default WordPress template before naming or creating a new custom file.
Check out WordPress Codex for some functions, tags or some other PHP code before using it on your template files. This will keep you on the right track on what you want to do in your code.
Sometimes you need some external jQuery files to improve the look of your WordPress theme or add some functionality. WordPress will not provide everything in a box.
Make sure to use well-structured, error-free PHP and valid HTML.
Use clean, valid CSS.
Follow design guidelines in site design and layout.
Backup your files. You never have anything to lose by creating a backup. As a precautionary measure, you should backup all of your theme files, plugins you are using as well as some other files related to your theme development.

Why You Need to Take Note of PHP

PHP is a programming and scripting language that creates dynamic interactive websites. It is a widely-used and open-sourced general purpose scripting language that is especially suited for web development. In addition to that, this programming language can be embedded into HTML.

WordPress is written using PHP as its scripting language. This has an open source license, certified by the Open Source Initiative. Just like WordPress, PHP is also open-sourced.

Some parts of the WordPress code structure for PHP markup are inconsistent in their style so it is important you have a basic knowledge about PHP.

However, you don’t need to be a PHP web developer to create a WordPress theme. You just need to have a solid foundation about HTML, CSS, JavaScript as well as a basic background on PHP.

How Does This Work?

First, you will identify first the files you need to create to build a complete WordPress theme. The next step you will do is to start putting code on each template files.

Along the way there will be functions that might not be clear to you. In this case, the WordPress Codex will be your best friend.

After you created each template, you will add contents to your theme to test if the whole code you are using are working on your site.

Part 1. Getting Started

To start converting your NeoBlog WordPress theme, create the theme folder in the wp-content/themes directory in the WordPress installation folder.

Please take note that the name of the folder should correspond to the name of the theme you want to create. For this tutorial, it is named NeoBlog.

Part 1. The Template Files

Compared with static HTML and CSS sites, a WordPress theme consists with a bunch of template files.

These are files that contain the code to make a working WordPress theme. To do this, create the following files into the NeoBlog theme directory:

css folder – This folder contains all the stylesheets. Copy this folder from the NeoBlog HTML and CSS theme.
fonts folder – This folder contains all the external fonts used in the markup. Copy this folder from our NeoBlog HTML and CSS theme.
images folder – This folder contains all the images such as the logo and so on. This folder will be copied from NeoBlog HTML and CSS theme.
js folder – This folder contains all of the javascripts. Also, copy this from the NeoBlog HTML and CSS theme.
header.php – This file will contain the code for the header section of the theme.
footer.php – This file will contain the code for the footer section of the theme.
index.php – This is the main file for the theme. It will contain the code for the Main Area and specify where the other files will be included.
functions.php – This file behaves like a WordPress Plugin, adding features and functionality to a WordPress site.
single.php – This file will contain the basic layout of a blog page.
page.php – This file will contain the basic layout of a page.
page-about.php – This is a WordPress’s built-in Post Types template. If a specific page, or a group of pages should behave or display differently, this is easily accomplished with this page template. For this template, it will display an About page layout
page-contact.php – Another type of WordPress’s built-in Post Types template. This template will display a contact form on the pages it was set.
content-search.php – This file will run the loop for the search to output the results.
search.php – This file is responsible for displaying search results pages.
searchform.php – This file contains the layout of the search form.
comments.php – This file will contain the code for displaying comments.
sidebar.php – This file will contain the sidebar widget area.
404.php – This file will return a “Not Found” notification if a particular search query is not found or doesn’t exist in the database.
style.css – This file will include all of the styles and information of the NeoBlog theme.
screenshot – a png image file, that should accurately show the theme design or the title of theme.

Over the course of this tutorial, code is going to be added to these files that will include menus, hooks, loops and widgets.

Step 1.1 – Copying Necessary Files to the NeoBlog WP Theme

To get started, copy the css, fonts, images and js folders from the NeoBlog HTML and CSS theme to the NeoBlog WP theme folder.

Step 1.2 – Naming Your WordPress Theme with style.css

Before stating with the template files, first add the links of the stylesheets of the NeoBlog HTML and CSS theme to the NeoBlog WP theme. Go ahead and create the style.css file on NeoBlog WP theme and then copy the code below.

/*
Theme Name: NeoBlog
Theme URI: https://1stwebdesigner.com/
Author: Sam Norton
Author URI: https://1stwebdesigner.com/
Description:  A Simple Blog Theme for 1stwebdesigner.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url("css/reset.css");
@import url("css/bootstrap.css");
@import url("css/style.css");

There is nothing special here but the information about the theme such as the name, author, author’s website and so on are enclosed within comment tags. This will make the theme easily identifiable upon installation.

It also has a series of @import tags. This will link the stylesheets from the CSS folder to the main stylesheet of the NeoBlog WP theme, which is this file.

Step 1.3 – Adding a Screenshot Image File

Now that the theme has been successfully named thru style.css file, add a screenshot of the theme. Create an 880 x 660 px file in Photoshop and put a title text, the short description and the author of the theme on it.

The screenshot will only be shown as 387x 290 px on the WordPress admin panel, but the over double-sized image allows for high-resolution viewing on HiDPI displays.

Afterwards, save it as a screenshot.png file on the root directory of the NeoBlog WP theme.

Step 1.4 – Activating the Theme

After adding the screenshot of the theme, activate the NeoBlog WP theme.

But before doing that, to check on if the theme is working or not, create first a blank index.php on the root directory of the NeoBlog WP theme (don’t worry code will be added on this later on).

Next, activate the theme, go to the WordPress admin panel and mouse over your mouse to Appearance -> Themes. Click on the Activate button.

If you are going to check the NeoBlog WP theme on the front end, you will notice a blank page because you have not put anything on our index.php file yet.

Major Issues You Might Encounter With This Tutorial

While trying out this tutorial, you might have issues with combining PHP code with the HTML code.

Double check it. It is better that, by this time, you double check your code. Sometimes you might forget putting an end if or end while statement inside a WordPress loop.

The code below will have an error since it does not have an end if statement:

For example:

lt;?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Post Content here
		//
	} end while;
} // end if supposed to be here
?gt;

The code you see below will solve the issue.

lt;?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Post Content here
		//
	} end while;
} end if;
?gt;

It would also help if you can check the the ending and closing tags of your PHP code; otherwise, the code might not work when mixed with HTML code.

If you want to learn more how to add more functionalities on this blog, you might want to check and study the WordPress Codex.

What Limitations Does This Tutorial Have?

Although this tutorial will give you a head start on how you can create a theme, there will be limitations on this one.

It can only provide the basic features of a blog theme such as the sidebar, footer, search box, post list, featured images and so on.

Rounding Up Part 1

Great! We are done with the first part of this two-part series tutorial. You have learned how to set up template files, things to avoid, and some notes to look out for, as well as the steps in creating a WordPress theme.

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.

Our HTML file is now prepared and ready to be converted into a set of theme files. In the second part of this tutorial, we’ll work on some template files and add functions to support some functionality of your WordPress theme.

Part 2. Customizing Your WordPress Site

You can design your ideal site by creating a mockup in Photoshop and then convert the PSD file to HTML and CSS. Afterwards, you can then convert it to a fully functional WordPress theme.

Designing websites using Photoshop PSD files and then converting it to WordPress themes is one of the easiest shortcuts in web design and development today. It is the most ideal way to provide your client a site with small amount of time and with ease.

In this part of the tutorial, you will be working on the following:

functions.php
header.php
footer.php
searchform.php
sidebar.php
index.php
single.php
page.php
page-about.php
page-contact.php
page-contact.php
search.php
content-search.php
comments.php
404.php

In the first part of this series, you learned how to prepare your HTML and CSS files for WordPress and then brand and activate the theme.

In this part of the series, you will learn what code each remaining WordPress template must have to build a working WordPress theme.

At the end of this tutorial, you will have the same output just like the demo image file we posted in part 1.

Step 2.1 – Defining constants and registering navigation menu support

The theme is already active! Now add support to the theme directory as well as the navigation menu thru the functions.php. Go ahead and create the functions.php file first on the root directory of the NeoBlog WP theme.

Next, define the constants for the theme directory. Go ahead and copy the code below to the functions.php recently created.

(Note: Since this is a php file, all of the functions and code relating to php must be enclosed with < ?php ?> tag.)

/***********************************************************************************************/
/* Define Constants */
/***********************************************************************************************/
define('THEMEDIR', get_stylesheet_directory_uri());
define('IMG', THEMEDIR.'/images');

You also need to register a function for the navigation menu. Below are the functions needed to make a working navigation. Go ahead and grab it.

add_action('init', 'register_my_menus');
 function register_my_menus() {
   register_nav_menus(array(
       'main-menu' => 'Main Menu'
      ));
}

An add_action hook has been added to register the navigation menu. The first argument is the tag (to which the action will be added later) and the second argument specifies the register_my_menus function to call.

To learn more about this, check this page.

Step 2.2 – Creating header.php

Now, create the header.php file. Open index.html and copy everything from the opening DOCTYPE declaration to the ending tag and then paste it into the header.php file created on the NeoBlog WP theme folder.

<!DOCTYPE html>
<!--[if IE 8]> <html lang=&"en&" class=&"ie8&"> <![endif]-->
<!--[if !IE]><!--> <html lang=&"en&"> <!--<![endif]-->
<head>
<meta charset=&"utf-8&">
<title>NEOBLOG</title>
<meta name=&"description&" content=&"A simple WordPress blog theme for 1stwebdesigner.com&">
<meta name=&"author&" content=&"Sam Norton&">

<!-- Mobile Specific Meta -->
<meta name=&"viewport&" content=&"width=device-width, initial-scale=1, maximum-scale=1&">

<!-- Stylesheets -->
<link rel=&"stylesheet&" href=&"css/reset.css&" />
<link rel=&"stylesheet&" href=&"css/bootstrap.css&" />
<link rel=&"stylesheet&" href=&"css/style.css&" />
<link href=&"http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&" rel=&"stylesheet&">

<!--[if lt IE 9]>
<script src=&"http://html5shim.googlecode.com/svn/trunk/html5.js&"></script>
<![endif]-->

</head>
<body>

<!-- HEADER -->
<header class=&"main-header align-center &">
<a href=&"index.html&" class=&"logo&" ><img src=&"images/logo.png&" class=&"img-responsive&" alt=&"NEOBLOG blog theme&" /></a>
<nav class=&"main-nav&">
<ul class=&"inline&">
<li><a href=&"index.html&" class=&"active&">Home</a></li>
<li><a href=&"about.html&">About</a></li>
<li><a href=&"contact.html&">Contact</a></li>
</ul>
</nav>
</header>

Some of static HTML tags can be replaced by the WordPress built-in functions such as the language, meta information, body class and so on.

Add the wp_head hook before the closing head tag. Use this hook by having the function echo the output to the browser, or by having it perform background tasks. For more information about this, see the WordPress Codex.

For the navigation menu, use the wp_nav_menu function to display a navigation menu created in the admin panel of WordPress.

The theme_location parameter will display the menu assignment to the location it was set. Otherwise, if it was not set, the parameter fallback_cb will determine what is displayed.

To learn more about the wp_nav_menu, check this page.

Copy the code below and replace the static html header information just copied.

<!DOCTYPE html>
<!--[if IE 8]> <html lang=&"en&" class=&"ie8&"> <![endif]-->
<!--[if !IE]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->

<head>
<meta charset=&"<?php bloginfo('charset'); ?>&">
<title><?php wp_title('|', true, 'right');?><?php bloginfo('name');?></title>
<meta name=&"description&" content=&"<?php bloginfo('description'); ?>&">
<meta name=&"author&" content=&"Sam Norton&">

<!-- Mobile Specific Meta -->
<meta name=&"viewport&" content=&"width=device-width, initial-scale=1, maximum-scale=1&">

<!-- Stylesheets -->
<link rel=&"stylesheet&" href=&"<?php bloginfo('stylesheet_url'); ?>&" />
<link rel=&"stylesheet&" href=&"css/bootstrap.css&" />
<link rel=&"stylesheet&" href=&"css/style.css&" />
<link href=&"http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&" rel=&"stylesheet&">

<!--[if lt IE 9]>
<script src=&"http://html5shim.googlecode.com/svn/trunk/html5.js&"></script>
<![endif]-->

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<!-- HEADER -->

<header class=&"main-header align-center &">
<a href=&"<?php echo home_url(); ?>&" class=&"logo&" ><img src=&"<?php print IMG;?>/logo.png&"  class=&"img-responsive&" alt=&"<?php bloginfo('name');?>&" /></a>

<nav class=&"main-nav&">
<?php wp_nav_menu(array( 'theme_location' => 'main-menu',
      'container' => '',
      'menu_class' => 'inline'
));
?>

</nav>

</header>

Step 2.3 – Creating footer.php

For this part, create the blank footer.php and once again open index.html from the NeoBlog HTML and CSS theme folder. Copy everything from the sharing idea section to footer section. Then paste it to the footer.php file on the NeoBlog WP theme folder.

You must have the same HTML code below.

<!-- SHARING IDEAS AREA -->
<section>
<div class=&"sharing-container section-content align-center&">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>
Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.
<h4><a href=&"contact.html&" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>
<!-- FOOTER -->
<footer class=&"main-footer section-content align-center&" id=&"contact-info&">
copy; 2014 - <a href=&"https://1stwebdesigner.com/&" target=&"_blank&">NEOBLOG theme</a> by <a target=&"_blank&" href=&"https://twitter.com/NickDalusung&">Sam Norton</a>
</footer>
</body>
</html>

Same with header.php file. Again, replace some of these HTML tags to the WordPress built-in functions such as the link to the homepage, the current year and the blog name information.

Check out the code below.

<!-- SHARING IDEAS AREA -->
<section>
<div class=&"sharing-container section-content align-center&">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>
Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.
<h4><a href=&"<?php home_url(); ?>&" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>
<!-- FOOTER -->
<footer class=&"main-footer section-content align-center&" id=&"contact-info&">
copy; <?php echo date('Y'); ?> - <a href=&"<?php home_url(); ?>&"><?php echo bloginfo('name'); ?></a> by <a target=&"_blank&" href=&"https://twitter.com/NickDalusung&">Sam Norton</a>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Step 2.4 – Working with searchform.php

Next on the list, add the markup (with built-in WordPress functions), which will display a search box on the sidebar. Go ahead and create searchform.php and copy and paste the code below on it.

(Note: Most of the classes you see here came from the search box markup of index.html file)

<div class=&"controller&">
<form role=&"search&" method=&"get&" class=&"search-form&" action=&"<?php echo home_url(); ?>&">
<input type='textbox' name=&"s&" class=&"form-control&" id=&"search-box&" value=&"<?php the_search_query(); ?>&" placeholder=&"Search..&"/>
<input class=&"btn btn-primary no-border&" type=&"submit&" class=&"search-submit&" value=&"Search&" />
</form>
</div>

Notice that the the_search_query function as the value of the text box was used. This will simply display the search query for the current request, if a search was made.

Step 2.5 – Working sidebar.php

Before creating the sidebar.php, register the sidebar on functions.php file. Go ahead and open functions.php and add the code below on it.

register_sidebar( array(
    'id' => 'main-sidebar',
    'name' => __( 'Main Sidebar', $text_domain ),
    'description' => __( 'This the main sidebar.', $text_domain ),
) );

The code above will build the definition for a sidebar and returns the ID.

Next, let’s call the sidebar. Create the sidebar.php file on the root directory of the NeoBlog WP theme and paste the code below.

<?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
<?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>

The code above contain function that calls main-sidebar widget callbacks and prints the markup for the sidebar but, first, it will test if the sidebar is active before proceeding.

Step 2.6 – Populating the Index File

After adding all of these template files, work on the Home Page – the index.php file. Go ahead and create first the index.php on the root directory of the NeoBlog WP theme.
Now, put some code on thew index.php file to display the changes.

<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now, let’s now check out the front page of the NeoBlog WP theme and see results.

Notice that the header and the footer are on their proper positions except for the sidebar.

To add the contents inside the home page, open the index.html file and copy the blog area section up to the closing div tag of box-layer align-center page-nav class and then paste it just under the get_header function. You’ll get similar code below.

<!-- BLOG AREA -->
<section>
<hr class=&"no-margin&" />
<div class=&"blog-container section-content&">
<div class=&"container&">
<div class=&"row&">
<div class=&"col-md-8&">
<ul class=&"negative-margin&">
<li>
<h1><a href=&"single-blog.html&" class=&"gray&">Should I use a Pencil or a Ballpen?</a></h1>
By <a href=&"#&">Sam Norton</a> / On July 20, 2014 / <a href=&"#&">Life Hacks</a>
<figure>
<img class=&"opacity-hover box-layer img-responsive&" src=&"images/thumb1.jpg&" alt=&"Pencil or Ballpen&" />
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
<div class=&"btn-margin&">
<a href=&"single-blog.html&" class=&"btn btn-primary&">CONTINUE READING >>> </a>
</div>
</li>
<li>
<h1><a href=&"single-blog.html&" class=&"gray&">How to test your patience!</a></h1>
By <a href=&"#&">Sam Norton</a> / On July 20, 2014 / <a href=&"#&">Life Tips</a>
<figure>
<img class=&"box-layer img-responsive&" src=&"images/thumb2.jpg&" alt=&"Pencil or Ballpen&" />
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
<div class=&"btn-margin&">
<a href=&"single-blog.html&" class=&"btn btn-primary&">CONTINUE READING >>> </a>
</div>
</li>
</ul>
<div class=&"box-layer align-center page-nav&">
<ul class=&"btn&">
<li><a href=&"#&">Next Page >>> </a></li>
</ul>
</div>
</div>

The code above will only show a static display of the theme. To make this dynamic, structure the WordPress loop within the markup of the blog area. Copy the code below and replace the blog area just copied from index.html file.

<?php get_header(); ?>

<!-- BLOG AREA -->
<section>
<hr class=&"no-margin&" />
<div class=&"blog-container section-content&">
<div class=&"container&">
<?php if (have_posts()) : ?>
<div class=&"row&">
<div class=&"col-md-8&">
<ul class=&"negative-margin&">
<li>
<?php while(have_posts()) : the_post(); ?>
<h1><a href=&"<?php the_permalink(); ?>&" class=&"gray&"><?php the_title(); ?></a></h1>
By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>
<?php the_excerpt(); ?> 
<div class=&"btn-margin&"> <a href=&"<?php the_permalink(); ?>&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div>
</li>
<?php endif; ?>
<?php endwhile; ?>
</ul>
<?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?>
<div class=&"box-layer align-center page-nav&">
<ul class=&"btn&">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div>
<!-- end box -->
<?php endif; ?>
<?php endif; ?>
</div>
<aside>
<div class=&"col-md-3 col-md-offset-1 margin-sidebar&">
<?php get_sidebar(); ?>
</div>
</aside>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>

The WordPress loop are PHP blocks of code used by WordPress to display posts. Using the loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within the loop tags. The WP loop usually comes with these blocks of PHP code:

<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?>

The code above is the basic loop along with the markup; however, it has to display the blog information using the following WordPress functions:

the_permalink – Displays the URL for the permalink to the post currently being processed in the loop
the_title – Displays or returns the title of the current post
the_author_posts – Displays the total number of posts an author has published
the_author – Displays the name of the author of the post
get_the_date – Retrieves the date the current $post was written
the_category – Displays a link to the category or categories a post belongs
the_post_thumbnail – Displays the Featured Image for the current post, as set in that post edit screen (more on this below)
the_excerpt – Displays the excerpt of the current post after applying several filters to it, including auto-p formatting which turns double line-breaks into HTML paragraphs

With regards to the featured image, use the code the following code.

<?php if (has_post_thumbnail()) : ?>
<figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
<?php endif; ?>

First, test it if there is a featured image set on the WordPress post panel. If the statement is true, it displays the URL of the post and the featured image itself.

Notice that an array is added with a class opacity-hover box-layer img-responsive. This is a way of adding a class in the Featured image to make a nice hover, border and box shadow on it.

But, doing this won’t display the featured image. You need to add functions first to register the featured image. Copy the code below and paste it into the functions.php.

/***********************************************************************************************/
/* Add Theme Support for Post Thumbnails */
/***********************************************************************************************/
if (function_exists('add_theme_support')) {
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(742, 428);
}

Great! The featured image will now appear. Next, add function to remove brackets, ellipsis or the hellip word at the end of the excerpt (which is the default display of the excerpt).

Open the functions.php and add again the following code.

/***********************************************************************************************/
/* Remove the brackets, ellipsis and hellip on excerpt */
/***********************************************************************************************/
function trim_excerpt($text) {
 	$text = str_replace('[hellip;]', '...', $text);
     return $text;
	}
add_filter('get_the_excerpt', 'trim_excerpt');

Next, you will tinker the page navigation that was already added on the index.php file. The following code will call the wp_query, a class defined in the WordPress core that deals with the intricacies of a posts (or pages) request to a WordPress blog.

It will then set the previous_post_link and next_posts_link function to add a navigation to the blog post list.

Check out the code below:

<?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?>
<div class=&"box-layer align-center page-nav&">
<ul class=&"btn&">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div>
<!-- end box -->
<?php endif; ?>
<?php endif; ?>

As a final touch, place the get_sidebar function inside the col-md-3 col-md-offset-1 margin-sidebar div along with an HTML5 aside tag to make it float on the right side of the page.

Check the code the below.

<aside>
<div class=&"col-md-3 col-md-offset-1 margin-sidebar&">
<?php get_sidebar(); ?>
</div>
</aside>

As a review, the index.php will contain all of the following PHP code. Check out the code to avoid missing something.

<?php get_header(); ?>
<!-- BLOG AREA -->
<section>
<hr class=&"no-margin&" />
<div class=&"blog-container section-content&">
<div class=&"container&">
<?php if (have_posts()) : ?>
<div class=&"row&">
<div class=&"col-md-8&">
<ul class=&"negative-margin&">
<li>
<?php while(have_posts()) : the_post(); ?>
<h1><a href=&"<?php the_permalink(); ?>&" class=&"gray&">
<?php the_title(); ?> </a></h1>
By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
<?php the_excerpt(); ?> 
<div class=&"btn-margin&"> <a href=&"<?php the_permalink(); ?>&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div>
</li>
<?php endif; ?>
<?php endwhile; ?>
</ul>
<?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?>
<div class=&"box-layer align-center page-nav&">
<ul class=&"btn&">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div>
<!-- end box -->
<?php endif; ?>
<?php endif; ?>
</div>
<aside>
<div class=&"col-md-3 col-md-offset-1 margin-sidebar&">
<?php get_sidebar(); ?>
</div>
</aside>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>

Step 2.7 – Working with single.php

Now, to display each individual posts in a blog page, create the single.php file and then copy and paste the code below.

<?php get_header(); ?>
<!-- BLOG AREA -->
<section>
<hr class=&"no-margin&" />
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<div class=&"blog-container section-content&">
<div class=&"container&">
<div class=&"row&">
<div class=&"col-md-8&">
<div class=&"box-layer custom-padding&">
<section>
<h1><a href=&"<?php the_permalink(); ?>&" class=&"gray&"><?php the_title(); ?></a></h1>
By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> /  In <?php the_category(', '); ?> 
<?php if (has_post_thumbnail()) : ?>
<figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>
<?php the_content(); ?> 
<?php endif; ?>
</section>
<?php endwhile; ?>
<?php endif; ?>
<section>
<div class=&"comment-section&">
<?php // If comments are open or we have at least one comment, load up the comment template if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?>
</div>
</section>
</div>
<!-- RELATED ARTICLE AREA -->
<section>
<div class=&"box-layer related-articles custom-padding&">
<h3 class=&"align-center&">Related Articles</h3>
<?php $current_categories = get_the_category(); $first_category = $current_categories[0]->term_id;
$args = array(
'post_per_page' => 3,
'category__in' => array($first_category),
'post__not_in' => array($post->ID)
);
$related_articles = new WP_Query($args);
if ($related_articles->have_posts()) : ?>
<ul>
<?php while ($related_articles->have_posts()) : $related_articles->the_post(); ?>
<li class=&"col-md-4&">
<?php if (has_post_thumbnail()) : ?>
<figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
</figure>
<a href=&"<?php the_permalink(); ?>&"><?php the_title(); ?></a>
<?php endif; ?>
</li>
<?php endwhile; ?>
<div class=&"clear&"></div>
</ul>
<?php endif; ?>
<?php // Restore original Post Data wp_reset_postdata(); ?>
</div>
</section>
</div>
<!-- SIDEBAR AREA -->
<aside>
<div class=&"col-md-3 col-md-offset-1 margin-sidebar&">
<?php get_sidebar(); ?>
</div>
</aside>
</section>
<?php get_footer(); ?>

There is for the comment section. Check out the code below.

<section>
<div class=&"comment-section&">
<?php if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?>
</div>
</section>

This code will check if comments are open or at least have one comment. It will load up the comment template (more on the comment template later).

Step 2.8 – Working with page.php

After working on the blog page, work on the regular pages. Create the page.php file and then copy and paste the code below.

<?php get_header(); ?>
<!-- BLOG AREA -->
<section>
<hr class=&"no-margin&" />
<div class=&"blog-container section-content&">
<div class=&"container&">
<div class=&"row&">
<div class=&"col-md-8&">
<div class=&"box-layer custom-padding&">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h3> <?php the_title(); ?> </h3>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
<?php endif; ?>
<?php the_content(); ?> 
<?php endwhile; endif; //ends the loop ?>
</div>
</div>
<!-- SIDEBAR AREA -->
<aside>
<div class=&"col-md-3 col-md-offset-1 margin-sidebar&">
<?php get_sidebar(); ?>
</div>
</aside>
</section>
<?php get_footer(); ?>

Again, there is nothing new to this file except that it doesn’t have the comment section since this is a regular page.

In the next 2 files, create 2 WordPress built-in Post Types template. These are pages that display page layout differently.

Step 2.9 – Working with page-about.php

For this part of the tutorial, first create a php file and call it page-about.php. Since this page is focused on the details about the website owner, it just contains plain HTML code along with the header, sidebar and footer.

Add a comment at the beginning of the page-about.php file to make sure WordPress will treat the file as a page template.

Copy the code below and paste it to the page-about.php file.

<?php /* Template Name: About Page */ ?>
<?php get_header(); ?>
<!-- BLOG AREA -->
<section>
<hr class=&"no-margin&" />
<div class=&"blog-container section-content&">
<div class=&"container&">
<div class=&"row&">
<div class=&"col-md-8&">
<div class=&"box-layer custom-padding&">
<img src=&"<?php print IMG; ?>/my_image.png&" class=&"opacity-hover img-responsive center&" alt=&"my image&" />
<div class=&"align-center&">
<h3>About Me</h3>
I am a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites  graphics. I spend most of my time practically every day, experimenting with HTML, CSS and WordPress.
<hr/>
<h3 class=&"blue&">Feel free to contact me for some Web Projects</h3>
<i class=&"fa fa-envelope&"></i>  Email: [your email] 
<i class=&"fa fa-twitter&"></i>  Twitter: [your twitter username] 
</div>
</div>
<!-- END RELATED ARTICLE AREA -->
</div>
<!-- SIDEBAR AREA -->
<aside>
<div class=&"col-md-3 col-md-offset-1 margin-sidebar&">
<?php get_sidebar(); ?>
</div>
</aside>
</section>
<?php get_footer(); ?>

Step 2.10 – Working with page-contact.php

Many WordPress plugins can add a contact form to the blog, but a plugin is sometimes unnecessary. For the page-contact.php file, add a little bit of PHP and JavaScript code. First, go ahead and create the page-contact.php file.

Now, create a simple contact form. Simply paste the following code on the page-contact.php.

<?php /* Template Name: Page Contact */ ?>
<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
if(trim($_POST['email']) === '')  {
$emailError = 'Please enter your email address.';
$hasError = true; } else if (!preg_match(&"/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[a-z]{2,4}$/i&", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
if(trim($_POST['subject']) === '') {
$subjectError = 'Please enter a subject.';
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}
if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {                            	
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = '[PHP Snippets] From '.$name;
$body = &"Name: $name nnEmail: $email nnComments: $comments&";
$headers = 'From: '.$name.' <'.$emailTo.'>' . &"rn&" . 'Reply-To: ' . $email;
wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
} ?>

What has been done here is simply to make sure that the form has been submitted and filed correctly. If an error, such as an empty field or incorrect email address occurrs, a message is returned and the form isn’t submitted.

Next, create the form and display the error messages below each text box and text area field.

<?php get_header(); ?>
<section>
<hr class=&"no-margin&" />
<div class=&"blog-container section-content&">
<div class=&"container&">
<div class=&"row&">
<div class=&"col-md-8&">
<div class=&"box-layer custom-padding&">
<div id=&"container&">
<div id=&"content&">
<div class=&"align-center&">
<h3>We want to hear from you!</h3>
If you are seeking to contact us, please fill up the form below. If you want to advertise or be partner with us just inform us on the message box below. 
Thank you so much for your support!
We really appreciate!
<div class=&"entry-content&">
<?php if(isset($emailSent)  $emailSent == true) { ?>
<div class=&"thanks&">
Thanks, your email was sent successfully.
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
Sorry, an error occured.
<?php } ?>
<form action=&"<?php the_permalink(); ?>&" id=&"contactForm&" method=&"post&" class=&"general-form&">
<div class=&"contactform&">
<input type=&"text&" name=&"contactName&" class=&"form-control&" id=&"contactName&" placeholder=&"Your Name..&" value=&"<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>&" class=&"required requiredField&" />
<?php if($nameError != '') { ?>
<span class=&"error&"><?=$nameError;?></span>
<?php } ?>
<input type=&"text&" name=&"email&" id=&"email&" class=&"form-control&" placeholder=&"Your Email..&" value=&"<?php if(isset($_POST['email'])) echo $_POST['email'];?>&" class=&"required requiredField email&" />
<?php if($emailError != '') { ?>
<span class=&"error&"><?=$emailError;?></span>
<?php } ?>
<input type=&"text&" name=&"subject&" id=&"subject&" class=&"form-control&" placeholder=&"Your Subject..&" value=&"<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>&" class=&"required requiredField subject&" />
<?php if($subjectError != '') { ?>
<span class=&"error&"><?=$subjectError;?></span>
<?php } ?>
<textarea name=&"comments&" id=&"commentsText&" class=&"form-control&" placeholder=&"Your Message&" rows=&"4&" cols=&"100&" class=&"required requiredField&"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class=&"error&"><?=$commentError;?></span>
<?php } ?>
<input type=&"submit&" class=&"btn btn-primary no-border&" value=&"Send Message&"></input>
</div>
<input type=&"hidden&" name=&"submitted&" id=&"submitted&" value=&"true&" />
</form>
<?php } ?>
</div>
<!-- .entry-content -->
</div>
<!-- .post -->
</div>
</div>
</div>
<!-- RELATED ARTICLE AREA -->
</div>
<aside>
<!-- SIDEBAR AREA -->
<div class=&"col-md-3 col-md-offset-1 margin-sidebar&">
<?php get_sidebar(); ?>
</div>
</aside>
</section>
<?php get_footer(); ?>

The form is now working but you can enhance it further by adding client side verification. To do this, use jQuery and the validate jQuery plugin.

First, download the validate plugin and then place it on the js directory on the NeoBlog WP theme. Add the following links to the header.php file before the closing head tag.

<?php if( is_page('contact') ){ ?>
<script type=&"text/javascript&" src=&"<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js&"></script>
<script type=&"text/javascript&" src=&"<?php bloginfo('template_directory'); ?>/js/verif.js&"></script>
<?php }?>

Now, create the verif.js file and put the jQuery code to enable the validation. Here are the code:

$(document).ready(function(){
$(&"#contactForm&").validate();
});

Great! The contact form has just been created. The form will now validate every input and simply picks a form element with class required and verifies if the form is properly filled.

Step 2.11 – Assigning page templates to pages

Cool! The page templates have been created. To make them work, assign them to a page.

For this part of the tutorial, create first a page from the WordPress admin panel and then assign a page template to it.

To do this, go to Pages -> Add New and then give it a title About or Contact.

Now to assign a page template to the page, go to the right side panel and look for Page Attributes panel on the right side. Under template, select the preferred template and hit Publish.

Now you can check the page if it works in the front-end.

Step 2.12 – Working with search.php

The structure of the search box is now set up but it is not working yet; it needs some functions to make it work.

For this part of the tutorial, add the functionality to enable the search query on the search box.

The code below will have some PHP code for the search to output the results; otherwise, it will return an error message: “Bummer! No results found”, which is wrapped in an H2 tag.

Create first the search.php file and grab the following code below on it. Otherwise, if there is a result returned, it will display the result within an H2 tag.

Note: The code below contains HTML tags based on the page.php and single.php

<?php get_header(); ?>
<section>
<hr class=&"no-margin&" />
<div class=&"blog-container section-content&">
<div class=&"container&">
<div class=&"row&">
<div class=&"col-md-8&">
<?php if ( have_posts() ) : ?>
<header class=&"page-header&">
<h3 class=&"page-title&"><?php printf( __( 'Search Results for: %s', '_s' ), '
<h3>' . get_search_query() . '</h3>
' ); ?></h3>
</header>
<!-- .page-header -->
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /*** Run the loop for the search to output the results. */ get_template_part( 'content', 'search' ); ?>
<?php endwhile; ?>
<?php else : ?>
<h3>Bummer! No results found</h3>
<?php endif; ?>
</div>
<div class=&"col-md-3 col-md-offset-1 margin-sidebar&">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>

Step 2.13 – Working with content-search.php

The search.php will control the layout of the search results; however, add the loop of the search to output the results.

For this part, create the content-search.php file on the NeoBlog WP theme directory and then paste the code below on it.

<div id=&"post-<?php the_ID(); ?>&" <?php post_class(); ?>>
<header class=&"entry-header&">
<?php the_title( sprintf( '
<h1 class=&"entry-title&"><a href=&"%s&" rel=&"bookmark&">', esc_url( get_permalink() ) ), '</a></h1>
' ); ?>
<?php if ( 'post' == get_post_type() ) : ?>
<div class=&"entry-meta&">
<?php endif; ?>
</header>
By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> /  <?php the_category(); ?> 
<?php the_excerpt(); ?>
</div>

Step 2.14 – Working with comments.php

To check again the single.php file, notice that there is a part on that file that contains a div class of comment-section along with some PHP code.

See code below.

<div class=&"comment-section&">
<?php if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?>
</div>

These code will simply check if the comments are enabled on the WordPress admin panel using an if statement. If it returns true, it will get the number of comments and simply display all comments returned.

Take note these code alone won’t yet display comments, one needs to create the comment_template, using the comments.php file. For this part of the tutorial, go ahead and create this file on the NeoBlog WP theme directory.

Now copy the code below and paste it on the created file.

<?php /** * The template for displaying comments. * * The area of the page that contains both current comments * and the comment form. * * @package NeoBlog */ /* * If the current post is protected by a password and * the visitor has not yet entered the password we will * return early without loading the comments. */ if ( post_password_required() ) { return; } ?>
<div id=&"comments&" class=&"comments-area&">
<?php // You can start editing here -- including this comment! ?>
?php if ( have_comments() ) : ?>
<h3 class=&"comments-title&">
<?php printf( _nx( 'One Comment on ldquo;%2$srdquo;', '%1$s comment on ldquo;%2$srdquo;', get_comments_number(), 'comments title', '_s' ), number_format_i18n( get_comments_number() ), '
<h3>' . get_the_title() . '</h3>
' );
?>
</h3>
<?php if ( get_comment_pages_count() > 1  get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id=&"comment-nav-above&" class=&"comment-navigation&" role=&"navigation&">
<h1 class=&"screen-reader-text&"><?php _e( 'Comment navigation', '' ); ?></h1>
<div class=&"nav-previous&"><?php previous_comments_link( __( 'larr; Older Comments', '_s' ) ); ?></div>
<div class=&"nav-next&"><?php next_comments_link( __( 'Newer Comments rarr;', '_s' ) ); ?></div>
</nav>
<!-- #comment-nav-above -->
<?php endif; // check for comment navigation ?>
<ol class=&"comment-list&">
<?php wp_list_comments( array( 'style' => 'ol',
'short_ping' => true,
));
?>
</ol>
<!-- .comment-list -->
<?php if ( get_comment_pages_count() > 1  get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id=&"comment-nav-below&" class=&"comment-navigation&" role=&"navigation&">
<h1 class=&"screen-reader-text&"><?php _e( 'Comment navigation', '' ); ?></h1>
<div class=&"nav-previous&"><?php previous_comments_link( __( 'larr; Older Comments', '_s' ) ); ?></div>
<div class=&"nav-next&"><?php next_comments_link( __( 'Newer Comments rarr;', '_s' ) ); ?></div>
</nav>
<!-- #comment-nav-below -->
<?php endif; // check for comment navigation ?>
<?php endif; // have_comments() ?>
<?php // If comments are closed and there are comments, let's leave a little note, shall we? if ( ! comments_open()  '0' != get_comments_number()  post_type_supports( get_post_type(), 'comments' ) ) : ?>
<?php _e( 'Comments are closed.', '' ); ?>
<?php endif; ?>
<?php $fields = array( 'author' => '
'.'<input class=&"form-control&" placeholder=&"Your Name..&" id=&"author&" name=&"author&" type=&"text&" value=&"' . esc_attr( $commenter['comment_author'] ) . '&" size=&"30&"' . $aria_req . ' />
',
'email'  => '
'.'<input id=&"email&" class=&"form-control&" placeholder=&"Your Email..&" name=&"email&" type=&"text&" value=&"' . esc_attr( $commenter['comment_author_email'] ) . '&" size=&"30&"' . $aria_req . ' />
',
'url'   => '
' . '<input id=&"url&" class=&"form-control&" placeholder=&"Your Website..&" name=&"url&" type=&"text&" value=&"' . esc_attr( $commenter['comment_author_url'] ) . '&" size=&"30&" />
'
);
$comments_args = array(
'fields' =>  $fields,
'title_reply'=>'
<h3>'.'Leave a Comment'.'
<h3>',
'comment_field' => '
<textarea id=&"comment&" class=&"form-control&" name=&"comment&" rows=&"4&" cols=&"100&" aria-required=&"true&" placeholder=&"Write your comment here..&"></textarea>
',
'comment_notes_after' => '',
'id_submit' => 'submit-btn'
);
?>
<?php comment_form($comments_args); ?>
</div>
<!-- #comments -->

There are a lot of things happening on this file. First, it will test if the post needs a password for the user to be able to comment. Next, if it returns true, the comments number and comments will be displayed.

Notice that there is also a navigation to see the comments (both previous and next) using the previous_comments_link and next_comments_link function.

Finally, use wp_list_comments to display all comments for a post or page based on a variety of parameters, including the ones set in the administration area.

Next, add some wp_enqueue_script to check if the threaded comment is enabled. If it returns true, it will enable comment reply. Open up your functions.php and copy the code below on it.

if( get_option('thread_comments') ){
wp_enqueue_script('comment-reply');
}

Step 2.15 – Working with 404.php

Creating a custom 404 page is easy using the 404.php template in a WordPress theme. This will make sure that every link actually goes to a specific web page. If there is a broken link, it will display this page.

For this part of the tutorial, create a simple 404 page template. Copy the code below.

<?php get_header(); ?>
<!-- BLOG AREA -->
<section>
<hr class=&"no-margin&" />
<div class=&"blog-container section-content&">
<div class=&"container&">
<div class=&"row&">
<div class=&"col-md-8&">
<div class=&"box-layer custom-padding&">
<section>
<h3> Oh Snap! Page not found!</h3>
<h3> It seems you're looking for something that isn't here!</h3>
<a href=&"<?php echo home_url(); ?>&">Click here</a> to go back to homepage! 
</section>
</div>
</div>
<aside>
<!-- SIDEBAR AREA -->
<div class=&"col-md-3 col-md-offset-1 margin-sidebar&">
<?php get_sidebar(); ?>                                                                                                        	</div>
</aside>
</section>
<?php get_footer(); ?>

A 404 ‘Not Found’ error page is a page generated by the server to inform a user about non-existing page.

On the code above, a simple message error message “Oh Snap! Page not found!” is displayed along with a home link URL. This is making sure that the visitor will stay on the site.

The NeoBlog WordPress theme is now complete! Congratulations!

Our Final Project

[Download Source]

Tips You Ought to Remember for This Part of the Tutorial

Always check out the WordPress Codex for functions, tags and PHP code. This will keep you on the right path in dealing with code.
Make sure to use well-structured, error-free PHP and valid HTML. See WordPress Coding Standards.
Follow design guidelines in site design and layout.
Always Backup your files. Always, always backup your files just in case you made changes on a template file so that you can easily retrieve it later.
Seek for help. If you are working on a different theme, chances are you might have some issues while converting some files.

What Troubleshooting Techniques You Can Use

There is not really an official rule to check on errors while you are developing a theme. It might be your own code or some typographical error you just missed on your WordPress templates.

However turning on the Debugging mode or checking your error log might help.

Before You Leave

You don’t want to read the whole thing? You might wanna try the video version! If you need to know the Part 2 of this tutorial series, you need to watch the whole playlist.

Round-up

Congratulations! You just converted an HTML and CSS template into WordPress blog theme. That was fairly easy, right?

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.

Hope you learned something from this tutorial and see you again next time!

What Exactly are Media Queries?

Editorial Team — Tue, 11 Jul 2017 13:00:18 +0000

Having a skill that solely relies on code created by another is a hindrance to your career, in order to be able to say something is part of your skill set you have to understand it first.

That is why for all those claiming to have an in-depth knowledge of RWD, we’ll be taking an extended look at it’s backbone: the media query.

Like any good explanatory article, the starting point is always shedding light on the ‘what is’ factor.

In RWD, a media query is a CSS declaration that is used as a parameter for when to call other style declarations based on the dimensions of the current viewing device. There are two ways to call a media query: using an external stylesheet, or writing directly inside a stylesheet.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

External Call

CSS Direct Call

@media screen and (min-width:320px) and (max-width:480px){

/*Style Declarations For This Width Range */

}

What’s Being Called Here?

The two code snippets above are both examples of two different ways to make CSS declarations that only are to be called when the viewing device is between 320px and 480px. A good idea of use for either one of these declaration parameters is for calling styles for mobile that would break outside of this range.

For instance loading certain styles for devices similar in width to iPhones, but making them to be ignored by certain Blackberry devices. Since we already have a general understanding of what media query is, let’s now proceed to breaking it down.

For the remainder of this article, we will only be referring to the media query call used directly inside the CSS file.

@media screen

For those unfamiliar with the media attribute, it is used to separate what styles are called for different media types. Commonly used types are print, speech, projection, braille, and all. Despite the usefulness of each media type, for RWD our focus shall be geared toward the screen type.

By definition the screen value is intended primarily for color computer screens, and is the default value for CSS. This call to media type is how you start the query and later call on your parameters.

Examples:

A call to set the body background to red for computer screens

@media screen{

body{background: #ff0000;}

}

A call to set the body background to white for print

@media print{

body{background: #fff;}

}

The Width Parameters

Now its time to take a look at what makes our websites responsive, the width parameters. If you’ve been following along you’ll realize that @media screen is what starts our query, and the min and max width attributes set the parameters.

So with this in mind, you know how to call different style declarations for different viewing widths. Like in our example from earlier, we set the min and max width to 320px and 480px respectively. This means that anytime the viewing device is at a width between these two parameters the declarations set in the query are called.

Difference between device-width and width

Sometimes you’ll see developers making calls to device-width or width. The difference between these two here is that device width is going by the set width of your device, with any zoom type changes being ignored.

Example:

@media screen and (min-device-width:320px) and (max-device-width:480px){

/*Style Declarations For This Width Range */

aside{display:none;}

}

You didn’t think that this little article was going to be a stand alone did you? This article should just be viewed as a quality introduction to what is going to come later on, but it was necessary to first touch on the basics.

The Rise in Popularity of Minimalism in Web Design

Editorial Team — Thu, 18 May 2017 03:30:25 +0000

In minimalism, the design is dissected and reduced in a way that only the most essential elements are left.

Although difficult to master, minimalism is something you can learn easily. If you want to try out minimalism in any artistic endeavor, you have to strip the work to the barest that it can be.

It’s about stripping it until the unnecessary is removed without going in the way of the purpose.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

You might also like to learn about how the great art movements have inspired modern web design or how modern surrealism is used in design today.

With those aims, designers focus on subtracting the unneeded elements- and more designers are jumping into this popular concept lately.

This popularity has increased rapidly as the trend of flat design invaded the market. With Flat Design, which applies the concepts minimalism sponsors, more and more websites have adapted the thinking that less is truly more.

But has it ever occurred to you why minimalism is popular? What lies behind the popularity of this design concept? And as web designers, how are we going to use this popularity to make our designs more effective and more beautiful?

Let’s find out.

Less is More

The pioneer architect Ludwig Meis van der Rohe probably never knew that when he said, “Less is more”, he would be influencing a lot of brilliant minds that lived after him. These three words sum up what minimalism is – concise and straight to the point.

When designing a website, you should always ask yourself a question, “What is my point?” This way, you will understand where to lead your viewers.

Having a cluttered design will only block the point. Unneeded elements tend to become obstacles rather than bridges in sending your aim to the viewer.

Why is this bad?

It distracts the user to other things in the design than responding to your call to action.
It clutters the window making it more difficult to understand.

As a designer, you have to prune your content, cut away the useless, less helpful and irrelevant elements.

How to achieve more from less?

Plan your website more carefully. This prevents you from adding the unnecessary elements before you even touch the design.
Define your purpose. If the design element doesn’t help you to serve your purpose, remove it.
Spend time in asking yourself, “Do I really need this?”
Try to use some click tracking software on your website to locate elements that are never used by the viewers. After that, assess if the unused elements will be deleted or transferred.
Go back to basics.

Responsiveness of Designs

With the number of smartphone users increasing every day, websites need to be responsive. Once your website can be viewed and responds beautifully, you are increasing your chances of getting to your goal.

Now, why did I mention responsive web design here? What role does it play in minimalism’s popularity?

An Important One

Responsive websites, with the use of a one-of-a-kind wire-frame and grid system can result into a smooth transition from desktop to mobile versions.

With less content, fewer blocks and design elements (which minimalism adheres), together with the addition of a ton of white space, minimalist websites have greater chances of translating into beautiful mobile versions.

One more thing about responsiveness and its correlation to minimalism is the users. Mobile users are less patient, always busy and on-the-go. Most of the time, they have limited data plans and a more limited schedule. Getting the regular mobile user to the information can be very advantageous. Remember, if the users want it, give it to them ASAP.

Here are a few things you need to remember about responsive design:

Think Responsive. There are ideal layouts for the responsive design and there are others which are not. Understanding that would make you design websites for any device.
Pay attention to breakpoints. Resolutions have set of different breakpoints. These breakpoints will be your guide into designing for different screen sizes.
Images should be flexible. When resizing widths, make your images as adaptive as possible.

Lighter Websites

You are in a hot-air balloon. You step in, turn the burner on, and the balloon expands. But you can’t take off because these heavy bags of sand pull your balloon to the ground. What would you do?

That answer is probably the point of lighter websites being a major contributor in the popularity of minimalism. Having few elements in a design will mean a lighter website.

Less content, widgets, design elements would mean fewer data need to be downloaded by your browser, giving you a faster, lighter, more efficient and more productive user experience.
You basically design with responsiveness in mind because you are thinking about how fast your website will load on a mobile device.
Having lighter websites will mean easier updating, maintenance and troubleshooting.

Remember, no sane individual would love a website that takes forever to load.

Here are a few tips:

Delete unused plugins.
If something is ineffective, scrap it out.
If you can create design elements using code, code it.
Know when to use PNG, GIF or JPG.

Conclusion

Why is minimalism so popular? Well, it reflects the way of life that encourages introspection. What are the things I do not need? What are the essential things for me? And as a designer, answering that question will lead you to realizing what really helps you and what you should hold on to and keep. Happy designing!

The Complete Beginner’s Guide to Responsive Web Design

Editorial Team — Mon, 01 May 2017 17:04:33 +0000

Table of Contents

Grid Systems
Scale Everything Down
Consider Media Queries
Getting Started with RWD
Media Queries
Responsive Grid Systems
Responsive Web Frameworks
Responsive Background Images
Responsive Navigation
Responsive Typography
Responsive Images
Conclusion

The landscape of the Internet drastically changed a few years back. Before, web designers only had to worry about a few different viewing platforms, primarily desktop views. This changed with the growing popularity of mobile devices, with their various sized screens, and created a new set of challenges for web designers and developers.

The idea behind Responsive Web Design is that a website should adapt to any device that is being used to display it. Not only mobile devices but also on desktop computers and tablets.

According to the mastermind behind responsive web design, Ethan Marcotte, there are three parts to this type of approach: a flexible grid, flexible images and media queries.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Grid Systems

A grid system, like those used in magazine layouts, is critical to responsive web design. In order for the layout to be flexible, the measurements must be a percentage, not pixels. This means that a website with a 50% width will always take up half of the screen the website is viewed on, regardless of its size. This is where flexible and responsive web design begins.

When deciding on the background for a website that is going to be responsive, the best option is to use a simple background or simple texture that can either be tiled seamlessly, is a vertical gradient, or is just a plain solid color. Static images, backgrounds that don’t seamlessly tile, and horizontal gradients will not degrade gracefully for screen sizes that are smaller or larger than the screen you designed for.

Scale Everything Down

When designing a responsive site, every aspect of the needs to be scaled down. The fixed width approach, like the 960.gs or the Blueprint CSS Framework, are not the best way to design a website.

You have to design the various elements in such a way that if the browser width is changed, the site will still display all of the important information on your website.

This can be achieved by setting your element sizes in percentages rather than pixels.

Working in percent is the same as in pixels, there is not much of a difference, and you don’t need to learn other properties or CSS selectors. Working in percent is also simpler, because it is quite clear what width: 100% means.

Regardless of the dimensions of the screen, the mentioned div will always be at maximum width. If you were to use 100 pixels instead of 100% then regardless of how big the viewing screen is, the respective div would always be 100 pixels wide.

On a desktop with a 1600×900 resolution, this isn’t much, on an iPhone, however, it is far too much space. See the difference? It is just more logical to work in percentages rather than pixels.

Consider Media Queries

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. The media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, web layouts can be tailored to a specific range of output devices without having to change the content.

This means that you have to consider the way your layout is going to look, by thinking about the platform you design for.

The challenge for web designers is designing for a very limited range of screen sizes. As websites are being regularly browsed on the screens of the smallest devices and the largest of monitors, web designers have to consider how their websites will look at very small and very large sizes.

These modules need to be resized and moved when viewed on a mobile device. Therefore the design has to be flexible. By using media queries properly, this is all made possible. The main idea behind this concept is that the modules change their position and size based on the screen size that the website is being viewed on.

Getting Started with RWD

Since we now have an understanding of what Responsive Web Design is, it’s as good time as any to head straight into learning about how to create a mobile-friendly site. As with anything in web design, it is important to start off with the basics and create a solid foundation.

Media Queries

It is impossible to get started with Responsive Web Design, without first talking about media queries. Media Queries are the magic CSS settings that tell the web browser what sections on your website will load when a certain screen size has been identified for the viewing device.

There are three different media queries that make up the majority of the what Responsive Web Design is all about. These three different settings, of course, belong to the screen resolutions of phones, desktops, and tablets.

To accommodate for these screen resolutions, there will be four screen width settings we’ll be taking advantage of. These being 320px, 600px, 768px, and 1280px. A slightly less important screen width setting is 1824px, this is used for large screen sizes that exceed the standard desktop/laptop screen size and using CSS to create specifications for each device width would look something like this:

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */ }

/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* Styles */ }

/* Desktops and laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* Styles */

}

The device width parameters set above will allow for declaring parts of a website’s sections visibility, this is also how your website’s grid is set for different devices.

Responsive Grid Systems

Once you understand the different media queries and how their related width settings may affect how they’re displayed on different devices, the next thing we need to do is set up a flexible grid system.

Setting up a flexible grid is relatively easy if you’ve ever used a grid system in the past. There are only a couple of different settings that really need to be changed. First, we need to switch sizing from pixels to percent, then next thing we need to do, and this is an important one, is set a max-width for the container of your website. Once the max-width has been set, you’ll be able to use a formula to figure out how to best display elements on different devices.

The formula, from Ethan Marcotte, is target ÷ context = result. The max-width setting is the target, the context is the desired screen size for a particular section. Continue the process until every section of your site has an appropriate grid width in percentages, with respect to your max-width.

Responsive Web Frameworks

Creating your own media queries when you are first starting to work with Responsive Web Design may be overwhelming to some. Another rationale for not creating your own responsive grid is to use one of the many responsive grids that are available online.

ZURB’s Foundation and Bootstrap are just some of the most popular responsive frameworks you could consider using.

Responsive Background Images

Since it would defeat the purpose of the ideal flexibility found in responsive design to use media queries to call different background images for specific screen sizes, the most practical and less time-consuming way is to just work with one universal image. What is now filling the air of confusion is becoming curiosity, a curiosity leading to one question: how do you make background images responsive?

CSS3 opened the door to a whole world of fun possibilities. One of the fun things that we can do with CSS3 is set the background-size property.

background-size gives the option for setting a specific size for the background image being used. It can be set by using lengths and percentages, or by using two keywords contain and cover.

Contain

What is the first thought that pops up when the word contain is mentioned? If it is something similar to keeping the entirety of something within a container, then that is a great assumption.

contain refers to a background image being fully displayed within its parent container to the closest of its aspect ratios. Take a look at the example below:

body{

background-image: url(../images/bg.jpg);

background-repeat: no-repeat;

background-color: #000;

background-size:contain;

}

By using the contain property, this ensures that the background image, bg.jpg, will maintain a ratio of 300x200px, regardless of the size of the viewing area.

Cover

When background-size is set to cover, as you can imagine, the background image will expand to cover the entire space that is being displayed. If the viewing window is smaller than the background image, the image will be cropped to fit the viewing window.

Here is another code example:

body{

background-image: url(../images/bg.jpg);

background-repeat: no-repeat;

background-color: #000;

background-size:cover;

}

All of the above CSS code is the same as is it was for contain with the only difference being that the background-size setting is now set to cover. This setting will now allow the background image to ignore its aspect ratios and cover the entire browser window to the best of its abilities. Whether this be by the image being cropped at a certain point, or stretched to a miserable blur.

Exact Measurements (Lengths and Percentages)

This setting for background-size does exactly what it implies it will do. With this setting, the background will be set at a specific size and will remain as such. It might seem odd to be discussing setting the background image to a specific size when aiming for adaptability and flexibility with responsive design, but don’t overlook the percentagesoption.

To use this setting, set the background-size to an ideal percentage. This is done by placing the width first, then height. If only one setting is specified, it will be recognized, and the width and the height will be automatically set to auto. Let’s take a look at another code example:

body{

background-image: url(../images/bg.jpg);

background-repeat: no-repeat;

background-color: #000;

background-size:40% 60%;

}

What th example CSS above shows is that the body background image, bg.jpg, will always have an approximate pixel ratio of 40% by 60% with respect to the viewing device.

One quick way of creating a responsive menu is to convert your navigation to a select menu, but it is not always practical, especially if you have a large menu with many sub-levels. There are many better techniques you should consider before using this one.

We’ve previously published a collection of responsive menu code snippets that offer a quick solution to the many responsive navigation issues you will no doubt encounter. Here they are: 10 Code Snippets for Quickly Creating Responsive Navigation Menus.

Responsive Typography

Some people will argue that it is a better practice to use pixels for the CSS property font-size, and others say that it is better to use ems. For responsive design, both parties are right. This is so because to have a properly planned and flexible type setting, there needs to be a setting that is adaptable to device screen widths and has a fallback for when the browser doesn’t support that font-size setting.

REM Units

We mentioned that the best practice for dealing with font-size in responsive web design is to use both ems and pixels as the declaration. Well, this is because both are fallback settings for browsers that don’t support the use of REM units.

What are REM units? REM stands for root em and is a relative unit, meaning the actual font size of every REM declaration is based off the setting for the main parent element.

A good place to set the parent size is in the tag, but the tag will work as well. To get a better understanding, take a look at the code example below.

html {
font-size: 62.5%;

}

body {

font-size: 2.2rem;

} /* Setting 2.2rem = 22px */

h1 {

font-size: 3.2rem;

} /*Setting 3.2rem = 32px */

Above, the parent tag of has been set at a font-size, and all type within that parent element will have a REM declaration based off of what is set for .

In the CSS of the tag, the font-size has been set to 62.5%. This is so that the REM settings can be written similar to what would be written if you were using pixel approximations.

Pixel Fallback

REM units are great, but like any other feature of CSS3, they are not fully cross browser compatible. Luckily, there is a simple solution, and that solution is using pixel approximation as a fallback option for browsers that don’t support REM.

The CSS below will add a pixel approximation before the REM unit:

html {

font-size: 62.5%

}

body {

font-size: 22px;

font-size: 2.2rem;

}

h1 {

font-size: 32px;

font-size: 3.2rem;

}

The pixel fallback is put before the REM unit so that the REM unit loads first, and then the pixel declaration will load if REM units are not supported.

Responsive Images

Probably the most concerning issue to those new to RWD, once they start to understand the concept, is how images are handled. It is an honest concern because many have used image to balance their layout or strengthen and support their content.

In responsive design, the images move and scale according to their size and position on the grid being used. Fortunately, there are many options for how to handle this.

Setting Max Width

The max-width CSS property is important to understand because it is the foundation for what can be done with images in Responsive Web Design. This CSS setting states that an image cannot be wider than its containing element when set to 100%. Here’s a code example below:

#right-hero {
width:30%;
height: 200px; float: right;
margin: 0 0 5% 5%;
}

#right-hero img {
max-width: 100%;
height: auto;
padding: 5px;
}

The sample code above shows that no matter what the actual size of the image is, it can’t be rendered as wider than 30% of the parent container #right-hero. Height set to auto is important because it makes sure that the image will maintain their aspect ratio.

There is only one setting that will cause problems however, padding. I guess a quick review of the CSS box model may be a little necessary here.

Setting padding or margin can achieve similar results, but there are major differences between the two. What margins do is add the desired space on the outside, while padding is added to the inside. So whatever padding is set to, that will need to be added to the overall size. Margins, however, have no connection to size.

The problem here is that when the image reaches the maximum width of its parent container, the padding setting will make it expand. Luckily CSS3 has a property to fix all of this, box-sizing.

Box-Sizing

There are two settings for box-sizing that are important: border-box and padding-box. These two properties are very similar, border-box sets the image to a specific height and width (including the border-width), and padding-box only takes into account the padding.

Setting border-box and padding-box while using the settings we’ve already discussed will make your images responsive. There are some other alternatives, though they aren’t as flexible.

You can have multiple versions and sizes of the same image that are called depending on the user.
Cropping. The CSS overflow property (e.g. overflow: hidden) gives the ability to crop images dynamically as the containers around them shift to fit new display environments.
Hide images altogether. Media queries that serve up a stylesheet which sets the display: none property for images takes care of this function.
Unstoppable Robot Ninja has a simple script that automatically resizes your images.
Zomigi allows you to selectively hide parts of your image dynamically.

Conclusion

By reaching the end of this guide, what and how to implement Responsive Web Design should no longer be a mystery to you. From what you have read, you should have a good understanding of the concepts. However, there is always more that can be learned.

Here are a list of resources you’ll find very useful when you start to develop your very first responsive website:

Quick Guide: How to Make a Website Responsive in Just 15 Minutes
Analysis: Analysis of Responsive Web Design
WordPress: Convert an HTML Template into a Responsive WordPress Theme
Inspiration: Examples of Excellence in Modern Responsive Design.
Newsletter Design: How to Create a Responsive Newsletter Template with Media Queries.

Responsive Web Design Tutorials, Resources and Templates

How To Create a Responsive Timeline with Image Thumbnails

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Setting up

The bare bones structure

HTML

CSS

Adding and styling content

HTML

CSS

HTML

Visit to Spain

CSS

Make it responsive

Examples of Excellence in Modern Responsive Design

Your Web Designer ToolboxUnlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

The Washington Post

99U

Vox

Etsy

KFC

Honda

The National

The Responsive Revolution

How to Make a Website Responsive in Just 15 Minutes

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

How To Make A Website Responsive (Text Version) – Preparation

What is Responsive Web Design?

Our Goal

Step 1: Understanding the Foundation

Step 2: Laying Out the Foundation

Header Twelve Columns

Body Seven Columns

Sidebar Five Columns

Footer Twelve Columns

Step 3: Adding Content To Web Design

Step 4: There is no Step 4

How To Make a Website Responsive Video Tutorial

10 Code Snippets for Creating Responsive Navigation Menus

1. Responsive Button Nav

2. Flat Nav Box

3. Smooth Fade

4. Material Design

5. Pure CSS Mega Menu

6. Overlay Menu

7. Responsive with Dropdown

8. Multilevel Flyout

9. Batman Nav

10. Bootstrap 3 Navigation

Wrapping Up

The 50 Best Free Responsive Web Templates

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Escape Velocity Free Responsive Template

Halcyonic Free HTML Template

Elegance Free Responsive Template

Parallelism Free HTML Template

Treviso Free Responsive Template

5 Services to Create a Responsive Website

Bottom Line

How to Convert a Static HTML Template into a Responsive WordPress Theme

Why You Need to Take Note of PHP

How Does This Work?

Part 1. Getting Started

Part 1. The Template Files

Step 1.1 – Copying Necessary Files to the NeoBlog WP Theme

Step 1.2 – Naming Your WordPress Theme with style.css

Step 1.3 – Adding a Screenshot Image File

Step 1.4 – Activating the Theme

Major Issues You Might Encounter With This Tutorial

What Limitations Does This Tutorial Have?

Rounding Up Part 1

Part 2. Customizing Your WordPress Site

Step 2.1 – Defining constants and registering navigation menu support

Step 2.2 – Creating header.php

Step 2.3 – Creating footer.php

Step 2.4 – Working with searchform.php

Step 2.5 – Working sidebar.php

Step 2.6 – Populating the Index File

Step 2.7 – Working with single.php

Step 2.8 – Working with page.php

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets