There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don’t know where to start? Don’t worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML, CSS to jQuery and everything else you could possibly imagine.

#1. W3Schools

Your first stop on the quest for learning HTML and CSS should really be W3Schools, if you have never heard of this site then you are missing out on some great tutorials. At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.

#2. Webdesigntuts+

Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. They publish tutorials that not only produce great results and interfaces, but also explain the techniques behind them in a friendly, approachable manner.

#3. netmagazine.com

.net magazine, is stuffed with great tutorials on pretty much anything you can imagine, need a tutorial on HTML, CSS, JavaScript, jQuery, then they are your go to guys. Even though some of their tutorials are aimed at intermediate to advanced web designers, the offer is really great.

#4.  Lynda.com

Lynda.com offers a wide range of video-based tutorials that can teach you pretty much anything about web design, as well as pretty much everything else for a monthly fee. An authoritative source of web design training videos, you can get a taster by checking out its free tutorials.

#5. Smashing Magazine

Smashing Magazine is really a fantastic resource of tutorials on all aspects of web design. Similar to .Net magazine, the lessons are aimed at the intermediate to advanced end of the web design spectrum.

#6. Quackit

Quackit teaches beginners how to create websites. According to the website they start off slowly, teaching you the basics such as HTML and CSS. Then slowly they introduce you to more advanced topics so that you can add more features to your website.

#7. Codecademy

Codecademy describes itself as the ‘easiest way to learn how to code’ and has established a great reputation for itself within the web design community. Codecademy is a team of hackers working hard to build a better way for anyone to teach, and learn, how to code. We’re determined to succeed in realizing our mission to turn a world of tech consumers into one of empowered builders.

#8. Treehouse

Treehouse is a video-based service, where you can learn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business. The extensive Treehouse library of step-by-step video courses and training exercises will give you a wide range of competitive, in-demand technology skills that will help you land your next dream job or build your startup idea. No experience? No problem!

#9. Mozilla School of Webcraft

In School of Webcraft you can earn badges backed by Mozilla, that highlight your technical and community skills to your friends, colleagues and potential employers. School of Webcraft Badges are easy to display on your personal website, online profiles, and CV and use the Open Badges framework, a way to record, track, and display your skills and knowledge across the web. The site offers a host of free web design training courses, including ones in CSS, PHP, and HTML. What’s great is that they also offer courses in Spanish.

#10.HTML Dog

What makes HTML Dog different to most other HTML guides and tutorials out there is its focus on best practices. “Web Standards” are at its heart, which, to cut a long story short, is all about using technologies, such as HTML and CSS, in the right way.

#11. CSS-Tricks

CSS-Tricks actually a blog run by web designer Chris Coyier. He covers the latest CSS techniques. Recently it has become immensely popular among professional web designers. What makes this site so great is that it is constantly updated source of tips, tutorials, and video lessons, best of all its Free.

#12. Learncss.tutsplus

30 Days to Learn HTML & CSS was created because they believe everyone has the right to learn how to build wonderful things on the web. The course is 100% free and always will be, no strings attached. It is instructed by veteran web developer and trainer Jeffrey Way, and brought to you by Tuts+ Premium.

#13. Udacity

Whether you want to learn how to build a simple web site or something as complex as your own search engine Udacity offers everything. With Udacity you can learn a whole bunch of new and interesting things, and best of all the training is absolutely free and is led by expert professors from Stanford and the University of Virginia.

#14. HTML.net

HTML.net provides guidance and help about designing and developing websites. They offer tutorials on everything from HTML, CSS, PHP to JavaScript, their motto is they will get you up and running in less than an hour.

#15. About.com

About.com has tutorials and how to guides on pretty much everything from changing a tire to changing a diaper, and of course they also have a plethora of different tutorials and guidelines for learning HTML and CSS online for free.

...

In this tutorial we will be creating a login form using only CSS3 and HTML5, we will be recreating Orman Clark’s Elegant Login Form.

We will create this login form in three separate steps, the first step will deal with the HTML Markup, while the second step will focus on the positioning of the elements, finally the third step will focus the styling of the different elements. Next week we will show you how to add a sign up page to your login form so be sure to check back.

Step 1: The HTML Markup

The first thing we will add is the HTML part, this part will create the actual login form, and will consist of a container, a form as well as some inputs.

<div id="container">        <form> <label for="username">Username:</label> <input type="text" id="username" name="username"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <div id="lower"> <input type="checkbox"><label for="checkbox">Keep me logged in</label> <input type="submit" value="Login"> </div><!--/ lower--> </form> </div>

If you entered the code above correctly then your login form should now look like this:

So now that we have gotten this far let’s start styling the different input areas, we will do that by adding the following code:

/* Basics */ html, body {    width: 100%;    height: 100%;    font-family: "Helvetica Neue", Helvetica, sans-serif;    color: #444;    -webkit-font-smoothing: antialiased;    background: #f0f0f0; }

If you added this correctly your login form should now look like this:

Step 2:  Positioning the Elements

Now that we have our actual login form created let us start with the styling of the form, the first thing we will do is specify the basics such as font color and so forth, then we will position our login form in the center of the page.

#container { position: fixed; width: 340px; height: 280px; top: 50%; left:...

Everyone knows that in order to create the best websites you need to be up-to-date with the latest trends and developments. We asked experts and long timer designers and developers to share with us their favorite books, and the result is a selection of the very best books that everyone should read. Our list includes 25 books that all developers must read if they want to create great web sites. We cover everything from HTML to CSS, JavaScript and jQuery books.

1. Introducing HTML5

Authors: Bruce Lawson and Remy Sharp Price: $17 Amazon Kindle Buy now

As HTML5 continues to evolve, browsers are implementating at break-neck speed and HTML5 web sites spring up like flowers after rain.Lawson and Sharp’s Introducing HTML5, now in its second edition, helps you get acquainted with the possibilities of HTML5; it also explores the good and the bad within the spec, along with discussing aspects not yet fully implemented in browsers.

2. The Essential Guide to CSS and HTML Web Design

Author: Craig Grannel Price: $23.09 Buy Now

The Essential Guide to CSS and HTML Web Design is a great book, if you need suggestions on how to create great web sites that are standards compliant, usable, and look great,  and yet the book isn’t filled with boring and dry theory. No matter at what stage of your design career you, the mixture of practical tutorials and reference material makes this book invaluable to both beginners and more experienced designers.

3. HTML and CSS: Design and Build Websites

Author: Jon Duckett Price: $18 Buy Now

Every day, more and more people want to learn some HTML and CSS. Joining the professional web designers and programmers are new audiences who need to know a little bit of code at work (update a content management system or e-commerce store) and those who want to make their personal blogs more attractive. Many books teaching HTML and CSS are dry and only written for those who want to become programmers, which is why this book takes an entirely new approach.

4. CSS3 for Web Designers

Author: Dan Cederholm Price: $18/$9 (paperback/ebook) Buy now

Cederholm’s book aims to show how CSS3 is a “universe of creative possibilities”, providing insight into web fonts, advanced selectors and the many visual enhancements the technology can bring to web pages. Eric Meyer, An Event Apart partner and co-founder, says: “With Dan you know you’re getting great visual design with a fun theme, wrapped around great technical information. This book delivers big time.”

5. Handcrafted CSS: More Bulletproof Web Design

Author: Dan Cederholm and Ethan Marcotte Price: $29 Buy now

Master sophisticated CSS layout methods powered by a philosophy of ‘progressive enrichment’. Create fluid designs that support today’s plethora of connected devices, and learn techniques that create a living, textural look and feel without killing your user’s bandwidth. Dare to innovate fearlessly and gain tips on persuading your clients to accept your innovations.

6. HTML5 & CSS3 For The Real World

Author: Estelle Weyl, Louis Lazaris and Alexis Goldstein Price: $25 Buy now

One of a number of books concentrating on the core of new web technologies, HTML5 & CSS3 is all about creating dynamic websites with new toys. Instead of fluff and hype, it concentrates on fun, effective techniques that you can start using immediately. According to Studholme: “This book manages the impressive task of covering a massive amount of content without being a tome. It’s full of useful insights and real-world advice.”

7. JavaScript Enlightenment

Author: Cody Lindley Price: $15 (PDF edition) Buy now

This is the book that might transform you from a JavaScript library user into a JavaScript developer. Most of us old-timers learned JavaScript by reading other people’s code and through blind experimentation, so we missed out on a lot of the fundamentals. In this book, Cody does an amazing job walking through the ECMA spec, detailing the intricacies of the JavaScript language.

8. Scalable and Modular Architecture for CSS

Author: Jonathan Snook Price: $15 (Canadian) Buy now

In this book, which started life as a website, Snook outlines the methodology behind SMACSS (pronounced ‘smacks’), a means to examine your design process and fit rigid frameworks into a flexible thought process, thereby resulting in a consistent approach to site development when using CSS.

9. Stunning CSS3

Author: Zoe Gillenwater Price: $29 Buy now

Far too many CSS books are little more than elaborate reference guides, but Gillenwater takes a different approach, helping you learn the power of CSS3 through practical, eye-catching examples. “I don’t think this book has got the promotion and attention it deserves,” says Rewis. “It is sincerely one of the most practical, informative and lovely CSS3 books out there, due to Zoe using a project-based approach throughout to illustrate the concepts.”

10. The Truth About HTML5

Author: Luke Stevens Price: $20 Buy now

As designer and developer Sebastian Green points out, the title of this book shows this is a rather different take on HTML5: “It highlights the myths currently in circulation about the spec and also gives some information about the procedures behind creating it.” Green says the book details how people are using new tags but also shows they may have interpreted the spec incorrectly and headed in the wrong direction. It also explores a groundbreaking semantics initiative, what happens when Flash dies, and how HTML5 alters fundamental components of the web.

11. The Definitive Guide to HTML5

Author: Adam Freeman Price: $25 Buy Now

The Definitive Guide to HTML5 provides the breadth of information you’ll need to start creating the next generation of HTML5 websites. It covers all the base knowledge required for standards-compliant, semantic, modern website creation. It also covers the full HTML5 ecosystem and the associated APIs that complement the core HTML5 language.

12. HTML5: The Missing Manual

Author: Matthew MacDonald Price: $23 Buy now

HTML5 is more than a markup language—it’s a dozen independent web standards all rolled into one. Until now, all it’s been missing is a manual. With this thorough, jargon-free guide, you’ll learn how to build web apps that include video tools, dynamic drawings, geolocation, offline web apps, drag-and-drop, and many other features. HTML5 is the future of the Web, and with this book you’ll reach it quickly.

13.  Responsive Web Design with HTML5 and CSS3

Author: Ben Frain Price: $40 Buy now

Responsive web design, in my opinion, represents huge potential for business web development. It can be so easy to view it as just another buzzword, more marketing jargon if you may but if you take the time to understand what is means for web development, you will see its pretty hot with huge potential. The author moves through a well worked out movie website project to show that Responsive web design is not a huge single monolithic thing but instead a series of existing technologies ( HTML5, CSS3 ) and design techniques ( flexible grid layout, flexible images and media and media queries ).

14. CSS3: The Missing Manual

Author: David Sawyer McFarland Price:$20 Buy now

CSS3 lets you create professional-looking websites, but learning its finer points can be tricky—even for seasoned web developers. This Missing Manual shows you how to take your HTML and CSS skills to the next level, with valuable tips, tricks, and step-by-step instructions. You’ll quickly learn how to build web pages that look great and run fast on devices and screens of all sizes.

15. The Book of CSS3: A Developer’s Guide to the Future of Web Design

Author:Peter Gasston Price:$21 Buy now

CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical language of the CSS3 specification into plain English, so you can get started on your next project right away. With real-world examples and a focus on results, The Book of CSS3 shows you how to transform ordinary text into stunning, richly detailed web pages fit for any browser. You’ll master the latest cutting-edge CSS features, like multi-column layouts, borders and box effects, and new color and opacity settings.

16. Stylin’ with CSS: A Designer’s Guide (Voices That Matter)

Author: Charles Wyke-Smith Price:$25 Buy now

In this completely revised edition of his bestselling Stylin’ with CSS, veteran designer and programmer Charles Wyke-Smith guides you through a comprehensive overview of designing Web pages with CSS, including the advanced capabilities of CSS3 that are now widely implemented across all the major browsers.

17. Smashing CSS: Professional Techniques for Modern Layout

Author:Eric Meyer Price: $25 Buy now

Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. Very few in the industry can show you the ins and outs of CSS like Eric Meyer and inside Smashing CSS Eric provides techniques that are thorough, utterly useful, and universally applicable in the real world. From choosing the right tools, to CSS effects and CSS3 techniques with jQuery, Smashing CSS is the practical guide to building modern web layouts.

18. Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics

Author: Jennifer Niederst Robbins Price: $27 Buy now

Do you want to build web pages, but have no previous experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multi-column pages that adapt for mobile devices.

Learn how to use the latest techniques, best practices, and current web standards—including HTML5 and CSS3. Each chapter provides exercises to help you to learn various techniques, and short quizzes to make sure you understand key concepts.

This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels, whether you’re a beginner or brushing up on existing skills.

19. JavaScript & jQuery: The Missing Manual

Author: David Sawyer McFarland Price: Buy now

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to learn. This jargon-free guide covers JavaScript basics and shows you how to save time and effort with the jQuery library of prewritten JavaScript code. You’ll soon be building web pages that feel and act like desktop programs, without having to do much programming.

20. Learning jQuery

Author:Jonathan Chaffer, Karl Swedberg Price:$40 Buy now

Step through each of the core concepts of the jQuery library, building an overall picture of its capabilities. Once you have thoroughly covered the basics, the book returns to each concept to cover more advanced examples and techniques. This book is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications. Basic JavaScript programming and knowledge of HTML and CSS is required. No knowledge of jQuery is assumed, nor is experience with any other JavaScript libraries.

21. Practical CSS3: Develop and Design

Author: Chris Mills Price: $21 Buy now

This book teaches how to use CSS3 to build cool, responsive user interface features that are feasible for use in real-world projects today. Readers will appreciate the author’s approachable style and will catch on quickly with this easy-to-follow, practical guide. Well known and respected CSS3 expert Chris Mills devotes much of the book to creating fallbacks for older browsers, so that the content will still be accessible and usable.

22. Core HTML5 Canvas: Graphics, Animation, and Game Development

Author: David Geary Price:$31 Buy now

Even though Core HTML5 Canvas is written for experienced software developers with an intermediate-level understanding of JavaScript, there is really something in here for everyone. This book shows you how to implement anything you can imagine with the Canvas 2D API, from text editors to video games.

23. Head First HTML and CSS

Author:Elisabeth Robson Price:$23 Buy now

Do you ever feel like a book only makes sense when you are already an expert at something, well then it’s time you picked up Head First HTML, this book will give you a great introduction to learning HTML so you can finally create those web pages you’ve always wanted. Oh, and if you’ve never heard of CSS, that’s okay–however if you want to create great websites today there is really no way around CSS, and thats why this book also covers CSS.

24. CSS Pocket Reference

Author: Eric A. Meyer Price: $11 Buy now

Sometimes you just can’t remember all the different codes needed for a website, well thats where CSS Pocket Reference delivers. This book has all the most essential information you need to implement CSS on the fly. This book is aimed at more advanced designers who just need to quickly check up on something. Along with a complete alphabetical reference to CSS3 selectors and properties, you’ll also find a short introduction to the key concepts of CSS.

25. jQuery: Novice to Ninja

Author:Earle Castledine Price: $23 Buy now

This book is great if you want to jump-start your journey into jQuery. Whether you are a beginner or an experienced developer this book will have something for you. The book starts of with the basics, and then moves on to more advanced techniques, such as plugin development and the creation of almost every conceivable UI widget.

...

When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s.

Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra “pop” needed to make things stand out and look great without making the site look busy and thrown together.

The next time you need to call attention to something on a page, try this cool effect in CSS3 that makes it look like an element has been sewn onto the page!

.stitched { height:100px; width:500px; padding: 5px 10px 5px 10px; margin: 15px; background: #e2e2e2; border: 2px dashed rgba(255,255,255,0.4); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 6px 4px rgba(10,10,0,.5); }

Here’s an example of what it will look like:

DEMO

...

Here’s a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on!

Twitter uses this effect with their sharing links on a tweet. When you hover over an individual tweet, the reply, retweet and favorite links appear, like this:

But then when you place your cursor over one of the links, it becomes underlined, while the others remain revealed, but not underlined, like this:

In this example we’ll create the same effect. We’ll use divs that will not be visible until we hover over the parent div, and then we’ll underline each div once it is hovered on.

Here’s our HTML:

<section class="parent"> <p>Section text would go here</p> <div class="child">Share</div> <div class="child">Like</div> <div class="child">Tweet</div> </section>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And our CSS looks like this:

.parent { width: 400px; height: 100px; background: #fff; border: 2px solid #000; margin: 10px; } .child { opacity: 0; color: #000; margin-left: 10px; float: right; } .child:hover { opacity: 1.0; text-decoration: underline; cursor: pointer; } .parent:hover > .child { opacity: 1.0; }

Check out a live (editable) demo here: DEMO

Feel free to ask any questions in the comments below!

...

Welcome to the third and final tutorial in the series of creating dynamic web forms using Web2Py.

In the second tutorial of this series, we talked about editing/updating/deleting the submitted form records as well as management of those records using an ingenious function named SQLFORM.grid(), which allowed us to import and manage our form records in a pre-built environment having security features enabled.

In this third, and final tutorial of the series, I would like to shed some light on how multiple web forms can exist on a single page, how a single form can submit data to multiple tables, and finally, a hint about modifying CSS of your web form (which is a common practice in classical PHP based web forms). The reason why I am going to this extent is just to ensure you that web forms in Web2Py are no second to PHP forms, and they have everything that a PHP form can offer – our forms require even less amount of coding, which is exactly the reason why Web2Py and other Pythonic web frameworks are getting popular.

Okay, let’s go.

1. Multiple Forms on a Single Page:

As the header suggests, we are going to integrate more than one web forms on a single page, arranged serially against each other. All these forms will be linked to different tables in the database, but will be incorporated and controlled using a single controller (in our case it is form_a()) function.

We already have one form in place, so we will define two more tables for two additional forms in our default.py:

db.define_table('registration', Field('firstname', requires=IS_NOT_EMPTY()), Field('lastname', requires=IS_NOT_EMPTY()), Field('gender', requires=IS_IN_SET(['Male', 'Female'])), Field('username', requires=IS_NOT_EMPTY()), Field('password', 'password'), Field('image', 'upload')) db.define_table('personal', Field('nick_name', requires=IS_NOT_EMPTY()), Field('address', requires=IS_NOT_EMPTY()), Field('married', 'boolean'), Field('zip_code', requires=IS_NOT_EMPTY()))

Now we have two database tables named ‘registration’ and ‘personal’ having following fields:

registration:

Firstname: Lastname: Gender (Drop-down): Username: Password: Image (Upload Field):

personal:

Nickname: Address: Married (Check Box): Zip Code:

Once the database tables are defined, let’s work on our controller function to incorporate the two forms based on them:

def form_a(): form1 = SQLFORM(db.registration, deletable=True, upload=URL(r=request, f='download')) if form1.accepts(request.vars, session): redirect(URL(r=request, f='form_a')) qq = db().select(db.registration.ALL) form2 = SQLFORM(db.personal, deletable=True, upload=URL(r=request,...

Compared to other platforms, WordPress is pretty fast. However, we can still make it run even faster. A fast loading WordPress site not only gets love from people, but also from Google. Here we look at 4 useful optimization tips that you can implement right now and get your site running faster than ever before.

1. Optimize Your Database

Your MySQL database tables should be cleaned regularly. These tables are sure to have some clutter in time and this has a direct impact on the load times of your WP site. Rather than use plugins to do this, getting a hands-on idea of what is going on with your database is most recommended.

Using the phpMyAdmin panel, choose the “Check All Tables Having Overhead” to get an overview of all the tables that need to be optimized. From the drop down menu, select “optimize table” which when completed, should display a success message. In case of errors in your DB tables, select the “Repair Table” option. Always remember to backup your database before making any major optimization efforts or repairing your database tables.

If you are running WordPress 2.9 and below, which do not support automatic database optimization, add the line below to your wp-config.php file:

define (‘WP_ALLOW_REPAIR’, TRUE);

2. Cache Your Posts

Caching your WordPress posts creates .html files that are served to visitors instead of having to query the database every time, effectively speeding up your website. To do this, you can use popular WP plugins like WP Super Cache, Hyper Cache, W3 Total Cache or the DB Cache. Some plugins like the W3 Total Cache improve your server performance, caching every aspect of your site and reducing download times of site elements.

If you are caching a high traffic website, you might want to consider adding an opcode cache like Alternative PHP Cache (APC) to your server to enhance PHP’s performance. Using a CDN (content delivery network) helps to server your content via a number of servers. This is an expensive option as most CDNs are quite expensive. I would recommend a CDN like CloudFare – it is free but with features that come close to paid services.

3. Compress and Combine Your JS and CSS Files

Compressing and combining JS and CSS files has been shown to improve site loading times. Compressing reduces the overall page size while combining multiple files reduces the number of HTTP requests to the web server required to retrieve the files. There are many JS and CSS compressors out there available for free.

Again, you can do this manually by rewriting the URLs that point to the respective CSS and javascript libraries to point to one destination and then using a small script, concatenate the requested files, compress and send to the browser.

A much easier way would be to use the WP Minify plug-in that combines your various JS can CSS files into one file. And of course compressing images further using a plugin like WP Smush.it does not hurt.

4. Use CSS Sprites

This is a fantastic technique of combining multiple images into a single file with all the information about the graphical elements in it. Sprites can, for example, be used to on a blog’s sidebar where there are 5 buttons each requiring 5 images. These 5 different images can be combined into one file requiring only that single file to be loaded thereby speeding up the site and saving bandwidth.

I recommend a tool like “Sprite Me” to make your sprite coding job easier.

5. Clean Your House

Of course, there are other obvious ways to speed up a WP site like upgrading your WordPress installation, upgrading plugins and deleting unused plugins.  These should be on your regular site maintenance list.

...