Let's Web Dev like its 1999 🎉
A History lesson on Web Development: Then & Now
Ben Ilegbodu
@benmvp | benmvp.com | #BlackIsTech2023
August 11, 2023
Berkeley Coding Boot Camp
HTML5
CSS3
JavaScript
jQuery
Python/Django
Bootstrap
Express.js
React.js
Node.js
AJAX/REST
Database Theory
Bookshelf.js
MongoDB
MySQL
Command Line
Git
<FRAMESET ROWS="150px,*">
<FRAME NORESIZE SRC="header.html" MARGINHEIGHT=15>
<FRAMESET COLS="20%,*,20%">
<FRAME SRC="nav.html" FRAMEBORDER=0>
<FRAME SRC="home.html" FRAMEBORDER=0 NAME=content>
<FRAME SRC="ads.html" FRAMEBORDER=0>
</FRAMESET>
</FRAMESET>
site.html
<FRAMESET ROWS="150px,*">
<FRAME NORESIZE SRC="header.html" MARGINHEIGHT=15>
<FRAMESET COLS="20%,*,20%">
<FRAME SRC="nav.html" FRAMEBORDER=0>
<FRAME SRC="home.html" FRAMEBORDER=0 NAME=content>
<FRAME SRC="ads.html" FRAMEBORDER=0>
</FRAMESET>
</FRAMESET>
nav.html
<HTML>
<BODY>
<UL>
<LI><A HREF="home.html" TARGET="content">Home</A>
<LI><A HREF="about.html" TARGET="content">About</A>
<LI><A HREF="help.html" TARGET="content">Help</A>
</UL>
</BODY>
</HTML><body>
<header> ... </header>
<main> ... </main>
<nav> ... </nav>
<aside> ... </aside>
</body>header { grid-area: header; }
main { grid-area: main; }
nav { grid-area: nav; }
aside { grid-area: ads; }
body {
display: grid;
grid-template-areas: "header" "nav" "main" "ads";
grid-template-columns: 100%;
grid-template-rows: 150px 50px 1fr 30px;
}
@media screen and (min-height: 600px) {
body {
grid-template-areas: "header header header"
"nav main ads";
grid-template-columns: 20% 1fr 20%;
grid-template-rows: 150px 1fr;
}
}11:30
Session #3
12:00
Lunch
13:15
Session #4
13:45
Session #5
<style type="text/css">
<!--
p { margin-left: 40px; }
-->
</style>
<h3>12:00</h3>
<p>Lunch</p>
<h3>13:15</h3>
<p>Sessopm #4</p>
11:30
Session #3
12:00
Lunch
13:15
Session #4
13:45
Session #5
<h3>12:30/H3>
<p><img src="/1x1.gif" width="40">Lunch</p>
</h3><h3>13:15</h3>
<p><img src="/1x1.gif" width="40">Ben
Ilegbodu</p>11:30
Session #3
12:00
Lunch
13:15
Session #4/p>
13:45
Session #5
<h3>12:00</h3>
<p>&NBSP;&NBSP;&NBSP;&NBSP;Lunch</p>
<h3>13:15</h3>
<p>&NBSP;&NBSP;&NBSP;&NBSP;Ben
Ilegbodu</p><BODY
BGCOLOR="#DDDDDD"
TEXT="#000000"
LINK="#0000FF"
VLINK="#0000FF"
ALINK="#FF0000"
><FONT FACE="COMIC SANS MS" COLOR="#FF0000" SIZE="-1">
Weekly Poll
</FONT><TABLE RULES="NONE" WIDTH="95" BORDERCOLOR="#00008B" BORDER="1">
<TR ALIGN="CENTER" BGCOLOR="#00008B">
...
</TR>
</TABLE>a, a:visited { color: red; text-decoration: none; }
a:hover { color: black; text-decoration: underline; }
<section>
<header>
<h1>Weekly Poll</h1>
</header>
<main> ... </main>
</section>section {
border-radius: 3px;
border: 2px solid #00000b;
background: #ddd;
overflow: hidden;
}
header {
background: #00000b;
}
<table>
<tr>
<td class="pod--top-left"></td>
<td class="pod--header">Weekly Poll</td>
<td class="pod--top-right"></td>
</tr>
<tr>
<td class="pod--left"></td>
<td class="pod--content"> ... </td>
<td class="pod--right"></td>
</tr>
<tr>
<td class="pod--bottom-left"></td>
<td class="pod--bottom"></td>
<td class="pod--bottom-right"></td>
</tr>
</table><head>
<script language="javascript">
function sayHello() {
alert("Welcome to BASIC Guru Online!")
}
</script>
</head>
<body onload="sayHello()">alert('start');
var num = getNum(new Date());
alert(num);
if (num < 42) {
alert('here?????');
num = 42;
}
for (var i = 0; i < num; i++) {
document.getElementById('val').innerHTML = num;
alert(document.getElementById('val').innerHTML);
}
Let's Web Dev like its 1999 🎉
A History lesson on Web Development: Then & Now
Ben Ilegbodu
@benmvp | benmvp.com | #BlackIsTech2023
August 11, 2023
RESTART THE TIMER!!!!
I'm honored & excited to be a part of Black Is Tech
I haven't been a part of anything like this
✋🏾 So how many of you were developing back in 1999?
There may be someone who's like: "I wasn't even born in 1999!"
So I'm hoping to share a little about my dev story and walk down memory lane
Or have a history lesson for most of you
We'll hopefully learn some new things along the way
And appreciate where we are, based on where we've come from