I found a simple and quick tutorial on building a lightbox. In Super Simple Lightbox with CSS and jQuery, you learn how to build a really simple lightbox. This lightbox tutorial is quick and easy to implement. They walk you through the HTML markup, CSS and jQuery. By following the steps, you can get the lightbox working in no time. Faster, if you decide to download the source files.
Author: djbrensinger Page 39 of 50
Some footers have a simple design. They have navigation and copyright. Other footers are more informative. In Developing a Responsive Website: The Footer, Scott Stanton shows you a footer design that has three sections: navigation, tweets and contact info. The format of this footer is simple and informative. It doesn’t overwhelm you with too much information. It simply directs you to information that you may need to learn quickly about this site. He used HTML5 and CSS to build the footer.
In part 2, Scott takes it further by adding jQuery and responsive design. Creating a Responsive Website: The Footer Part 2 breaks the process down into two parts. First, you learn how to create and add the twitter feed. Then, he shows you how to change the CSS to make the footer more responsive.
This two part tutorial shows you how to incorporate jQuery and responsive design into one section of your website. By focusing on one section of your site, you can learn what works and then apply it to the rest of the site. Small changes can be easier to do than over-hauling an entire website. Sometimes you can learn a lot when you start with a small change.
While looking for tips on CSS, I found 3 articles that can help you build better websites with CSS.
- As mobile sites and applications become more important and readily used, web developers need to focus on learning how to develop for mobile. Flexible Mobile – First Layout With CSS3 walks you through the design process and gives you tips and hints on designing for mobile.
- Every web developer needs a collection of coding techniques. CSS is no exception. At noupe.com, you can grab the Useful CSS Snippets for Your Coding Arsnel. You’ll need a place to save your snippets here are 25 Handy Tools to Paste and Share Your Code Snippets.
- @FontFace allows you to specify what font or fonts you want your site to use. The new bulletproof @FontFace syntax shows you how to use it so that it works in most browsers (mobile and desktop) without issues.
While looking for jQuery tutorials that were more challenging than the typical beginner tutorials, I found marcgrabanski.com. His now defunct developer blog has a few tutorials on jQuery. Marc posted one on Google Maps and jQuery. This tutorial had exactly what I was looking for. It showed a practical use for jQuery instead of how to create an animated box. Marc walks you through a step by step process of using jQuery with Google Maps. He shows you how to mashup jQuery with Google Maps to create a simple map that overwrites Google Map popups.
If you are learning jQuery and want to try a tutorial that is more challenging and fun, I suggest taking a look at jQuery and Google Maps.
When you create a web design, sometimes you need filler text to help complete the design. You don’t always have the option of having content written before you design. If you don’t have content available, you can use a dummy text generator to fill in the places where the text go. By using text instead of boxes, your client will see how the text will look with the design. The standard is to use “Lorem Ipsum” as filler. Or you can use something a little more interesting. Web Designer Depot has complied a list of 15 dummy text generators you should know. This list ranges from the standard “Lorem Ipsum”, random gibberish text, passages from famous stories, TV Shows or even Bacon Ipsum.
Instead of writing your own dummy text, you can try out one of these generator for your next project.