Web-Design Tutorials and Notes

Links to my tutorials and web-design notes.

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 http://codepen.io/Mikari/ Code Pen!

Webdesign Tutorials:

* Inline blocks are better than tables part 1 http://mikaristar.deviantart.com/art/Inline-Blocks-Are-Better-Than-Tables-662534764 part 2 http://mikaristar.deviantart.com/art/Inline-Blocks-Are-Better-Than-Tables-Part-2-662552180 and parts 3 & 4 http://mikaristar.deviantart.com/art/Inline-Blocks-Are-Better-Than-Tables-Parts-3-And-4-662584926 – Easier to change when the layout changes and they can even be made responsive with %.

http://mikaristar.deviantart.com/art/CSS-Transitions-662346789 CSS Transitions – A short code that can make a big difference, hover effects will look smooth and cool!

* http://mikaristar.deviantart.com/art/Css-Mouse-Over-Effect-661223263 CSS Mouse Over Effects – Two mouse over effects to show a short description when hovering over a preview image.

http://mikaristar.deviantart.com/art/CSS-Mouse-Over-Effects-Part-2-661627288 CSS Mouse Over Effects Part 2 – Two more mouse over effects to show a short description when hovering over a preview image.

https://miliazure.wordpress.com/2017/02/06/webkit-scrollbars/ Webkit Scrollbars – Arrows and stars, image scrollbar examples.

* http://mikaristar.deviantart.com/art/Parallax-600657765 Parallax – An experiment I made to learn more about parallax. I also have some http://mikaristar.deviantart.com/journal/CSS-Parallax-Scrolling-Notes-600479751 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 http://mikaristar.deviantart.com/art/Parallax-div-602859717 parallax div .

* http://mikaristar.deviantart.com/art/Banner-and-navigation-bar-651243760 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.

http://mikaristar.deviantart.com/art/CSS-Moving-Background-Tutorial-627663391 Moving Background – CSS animation effect.

http://mikaristar.deviantart.com/art/Cursor-Special-Effects-Tutorial-610885466 Cursor Special Effects – Cute cursors and shiny stuff!

http://mikaristar.deviantart.com/art/Vertically-Centered-Layout-Tutorial-610640545 Vertically Centered Layout – An easy way to do this.

http://mikaristar.deviantart.com/art/CSS-Classes-Tutorial-603403844 CSS Classes – A few CSS class tricks…

* http://mikaristar.deviantart.com/art/PHP-Happy-Bithday-Tutorial-602684585 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.

* http://mikaristar.deviantart.com/art/Progress-Bar-Tutorial-602358798 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.

http://mikaristar.deviantart.com/art/Background-Position-Tutorial-599484131 Background Position – Learn to tile backgrounds from any point on the screen (not just the corners) with pixel precision for a seamless layout.

http://mikaristar.deviantart.com/art/Background-Position-Tutorial-Part-2-Center-599955243 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.

* http://mikaristar.deviantart.com/art/Otome-Event-2-477622434 Otome Event – A simple otome mini-game script. Download available, you can customize the dialogue and reaction variables to match the character’s personality (shy, flirty, etc.). You can use this to make a different mini-game for any number of characters.

Web-design Notes:

http://mikaristar.deviantart.com/art/Basic-Content-Webdesign-Notes-288798846 Basic Content – Header, favicon, meta tags, style, body, html tags, iframes, .htaccess, redirecting urls…

http://mikaristar.deviantart.com/art/Cascading-Style-Sheet-Webdesign-Notes-288799485 Cascading Style Sheet – Class, id, visibility, display, cursors, scrollbars…

http://mikaristar.deviantart.com/art/Tables-and-Lists-Webdesign-Notes-288792940 Tables and Lists – Rows, cols, lists, before, after, special characters…

http://mikaristar.deviantart.com/art/Alignment-and-Size-Webdesign-Notes-288798203 Alignment and Size – Width, height, position, scrolls, layers, padding, margin, float, clear…

http://mikaristar.deviantart.com/art/Background-and-Colors-Webdesign-Notes-288795724 Background and Colors – Color, picture, position, tiling, opacity, gradients, box shadow…

http://mikaristar.deviantart.com/art/Text-Webdesign-Notes-288793622 Text – Font, size, color, spacing, style, effects, columns…

http://mikaristar.deviantart.com/art/Borders-Webdesign-Notes-288795509 Borders – Style, color, shape, pictures, effects…

http://mikaristar.deviantart.com/art/Image-Maps-and-Random-Elements-Webdesign-Notes-310231251 Image Maps and Random Elements – Divs, CSS, float, relative positioning, changing elements on load, button rotations…

* http://mikaristar.deviantart.com/art/Audio-and-Video-Webdesign-Notes-288798998 Audio and Video – Audio, video, java script controls, http://mikaristar.deviantart.com/art/Audio-and-Video-602710907 download

http://mikaristar.deviantart.com/art/CSS-Transformations-Webdesign-Notes-305927242 CSS Transformations – Transition, Translate, Rotate, movement, Skew, 3D Rotation, Scale, XYZ 3D Rotantion, Perspective…

http://mikaristar.deviantart.com/art/CSS-Animation-Webdesign-Notes-295142508 CSS Animation – Timing, style, keyframes…

http://mikaristar.deviantart.com/art/PHP-Includes-Webdesign-Notes-288792623 PHP Includes – Cookies, variables, switch, if, echo, case switch…

http://mikaristar.deviantart.com/art/PHP-Gallery-Webdesign-Notes-288793211 PHP Gallery – Scandir, arrays, automatic gallery…

http://mikaristar.deviantart.com/art/PHP-Dates-Webdesign-Notes-288793371 PHP Dates – Days, months, years, random and round numbers, progress bars…

http://mikaristar.deviantart.com/art/Forms-Webdesign-Notes-310231634 Forms – Text box, text area, check box, radio button, combo box, buttons, PHP email forms…

http://mikaristar.deviantart.com/art/Java-Script-1-Webdesign-Notes-295142909 Java Script 1 – Functions, variables, mouse events, clicks, mouse position, popup, alert, symbols…

http://mikaristar.deviantart.com/art/Java-Script-2-Webdesign-Notes-295143711 Java Script 2 – Match, replace, math, decimals, count, timed functions, intervals, time out…

http://mikaristar.deviantart.com/art/JS-CSS-Effects-Webdesign-Notes-288798491 JS CSS Effects – JS CSS animation, dynamic attributes…

Coding reviews: 

Part 1: https://miliazure.wordpress.com/2017/02/08/web-design-review-part-1/

Part 2: https://miliazure.wordpress.com/2017/02/08/web-design-review-part-2/

Part 3: https://miliazure.wordpress.com/2017/02/09/web-design-review-part-3/

Part 4: https://miliazure.wordpress.com/2017/02/09/web-design-review-part-4/

Part 5: https://miliazure.wordpress.com/2017/02/09/web-design-review-part-5/

Part 6: https://miliazure.wordpress.com/2017/02/09/web-design-review-part-6/

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

Advertisements

13 thoughts on “Web-Design Tutorials and Notes

  1. […] 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 […]

    Like

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

    Like

  3. […] 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/ […]

    Like

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

    Like

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

    Like

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

    Like

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

    Like

  8. […] 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/  […]

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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