Bend and Set Text on a Circle Without Using Photoshop

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials5 months ago • Written by 5 Comments

When web designer creates pages, sometimes they want to set an element where they need to bend  or wrap texts inside a circle (e.g. for the site’s logo or title). Photoshop and some image editing software is often the go-to software for creating these images.

On the other hand, bending and setting text on a circle without using Photoshop gives flexibility to the design and value to the SEO since search engines can’t read texts in images.

This can be an easy task using Adobe Photoshop and Illustrator but setting text on web type using HTML and CSS might be a challenge. Thanks to the power of CSS3 and jQuery, this can be done.

Bend and Set Text on a Circle Without Using Photoshop Read More

How to Create a CSS3 Pop-Out Menu Without Learning Programming

Posted in Coding, Coding, Tutorials, Tutorials, Web Interface5 months ago • Written by 8 Comments

Modern websites offer a more complex hierarchy of navigation. This navigation sometimes makes user-experience on the website’s menu a bit confusing. Using a CSS3 pop-out menu makes it easier to find your way to what you want on the site quickly. Thanks to CSS3, animation is now possible.

Using CSS3, you can simply hide and unhide an element under other elements. This will not only simplify your code but also makes it  easily updated. This means you can now perform some sliding animation even without the knowledge of programming.

How to Create a CSS3 Pop-Out Menu Without Learning Programming Read More

How to Create a Scrolling Parallax Website

Posted in Coding, HTML & CSS, Tutorials8 months ago • Written by 31 Comments

Parallax websites are one of the latest and biggest trends on the web for some time now. If you want to impress your clients or implement immediate impact on your site, this is a good choice for you. In this tutorial, I’ll teach you how to create a simple but beautiful parallax website that will create an illusion of 3D depth to your site. It will surely catch your viewers’ attention. So let’s dig in.

How to Create a Scrolling Parallax Website Read More

10 Easy-to-Follow PSD to HTML/CSS Tutorials

Posted in Coding, Tutorials8 months ago • Written by 5 Comments

Converting PSD to HTML/CSS might intimidate you at first since it’s a brand new world, especially for long-time Photoshop users. A basic knowledge of HTML and CSS won’t hurt; beginners might find these tutorials a bit dizzying but, hey, it’s worth a try. And believe me when I say to you, finding a good teacher who will teach you for free (or for a small amount) is just another difficulty waiting next door if you don’t start now.

10 Easy-to-Follow PSD to HTML/CSS Tutorials Read More

Design a Pricing Plan Using CSS3 in Under 15 Minutes – Downloadable

Posted in Coding, HTML & CSS, Tutorials1 year ago • Written by 21 Comments

Today we continue the series of tutorials on basic HTML5 and CSS3 coding and we jump even deeper into CSS3 with this video on how to design a pricing plan.

If you own a product which you sell only on a subscription basis, then you will probably need pricing tables in order to showcase your product and the purchase options better. This tutorial will teach you how to do that.

Design a Pricing Plan Using CSS3 in Under 15 Minutes – Downloadable Read More

Create a Contact Form in HTML5 and CSS3 for Dummies – Downloadable

Posted in Coding, HTML & CSS, Tutorials1 year ago • Written by 26 Comments

Today I will teach you how to create a simple contact form in HTML5 and CSS3 that you can download for free. Many WordPress plugins come with fully functional contact forms that can be installed and used right away, but we believe in beautiful design and in your right to style it however you choose. Therefore today’s video will focus on how to create, but mainly how to style, your contact form using CSS3.

There is not much HTML5 in this video tutorial, unfortunately, as the contact form is built with code available in previous versions of HTML, but you can use today’s tutorial as a way to reinforce many of the things we learned together in the previous tutorials. So without any further discussion, here it is:

Create a Contact Form in HTML5 and CSS3 for Dummies – Downloadable Read More

WordPress Plugin Development from Scratch, Part 3/4 – Custom Post Types

Posted in Coding, HTML & CSS, JS & AJAX, Plugins, Tutorials, WordPress1 year ago • Written by 13 Comments

Hello Everyone! Welcome back to the third part of this series on WordPress Plugin development for designers.

In the first part we identified the importance of WordPress plugins for you as designers and the basic structure of a plugin. Then we followed it up with the necessary coding required for developing plugins in the second part, by creating a jQuery slider for WordPress.

I am happy to announce that SlidesJS has won the voting contest and I’ll be using it through the rest of this tutorial series.

WordPress Plugin Development from Scratch, Part 3/4 – Custom Post Types Read More

Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

Posted in Coding, HTML & CSS, Tutorials1 year ago • Written by 75 Comments

A few weeks ago, we released two different introductory articles about HTML5 and CSS3, and I promised you we’d do some cool stuff together in the upcoming months. Well, I have been working hard on this video tutorial and I really hope you enjoy it.

In this tutorial I will teach you how to create a responsive website using HTML5/CSS3 from scratch. So rather than talking about, let’s get straight to it. I hope you will leave me feedback in as I would like to read some of your opinions very, very much!

Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial Read More

WordPress Plugin Development from Scratch, Part 2/4: Integrate Slider

Posted in Plugins, Tutorials, WordPress1 year ago • Written by 30 Comments

In the first part of our WordPress Plugin Development Course for Designers we learned about the importance of WordPress plugins for designers and its base structure. Today we are going to talk about the core WordPress theories and techniques required for creating design focused plugins.

Our final goal is to learn WordPress plugin development while integrating a jQuery slider into WordPress from scratch. Throughout this tutorial, we will be learning the necessary coding techniques using sample slider as the example. By the end of this tutorial, you will have a simple template which is common to most of the design based plugins.

Voting for the slider is still going on and SlidesJS is heading the list. So we will be using SlidesJS the slider for explaining necessary codes in this part.

So let’s get started.

WordPress Plugin Development from Scratch, Part 2/4: Integrate Slider Read More

Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]

Posted in Coding, HTML & CSS, Tutorials1 year ago • Written by 6 Comments

Sup folks, it’s Mike here again, your design guru and this is the third part of our Basic Web Design Video Course.

This time we are going to completely markup the HTML using the tags that we have learned in the previous videos. After that we are going to style it using CSS.

Also, we are going to cover CSS reset, Clearfix Hack and new CSS3 properties to solve the most common issues encountered when you are starting to learn web design.

Buckle up and let’s get started!

Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3] Read More
54.205.188.59 - unknown - unknown - US