The codes focus on a specific effect or creative use of coding, the notes have the general basics, the experiments and revisions are self-explanatory.

* = includes a download

Many of these codes are also available at Code Pen.


CSS Hover Effect – A new, easier version. (Code Pen)

Hover Navigation – Another pure CSS hover effect navigation option. (Code Pen)

CSS Dropdown – Pure CSS mouse over dropdown menu. (Code Pen)

Navigation Tabs – Another navigation option with mouse over effects. (Code Pen)

* Inline blocks are better than tables Part 1Part 2 and Parts 3 & 4 – Easier to change when the layout changes and they can even be made responsive with %. (Code Pen)

CSS Transitions – A short code that can make a big difference, hover effects will look smooth and cool. (Code Pen)

* CSS Mouse Over Effects – Part 1 and Part 2 Mouse over effects to show a short description when hovering over a preview image. (Code Pen)

Webkit Scrollbars  – Arrows and stars, image scrollbar examples.

* Parallax  – An experiment I made to learn more about parallax. I also have some Notes  explaining some of the concepts about how parallax works. The experimental code can be downloaded for study. I also added some extra notes and an example for a Parallax div.

* Banner and Navigation Bar  – A banner that scrolls and reveals a navigation bar which stays on top of the page as it continues to scroll. It’s useful if you have a larger navigation on the top banner and want to constantly keep a small one on the screen for easy accesses. The code can also be modified to make the navigation bar visible before the banner scrolls off. No JS required, just CSS. The download has the code, not really any notes on it, but it’s a simple trick so it should be easy to understand. (Code Pen)

Moving Background  – CSS animation effect.

Cursor Special Effects  – Cute cursors and shiny stuff!

Vertically Centered Layout  – An easy way to do this.

CSS Classes  – A few CSS class tricks…

* Birthday PHP  – PHP powered automatically updating birthday wishes that appear on the right day and are hidden the rest of the time. I’ve seen a lot of people talk about their domain and website birthdays. Combining this with the Progress Bars can provide a countdown to your or your site’s next birthday.

* Progress Bar  – Useful for those who like to set up a splash page for their upcoming sites. With this you can show visitors what approximate % of your shrine you’ve completed. There is also a version that can be used to show an upcoming date and countdown to it. The progress bars can be customized with CSS to match your layout. This tutorial is available in php format via the download link, so you can just copy+paste and edit the code. This tutorial mainly focuses on PHP, but it’s very easy to edit, since most of it is just copy+paste+leave-it-alone. The most heavy customization will come from your CSS.

Background Position  – Learn to tile backgrounds from any point on the screen (not just the corners) with pixel precision for a seamless layout.

Background Position Part 2  – This part focuses on centered backgrounds. They can be trickier because their distance from the corners of they screen changes with each resolution, but it is possible to make them seamlessly blend with your layout image. Some basic image editing and math will be needed, but it’s nothing too complicated.


Basic Content  – Header, favicon, meta tags, style, body, html tags, iframes, .htaccess, redirecting urls… (Code Pen)

Cascading Style Sheet  – Class, id, visibility, display, cursors, scrollbars… (Code Pen)

Tables and Lists  – Rows, cols, lists, before, after, special characters… (Code Pen)

Alignment and Size  – Width, height, position, scrolls, layers, padding, margin, float, clear… (Code Pen)

Background and Colors  – Color, picture, position, tiling, opacity, gradients, box shadow… (Code Pen)

Text  – Font, size, color, spacing, style, effects, columns… (Code Pen)

Borders  – Style, color, shape, pictures, effects…

Image Maps and Random Elements  – Divs, CSS, float, relative positioning, changing elements on load, button rotations… (Code Pen)

* Audio and Video  – Audio, video, java script controls, here’s a Download.

CSS Transformations  – Transition, Translate, Rotate, movement, Skew, 3D Rotation, Scale, XYZ 3D Rotantion, Perspective… (Code Pen)

CSS Animation  – Timing, style, keyframes… (Code Pen)

PHP Includes  – Cookies, variables, switch, if, echo, case switch… (Code Pen)

PHP Gallery  – Scandir, arrays, automatic gallery… (Code Pen)

PHP Dates  – Days, months, years, random and round numbers, progress bars…

Forms  – Text box, text area, check box, radio button, combo box, buttons, PHP email forms… (Code Pen)

Java Script 1  – Functions, variables, mouse events, clicks, mouse position, popup, alert, symbols… (Code Pen)

Java Script 2  – Match, replace, math, decimals, count, timed functions, intervals, time out… (Code Pen)

JS CSS Effects  – JS CSS animation, dynamic attributes… (Code Pen)


Keyframes Ball – Fully CSS animation experiment. (Code Pen)

Revisions: Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Part 7  | Part 8

Deviant Art:

18 thoughts on “Web-Design Tutorials, Notes and Resources

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s