Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
1 of 16

Introduction to Coding a Webpage



Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Introduction to Coding a Webpage

  1. 1. Coding a Webpage KenTabor
  2. 2. Ken Tabor Cloud Application Architect Programming 35+ years 40+ conference talks, workshops, classes @KenTabor
  3. 3. Let’s get it started ! Coding a Webpage
  4. 4. Core Technologies 1. CSS 2. HTML 3. JavaScript
  5. 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. 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. 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. 8. 1989 Tim Berners-Lee Scientific research documents Web page means what?
  9. 9. Developer tools Bootstrap Less Sass jQuery React Angular Handlebars Mocha Jest Yarn ESLint Blarg
  10. 10. WWW is permissionless
  11. 11. LIVE DEMO !!! 😱🙏
  12. 12. SquareSpace Wix Weebly Shopify Wordpress No Code/Low Code
  13. 13. Extra Stuff for You This deck: Resources: webpage-ken-tabor Code sample: Playground:
  14. 14. “The best thing a human being can do is to help another human being know more.” -Charlie Munger
  15. 15. Play and have fun!
  16. 16. What tech do you want to learn? @KenTabor This deck: