﻿Generated by All in One SEO v4.9.7.2, this is an llms.txt file, used by LLMs to index the site.

# Sir Codex

## Sitemaps

- [XML Sitemap](https://www.sircodex.com/sitemap.xml): Contains all public & indexable URLs for this website.

## Posts

- [What You Need To Know About JavaScript Scope](https://www.sircodex.com/what-you-need-to-know-about-javascript-scope/) - Understanding scope in programming is key to appreciating how your variables interact with the rest of your code. In some languages, this can be quite straightforward, but JavaScript’s anonymous functions and event handling features, along with a couple of little quirks, mean that handling scope in your applications can become frustrating. This article discusses how
- [Tutorials Round-Up: Ajax, CSS, PHP and More](https://www.sircodex.com/tutorials-round-up-ajax-css-php-and-more/) - Coding or designing a page, it’s always nice to have some basic templates you can quickly modify or adapt to your needs. However, at least once you have to know, how to create this “universal” template. In this case tutorials prove to be an ultimate solution, particularly if you just want to get an idea
- [Google Reveals its HTML, CSS and JavaScript Style Guides](https://www.sircodex.com/google-reveals-its-html-css-and-javascript-style-guides/) - Are you forced to adhere with company coding guidelines set in stone at some point in 1969? Or are your fellow developers free to express their artistic side with embedded ASCII art? I like browsing through style guidelines. There are usually obvious rules, those which seem bizarre and a few hidden gems which you hadn’t
- [The Real History of the GUI](https://www.sircodex.com/the-real-history-of-the-gui/) - When a lot of us hear the word "gooey," we think about sticky buns or creamy sugary fillings (yum). Others think "GUI", as in "Graphical User Interface." A GUI is what computer types call the system of icons, taskbars, and other objects that our computers use to display and access information. A few of us
- [HTML Utopia! Design Websites Without Tables – Parts 1 and 2](https://www.sircodex.com/html-utopia-design-websites-without-tables-parts-1-and-2/) - Welcome to HTML Utopia – the two part series on creating Web page designs without tables.Part 1 introduces the concept of using CSS to create a design without tables, and explains the reasons why this philosophy has become so popular.Part 2 explores a few standards-compliant commercial applications of this type of design, and exposes a
- [Useful JavaScript And jQuery Tools, Libraries, Plugins](https://www.sircodex.com/useful-javascript-and-jquery-tools-libraries-plugins/) - Useful JavaScript Libraries Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and More The goal of this script is to provide a fast and lightweight script to enable responsive Web designs in browsers that don’t support CSS3 Media Queries. In particular, Internet Explorer 8 and under. Blackbird: Open Source JavaScript Logging Utility Blackbird offers
- [10 Useful CSS/JS-Coding Solutions For Web-Developers](https://www.sircodex.com/10-useful-cssjs-coding-solutions-for-web-developers/) - Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of
- [70 New, Useful AJAX And JavaScript Techniques](https://www.sircodex.com/70-new-useful-ajax-and-javascript-techniques/) - As the Web grows and becomes more dynamic, more and more websites have user-generated content and tools that greatly improve the user experience in terms of usability and accessibility. Interactive solutions for lightboxes, form validation, navigation, upload, auto-complete, image cropping, slideshows, tool tips, sliders and tables are being developed that use nifty JavaScript and AJAX
- [50 Useful JavaScript Tools](https://www.sircodex.com/50-useful-javascript-tools/) - JavaScript is a powerful client-side scripting language used in many modern websites and Web applications. In the hands of a skilled Web developer, JavaScript can enhance the user’s experience of the website and provide rich interactive components and features. But even though syntactically simple in nature, JavaScript is often difficult to author because of the
- [jQuery and JavaScript Coding: Examples and Best Practices](https://www.sircodex.com/jquery-and-javascript-coding-examples-and-best-practices/) - When used correctly, jQuery can help you make your website more interactive, interesting and exciting. This article will share some best practices and examples for using the popular Javascript framework to create unobtrusive, accessible DOM scripting effects. The article will explore what constitutes best practices with regard to Javascript and, furthermore, why jQuery is a
- [AJAX, DHTML and JavaScript Libraries](https://www.sircodex.com/ajax-dhtml-and-javascript-libraries/) - Ajax, DHTML and JavaScript components are important in the era of Web 2.0. Recent Web-applications tend to use them to provide more interactivity and guarantee better functionality. But what Javascript libraries can be used for a new web-project? What functions, effects and useful techniques are actually provided by them? We deliver answers. The result is
- [10 Typical HTML Interview Exercises](https://www.sircodex.com/10-typical-html-interview-exercises/) - 1. Markup validation Consider the following markup: 1 2 3 4 5 6 7 8 A landscape of London by night Is it valid? If not, can you explain why? Answer The markup uses the picture element,
- [5 Obsolete Features in HTML5](https://www.sircodex.com/5-obsolete-features-in-html5/) - On October the 28th, 2014, HTML5 became a W3C Recommendation. HTML5 certainly isn’t a new topic and a lot of developers are aware of its features: semantics, accessibility, APIs, and so on. However, during the evolution of the standard, some elements, attributes, and APIs have been added and then changed or removed. Because it’s hard
- [6 Current Options for CSS Preprocessors](https://www.sircodex.com/6-current-options-for-css-preprocessors/) - A CSS preprocessor helps you write maintainable, future-proof code and it will seriously reduce the amount of CSS you have to write. Where these tools shine best are in large-scale user interfaces that require huge stylesheets and many style rules. This is a review of the six best CSS preprocessors out there right now. 1.
- [20 HTML Elements for Better Text Semantics](https://www.sircodex.com/20-html-elements-for-better-text-semantics/) - Semantic HTML can help web designers and developers convey meaning not simply in the presented page, but also with the tags and elements used to code that page, potentially improving accessibility, search engine indexing, and even human understanding. As a term, semantic or semantics relates to meaning in language. If something is more semantic, it
- [Responsive Web Design Tips from Bootstrap’s CSS](https://www.sircodex.com/responsive-web-design-tips-from-bootstraps-css/) - Time – one of the few known things that is infinite. Human beings, as well as animals and plants, have dealt with time since the beginning of their existence. On the web this need isn’t different. Even in this medium, we need to communicate to other people that something happened at a certain point, on
- [5 Uses for Vertical Media Queries](https://www.sircodex.com/5-uses-for-vertical-media-queries/) - Media queries are the core technology behind Responsive Web Design yet, despite a plethora of options, few of us dare venture beyond min-width (and possibly max-width), i.e. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /* mobile-first layout */ .column { width: 100%; }
- [Media Queries: A Look at Different Media Features](https://www.sircodex.com/media-queries-a-look-at-different-media-features/) - If you have worked with responsive design, you have probably used media queries. Media queries are a clean and simple way to create responsive websites using CSS. They work by allowing you to change the style of the page when the user’s screen is a certain size. Here is a simple example: 1 2 3
- [Client-Side Form Validation with HTML5](https://www.sircodex.com/client-side-form-validation-with-html5/) - Form Validation with HTML5 HTML5 includes a fairly solid form validation mechanism powered by the following attributes: type, pattern, and require. Thanks to these new attributes in HTML5, you can delegate some data verification functions to the browser. Let’s examine these new form attributes to see how they can aid form validation. The
- [HTML5 Forms: CSS](https://www.sircodex.com/html5-forms-css/) - Remove Default Styling You’ve probably noticed browsers applying default formatting. For example, most browsers apply rounded corners to search boxes and add subtle background gradients that can look misplaced on your flat design. To remove default styling, you can use the appearance: none; property, which requires prefixes. However, use with caution since it can remove
- [HTML5 Forms: The Markup](https://www.sircodex.com/html5-forms-the-markup/) - This is the first in a three-part series about HTML5 web forms. We’ll cover the basic markup in this article before progressing to styling and the client-side JavaScript validation APIs. I recommend you read this even if you’re already familiar with forms — there are many new attributes and gotchas! HTML forms may be mundane
- [Creating CSS Animations Using Move.js](https://www.sircodex.com/creating-css-animations-using-move-js/) - CSS3 transitions and animations are currently the preferred method for creating lightweight animations on websites. Unfortunately, many developers find their syntax to be complex and confusing. If this sounds like you, Move.js may be the perfect solution for you. Move.js is a simple JavaScript library that creates CSS3 animations using simple functions. This tutorial explores
- [New HTML5 Attributes for Hyperlinks: download, media, and ping](https://www.sircodex.com/new-html5-attributes-for-hyperlinks-download-media-and-ping/) - Hyperlinks have been around since the dawn of the Web. But with the dawn of HTML5, three new attributes have been added to the humble tag to keep existing attributes like href, rel, and others company. The new attributes are: download, media, and ping. In this article, we’ll take a quick look at what
- [10 HTML Tags You May Not Be Using](https://www.sircodex.com/10-html-tags-you-may-not-be-using/) - As a front-end developer you no doubt use HTML constantly and probably feel it doesn’t have any more unknowns. Nevertheless, the way it has evolved (in particular with the advent of HTML5) may surprise you at times. In this article, I’ll show you 10 HTML tags you may not be using or maybe even aren’t
- [How to Create an Invoice with Twitter Bootstrap](https://www.sircodex.com/how-to-create-an-invoice-with-twitter-bootstrap/) - Invoice Header Open your invoice.html file in your preferred text editor. Replace Content here with the following code. Logo here INVOICE Invoice #001 next section I have used col-xs-6 class t create two equal columns. In our first columns you
- [How to Create a Calendar Icon in HTML5 and CSS3](https://www.sircodex.com/how-to-create-a-calendar-icon-in-html5-and-css3/) - It looks great, is ideal for a smart phone calendar app and is very topical as we move into 2014. Would it be possible to create a similar icon in HTML5 for use and re-use in any web page? Of course it would … otherwise I wouldn’t have written this article! The Options A
- [HTML5 Form Validation](https://www.sircodex.com/html5-form-validation/) - Strictly speaking, you should make sure you're using the HTML5 DOCTYPE, otherwise you'll run into HTML validation errors. But the great thing about them is that they all degrade gracefully. So if an older browser doesn't support them, the fact that they're in the HTML won't 'break' anything, they’ll just be rendered as an
- [How to Use HTML5 Data Attributes](https://www.sircodex.com/how-to-use-html5-data-attributes/) - Back in the old XHTML/HTML4 days, developers had few options when storing arbitrary data associated with the DOM. You could invent your own attributes but that was risky; your code would be invalid, browsers could ignore the data, and it would cause problems if the name ever became a standard HTML attribute. Therefore, most developers
- [Easier Ajax With the HTML5 FormData Interface](https://www.sircodex.com/easier-ajax-with-the-html5-formdata-interface/) - If you’re developing a single-page application or practicing progressive enhancement techniques you’ll often need to intercept form submissions and translate them to an Ajax call. Let’s look at a typical form: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
- [Creating JavaScript Sliders Using Twitter Bootstrap 3](https://www.sircodex.com/creating-javascript-sliders-using-twitter-bootstrap-3/) - Twitter Bootstrap 3 is one of the best CSS frameworks for developing and designing content management systems. It is easy to design blogs, portfolios and profiles using Twitter Bootstrap’s grid layouts. One thing that many types of CMS have in common is the “Slider”. A sequential automated display of images, a slider can be anything:
- [CSS3 Inheritance Tips and Tricks](https://www.sircodex.com/css3-inheritance-tips-and-tricks/) - It’s easy to overlook the cascading features of stylesheets. Most developers are aware of the inherit keyword but there are a few new inheritance features in CSS3 you may not be aware of… property: inherit; The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the
- [HTML5 Geolocation](https://www.sircodex.com/html5-geolocation/) - The Geolocation API of HTML5 helps in identifying the user’s location, which can be used to provide location specific information or route navigation details to the user. There are many techniques used to identify the location of the user. A desktop browser generally uses WIFI or IP based positioning techniques whereas a mobile browser uses
- [Integrating impress.js into WordPress](https://www.sircodex.com/integrating-impress-js-into-wordpress/) - Awesome Impress.js Presentations Before we dig deeper into plugin implementation, you might want to look at some of the amazing presentations created with this powerful library. Let’s look at some of the creative uses of impress.js. Great Wall of Tees Building a Personal Website with Impress.js jgog.in Website/Portfolio Pongoweb.it from creators of PongoCMS These presentations
- [HTML5 Web Storage](https://www.sircodex.com/html5-web-storage/) - One of the reasons that certain technocrats favor native applications is their ability to store data locally on the client. HTML5 made a breakthrough by allowing web applications to store data in the browser. Although cookies are available to store data in the browsers, there are certain disadvantages to that – which were addressed with
- [The HTML5 form Attribute](https://www.sircodex.com/the-html5-form-attribute/) - HTML4 and XHTML insisted that all form elements — including the submit button — were contained within a single … block. While this is rarely an issue, it can lead to design challenges and I certainly recall struggling with early versions of ASP.NET which enforced a single form on every page. In general, if you
- [CSS3 Transition Property Basics](https://www.sircodex.com/css3-transition-property-basics/) - Which CSS Properties Can Be Animated? In general, a transition can be applied to any CSS property which has a discrete value which changes between the start and end states. Typically, this includes layout properties (width, height, padding, margins, borders), positional properties (left, right, top, bottom), transformations, font sizes, colors, background colors and opacities… width,
- [Setting HTML Checkbox and HTML Radio Button Defaults](https://www.sircodex.com/setting-html-checkbox-and-html-radio-button-defaults/) - If you’ve been coding on the web for more than a few minutes, you’ll have used a form or two with checkboxes and radio buttons. Consider the following code: 1 2 3 4 5 6 7 8 9 10 checkbox radio 1
- [Twitter Bootstrap Tutorial – Handling Complex Designs](https://www.sircodex.com/twitter-bootstrap-tutorial-handling-complex-designs/) - Much has been said and written about Twitter Bootstrap these days in the world of web designing and development. Some people call it a boon for web developers with zero designing knowledge, while others call it a blessing for the designers. Whatever it may be, it does things easier and faster. In many scenarios web
- [Create a Customized Print Stylesheet in Minutes](https://www.sircodex.com/create-a-customized-print-stylesheet-in-minutes/) - You’ve seen it before: you designed a beautiful layout and someone walks into your office with a print off and you cringe at the site of your hard work horrifically misrepresented by the printer. Printed versions of a web design are rarely what you’d expect. They take some additional tweaking and some staging. But, an
- [Top 10 Front-End Development Frameworks](https://www.sircodex.com/top-10-front-end-development-frameworks/) - 1. Bootstrap Bootstrap is definitely the most popular and widely used framework, nowadays. It’s a beautiful, intuitive and powerful web design kit for creating cross browser, consistent and good looking interfaces. It offers many of the popular UI components with a plain-yet-elegant style, a grid system and JavaScript plugins for common scenarios. It is built with
- [Even Better CSS3 Toggle Switches!](https://www.sircodex.com/even-better-css3-toggle-switches/) - Radio Button Support An easy one to start with. Radio buttons function almost identically to checkboxes so we can simply apply a class of “switch” to every input to make it work, e.g. first radio button second
- [How to Create a Responsive CSS Centered Image in CSS3](https://www.sircodex.com/how-to-create-a-responsive-css-centered-image-in-css3/) - Image gallery lightboxes have been around for many years. They generally provide a great user experience until you attempt to load an image which is larger than the viewport dimensions. Developers often forget this important check and you’re presented with a centered image which is difficult to remove. The problem can be exacerbated on mobile
- [RIP HTML5 <hgroup> Element](https://www.sircodex.com/rip-html5-element/) - Do you use the hgroup element in your mark-up? It’s probably best not to — the tag is being dropped from the HTML5 specification. We normally think of HTML5 specifications receiving additional features, such as the new element. However, elements can be removed if they offer no compelling benefits. hgroup represented the heading of
- [Fabric.js: Advanced](https://www.sircodex.com/fabric-js-advanced/) - We’ve covered most of the basics of Fabric in the first parts of this series. In this article, I’ll move on to more advanced features: groups, serialization (and deserialization) and classes. Groups The first topic I’ll talk about is groups, one of Fabric’s most powerful features. Groups are exactly what they sound like—a simple way
- [Introduction to Fabric.js](https://www.sircodex.com/introduction-to-fabric-js/) - In this article, I’ll introduce you to Fabric.js—a powerful JavaScript library that makes working with the HTML5 canvas element a breeze. Fabric provides a missing object model for canvas, as well as an SVG parser, a layer of interactivity, and a whole suite of other indispensable tools. It is a fully open-source project, licensed under
- [How to Create a Shuffled Paper Effect in CSS3](https://www.sircodex.com/how-to-create-a-shuffled-paper-effect-in-css3/) - This is a nice effect which transforms a standard boxy-looking element and makes it look like shuffled paper. I recall seeing a similar effect a few years ago where it was handled with images but we’re going to use pure CSS3: View the demonstration and code… It should come as no surprise that :before and
- [Introducing the New HTML5 <main> Element](https://www.sircodex.com/introducing-the-new-html5-element/) - When was the last time we received a new element? HTML5 introduced just nine new structural tags and they’ve been stable for several years: section, article, aside, hgroup, header, footer, nav, figure and figcaption. There are another 20 or so content elements including video, audio, canvas, progress etc. Today, we have a new structural element
- [CSS Techniques for Retina Displays](https://www.sircodex.com/css-techniques-for-retina-displays/) - As many people use their highly portable devices for work and play, device manufacturers seek to enhance their user experience, making their devices simultaneously more powerful and easier to use. Apple gave us a completely new line-up of products that introduced double density pixel screens, creating sharper images on smaller screens. Other device manufacturers are
- [How to Asynchronously Upload Files Using HTML5 and Ajax](https://www.sircodex.com/how-to-asynchronously-upload-files-using-html5-and-ajax/) - The HTML Let’s examine our HTML form again: HTML File Upload Files to upload: or drop files here Upload Files We’ll be uploading files to a PHP
- [Star Wars 3D Scrolling Text in CSS3](https://www.sircodex.com/star-wars-3d-scrolling-text-in-css3/) - I always try to offer practical tips on SitePoint. Really. This isn’t one, but I couldn’t resist it. Without further ado… View Star Wars 3D Scrolling Text in CSS3 (Chrome, Safari or Firefox) How cool is that? No JavaScript, no graphics — just pure HTML5 text and CSS3. It works in Chrome, Safari and Firefox.
- [How to Use HTML5 File Drag and Drop](https://www.sircodex.com/how-to-use-html5-file-drag-and-drop/) - Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration. This is the first in a four-part series of posts which describes how to: enable file dragging and dropping onto a web page element analyze dropped files in JavaScript load and parse files on the
- [How to Apply CSS3 Transformations to Background Images](https://www.sircodex.com/how-to-apply-css3-transformations-to-background-images/) - Scaling, skewing and rotating any element is possible with the CSS3 transform property. It’s supported in all modern browsers (with vendor prefixes) and degrades gracefully, e.g. #myelement { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } Great stuff. However, this rotates the whole element — it’s content, border and background image. What
- [Create Your Own CSS3 Progress Bars](https://www.sircodex.com/create-your-own-css3-progress-bars/) - CSS3 has heralded nothing short of a revolution in website functionality and design. CSS3 allows web developers to create dynamic, flexible and easily modifiable web content, while bypassing cumbersome images and JavaScript plug-ins. This tutorial will show you how to code an impressive progress bar from scratch, using pure CSS3 styles; no images, no JS.Before
- [Style Web Forms Using CSS](https://www.sircodex.com/style-web-forms-using-css/) - A big part of our work as website designers is the ability to make things look good and function well. We spend hours taking the time to make every aspect of our site visually compelling, intuitive, user friendly, accessible and overall beautiful. Our forms are no exception! Our forms should be beautiful, easy to use,
- [How to Create CSS3 Paper Curls Without Images](https://www.sircodex.com/how-to-create-css3-paper-curls-without-images/) - Paper curls have been popular for a few years. The viewer sees a natural-looking slightly curved box but, in reality, it’s an optical illusion created by a shadow at the bottom of the element: Until recently, you’d need to create the shadow as an image in Photoshop, Gimp or another graphics package. Ideally, it would
- [How to Create CSS3 Speech Bubbles Without Images](https://www.sircodex.com/how-to-create-css3-speech-bubbles-without-images/) - I remember my creating my first image-less speech bubble many years ago. It required a long-winded JavaScript function to inject elements into the DOM, some horrendous CSS, looked fairly awful, and didn’t work well in IE5. CSS3 is starting to change our lives for the better. It’s now possible to create a great looking speech
- [How to Build a CSS3 Sliding Menu](https://www.sircodex.com/how-to-build-a-css3-sliding-menu/) - There are various solutions throughout the web, but I struggled to find one matching my requirements: It must use clean semantic HTML5 with no superfluous tags. It must not rely on JavaScript. It must not require additional graphics. It must work on mobile and tablet touch devices. It must degrade gracefully in older browsers (IE7+)
- [Create Your Own WordPress Theme from an HTML Template](https://www.sircodex.com/create-your-own-wordpress-theme-from-an-html-template/) - WordPress has become the most widely used blogging platform in the world, estimated to be used on a quarter of a billion websites online today. WordPress works as a blog, but also as a straightforward content management system, ready to use with search-engine-friendly URLs and fully valid HTML and CSS.With so many sites using WordPress
- [How to Create Custom Events in JavaScript](https://www.sircodex.com/how-to-create-custom-events-in-javascript/) - JavaScript event handling is the basis of all client-side applications. When an event occurs on a target element, e.g. a button click, mouse move, form submit etc, a handler function is executed. An event object is passed to the handler which provides various properties and a number of methods to prevent default actions. One drawback
- [How to Capture CSS3 Animation Events in JavaScript](https://www.sircodex.com/how-to-capture-css3-animation-events-in-javascript/) - CSS3 animations are smooth and quick to implement but, unlike JavaScript, you don’t have frame-by-frame control. Fortunately, you can apply event handlers to any element to determine the animation state. This permits fine-grained control such as playing different animations in sequence. Consider this simple CSS3 animation: #anim.enable { -webkit-animation: flash 1s ease 3; -moz-animation: flash
- [New Repeating Background Image Options in CSS3](https://www.sircodex.com/new-repeating-background-image-options-in-css3/) - In CSS2.1, the background-repeat property had four options: no-repeat, repeat, repeat-x and repeat-y. While these are undoubtedly useful, they don’t permit finer control over the repeating process and tiles will be clipped if they don’t fit the container an exact number of times. CSS3 introduces two new options: space and round… background-repeat: space The space
- [Easy CSS3 Animation with Animate.css](https://www.sircodex.com/easy-css3-animation-with-animate-css/) - Despite my initial reservations over whether animations should be defined in CSS, I have to admit they’re very useful, faster and slicker than equivalent effects in JavaScript. Building great animations isn’t easy, though — it involves a lot of patience, trial, error, testing and vendor-prefix shenanigans. Animate.css makes coding a little more bearable. Simply choose
- [10 Tips for Developing Better jQuery Plugins](https://www.sircodex.com/10-tips-for-developing-better-jquery-plugins/) - There are some great jQuery plugins. The better ones are adopted by thousands of web developers throughout the world. Unfortunately, the worse ones fail and disappear into obscurity. Here are some tips to ensure your plugins reach their full potential… 1. Don’t Break the Chain Unless your plugin returns a value, the last line of
- [Mastering CSS3 Text Shadows](https://www.sircodex.com/mastering-css3-text-shadows/) - Today we are going to focus on the text-shadow. Just to remind you: both properties, while defined in different modules, actually work in a similar way. So if you are already familiar with the box-shadow you will easily understand the basics of the text-shadow’s art. Before we jump into the practice, let’s delve a little
- [Site Pinning: Rotating Overlay Icons](https://www.sircodex.com/site-pinning-rotating-overlay-icons/) - Pinned site with overlay icon It’s a really great way of letting your users know that there’s pending information for them to check into. But what happens if your site offers multiple types of notifications? With websites offering so much functionality nowadays, it’s pretty common for them to also serve up multiple types of notifications,
- [How to Create a CSS3-Only Tab Control Using the :target Selector](https://www.sircodex.com/how-to-create-a-css3-only-tab-control-using-the-target-selector/) - The HTML Here’s our basic HTML5 code. Tab content is contained within a section. The tab itself is the first child and defined as an h2 element with an inner link to the outer section: Tab 1 This content appears on tab 1. Tab 2 This
- [How to Put Your CSS3 on :target](https://www.sircodex.com/how-to-put-your-css3-on-target/) - CSS pseudo-classes which change styles in response to user actions have been with us for many years. You’ve almost certainly used :hover, :active and :focus; I can (only just) remember the excitement of changing IE4’s link colors back in 1997. CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in
- [5 Tips for More Efficient jQuery Selectors](https://www.sircodex.com/5-tips-for-more-efficient-jquery-selectors/) - As the name implies, jQuery focuses on queries. The core of the library allows you to find DOM elements using CSS selector syntax and run methods on that collection. jQuery uses native browser API methods to retrieve DOM collections. Newer browsers support getElementsByClassName, querySelector and querySelectorAll which parses CSS syntax. However, older browsers only offer
- [jQuery Mobile 1.0 Final Released](https://www.sircodex.com/jquery-mobile-1-0-final-released/) - Following a year of thorough testing and debugging by 125 contributors, the final gold version of jQuery Mobile has been released. If you’re developing mobile applications for iOS, Android, Blackberry, Bada, Windows, WebOS, Symbian or MeeGo, you should certainly investigate what jQuery Mobile offers. Before we go any further, I should clear up some confusion.
- [Offline Browsing in HTML5 with ApplicationCache](https://www.sircodex.com/offline-browsing-in-html5-with-applicationcache/) - Offline browsing is becoming increasingly important to web developers and designers. Giving the user the ability to use your website offline has always been a goal, but one that was pretty difficult to reach, to say the least. As we move into the age of HTML5, however, this is changing and you can now take
- [CSS3 Gems: The calc() Function](https://www.sircodex.com/css3-gems-the-calc-function/) - There are many hidden gems in the modular CSS3 specifications. In this post we’ll look at calc(); an incredibly useful property which may change the way you approach layout design. The CSS3 calc() function is primarily used to calculate lengths, numbers, angles, transition/animation times or sound frequencies. However, it allows you to mix measurement types
- [How to Create a CSS3 3D Text Plugin for jQuery](https://www.sircodex.com/how-to-create-a-css3-3d-text-plugin-for-jquery/) - We’re going to make life a little easier with a jQuery plugin. It will do the hard work and generate long-winded CSS3 code such as: text-shadow: -1px 1px 0 #ddd, -2px 2px 0 #c8c8c8, -3px 3px 0 #ccc, -4px 4px 0 #b8b8b8, -4px 4px 0 #bbb, 0px 1px 1px rgba(0,0,0,.4), 0px 2px 2px rgba(0,0,0,.3), -1px
- [How to Create 3D Text With CSS3](https://www.sircodex.com/how-to-create-3d-text-with-css3/) - The depth is created with multiple text-shadows. Each has a zero blur and is increasingly offset from the main text. This graphic shows how the layers are constructed but, in the real example, the colors are similar and the spacing is no more than 1px apart: A few blurred shadows are then applied to make
- [7 of the Best CSS3 Utilities](https://www.sircodex.com/7-of-the-best-css3-utilities/) - CSS3 Please Of all the tools, utilities and generators, I use CSS3 Please the most. The concept is simple — it shows an element with editable CSS3 properties. It’s a quick reminder of the syntax and allows you to play with different settings. Highly recommended. CSSDesk CSSDesk is a tool developed by Josh Pyles of
- [How to Embed Video Using HTML5](https://www.sircodex.com/how-to-embed-video-using-html5/) - So how do you embed video on a Web page using HTML5 syntax? It’s simple: That’s it! That’s all you need to add a video player to your site without any third-party add-ons or embedded code from other sites — just one simple tag. If only it was really that easy.
- [How to Open Dropped Files Using HTML5](https://www.sircodex.com/how-to-open-dropped-files-using-html5/) - Why Open Local Files in JavaScript? Uploading files from an HTML form is clunky. People often use it when transferring multi-megabyte photographs from their camera to a web server. Assuming they locate the file, the upload could take several minutes only to find it was the wrong photo, an unsupported format, or a larger file
- [10 of the Best CSS3 Code Generators](https://www.sircodex.com/10-of-the-best-css3-code-generators/) - I have rose-tinted memories of CSS2.1. Rounded corners may have caused hours of Photoshopping grief, but it was simple. Most developers could recall the few dozen properties without referring to reference books every two minutes. CSS3 changes everything. There are 116 new properties* with multiple vendor prefixes and different syntaxes. No one could be expect
- [How to Examine CSS :active and :hover States in Firebug](https://www.sircodex.com/how-to-examine-css-active-and-hover-states-in-firebug/) - Hands up all those using Firebug. Of course you are. It’d be madness not to. Despite using Firebug almost every day for 5 years, I’m still finding new features and widgets. Here’s one you may have missed… When inspecting links, Firebug shows the default CSS state, i.e. styles applied to a:link. By default, the :hover
- [5 of the Best CSS3 Font Tools](https://www.sircodex.com/5-of-the-best-css3-font-tools/) - Fonts have made the most dramatic visual impact on the web since graphic support was added to browsers. A few years ago, it would be impossible to find a website using anything other than Arial, Verdana, Tahoma, Times New Roman or Georgia (or, heaven forbid, Comic Sans). While there’s nothing wrong with standard font stacks,
- [CSS3 Border-Image](https://www.sircodex.com/css3-border-image/) - A feature that is new in CSS3, but not so new to browsers, is the border-image property. Border-image provides a method to add decorative borders to any element. With the border-image properties you can create decorative borders for elements, beyond simple rounded corners, with images of very small file size or even with gradients. The
- [A Basic HTML5 Template](https://www.sircodex.com/a-basic-html5-template/) - As you learn HTML5 and add new techniques to your toolbox, you’re likely going to want to build yourself a blueprint, or boilerplate, from which you can begin all your HTML5-based projects. In fact, you’ve probably already done something similar for your existing XHTML or HTML 4.0 projects. We encourage this, and you may also
- [How to Detect Browser Support for CSS3 Properties](https://www.sircodex.com/how-to-detect-browser-support-for-css3-properties/) - Feature detection used to be so much easier. Browser sniffing was a reasonable solution in the early days of the web. Developers would check the user agent and run JavaScript code which targeted an application. It was painful but often necessary because browser technologies varied significantly. The rise of web standards reduced the need for
- [How to Use HTML5 Speech Input Fields](https://www.sircodex.com/how-to-use-html5-speech-input-fields/) - I’m lost for words. Which is a shame because I could have dictated this article directly into my browser! The recently-released Chrome 11 has speech analysis enabled by default. If you’re using Chrome, head over to the speech input demonstration page and click the microphone button icon… Impressed? The results will depend on your accent
- [A Better Cookie: HTML5 and Web Storage](https://www.sircodex.com/a-better-cookie-html5-and-web-storage/) - One of the more interesting and useful new features to come out of the HTML5 spec is Web Storage, which provides us with up to 5MB of persistent storage of data for our web applications. In this article, we will be enhancing an example begun in an earlier blog, A Drag and Drop Planning Board
- [A Drag and Drop Planning Board with HTML5](https://www.sircodex.com/a-drag-and-drop-planning-board-with-html5/) - The Drag and Drop API is one of the new JavaScript APIs that let us add dynamic effects to our sites. There are two flavors of Drag & Drop: 1. Dragging elements into other elements, as defined in the Drag and Drop W3C spec. 2. Dragging files from your computer and into a webpage, in
- [What’s New in jQuery 1.6](https://www.sircodex.com/whats-new-in-jquery-1-6/) - The web’s most popular JavaScript library has been updated. jQuery 1.6 is now available for download from: http://code.jquery.com/jquery-1.6.js http://code.jquery.com/jquery-1.6.min.js The jQuery team try to maintain compatibility with older releases. However, while most people won’t experience problems, there’s no substitute for rigorous testing. As well as the numerous bug fixes and speed improvements, there are several
- [How to Create CSS3 Ribbons Without Images](https://www.sircodex.com/how-to-create-css3-ribbons-without-images/) - In my last post, Pure CSS3 Speech Bubbles Without Images, we saw how the :before and :after pseudo-elements could be used to create different effects. In this post we’ll use similar techniques to create a variety of ribbons. Ribbon effects are in vogue. Most designers use positioned images, but we’ll create them without using border
- [How to Draw Quadratic Curves on an HTML5 Canvas](https://www.sircodex.com/how-to-draw-quadratic-curves-on-an-html5-canvas/) - Drawing graphical curves within the browser has never been easy. Until recently, if you wanted a smooth chart, you either had to generate an image or create an SVG on the server. Creating a curve on the fly required ninja JavaScript skills, a mathematics degree and immense patience. The canvas element has changed everything. We
- [Thinking Laterally: Build a Side-scrolling Site Layout with CSS & jQuery](https://www.sircodex.com/thinking-laterally-build-a-side-scrolling-site-layout-with-css-jquery/) - Ever since I saw Tyler Finck’s Sursly.com, I’ve been looking everywhere for an excuse to try out a smooth-scrolling horizontal layout like his. It’s by no means a new trend, but it’s one that few of us have had the opportunity to use, and it’s still unusual enough that you really do notice when you
- [How to Tidy Your WordPress Menu HTML](https://www.sircodex.com/how-to-tidy-your-wordpress-menu-html/) - I love WordPress. I also love clean semantic HTML. Unfortunately, several of the standard WordPress theme functions return code that is a little untidy. For me, the primary culprits are wp_list_pages() and the newer wp_nav_menu(); both return an unordered list of page links typically used for page menus and sitemaps, e.g.,
- [HTML5 is Dead. Long Live HTML](https://www.sircodex.com/html5-is-dead-long-live-html/) - The Web Hypertext Applications Technology Working Group (WHATWG) — the organization which instigated HTML5 — has announced they are dropping version numbers. HTML5 is complete. The new standard is simply “HTML.” The announcement was made by specification editor Ian Hickson. His blog post states that the HTML standard has become a living document: The specification
- [HTML5 and the New W3C-Endorsed Logo](https://www.sircodex.com/html5-and-the-new-w3c-endorsed-logo/) - Are you creating glorious HTML5 websites? Why not let the world know by adding the new HTML5 logo to your website… The W3C unveiled the new logo this week. Its objective: to create a striking visual identity for the open web platform. So what does that mean?… Like many developers, I often view the world
- [Don’t Forget About HTML5’s “Little Guys”](https://www.sircodex.com/dont-forget-about-html5s-little-guys/) - If you’ve been keeping on the cutting-edge of new web technologies, then you’ve probably started to incorporate some HTML5 goodness into your web pages and web apps. Maybe you’ve started using the simplified methods for declaring the doctype and character encoding. You might have begun leaving off "type=text/javascript" or "type=text/css" when inserting scripts and linked
- [Responsive Web Design with HTML5 and the Less Framework 3](https://www.sircodex.com/responsive-web-design-with-html5-and-the-less-framework-3/) - What’s responsive web design? It’s a relatively new technique, first described in mid-2010 by Ethan Marcotte in his A List Apart article of the same name. Put simply, it involves providing a number of site layouts adapted to various screen widths, and then serving those layouts accordingly thanks to the use of CSS3 media queries.
- [Web Design Resource: The Periodic Table of the (HTML 5) Elements](https://www.sircodex.com/web-design-resource-the-periodic-table-of-the-html-5-elements/) - If you’re interested in learning HTML or already know HTML but want to find out which elements are in use in HTML 5, then you might find Josh Duck’s Periodic Table of The Elements to be a useful resource. The colorful table is laid out in a similar style to the scientific periodic table of
- [Seven Free Slab Fonts to Give Oomph to Your Headings](https://www.sircodex.com/seven-free-slab-fonts-to-give-oomph-to-your-headings/) - The term Slab Serif is an umbrella term covering many font sub-categories. Slab fonts are closely associated with old posters such as the famous “Wanted” posters of the American Wild West. They originated in the nineteenth century when letters for printing were carved out of wood. The fine and very thin lines which are achievable
- [Real World HTML5 & CSS3 in Internet Explorer 9](https://www.sircodex.com/real-world-html5-css3-in-internet-explorer-9/) - In the world around us, people want solutions to their problems. They want to use stuff that works and they want to get things done quickly and efficiently. But more importantly, they want to be able to focus on the things that really matter. As web developers building apps and websites in the real world,
- [Is HTML5 Dirty?](https://www.sircodex.com/is-html5-dirty/) - Last week, I wrote about Google’s mod_pagespeed. Some of the module’s features brought out some negative reactions in the comments; notably, the fact that mod_pagespeed can be set to remove quotes from around attributes in your markup, and remove unnecessary attributes (such as type="text" on an input element). The commenters noted that they were uncomfortable
- [Has HTML5 Killed Silverlight?](https://www.sircodex.com/has-html5-killed-silverlight/) - According to Microsoft, “Silverlight is a powerful development platform for creating engaging, interactive applications for many screens across the Web, desktop, and mobile devices.” Now at version 4, Silverlight was released in 2007 and is a runtime available as a plug-in so you can run rich animations and video in your browser. Sound familiar? Yes,
- [Shadow Boxing: Image-free, CSS3, Glossy Buttons](https://www.sircodex.com/shadow-boxing-image-free-css3-glossy-buttons/) - Buttons. As web monkeys, we use a lot of them. Search buttons, buy buttons, send buttons, close buttons. You generally find them at the most important intersections of our websites, so we naturally want them to look special.Traditionally, this has been a job for CSS background-images—and no doubt, often still is. The major drawback with
- [The WDS Title Sequence Explained: HTML5 and CSS3 in Action](https://www.sircodex.com/the-wds-title-sequence-explained-html5-and-css3-in-action/) - I’ve just returned from Web Directions South in Sydney, where I saw some inspiring speakers geeking out on stage, and mingled with a bunch of other web-minded individuals. But the most inspiring thing I saw happened in the first ten minutes of the conference: Cameron Adams’s opening title sequence. At first sight, it’s just an
- [The W3C and the “HTML5 Isn’t Ready” Backlash](https://www.sircodex.com/the-w3c-and-the-html5-isnt-ready-backlash/) - The following InfoWorld article spread like wildfire throughout the web yesterday — W3C: Hold off on deploying HTML5 in websites. The story was prompted by comments from W3C official Philippe Le Hégaret. The community has been in uproar although I suspect many of Le Hégaret’s quotes were used selectively or taken out of context. Even
- [Cross-Browser HTML5 Canvas with Fallback](https://www.sircodex.com/cross-browser-html5-canvas-with-fallback/) - Canvas is a relatively new HTML5 technology that provides a “scriptable” image. You can add a element to your page and draw on its surface using JavaScript commands. It’s very fast and could be used for action games and animated charts — see “3 Great JavaScript & Canvas Examples.” A canvas tag can be
- [CSS3 Border Images for Beautiful, Flexible Boxes](https://www.sircodex.com/css3-border-images-for-beautiful-flexible-boxes/) - The CSS3 buzz is in full swing, and many of CSS3’s most useful properties are receiving a fair bit of attention. Properties like border-radius, text-shadow, custom gradients, and even CSS3 transitions have been shown to be quite practical, resolving real-world design issues with minimal markup and maintainable code. One CSS3 property that’s been overlooked in
- [HTML5 and Even Fancier Forms](https://www.sircodex.com/html5-and-even-fancier-forms/) - It’s a brand-new world for those of us working in the web industry. Browser vendors are ahead of the game, and are implementing HTML5 support before it becomes a W3C standard. Many web developers are already taking advantage of this by coding websites in HTML5. There’s the much ballyhooed video element, which allows you to
- [5 Reasons Why You Can Use HTML5 Today](https://www.sircodex.com/5-reasons-why-you-can-use-html5-today/) - In our recent poll, almost half the respondents stated it was too early to use HTML5, while 3% claimed they would never use it. While risks exist, there are several good reasons to invest in HTML5 today. 1. The HTML5 Specification Will Never Be Complete Perhaps that’s an overstatement, but let me explain further…Developers understand
- [Is HTML5 Viable Today?](https://www.sircodex.com/is-html5-viable-today/) - We love new technology at SitePoint so it’s easy to be swept along with the excitement and potential of HTML5 — given that “HTML5″ is now a marketing term comprising every cool new web technology. It’s our duty to report the latest techniques so you can adopt them for your own projects.However, our recent poll
- [Adobe Illustrator CS5: New Features](https://www.sircodex.com/adobe-illustrator-cs5-new-features/) - With the latest incarnation of the Adobe Suite, Illustrator CS5 brings a slew of new features and improvements to one of my favorite apps. Thankfully, Adobe has considered what worked and, more importantly, what did not: the main feature additions center on actual drawing. Stroke Width One of the great pains of previous versions has
- [7 Tips To Make Your Web Site Mobile-friendly](https://www.sircodex.com/7-tips-to-make-your-web-site-mobile-friendly/) - 1. Style for mobile Congratulations — you’ve decided to embrace mobile, one of the fastest growing segments on the Web. The first thing you’ll notice is how diverse the mobile ecosystem is. Browsers, screen sizes, connection speeds — everything is different. The Web community enjoyed a brief period of iPhone domination, when addressing one browser/screen
- [19 Spooky Icon Sets For Halloween](https://www.sircodex.com/19-spooky-icon-sets-for-halloween/) - It never hurts to give your site a “fresh coat of paint” by freshening up your icons. The holidays give you the perfect excuse to swap out some images and give your projects a fresh look for a few weeks. With that in mind, we’ve gathered up 19 Halloween-themed icon sets for you. The majority
- [Seven jQuery Plugins That Let You Do Cool Stuff With Images](https://www.sircodex.com/seven-jquery-plugins-that-let-you-do-cool-stuff-with-images/) - In a recent post, I wrote about jQuery plugins that let you easily add a stylish galleries and slideshows to your site. Today, we have six plugins that let you add some cool functionality and interesting effects to images. As a designer, I found plugins like this to be so useful because I would never
- [19 Firefox Add-ons For Designers](https://www.sircodex.com/19-firefox-add-ons-for-designers/) - Are you a web designer who wishes you could do more in one handy spot instead of having multiple programs open? Well, thanks to the enormous Firefox add-on development community, your web browser can do almost everything for you. We already covered Firefox add-ons for developers, but we couldn’t leave out the people that sit
- [Google, HTML5 and Standards](https://www.sircodex.com/google-html5-and-standards/) - While there were lots of trumpets and elephants accompanying recent announcement of Google Wave, one of the things that could have slipped by was their public commitment to building Wave in HTML5. Not long afterwards the W3C announced the discontinuation of the XHTML2 Working Group, to ‘increase resources on HTML 5‘ in their words. It’s
- [6 Tools for Testing Designs on Mobile Devices](https://www.sircodex.com/6-tools-for-testing-designs-on-mobile-devices/) - One of the most important processes when designing for the web is testing. We’re all aware that one of the challenges of web design is ensuring the site looks good in multiple browsers. As the mobile web becomes more and more important, you’ll also want to know how your existing site or widget looks on
- [How To Draw An iPhone App Icon In Illustrator](https://www.sircodex.com/how-to-draw-an-iphone-app-icon-in-illustrator/) - Following on from yesterday’s post on how to draw a vector iPhone, here’s how to make an iPhone style icon in Illustrator. 1. Use the Rounded Rectangle to draw a square with round corners. Hold down the Shift key as you drag to create a square. 2. Open the Gradient and Color palettes. Make sure
- [How To Draw A Vector iPhone In Illustrator](https://www.sircodex.com/how-to-draw-a-vector-iphone-in-illustrator/) - I wanted to follow up on the series I wrote a couple of weeks ago about the drawing tools in Illustrator. Using mainly vector shapes and some gradients, I’m going to create a vector drawing of an iPhone in Illustrator. The joy of creating it as a vector is that once you’ve drawn it once,
- [Bulletproof HTML: 37 Steps to Perfect Markup](https://www.sircodex.com/bulletproof-html-37-steps-to-perfect-markup/) - This article highlights and answers some of the most frequently asked questions about HTML. HTML is the foundation of the Web, and both developers and designers need to understand it. 1. What is HTML? HTML, or Hypertext Markup Language, is a markup language that’s primarily used for Web documents. Any document that’s written in a
- [My Top Ten CSS Tricks Article](https://www.sircodex.com/my-top-ten-css-tricks-article/) - CSS can be complex, and as each new browser version is released, you may well find yourself struggling to keep up with the latest tips and hacks. But those tips and hacks will save your sanity! Here, I’ve put together the ten tips that I find most helpful, to save you the hassle of scrounging
- [CSS and Round Corners: Build Boxes with Curves Article](https://www.sircodex.com/css-and-round-corners-build-boxes-with-curves-article/) - One of the main reasons why designers use images on a Web page is to create curves and round corners. It’s currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied. The problem? Putting these images into an HTML document with a table layout can create a
- [Introduction to Browser-Specific CSS Hacks](https://www.sircodex.com/introduction-to-browser-specific-css-hacks/) - More and more Web developers are ditching tables and coming round to the idea of using CSS to control the layouts of sites. And, given the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management, why not? The Problem with CSS Historically, the main problem with using CSS
- [Customizing the Autoscrolling Icon](https://www.sircodex.com/customizing-the-autoscrolling-icon/) - Here’s one from the ‘you could, though you probably wouldn’t, but it’s nice to know you can‘ department. Tom was playing around with FireFox yesterday and came to the realization that the auto-scroll icon is actually inserted dynamically into the document’s HTML, but outside the HEAD and BODY — meaning it’s still within the clutches
- [Color Scheme Generator updated](https://www.sircodex.com/color-scheme-generator-updated/) - The color-scheme generator that used to be at pixy.cz has been updated with a new version, now permanently housed at www.wellstyled.com/tools. I like it much better – it’s more intuitive, it looks cleaner, AND you can “save” or bookmark the color scheme with a URL! The new interface gets rid of the confusing hue/saturation/brightness entry
- [XHTML Web Design for Beginners – Part 2](https://www.sircodex.com/xhtml-web-design-for-beginners-part-2/) - Do you have no prior experience of Web Design (or very little)? If you’ve dabbled with exporting HTML from Microsoft Word, or played around with FrontPage a little and want to understand what you’re doing, then this article’s for you! Today we’ll explore exactly what XHTML is, and how you can use it to start
- [Build Your Site Navigation With CSS](https://www.sircodex.com/build-your-site-navigation-with-css/) - Could anything look more boring than basic text links? Plain text displayed in the not very attractive colors of blue and purple, with no background colors, no rollovers, and nothing to make the page visually appealing… This description might accurately describe plain text links, but text links styled using CSS properties are something else entirely!
- [Build User-Controlled Style Sheets for Greater Accessibility](https://www.sircodex.com/build-user-controlled-style-sheets-for-greater-accessibility/) - Much of the discussion surrounding Web accessibility concerns users who are legally blind and require a text reader such as JAWS. But organizations such as the American Foundation for the Blind also support sighted people who have a serious visual impairment. Visitors with impaired sight can read Web pages, but may need a high-contrast, large
- [Introduction to CSS Shorthand](https://www.sircodex.com/introduction-to-css-shorthand/) - One of the many great possibilities in CSS is the use of shorthand properties, which let you specify several properties by using only one. If you have started to learn about CSS and implement it on your Web pages, you’ll immediately see the benefit of using these shorthand properties. CSS shorthand makes it even easier
- [What is Liquid Design?](https://www.sircodex.com/what-is-liquid-design/) - The Internet is still in its infancy as a medium but, slowly — very slowly — designers are coming to terms with it. Well, a small contingency of designers anyway. The sad fact is that the vast majority of Websites you’ll come across, especially small-medium sized business sites, would be better off being made into
- [Fancy Paragraphs With CSS](https://www.sircodex.com/fancy-paragraphs-with-css/) - Long pages of text look dull. Often users don’t want to trudge through them, and all the time you spent carefully crafting those sentences goes to waste. But with just a few simple CSS tricks we’ll discuss here, you can break your pages up so they don’t seem as daunting. Even better, you only have
- [Spamproof Your Site](https://www.sircodex.com/spamproof-your-site/) - Anyone who operates their own Website knows that you need to provide a way for visitors to contact you by email. The big challenge is to provide easy email access to your visitors, without letting junk mail flood your inbox. The techniques described in this article have enabled me to dramatically reduce the amount of
- [Javascript to PHP](https://www.sircodex.com/javascript-to-php/) - Dream Rollovers Hi! Can you tell me why all the rollovers that I make in Dreamweaver don’t work in Mac Explorer v.5? Is there any way to make them work? Thank you very, very much… Amando from Mexico City. Amando, I haven’t looked at Dreamweaver’s rollover Javascript. Sometimes simpler is better. I’m quite fond of
- [The 5 Golden Rules of Professional Design](https://www.sircodex.com/the-5-golden-rules-of-professional-design/) - The Web design world is filled with excitement and experience, creativity and skill. And these days, the growth in the freelance design industry means that even novices have the chance to be paid for their site designs. Here are 5 key techniques that every professional designer uses in the development of a client site. Let’s
- [Dr Design Answers your Questions](https://www.sircodex.com/dr-design-answers-your-questions/) - After a very long hiatus, Dr. Design is back! He’s found his stethoscope, donned a white coat, and is now seeing patients. So if your layout’s ailing, you’ve got a chill in your PNGs, or you need a little something for those troublesome stylesheets, why not seek a consultation? The good Doctor is in! Finicky
- [Diary of a Webmaster Part 1 – My Site Design Checklist](https://www.sircodex.com/diary-of-a-webmaster-part-1-my-site-design-checklist/) - Every week I receive an overwhelming number of emails from people who ask me to critique their Websites for design and usability flaws. Hopefully though, if you use a sound process to develop your site, you won’t need a critique. Here are the basic elements I consider each time I design a site — using
- [Mouseover Images](https://www.sircodex.com/mouseover-images/) - One of the most popular "wow" items that’s popping up all over the World Wide Web is the mouseover. In its simplest form, the mouseover is some part of a Web page that causes a change in the page display when the user’s mouse passes over it. More and more creative uses for mouseovers show
- [Designing with Frames – an Introduction](https://www.sircodex.com/designing-with-frames-an-introduction/) - Frames are a feature of HTML that allows you, as the author, to control the layout of a Website in the user’s browser. Specifically, frames allow you to divide the browser window into rectangular sections that can be treated as if they were separate browser windows. They can be scrolled and resized, and loaded with
- [XHTML – An Introduction](https://www.sircodex.com/xhtml-an-introduction/) - HTML as we know and love it, has for many reasons become rather lax and unruly. If you’ve diligently tested your Web pages on different browsers only to find that your carefully crafted masterpiece looks great in IE5x, but becomes an illegible monster in Netscape 4x, then welcome to the club. What can we do?
- [HTML Email – Rich Media the Right Way](https://www.sircodex.com/html-email-rich-media-the-right-way/) - As we discussed last time, increasing numbers of email marketers want to use the ‘power’ of the Internet to better communicate with their customers. How can they harness the graphical and interactive capabilities of the medium? Rich media email. But though the decision might be an easy one, the execution of a good rich media
- [HTML eMail Troubleshooter](https://www.sircodex.com/html-email-troubleshooter/) - So, you want to send HTML email to your clients, prospects or newsletter subscribers. Marketing has descended from upon high and declared it, the small business client wants it, and an executive in management has read about it. Well, why not? The clickthrough rates are noticeably higher on HTML email. Statistics show that customers are
- [Beginners’ HTML – Part 3](https://www.sircodex.com/beginners-html-part-3/) - Welcome to Part 3 of the tutorial! At the end of Part 2, I left you with a challenge. So let’s first explore the solution. Challenge Solution The challenge I set last week was for you to add some links to the pages we’d created, so that users could navigate easily between our 3 pages.
- [Beginners’ HTML – Part 2](https://www.sircodex.com/beginners-html-part-2/) - In this, the second part of the tutorial series, we’ll find out how to create links to other Web pages, as well as links to other parts of our own pages. Our main page is beginning to look a little cluttered now, so we are going to make a brand new Web page that will
- [Beginners’ HTML – Part 1](https://www.sircodex.com/beginners-html-part-1/) - HTML is by far the most popular language on the Web today. Without it, the Internet wouldn’t be anything like it is now. HTML can be thought of as the building blocks of the Internet – like the bricks and mortar of a house. So it’s a must for every Web developer to learn! There
- [The Trick to Rounded Corner Tables](https://www.sircodex.com/the-trick-to-rounded-corner-tables/) - One technique that has always been of interest to new Web designers is building rounded corners for the tables in their site. So how do they get that “professional” look? . It’s actually a relatively easy task with most graphic editors. It is a technique that makes table layouts look smooth and flowing and gives
- [4 Simple Steps to Coloring your WWWorld!](https://www.sircodex.com/4-simple-steps-to-coloring-your-wwworld/) - Color. The human eye can discern over 16 million different shades of it. I know this fact because just last week I had the opportunity to count each and every one of them on an AOL hometown page I was enjoying. Bless their little hearts, they certainly were thorough ;-) I remember thinking to myself
- [CSS Is Easy!](https://www.sircodex.com/css-is-easy/) - Cascading Style Sheets. The name alone is intimidating, conjuring up images of cryptic code and syntax, too difficult for the layperson to grasp. In reality, however, CSS is one of the simplest and most convenient tools available to Web developers. In this article, I’ll guide you through the basics of CSS, showing how it can
- [HTML Coding Q&A](https://www.sircodex.com/html-coding-qa/) - Q. Which versions of IE and Netscape can read Java & JavaScript? — Agnes A. Netscape 2+ supports JavaScript, and Internet Explorer version 3+ supports JScript. According to StatMarket.com over 90% of Internet surfers have JavaScript/JScript enabled. Q. I would like to be able to offer a subscription, to say, the top 10 marketing newsletters.
- [Color and Web Pages](https://www.sircodex.com/color-and-web-pages/) - Color. It’s all around us. Everywhere we look our world is filled with color. Color can capture our attention, can make us feel certain emotions at times, attract us, repel us, annoy us, entice us. It’s much the same when it comes to web pages. Graphics, colored text and backgrounds, pictures, etc. are some of
- [An Introduction to Cascading Style Sheets (CSS)](https://www.sircodex.com/an-introduction-to-cascading-style-sheets-css/) - This introduction isn’t meant to teach you everything about Cascading Style Sheets, but is rather meant as an overview of what can be done with CSS. Read through this article, and then decide whether or not CSS is right for your site. At the very least, you’ll know what can be done using CSS, so

## Pages

- [Portfolios](https://www.sircodex.com/portfolio/)
- [Home](https://www.sircodex.com/home/) - Learn Web Design & Development with SirCodex tutorials, courses and books - HTML5, CSS3, JavaScript, PHP, mobile app development, Responsive Web Design
- [Copyright Policy](https://www.sircodex.com/copyright-policy/) - Although our mission is providing knowledge to our visitor, We post articles from different sources. . We will must provide Source Link to that website if we copy any article from any other website. If you are official representative of any company whose articles is posted on www.sircodex.com or you think some article infringe the
- [Contact Us](https://www.sircodex.com/contact-us/)

## My Templates

- [Default Kit](https://www.sircodex.com/?elementor_library=default-kit)

## Categories

- [HTML & CSS](https://www.sircodex.com/category/html-css/)
- [CSS](https://www.sircodex.com/category/html-css/css/)
- [HTML](https://www.sircodex.com/category/html-css/html/)
- [HTML5](https://www.sircodex.com/category/html-css/html5/)
- [CSS3](https://www.sircodex.com/category/html-css/css3/)
- [jQuery](https://www.sircodex.com/category/jquery/)
- [JavaScript](https://www.sircodex.com/category/javascript/)
- [WordPress](https://www.sircodex.com/category/wordpress/)
- [Responsive Web Design](https://www.sircodex.com/category/responsive-web-design/)
- [Bootstrap](https://www.sircodex.com/category/bootstrap/)

