Web-Design Review Part 6

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/


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

Web-Design Review Part 3

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

Progress bar… I haven’t really used this one much since my projects tend to be finished quickly, but it’s great for people who are working on a fansite or long project to let everyone know how they’re doing. It’s also good to use it as a countdown for special dates, video game release dates, your birthday, etc.

Vertically Centered Layout… this used to be done with tables in the past. This was one of my first experiments with flex and when I started to love it.

CSS Classes… a simple example of how CSS classes work.

Happy Birthday… you’ll never forget a birthday when your tech is there to remind you of it and even publicly post a happy birthday. 😄

Parallax… I got the hang of a version of it through experiments though I haven’t been using it much, it still works.

Navigation Bar… a navigation bar appears on top of the page but only when the banner, which would presumably have its own larger navigation, disappears from the screen. There are several ways to do this, here’s a simple CSS alternative.

Random Elements… I highlight on the random element codes, php and JS versions.

Mouse Over Effects… various mouse over effects to show text appearing over an image on hover.









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

Web-Design Review Part 2

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

CSS transformations… ah the time before I fully understood transitions… the codes work just fine, there’s nothing wrong with them, I just later learned that I could do more. As for the transformations, I only really use a few of them. I’ll likely give some of the cooler ones some extra attention in the future.

Forms… I don’t use these in the personal scenes but they are inevitable at work, so I’ll definitely be reviewing all the codes and writing up some new notes. Unlike the other codes from part 1, I haven’t gotten to review these yet since I started with HTML and CSS with the intention of moving on to PHP and JS after that. I have started a bit of the JS review though and drafted some of the notes changes I plan to make.

Java Script… probably the part of my notes that I’ll spend the most time reviewing before moving on to new things. Java Script is a vast world! I already have a new version of a script example that’s clearer than the old one, though they both still work.

JS CSS Effects… this was totally experimental. I’ll be improving vastly on it. It does still work, but I can make it better. New and improved experiments to come!

CSS Animation… I love this code, I use it all the time! The browser prefix isn’t as vital as it used to be. Though in some cases still needed. A light review will do since I’ve been getting plenty of practice with this every time I make a layout.

PHP Includes… lots of interesting stuff here! I use some of it often and other stuff not so much. I’ll definitely give this a thorough review and it’ll be lots of fun! (For a geek like me anyway.)

PHP Gallery… my first real php script! The notes are pretty clear so I’ll just take a quick look. This script will always hold a special place in my heart.

That’s it for the first set of notes. Next up I’ll be looking at some additions and mini tutorials focusing on more specific codes. See you in part 3!








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