[NFBCS] VIP html page layout

[dandrews920 at comcast.net]

Thanks for this!  I am sure it will be helpful for people!

 

Dave

 

 

 

From: NFBCS <nfbcs-bounces at nfbnet.org> On Behalf Of Lewis Wood via NFBCS
Sent: Sunday, May 12, 2024 4:36 PM
To: 'NFB in Computer Science Mailing List' <nfbcs at nfbnet.org>
Cc: Lewis Wood <lewislwood at gmail.com>
Subject: [NFBCS] VIP html page layout

 

 

https://lewislwood.github.io/vip-html-layout/

I just released my web page layout tutorial/ how I do it. 

Has the following:

1)Detailed web page layout tutorial 7 mp3s about 25 minutes apiece

2) Html/css explanation from a VIP perspective and tailwind & bootstrap
options. (mp3 included)

3) Theme color tester/builder (mpe3 included)

  a) calculate ratios and ADA compliance

b) Analyzer to allow you to see how your colors interact with one another
and their respective ratios

c) Copy edited theme with color picker to clipboard. Email them and simple
to intgrate as a new theme or correct current theme.

4) svg Edit and play with and color them (mp3 as well)

5) Status demo. Shows and demonstrates various status messages strategies.
Timers, max size, mirroring, polite, assertive. 

6) Developer I did this with Vite ts Vanilla stored on github pages. Explain
how to clone, download, create your own. Using designers as staging html &
css prior to integrating. (mp3's included)

 

Finally did my first animations in animations.css I have a Lion face as a
pulsing heart.  I am Leo.

 

The walk through is just html & css no javascript.  This is not a Javascript
nor a typescript lessons.

But it includes some great tools:

Audio player that scans html, and replaces it with my player.

My keyboard handler that is easy to add keys and generate help for those key
mappings on the fly.

Help system that integrates with keyboard handler.

My status handler, for logging, alerts or whatever you want without having
to develpe yourself.  (demo part  is heavy so not meant for production).

 

All is MIT Licensed so have fun!!

 

Lewis Wood

lewislwood at gmail.com <mailto:lewislwood at gmail.com> 

 

 

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://nfbnet.org/pipermail/nfbcs_nfbnet.org/attachments/20240512/9c2578d0/attachment.html>