Web-Design Tutorials, Notes and Resources

The difference between the notes and tutorials is that the notes are more general and to the point, while the tutorials are more focused on a particular element. Many times there are several ways to achieve something, I tend to take the easiest and most familiar route.

Lastly, I’m only human, if you find a mistake in these, please let me know so I can fix it. You can also post your own take on these techniques and alternative methods. Of course, feel free to post questions too. I plan to make more tutorials as often as life allows.

* = includes a download

Many of these tutorials are also available at Code Pen!

Webdesign Tutorials:

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.

Web-design Notes:

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)

Coding reviews: Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Part 7

Tileable Backgrounds: Batch 1 | Batch 2 | Batch 3 | Batch 4

Network: http://azurelight.net
Deviant Art: http://mikaristar.deviantart.com


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

  1. […] Pen ✨ Code List ✨ AzureLight.net […]


  2. […] Code List 💙 Code Pen 💙 AzureLight.net […]


  3. […] so for personal use. For my visitors, I would recommend looking at the more detailed tutorials on this list. Sometimes studying the basics again can lead to new […]


  4. […] download 1 | download 2 | codepen | list […]


  5. […] This is the past version of my site, Mimi from Digimon, all in one, screenshots taken via iPhone stickers added in post production. The new version isn’t up yet, though there is a new layout with Kaito from Vocaloid. I’m still working on revising my notes and getting stuff organized. I’m going to take a more bloggish direction with my tutorials and notes, sharing them primarily on Word Press and Deviant Art. You can conveniently find them all linked at this list:  https://miliazure.wordpress.com/2017/02/03/web-design-tutorials-and-notes/ […]


  6. […] List: https://miliazure.wordpress.com/2017/02/03/web-design-tutorials-and-notes/ […]


  7. […] List: https://miliazure.wordpress.com/2017/02/03/web-design-tutorials-and-notes/ […]


  8. […] Full List: https://miliazure.wordpress.com/2017/02/03/web-design-tutorials-and-notes/ […]


  9. […] Full List: https://miliazure.wordpress.com/2017/02/03/web-design-tutorials-and-notes/ […]


  10. […] Since I’ve been reviewing coding lately and learning new things I might have missed the first time around, I decided to go over all my tutorials and notes. This is the ultra cute version of them with pixel “stickers” all over. There’s a more plain version of them on the tutorial list: https://miliazure.wordpress.com/2017/02/03/web-design-tutorials-and-notes/  […]


  11. […] download | codepen | more […]


  12. […] More Tutorials: https://miliazure.wordpress.com/2017/02/03/web-design-tutorials-and-notes/ […]


  13. […] More Tutorials: https://miliazure.wordpress.com/2017/02/03/web-design-tutorials-and-notes/ […]


  14. Thanks for the list! You are indeed an inspiration to all with them. ^_^


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s