Resources To Help You Improve Your CSS3 Skills

If you are a self-taught web designer you probably don’t know the full power CSS has got. When I began studying web designing on my own, I used a couple of books and videos tutorials. I learnt the basic stuffs I could do with CSS like positioning elements, add images, changing background colors using fonts (even with font, web fonts were not introduced), floating elements, applying paddings, borders and margins. They were fun and very interesting.

I was able to create elegant and good looking web pages until one day someone asked me to teach him about CSS3 transitions and animations. I got surprised and even argued with him that nothing like that existed in CSS3. He proved me wrong by searching online. I said to myself something like that existed and the books I used never taught them. So I decided to research about the things CSS3 could do. I got a lot of information which I want to share with you and the various means to help study them.

Some great things you can accomplish with CSS3 include

1. CSS transformations, transitions and animations. These aspect of CSS3 are very broad but you can learn from the resources I’m going to provide to you. You can create interesting animations and transitions with these CSS3 properties which can also be done using JavaScript.

2. Creating a responsive web design. You can build your web pages to adapt to any screen size. This saves you time and money by not building separate websites for your mobile and desktop platforms.

3. Building web layouts using grid system and flexbox.

Many more things you can learn.

Now some resource to help you study all about CSS3 include:

1. CSS3 The Missing Manual by David Sawyer McFarland

I really adore this book a lot because it has taught me a lot of things I never knew CSS3 could do. I learnt about web fonts, CSS animations, transitions and transformations, responsive design from this book. I used the 3^rd edition but the 4^th edition is out and explores more topics like flexbox, SASS (a CSS preprocessor), and skeleton (a CSS framework). The practical examples makes the book very interesting and fun to read. If you wish to improve your CSS level choose this and you will never regret making such a choice.

2. CSS3 Foundations written by Ian Lunn

This a great book I will recommend to intermediate web designer who wishes to improve his CSS level. This book does the magic by teaching you everything you need to know about CSS3. This book introduces you to the beginning of CSS in clear and concise manner. Right from the beginning you’ll learn about the various CSS selectors, adding backgrounds using CSS, animations, transitions, building webpages for different screen size and many more. Just get this book and your life as web designer will never be the same again.

3. The Book of CSS3 by Peter Gasston

I have never read a book that explains complex concepts in a clear and simple manner like this book. This has help a lot of intermediate designers to become experts in CSS3 and continues to receive good reviews on amazon. At the start of this book the author walks you through the basic introduction of CSS3 and then moves on to more advanced topics like media queries, pseudo classes and elements, text effects and typographic, web fonts, transitions, animations, 3D transformations and many more.

4. CSS Secret: Better Solutions to Everyday Web Design Problems

I just can’t describe how I felt the first time read this book, I was simply amazing to find such information in a single book like this one. This is a book most web designers wish they had. This book can help you improve your level in CSS easily. Topics like visual effects, background and borders, typography, transitions and animation are covered by the author Lea Verou. This a valuable asset any intermediate developer must invest in.

5. CSS3 Pushing the Limits by Stephen Greig

This is another book I will recommend to web designers who wants an improvement in their web designing skills. This masterpiece teaches you what you never knew you could do with CSS. Interesting topics you can learn from this book include advanced CSS selectors, background and borders, CSS3 filters and filters, transformations, transitions and animations, layouts and many more.

6. Teamtreehouse CSS3 Library

Treehouse’s CSS library offers you a wide range of video tutorials on some advanced topics in CSS3. Tutorials on topics such as CSS transitions and transforms, flexbox layout, CSS calc function, layouts, navigations, animation SVG, SASS and so many more are covered. You can sign up today and enjoy 7 days trials. Membership plans include

Basic Plan - $25/month

Pro Plan - $49/month

7. Mastering CSS

Mastering CSS is a video tutorial on O’Reilly.com. The tutor of this video course does an exceptional job by teaching what you need to know about CSS3 and how to implement them in your own web pages easily. Topics you will learn include the basic of CSS3, advanced CSS selectors, navigations and drop down menus, building responsive websites, animations and many more.

8. Lynda CSS3 Library

Another video based CSS3 tutorials I will recommend to designers is Lynda. Lynda.com’s CSS library provides you with numerous advanced CSS3 tutorials. You can watch video tutorials on web fonts, animations, transitions, SASS, flexbox, responsive designing, advanced CSS layouts, CSS grid, web typography and many other advanced tutorials. Payments plans include

Basic - $19.99/month and enjoy 10 days free trial

Premium - $29.99/month and enjoy 10 days free trial

Conclusion

Improving your skills with these resource can add more value to the work you perform. Taking full advantage of these any of these resource can help you build better and elegant websites for your clients. I will be glad to receive any suggest or comments concerning my picks of the best resource to help you as web designer. 

Read more

How To Turn Google Forms Into A Feedback Form For Free

Google form is an awesome service provided by Google. This service allows registered Google users to collect data from their web visitors. It’s just the same way you will use HTML form tag to ask your visitors for information for processing.

Well, we can all rely on this free service Google provides to us to create a nice user feedback form to request feedback from your visitors. Some advantages you enjoy are they free to create and you can also receive unlimited responses from your visitors. Besides that, the app also has an interactive dashboard which allows you to view all responses or view them individually.

I have created this post to give a basic tutorial on how you turn Google form into a feedback tool for your website for free. Now let’s get started

How To Turn Google Forms Into A Nice Feedback Tool

1. To access Google app go to https://www.google.com/forms/about/

2. After you have visited Google forms, the next thing to do is to sign in with your Google account or if you do not have a Google account you can sign up for free.

3. Now that you’ve logged in its time to start building the form.

This is how your Google form page should look for the first time.

4. Now to create your feedback form click on blank and your page should look like the image below

Before we begin I want to explain a few buttons you need to know

These button can be located at the top right corner of the page and each button has a function.

i. The first button allows you to select a color palate for the form.

ii. The second button allows you to preview the final looks of the form as you build.

iii. The next button is the settings button which gives a lot options to control how your form should be. Clicking on the settings button opens a dialog box which has number controls to allow you to set number of response a visitor can submit, text to be display on the confirmation page, allow users to submit another response, edit their response, see a summary of their responses, display a progress bar or shuffle the questions.

iv. The send button allows you to publish your finished form to Facebook, Google Plus or Twitter. You also have the options to send it via email, embedding it on your websites or sharing it via link.

These vertical control button can be found sitting beside your forms. Each button has got useful roles to play.

The first button allows you add another question to the form.

The next button allows you to add a title and description to the form.

You can use the third and fourth buttons to add images and videos to the form.

And the final button allows you to group your form into sections.

Now let’s create our first form.

1. Click on the untitled form title to give your form a nice title heading.

2. You can also add a form description by clicking on the form description.

3. To type your first question click on Question to add the question you want to add.

4. Next thing to do is to create the answers to the questions. The first option you’ve got is the multiple choice, so click on option 1 and then type your first answer, to add other answer click on add option and then type the answer you want to display. As I wrote earlier you have different ways to allow your visitors to answer the questions. You can choose to make your visitors write a short answer or paragraph, display answers as check boxes, drop down menu and a few others.

5. If you want to your visitors answer a compulsory question you can turn on the required on by sliding it to the left. You can also duplicate or delete a question using the buttons beside the required option.

Viewing your responses.

At the top of the form you can see two tabs, the questions tab and the responses tab. To view your responses just click on the responses tab to view all responses submitted or you can choose to view your responses individually.

Conclusion

I hope you can take full advantage of Google form to create a stunning online feedback for your websites. Doing so can help you monitor what visitors like and hate about your various webpages. I hate to say this but I’m done with the tutorial.

I’m out.

Read more

9 Best Customer Feedback Tool For Websites

Why should you struggle to acquire visitors and customers to your website and later loose them because of some difficulties they faced whenever they visited your website? That will be a huge blow to you. After you have built your website you might think everything looks perfect but believe me it doesn’t work that way. The website you built won’t be viewed only by you or your co-workers but will be available to everyone unless you are building it for private use.

There might be some aspect of your website that other users are finding it very difficult to interact with but you thought everything was alright. Some people might find it difficult to read your contents because of the font size you used or the issue might be the color you selected for your text. 

Someone in another country may experience some difficulty in loading your pages correctly or your page design doesn’t look good in his or her browser (he might be using Internet Explorer 8 or 7, which causes a lot of headaches to many web designers). Your reason for building your website is solve a problem your visitors are facing. But because of some problems associated with your website which you were not able to find drives them away.

Having some form of customer feedback system can help you as web designer to solve any difficulty your visitors face whenever they interact with your pages. Unfortunately, finding the best customer feedback system can also be a problem to you. Worry no more because I have written this post to provide you with some of the best tools you can use on your website to collect any complaint from your visitors.

Some Benefit You Enjoy By Using A Feedback Tool

There are a whole lot of benefits you can enjoy by using a feedback tool. Though these product provides you some benefit its main disadvantage is that they are heavily priced to my opinion. But that shouldn’t be a big deal because you will recover such cost when you start enjoying benefit of implement these tools on your website.

Some benefits you can reap include:

1. You get the chance to understand how your visitors are using your website. You get to know what sort of problem they are facing and also how your online products and services are helping them.

2. You can also create new a service or product based on the feedback you receive from your visitor. In case you receive a negative feedback about your website, you can turn that complaint into a new service or product for your online users

3. You can also communicate with your visitors easily using online feedback widgets.

4. Once you have been able to understand the need of your visitors and have been able to redesign the appearance of your webpages and product, your revenue will also increase.

The best feedback tools for web designers

1. Feedbackify

Feedbackify is one of the awesome online feedback system I have met. This software allows you to collect feedbacks, suggestions and any problem your web visitors are facing. With app you can create and easily customise your feedback form, easily upload your company logo or brand logo to your form, easily customise the looks of your feedback button and also Feedbackify has stunning dash board which allows you to view all feedback from your visitors. Another interesting thing about this software is you enjoy 15 days trial after signing up and integrating the software on your website takes only a few minutes to accomplish.

Pricing: $19/month

2. UserEcho

UserEcho is a community based forum software that allows to know what your visitors like and also dislike about your website in order to improve the services and products to provide to them. With this software you can also propose any new idea or service you want to implement on your websites and then allow your visitors to vote for or against your proposed idea. UserEcho also allows you keep in touch with your customers or visitor with an online chat system. What are you waiting for, sign up today and enjoy up to 15 days free trial.

Pricing: $15/month

3. SurveyMonkey

SurveyMonkey is an online survey app that allows you create questions about your websites and products you provide to your visitors through your website. With this survey app you can easily create and send questionnaires to your customers or subscribers. You can send your surveys via email, posting on Facebook, Twitter or LinkedIn or embedding it on your website. SurveyMoney offers you a free plan with limited features but you can later upgrade to other plans with more advanced features like unlimited questions and responses, team collaboration, data exports and reports, custom colors, logo and many more.

Pricing Plan:

Select Plan - $26/month

Gold Plan - $299/year/user

Platinum Plan - $799/month/user

4. getfeedback

You can easily improve your customer satisfaction and increase sales online by relying solely on getfeedback’s online survey feedback tool. This app works awesomely on any screen size, that’s a features I really love and adore. Though you will enjoy up to 20 responses for your survey with the free trial, signing up for paid plans allows you to enjoy more features packed within this app. You can also collaborate with other team workers on the design and survey creation. You can easily email your customers your finished survey with getfeedback.

Pricing Plan:

Personal Plan - $25/month

Professional Plan - $50/month

Enterprise Plan - $150/month

This may also help: How to turn Google forms to a feedback form

5. Client Heartbeat

Making your visitors feel happy and treating them like your royals yields in increasing your website growth and revenue. One unique way to do that is to use Client Heartbeat online survey tool. Client Heartbeat allows you to create surveys about your websites and your online products and services to easily understand how your visitors and customers interact with your webpages and products. This simple tool is used by thousands of company and other website owner which gives you the assurance that this is a great tool you can take full advantage of. Enjoy an awesome 21 days free trial period with no credit card required and if you really like this tool you can sign up for other paid plans.

Pricing Plan:

Basic Plan - $29/month

Gold Plan - $59/month

Platinum Plan - $89/month

Enterprise Plan - $499/month

6. Usabilla

Usabilla is great tool and a lovely online survey tool to help you optimize your website based on feedbacks provided by your visitors. This elegant app provides you with a lovely dash board that allows you monitor and analyse feedbacks you receive. This tool is easy to integrate into your website. Customising the looks of your feedback button and form is very simple and easy to do. This a great feedback tool I will recommend to any web designer who wants to improve the looks of his or her web design using feedback from visitors.

7. UsersDelight

Userdelight is the first free widget tool I have met and it rocks. It doesn’t have much features as compared with the other paid tool but gives you the ability to request feedback from your visitors. This tool is simple to use and very easy to use on your web pages. With just a single signup you can reach you to thousands of visitors you have issues with your website.

8. Survicate

Understanding the needs and concern of your users should be your primary concern as web designers. You can easily communicate with your visitors online through Survicate to know which aspect of your web pages or how your website appears to them generally. Survicate is a cool tool you can rely on. This app’s attractive dash board enables you to view all responses from you visitors and also analyse the results to know which sections of your website you must redesign.

Pricing Plan:

Free Plan - Enjoy up to 50 responses per month

Business Plan - $50/month

Professional Plan - $100/month

Unlimited Plan - $300/month

9. Feedbacklite

Feedbacklite is another widget you can use collect the needs and expectations of your visitors. You can view responses from visitors via feedbacklite’s online dash board. Integrating this tool onto your websites can accomplished with no hassle, requires only a few minutes. The feedback form looks great across all screen type which makes it superb. If you are looking for a simple tool opt for this widget with pricings that will suit all your needs. Also you can enjoy a $0/month plan with limited features.

Other Pricing Plan:

Starter Plan - $29/month or $319/year (and enjoy one month free)

Plus Plan - $49/month or $539/year (and enjoy one month free)

Premier Plan - $69/month or $759/year (and enjoy one month free)

Conclusion

Your visitors are the only people who can make your web a successful one. Never play with any issues they face when interacting with your website. Respond quickly to any issues they raise and trust me they will fall in love with your website and services. They won’t hesitate to recommend your website to other people because of the quality services they receive and the quick responses they get whenever they send you a feedback.

I’m done with my picks of the best feedback tool for website designers. If you have any comment or suggestion you can share with me and other visitors in the comment sections. You are also free to share this post to your friends and family. They will be glad to read to it.

I’m out, see you is my next post.

Read more

Amazing: 10 Free Web Fonts For Content Headings

Headings of blogs post or article play a major role in the survival of a website or a web blog. The first thing most web visitors read on web page is the heading. And if you write good heading and apply elegant fonts to your content headings most of yours visitors are likely to read your piece of content.

In the past web designers faced a whole lot of challenges when choosing an appropriate font for their content headings. They made to choose from the limited number of font family web browsers provided and some of these same default fonts don’t display on some Operating Systems.

This issue made designers seek the help of graphic designing software to create elegant fonts as images and then apply them to their contents. This same solution generated other problem. The images increased the size of their websites and resulted in making their website to load slowly and also reduce their ranking in search engines.

The default Times New Roman font family looks very good in prints but somehow awkward on web pages. Fonts like Verdana, Helvetica, Sans-Serif, Arial can be a preferred choice for a heading but as designer you should make your web pages and contents stand out. Using fonts like the hand writing style can really make your contents look gorgeous and great to your visitor. A lot people become attracted to things when those items look great.

Thanks to the introduction of web fonts web designers can choose from a wide variety of font to apply to their contents. Some of these web fonts are for free whiles others are available for sale. So you should be careful when choosing a web font for contents.

Free Web font for your content headings

I have created this post to provide you with some free web fonts you can use on your websites. I can assure you that these font will make your web pages look great to your visitors.

1. Chantelli Antiqua.

This type of web font a true type font and looks great for headings.

Download this font

2. Colaborate Web Font: Font Type - Open Type.

Download this font

3. Delicious Web Font: Font Type - Open Type.

Download this font

4. Diavlo Web Font: Font Type - Open Type.

Download this font

5. Kingthings Calligraphica Font: Font Type - True Type Font.

Download this font

6. GoudyStM Font: Font Type - Embedded Open Type, True Type Font, Open Type Font and SVG

Download this font

7. Script Number One Font: Font Type - Embedded Open Type, True Type, Web Open Font Format and SVG

Download this font

8.  Tally Web Font: Font Type - Open Type Font.

Download this font

9 Autopia Web font

This web font is hosted by fontlibrary.org. So you use this font on your web pages just copy the tag below and add it after the opening head tag in order for it to display properly in Internet Explorer

<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/autopia" type="text/css"/>

And add this style property to the heading you want to style

h1 { 
   font-family: 'Autopiaregular'; 
   font-weight: normal; 
   font-style: normal; 
}

10. Dancing Script

This is another elegant web font host by fontlibrary.org. To use this font add the following tag after the opening head tag

<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/dancing" type="text/css"/>

Apply this style to the tag you want to format

h1 { 
   font-family: 'DancingScriptRegular'; 
   font-weight: normal; 
   font-style: normal; 
}

Note

You can convert your any of the web fonts you download to embedded open type and other supported form using fontsquirrel online font generator. On the generator page select expect, then select the format you want and you can also apply some tweaks to the font. When you are select the agreement then download your converted font.

Read more