<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=us-ascii"><meta name=Generator content="Microsoft Word 15 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Aptos;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
font-size:11.0pt;
font-family:"Aptos",sans-serif;
mso-ligatures:standardcontextual;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#467886;
text-decoration:underline;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;
mso-ligatures:none;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=EN-US link="#467886" vlink="#96607D" style='word-wrap:break-word'><div class=WordSection1><p class=MsoNormal><span style='font-family:"Calibri",sans-serif'>Thanks for this! I am sure it will be helpful for people!<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Calibri",sans-serif'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-family:"Calibri",sans-serif'>Dave<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Calibri",sans-serif'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-family:"Calibri",sans-serif'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-family:"Calibri",sans-serif'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal><b><span style='font-family:"Calibri",sans-serif;mso-ligatures:none'>From:</span></b><span style='font-family:"Calibri",sans-serif;mso-ligatures:none'> NFBCS <nfbcs-bounces@nfbnet.org> <b>On Behalf Of </b>Lewis Wood via NFBCS<br><b>Sent:</b> Sunday, May 12, 2024 4:36 PM<br><b>To:</b> 'NFB in Computer Science Mailing List' <nfbcs@nfbnet.org><br><b>Cc:</b> Lewis Wood <lewislwood@gmail.com><br><b>Subject:</b> [NFBCS] VIP html page layout<o:p></o:p></span></p></div></div><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><a href="https://lewislwood.github.io/vip-html-layout/">https://lewislwood.github.io/vip-html-layout/</a><o:p></o:p></p><p class=MsoNormal>I just released my web page layout tutorial/ how I do it. <o:p></o:p></p><p class=MsoNormal>Has the following:<o:p></o:p></p><p class=MsoNormal>1)Detailed web page layout tutorial 7 mp3s about 25 minutes apiece<o:p></o:p></p><p class=MsoNormal>2) Html/css explanation from a VIP perspective and tailwind & bootstrap options. (mp3 included)<o:p></o:p></p><p class=MsoNormal>3) Theme color tester/builder (mpe3 included)<o:p></o:p></p><p class=MsoNormal> a) calculate ratios and ADA compliance<o:p></o:p></p><p class=MsoNormal>b) Analyzer to allow you to see how your colors interact with one another and their respective ratios<o:p></o:p></p><p class=MsoNormal>c) Copy edited theme with color picker to clipboard. Email them and simple to intgrate as a new theme or correct current theme.<o:p></o:p></p><p class=MsoNormal>4) svg Edit and play with and color them (mp3 as well)<o:p></o:p></p><p class=MsoNormal>5) Status demo. Shows and demonstrates various status messages strategies. Timers, max size, mirroring, polite, assertive. <o:p></o:p></p><p class=MsoNormal>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)<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Finally did my first animations in animations.css I have a Lion face as a pulsing heart. I am Leo.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>The walk through is just html & css no javascript. This is not a Javascript nor a typescript lessons.<o:p></o:p></p><p class=MsoNormal>But it includes some great tools:<o:p></o:p></p><p class=MsoNormal>Audio player that scans html, and replaces it with my player.<o:p></o:p></p><p class=MsoNormal>My keyboard handler that is easy to add keys and generate help for those key mappings on the fly.<o:p></o:p></p><p class=MsoNormal>Help system that integrates with keyboard handler.<o:p></o:p></p><p class=MsoNormal>My status handler, for logging, alerts or whatever you want without having to develpe yourself. (demo part is heavy so not meant for production).<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>All is MIT Licensed so have fun!!<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Lewis Wood<o:p></o:p></p><p class=MsoNormal><a href="mailto:lewislwood@gmail.com">lewislwood@gmail.com</a><o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p></div></body></html>