Andreas Blog

Building a Sticky Notification Bar using CSS3 Animation

Sun, 04 Jan 2015 00:00:00 GMT

In this post, I will show you on how you can build a Sticky Notification Bar for your website. A notification bars can be a effective way to grab the attention of the visitors and show to them some important information or even promoting your product. Also is a powerful way to increase the number of your subscribers. Notification Bar:

See the Pen Sticky Notification Bar by Andreas Eracleous (@Sp00ky) on CodePen.

How Sticky Notification Bar works

Simply the Notification Bar appears on the top of the website using CSS3 animation properties for adding some effects on the bar. At the beginning of the website, the bar is appearing smoothly from up to down and therefore if the user click on the close button icon, it is disappearing from down to up. After that, a narrow icon is appearing to the user where has the option to brink the bar back in the initial stage.

How to create CSS Click Events

The Close button works only with CSS selectors without any interaction of Javascript code. So in order to make it happens we need to know two values like true: when the button is clicked and false: when the button is not. I used an input html tag of type Checkbox in which it give us two values true:when it checked and false:when it unchecked. As you can see the code below:

<input type="checkbox">

In the style code:

input [type=checkbox]:checked ~ #notification-bar  {
/* Make something when it checked  */
}

input[type=checkbox] ~ #notification-bar {
/* Make something when it unchecked  */
}

The above CSS code, basically the [fusion_highlight]sibling selector ~[/fusion_highlight] it says to do something with the element id="#notification-bar" that is below of the input tag. In this case when the checkbox is checked, it starts to run the animation to disappear the bar.

Animation - CSS3 3D Transforms

Using the transform property, it gives the ability to control an element using 3D transforms including X, Y, Z axis (translate3d(x, y, z)). In our case I have used only the Y axis, moving the bar from -100 to 0 (Up to Down) pixels on the Y axis and 0 to -100 (Down to Up) pixels.

/* ANIMATION for go up */
@-webkit-keyframes goUp {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  100% {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
}
@keyframes goUp {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  100% {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
}
/* ANIMATION for go down */
@-webkit-keyframes goDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes goDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}

Source Code

The source code is available in this repository on GitHub.

How To Use Screen Mirroring On Samsung Galaxy S6

Wed, 07 Jan 2015 00:00:00 GMT

I was trying figure out how I can share my screen on my Sony Bravia TV and it took me a little time to figure out how since I searched on Google about "How to Turn on Screen Mirroring on Samsung Galaxy S6" but I didn't find any useful information about it.

How to enable screen mirroring on Samsung Galaxy S6

Just pull down the notification bar and then click on "Quick Connect" and then it tries to find device that currently is connected via screen mirroring.

Responsive Landing Page Template With Bootstrap

Wed, 28 Jan 2015 00:00:00 GMT

I developed Event Responsive Landing Page Template using Bootstrap, HTML5, CSS and JS framework where it can be adapt in any display screen like desktop, tablet and mobile phone. The landing page can be used for multiple purposes like event, conference and seminar website. The website template was intended for the ThemeForest marketplace but unfortunately they didn't accept it for some reason. So I decided, don't submit it again and leave this landing page template for free to download.

Event Landing Page

On the landing page template includes the following sections:

Video promotion
Countdown timer
Registration form
Benefits
Speakers
Schedule
Tickets
Sponsors & Partners
Google map
Contact form

There is a countdown timer that you can arrange a start date, and end date for an event and further you can connect your Registration Form to link into your own email list, by default I used MailChimp service for list email building. Here are the template features:

HTML5 + CSS3
Cross browser Support – Tested in IE9+, Firefox, Chrome, Opera, Safari, iOS and Android
W3C Valid source code, properly formatted and commented,
Programmed with SEO needs in mind,
Responsive layout,
Friendly design,
Load speed optimised,
FontAwesome integration

Check out the preview template to see live.

Download High Quality Responsive Web Template

Twitter Bootstrap Modal stop Youtube video

Sat, 28 Mar 2015 00:00:00 GMT

I worked on a Bootstrap project, where I had to implement Youtube video on Twitter Bootstrap Modal component. when I pressed to open the Modal component for playing the video, I noticed something weird on it since after Bootstrap Modal has closed. I realised that the Youtube video has continue playing on the background even when it was closed. I had tried many ways to fix it but at the end I found a solution with JavaScript on how I can stop a Youtube video to still playing on the background and below you can see my solution.

JavaScript Code for Twitter Bootstrap Modal stop Youtube video

I used the Modal event function "hidden.bs.modal" as they mentioned in their documentation in which it starts to execute when the modal has finished being hidden from the user. What I did I remove and set the video URL in iFrame again when it has been closed the Modal. In this way it terminate the procedure of the video as a result to make it to stop.

$('#youtubeVideo').on('hidden.bs.modal', function() {
  var $this = $(this).find('iframe'),
    tempSrc = $this.attr('src');
  $this.attr('src', "");
  $this.attr('src', tempSrc);
});

JavaScript Code for Twitter Bootstrap Modal stop HTML5 video

$('#html5Video').on('hidden.bs.modal', function() {
  var html5Video = document.getElementById("htmlVideo");
  if (html5Video != null) {
    html5Video.pause();
    html5Video.currentTime = 0;
  }
});

See the Pen Twitter Bootstrap Modal stop Youtube video by Andreas Eracleous (@Sp00ky) on CodePen.

Create css navigation bar with Font Awesome

Sun, 26 Apr 2015 00:00:00 GMT

Another post with Font Awesome where in this example I have create a horizontal and vertical CSS Navigation bar combining Font Awesome icons. With the following menu buttons: Home, Blog, Service, About and Contact me that animate when mouse is over.

See the Pen font awesome navigation buttons by Andreas Eracleous (@Sp00ky) on CodePen.

Create Your Own Social Media Icons With Font Awesome

Sun, 26 Apr 2015 00:00:00 GMT

In my previous post, I wrote about how someone "Get Started with Font Awesome Icons" and now simple how you can create a social media icons with Font Awesome. In this post I would like to share my social icons sidebar where you can check my code. I have used few of social icons as you can see: Facebook, Twitter, Youtube, Google+ and LinkedIn. Also I have set the icons sidebar with fixed position, that means it would always be visible to the user even scrolling website. As you can see below:

See the Pen Social Network Icons by Andreas Eracleous (@Sp00ky) on CodePen.

Get Started with Font Awesome Icons

Sat, 25 Apr 2015 00:00:00 GMT

In this post, I use Font Awesome icons in CSS to show how to use Font Awesome icons in CSS and also what someone can do with them in a website. First of all, the Font Awesome provides a complete set of icons in vector and the user can customise size, color, drop shadow and etc. easily with the power of CSS. It is awesome because no JavaScript required, it is scalable vector graphics that means the icon looks great at any size on high-resolution displays and as well it is absolutely free for use. Using Font Awesome icons instead images in a website, it helps to minimise the website's size and as a result it loads website faster. To starting use Font Awesome icons, first you need to download the font-awesome.css cascading style sheet (CSS) file from its website https://fontawesome.com/ and then import it in HEAD tag HTML section. Continuously on the Font Awesome's website, go to the "icons" section where here you can see all the icons that you able to use.

What you can do with Font Awesome icons

Set color and size on icon
Add a shadow on the icon
Align the icon to the center
Change icon color when mouse is going over
Add an animation on the icon
Set two icons together

See the Pen Fort Awesome Tutorial by Andreas Eracleous (@Sp00ky) on CodePen.

Colorful 3D Buttons using CSS3

Sat, 24 Oct 2015 00:00:00 GMT

I made 3D buttons in pure CSS3 with in various colours. I selected these beautiful colors from Material Design. You can find the CSS3 Buttons HTML/CSS code below:

See the Pen Material Design Buttons Colors by Andreas Eracleous (@Sp00ky) on CodePen.

Bootstrap Collapse Panel Examples

Fri, 29 Jan 2016 00:00:00 GMT

In this post I will show you how to transform a Bootstrap Collapse Panel to Accordion Menu, implement a Bootstrap Collapse Panel with icon and also on how to create a Bootstrap Accordion Expand/Collapse All (open / close all) to control all the collapse panels.

Creating Bootstrap Accordion

First of all Bootstrap JS Collapse plugin allows you to manage a large content on your pages by putting into collapse panel with toggle between hiding and showing content.

Create your first web page dynamic with AngularJS

Wed, 06 Jan 2016 00:00:00 GMT

First of all you have to go at angularjs.org website and click on the download button for downloading the AngularJS javascript file or otherwise copy the link content distribution network (CDN). Then embed it into your HTML file like code below:

<!DOCTYPE html>
<html ng-app>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>

<body>
  <input type="text" ng-model="name" placeholder="Please type your name">
  <h3>{{name}}</h3>
</body>

</html>

Output:

See the Pen First page with AngularJS by Andreas Eracleous (@Sp00ky) on CodePen.

Align text vertically center in div with CSS

Wed, 20 Apr 2016 00:00:00 GMT

In this example I will show you on how you can align text vertically in the middle with div tag. There are few ways to align a text vertically in the center using CSS code.

Ways to align text vertically center

Below are the properties that can use to vertical align a text in the middle of a div tag.

line-height
transform
display

See the Pen Align text vertically center by Andreas Eracleous (@Sp00ky) on CodePen.

Bootstrap Responsive Table with CSS3

Thu, 21 Apr 2016 00:00:00 GMT

I spent some time playing with the Bootstrap Responsive Table. I was very curious about on how can I create a responsive table with just CSS code without any interaction of Javascript code. I found that nearly impossible to make it happens until I learned about the attribute attr() function on CSS. I am using Bootstrap Framework a lot on my web project but I can say that the Bootstrap responsive table component is not so good for using it on mobile and tablet device even on a responsive website.

Using Bootstrap Responsive Table

You can create a responsive tables with Bootstrap by wrapping any in .table-responsive like the below example:

<div class="table-responsive">
  ...
</div>

On small screen under 768px you will notice that appearing a scroll horizontally and whilst on larger screen than 768px wide, you will not see any difference in these tables. The result has as following:

Reads Value With attr() CSS Property

attr() CSS property allows us to retrieve the value of an attribute of the selected element and use it in the style sheet. I set an attribute on the td element of the table and then using the content property and attribute attr() function for reading the content of the element.

[row-header]:before {
  content: attr(row-header);
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  width: 50%;
  padding-right:30px;
}

Below you can see the Unresponsive Table, Responsive Table with Bootstrap and Responsive Table with Custom Style code:

See the Pen Bootstrap Responsive Table by Andreas Eracleous (@Sp00ky) on CodePen.

Creating Checkout Progress Bar With HTML5, CSS3 and JQuery

Wed, 20 Apr 2016 00:00:00 GMT

In this post, I made a Checkout Progress Bar without images just few lines of code of HTML5, CSS3 and jQuery. Progress Bar is helpful on a website when you want the user to follow a specific order of steps until to complete all of them. The main goal of a Progress Bar is to show you where you are in the entire process and what steps you've already completed. Usually a Checkout Progress Bar you can see it when you are going to buy some products on a eCommerce store like Amazon, eBay and so on. Few common steps are following:

Your Basket
Delivery & payment
Review & Comfirm
All Done
Access
Billing
Delivery Address
Delivery Method
Payment
Confirm Order

See the Pen Checkout Progress Bar by Andreas Eracleous (@Sp00ky) on CodePen.

Notification Popup with CSS3 and HTML5

Wed, 20 Apr 2016 00:00:00 GMT

I created a notification pop up with just CSS3 and HTML5 code. If the mouse over on the "bell" icon you will notice, a show list appears with the notifications.

See the Pen Notification Popup CSS by Andreas Eracleous (@Sp00ky) on CodePen.

Bootstrap Menu Examples

Sun, 22 May 2016 00:00:00 GMT

Bootstrap Menu component is a responsive navigation bar for using on a website or a web app.

By default, The Bootstrap responsive menu bar collapses (vertically stacks) in small devices phones display lower than 768 pixels.

In this example, I have been experimented with the Bootstrap menu (Navbar component) and I have made some modification on it through the CSS stylesheet.

By default, if you click on the dropdown menu of the Navigation bar, you will notice, it appears a submenu with one column.

So I have changed that column to be takes more than one column and also get full width 100%. I have used flex CSS property to make all their submenus to have the same length, regardless of its content.

Therefore I have changed the bootstrap navigation breakpoint to collapse in small devices tablets display between 768 pixels and 991 pixels You can find the CSS code below and see how you can change the Bootstrap NavBar Breakpoint.

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

See the Pen Bootstrap Menu Example - 1 by Andreas Eracleous (@Sp00ky) on CodePen.

Make Bootstrap Buttons same height

Sun, 25 Sep 2016 00:00:00 GMT

I have wrote a JavaScript function that read all the buttons height through a page and make them to have same height size using jQuery.

How to equal height Javascript function works?

The Javascript function finds all buttons that are inside of this HTML "data-equal-btns" attribute name and then stores all the element button in array. For example:

Next Javascript retrieves DOM buttons object from array list and go through until find the maximum height number of a button. Based of maximum button height, I calculate the top and bottom padding for each button is needed, in order to be equal with the biggest button. Button Equal Height Formula: Extra Padding = (Max Height Button - Current Height Button) / 2 Total Padding Top Button = Current Padding Top Button + Extra Padding Total Padding Bottom Button = Current Padding Top Button + Extra Padding Example:

See the Pen Bootstrap Equal Height Buttons by Andreas Eracleous (@Sp00ky) on CodePen.

Best Way To Build A Website In Less Than 17 Minutes

Wed, 17 May 2017 00:00:00 GMT

Hello there! I wrote this easy and quick guide for you, so that you can do it yourself website, without having any programming languages and coding knowledge or having to be an expert!

As a web developer, I can say that in general building a well designed website from scratch takes a lot of time. It requires design skills but coding skills as well. A website is built with technologies such HTML , CSS and JavaScript or other web programming languages.

I would love to help you create a successful website! Follow the steps below and your will see how easy it is to have your own website live, sooner than you thought!

4 Simple Steps to Build A Website

When I started working in the web development industry building high quality websites for other, I had to learn the website’s language. It took me a lot of effort and time to understand and know exactly how to do it yourself website from scratch.

Thankfully you can still build a website even if you aren’t an expert web developer like me! So let’s first examine the two main types you can build a website: The first one Static and the other is Dynamic.

A static website is for simpler websites where the content is not needed to be changed frequently. You can use a static website if you want to build a portfolio (profile) or provide information about your services. You need to have knowledge of HTML, CSS and JavaScript programming languages.

A dynamic website is for more advanced websites were you need to post content frequently (eg. articles) or make any other changes repeatedly. In order to build a dynamic website you will need to use a CMS platform (Content Management System). A CMS platform provides all the necessary tools that are required, so that you can manage your content’s website without having any coding skills or programming languages knowledge. The best option to go with is with a dynamic website. In the next lines I will show you how to do that! I will explain you essential ways to do it yourself website by examine the follow fields:

Choose Your Website Design
Find a Domain Name
Buy a Web hosting package
Set Up Your Website

Let’s get started:

First of all, a good website needs to have three things:

Website Design
Domain Name
Web Hosting

Without these you can’t have a website! So let see what these three things are and why you need them.

STEP #1: Choose Your Website Design

Firstly you must think of what’s the main purpose of your website is, and what content you want your visitors to see and which categories will you have on your website. I believe these are the three most important things you must consider for your website before choosing your website’s design. Let me give you an example. Let’s say I want to show to my visitors the products and services I provide and the current projects I am working on. In this case I will choose a Business Website Design Portfolio. With this kind of portfolio I can easily show to my potential clients my services. Therefore I will make provide the following information: who I am, what I do, sample of my previous work, how you can contact me and etc… So, according to that here are the categories my website will have:

HOME (goes to the first page of my website)
ABOUT (some information about me)
PROJECTS (the projects I have created, involved in or currently working on)
PRODUCTS (my products)
SERVICES (my services)
CONTACT (information how they can contact me)

Find a website design template

Now after knowing how your website structure will be, it’s time to select a website design template that you are going to use. Don’t worry! As I told you earlier you don’t have to learn a programming language. There are hundreds of amazing looking designs and templates out there you can select.

<a href="https://themeforest.net/page/top_sellers?ref=AndreasEracleous" target="_blank" rel="nofollow noopener noreferrer">Themeforest</a> is great place to choose an elegant website design in low prices; they are providing more than 25,788 website templates both static and dynamic. Themeforest themes start as low as $2 up to $65 and you can find any template categories you like.

Personally I am using <a href="https://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=AndreasEracleous" target="_blank" rel="nofollow noopener noreferrer">Avada theme</a> for my WordPress websites. Once you find you website design that fit in your needs go to the next step. Click below to see some examples website design templates.

<a href="https://themeforest.net/popular_item/by_category?category=site-templates&ref=AndreasEracleous" target="_blank" rel="nofollow noopener">Templates</a> <a href="https://themeforest.net/popular_item/by_category?category=wordpress&ref=AndreasEracleous" target="_blank" rel="nofollow noopener">WordPress Themes</a>

STEP #2: Find a Domain Name

ADomain name is used in URLs to identify particular web pages. A domain name is linked to your website where people can find you and can contact you. For example: in the website address (URL) <a href="https://andreaseracleous.local/about">https://andreaseracleous.local/about</a>, the domain name is andreaseracleous.com.

Also a website can has more than one domain name. For example in my case currently using domain name andreaseracleous.com but also I can buy more domain names to connected to my website like: andreaseracleous.net andreaseracleous.org andreaseracleous.info and so on…

The .com in the end is called a domain or domain extension. In our example we have a .com extension

Except of the .com extension you might have heard of other domain names ending in . net , .biz , .cc , .mobi , .org , .tv , .co.uk , .name .

Preferably always go with a .com (if it’s available) or a local domain such as .co.uk.de  (.co.uk if your business is in the United Kingdom, .de if your business is in Germany). When these domain extensions are not available, you can always use other domain extension.

So how much will a domain name cost me? That depends on the domain extension, the number of years you will register it, but also the registrar you are going to use (the company that you will use to get your domain name).

The registration fee for a domain name is usually paid annually, every 2 years or even up to 10 years upfront if you wanted! Usually the prices can be as low as $2.99 or as high as $100. Generally speaking for a .com domain name you will pay about $10 per year! Generally a .com extension costs more than other extension because it is the most popular and desirable extension for domain names.

What keywords should I choose in my domain name?

Well you can select related keywords in your niche. For example if you are in the winery industry you might want to buy a domain such us BuyWine.com, BuyWineOnline.com etc. However most of the good domain names have already been registered but don’t worry.

I believe the most obligatory domain name that anyone must buy is your own personal name (first name and last name) for example: YourFirstLastName.com. Everyone has to brand himself, including musicians, doctors, civil engineers, gardeners and especially if you are a web designer or a web developer even though you are planning to set up a website for yourself or a personal blog. It would be great if you find it available to have them. If you have a company and want to build a website, you must consider your company’s name for example: YourCompanyName.com

Where should I register my personal domain name?

Personally I use InMotionHosting for my domain names. Go and register your domain name there today! Once you find and register your domain name you need to get a hosting account so that you can put content on your website where people will be able to see when type in your web address eg. <a href="https://andreaseracleous.local/">AndreasEracleous.com</a>. A domain name alone will be useless without hosting! <a class="" target="_self" rel="noopener">Find your perfect domain name</a>

STEP #3: Buy a Web hosting package

Every website needs a web hosting to store files. Basically ***web hosting ***is a computer where it provides you a piece of storage to store your web files and makes your website to be visible on the internet.

How much does web hosting cost?

There different hosting packages from different web hosting companies. A web hosting package has a monthly cost and usually starts from $2.00 up to $10 per month and is enough for most websites out there. The exact price depends on which hosting package you will buy and what features that web hosting package includes. In order to chose one you will need to ask yourself a few questions. For example: how much space do you need to storage your content (images, videos and etc.), how many domain names do you want to create a website? how many email accounts do you want to be able to have with every domain name? (eg. support@MyDomainName.com, sales@MyDomainName.com). how many databases you will need etc?

Find a Web Hosting Plan

Currently I’ve changed hosting company and I’ve moved all my websites and domain names to <a href="https://inmotion-hosting.evyy.net/c/1270268/260033/4222?subId1=Best+Way+To+Build+A+Website+In+Less+Than+17+Minute" target="_blank" rel="nofollow noopener noreferrer">InMotionHosting</a>. I am extremely happy with <a href="https://inmotion-hosting.evyy.net/c/1270268/260033/4222?subId1=Best+Way+To+Build+A+Website+In+Less+Than+17+Minute" target="_blank" rel="nofollow noopener noreferrer">www.inmotionhosting.com</a>! They offer very good hosting package deals which include most necessary features including an outstanding support from their expert’s team.

Forget any other hosting provider out there that you have heard of like HostGator, BlueHost, (or even worse GoDaddy! NEVER go with them for hosting).

InMotionHosting.com provides a live chat support 24/7/365 and they are very helpful! When I had a problem they have helped me many times in record time!

Not only that. Your website will load faster with InMotionHosting. They use the latest technologies and security to provide you a faster hosting server from any other competitive hosting company out there!

Which one the 3 packages should I chose?

A good hosting package that I recommend you to get is the Shared Business Hosting (LAUNCH). It costs only $5.99/mo and they will give you your chosen domain name for FREE!!

Also you will get an unlimited hosting storage, have as many email addresses as you want, easy to install applications and more! <a href="https://inmotion-hosting.evyy.net/c/1270268/260033/4222?subId1=Best+Way+To+Build+A+Website+In+Less+Than+17+Minute" target="_blank" rel="nofollow noopener">Choose Web hosting plans</a>

FINAL STEP: Set Up Your Website

Once you’ve bought your domain name and set up your hosting, you’re well on your way! Now it’s time to get your website up and running. The first thing you’ll need to do is install WordPress on your domain.

What is WordPress?

A WordPress platform it’s probably the easiest and most powerful blogging and website content management system (or CMS) in existence today where most newbies will be able to install and create their website in minutes without any programming language knowledge!

Steps to install WordPress

The fastest way to install WordPress is by using <a href="https://www.softaculous.com/" target="_blank" rel="nofollow noopener">Softaculous Apps Installer</a>. You can find the Softaculous feature through your cPanel. (A cPanel is generally just a control panel that provides a graphical interface and automation tools designed to simplify the process of hosting a web site.

Here are the steps you should follow:

Log in to your <a href="https://inmotion-hosting.evyy.net/c/1270268/260033/4222?subId1=Best+Way+To+Build+A+Website+In+Less+Than+17+Minute" target="_blank" rel="nofollow noopener">InMotionHosting</a> account.
Go to your Control Panel.
Go to search box and type “Softaculous” or click on “WordPress” logo.
Click on the “Install Now” button.
Fill in all necessary WordPress set up information.

Andreas Blog

Building a Sticky Notification Bar using CSS3 Animation

How Sticky Notification Bar works

How to create CSS Click Events

Animation - CSS3 3D Transforms

Source Code

How To Use Screen Mirroring On Samsung Galaxy S6

How to enable screen mirroring on Samsung Galaxy S6

Responsive Landing Page Template With Bootstrap

Event Landing Page

Download High Quality Responsive Web Template

Twitter Bootstrap Modal stop Youtube video

JavaScript Code for Twitter Bootstrap Modal stop Youtube video

JavaScript Code for Twitter Bootstrap Modal stop HTML5 video

Create css navigation bar with Font Awesome

Create Your Own Social Media Icons With Font Awesome

Get Started with Font Awesome Icons

What you can do with Font Awesome icons

Colorful 3D Buttons using CSS3

Bootstrap Collapse Panel Examples

Creating Bootstrap Accordion

Bootstrap Collapse Panel With Icon

Bootstrap Accordion Menu

Bootstrap Accordion Expand/Collapse All

Create your first web page dynamic with AngularJS

Align text vertically center in div with CSS

Ways to align text vertically center

Bootstrap Responsive Table with CSS3

Using Bootstrap Responsive Table

Reads Value With attr() CSS Property

Creating Checkout Progress Bar With HTML5, CSS3 and JQuery

Notification Popup with CSS3 and HTML5

Bootstrap Menu Examples

Make Bootstrap Buttons same height

How to equal height Javascript function works?

Best Way To Build A Website In Less Than 17 Minutes

4 Simple Steps to Build A Website

STEP #1: <span>Choose Your Website Design</span>

Find a website design template

STEP #2: <span>Find a Domain Name</span>

What keywords should I choose in my domain name?

Where should I register my personal domain name?

STEP #3: Buy a Web hosting package

How much does web hosting cost?

Find a Web Hosting Plan

FINAL STEP: <span>Set Up Your Website</span>

What is WordPress?