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/

coding_notes_summary

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.

progress_bar_tutorialphp_dates_update

vertically_centered_layout_tutorial

css_classes_tutorial

php_happy_bithday_tutorial

parallax_div

navi_bar_under_banner

random_image_code

mouse_over_effectscss_mouse_over_effects_part_2

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!

css_transformations_webdesign_notes

forms_webdesign_notes

java_script_1_webdesign_notesjava_script_2_webdesign_notes

js_css_effects_webdesign_notes

css_animation_webdesign_notes

php_includes_webdesign_notes

php_gallery_webdesign_notes

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

Web-Design Review Part 1

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/ 

It’s ironic that I lot of these feature fanart of Agate from Trails in the Sky and I’m currently replaying SC. Agate is still my Legend of Heroes husband and Estelle is my sister and Tita is my adopted daughter. There are so many characters I like in this game, but the purpose of this entry isn’t to fangirl Trails in the Sky, it’s to repost my notes so here goes…

Basic Content… self explanatory, iframes are ancient news by now. Mobile has taken to stretching them at times and it was never good at scrolling anything other than the body anyway. Oh nostalgia, I remember when iframes where the latest and greatest miracle of webdesign of their time!

Text… again pretty self explanatory… WebKit has moved on from absolutely needing the prefix on the columns, or at least Chrome and Opera have… Firefox is lagging behind though, has been for a while despite it once upon a time being on top.

Cascading Style Sheet… there’s stuff that I still use and stuff that I don’t. I made some updates to the WebKit Scrollbars section in a later tutorial.

Background and Colors… many things remain the same while others have changed, such as the way fixed backgrounds behave on diva. I posted a short video clip about that the other day.

Borders… these are still in use, but there are also other fancier ways to create borders with CSS and images displayed in different style. Personally though I prefer fairly simple borders if at all.

Alignment and Size… these codes are still in use too but there are so many new things that I have talked about and plan to talk about. Inline-Block and Flex divs changed everything for the better!

Tables and Lists… technically they’re both still valid, but I don’t use them as much anymore in favor of divs and spans with before pseudo classes. The before allows for a much larger variety of Unicode and emoji bullets that weren’t possible with li without turning them into images. The numbered lists could still be useful though I rarely need to number things. I’m also planning to elaborate on the benefits of flex over tables later.

Image Maps and Random Elements… these aren’t actual image maps, but a more browser friendly alternative. However, just as the real deal, it’s also a thing of the past. A position relative container div with overflow hidden and a variety of position absolute diva inside it are much more convenient these days. As for the random elements, I did a highlight on them later since they still work for rotations and the like.

Audio and Video… I learned this because I could, I figured out the have script for fun, I’ve never really used this though. The custom controls worked though the default controls did the same job with a lot less code, knowing the JS might lead to more creative alternatives, such as activating sounds on a certain cue and so on. Though I’ve never used it, it exists for a reason and was very likely creatively used by someone somewhere. If anything it’s a good JS exercise. Enjoy!

More to come in part 2!

basic_content_webdesign_notes

text_webdesign_notes

cascading_style_sheet_webdesign_notes

background_and_colors_webdesign_notes

borders_webdesign_notes

alignment_and_size_webdesign_notes

tables_and_lists_webdesign_notes

image_maps_and_random_elements_webdesign_notes

audio_and_video_webdesign_notes

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