This presentation is a brief introduction to coding webpages. Let it serve as your jumping-off point for understanding the core technology frontend software developers use daily. You'll especially enjoy this article if you're starting web frontend programming. You'll find this article useful if you want to better understand aspects of work that your technical teammates or customers do.

1. Coding a Webpage
KenTabor

2. Ken Tabor
Cloud Application Architect
Programming 35+ years
40+ conference talks,
workshops, classes
@KenTabor

3. Let’s get it started !
Coding a Webpage

4. Core Technologies
1. CSS
2. HTML
3. JavaScript

5. #1: CSS
“Cascading Style Sheets”
button {
color: yellow;
background-color: dodgerblue;
border-radius: 10px;
font-size: 2em;
font-weight: bolder;
padding: 0.5em 1em 0.5em 1em;
}

6. #2: HTML
“Hypertext Markup Language”
<h1>Pound Cake</h1>
<h2>American, traditional - dessert course</h2>
<div class="two-col-container">
<p>This is a cake traditionally made from one
pound each of: flour, sugar, butter, and eggs.</p>
<div class="preview-photo">
<img src=“cake.jpg"/>
</div>
</div>

7. #3: JavaScript
“More than scripting; Not related to Java”
const goButton = document.getElementById('order-now');
goButton.addEventListener('click', (event) => {
const zipInput = document.getElementById('zipcode');
alert(zipInput.value);
});

8. 1989
Tim Berners-Lee
Scientific research documents
Web page means what?

9. Developer tools
Bootstrap
Less
Sass
jQuery
React
Angular
Handlebars
Mocha
Jest
Yarn
ESLint
Blarg

10. WWW is
permissionless

11. LIVE
DEMO !!!
😱🙏

12. SquareSpace
Wix
Weebly
Shopify
Wordpress
No Code/Low Code

13. Extra Stuff for You
This deck: slideshare.net/KaDawg
Resources: linkedin.com/pulse/intro-coding-
webpage-ken-tabor
Code sample: github.com/KDawg/PoundCake
Playground: repl.it/@KDawgDFW/PoundCake

14. “The best thing a human being can
do is to help another human being
know more.”
-Charlie Munger

15. Play and
have
fun!

16. What tech do you want to learn?
hello@KenTabor.com
@KenTabor
This deck:
SlideShare.net/KaDawg