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

Advertisements

One thought on “Web-Design Review Part 1

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

    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