Web Development

Alden Kane

Prepared for Beacon’s North County

9 February 2023

To Do

1. About Me
2. Thoughts on Building Websites
3. Web Technologies
4. Web Development: My Tools
5. Live Demo
6. Closing Thoughts
7. Practical Session: HTML
8. Questions and Answers

About Me

• From Michigan
• Studied Electrical Engineering
• 5G Radio Engineer
• Computer Vision, Raspberry Pi
• Build websites for myself, former companies, friends, family…
• aldenkane.com
• nonadental.com
• optoswim.com

Thoughts on Building Websites

• Websites all have a purpose – most are trying to sell you something!
• People on the internet are impatient ( NY Times)
• “Above the Fold” → Make sure your website visitors get the most important part of your message communicated on the part of the website that pops up first
• Avoid large walls of text → People don’t like to read → Be visual
• When you do need to communicate a lot of information, use bullet points or lists

Web Technologies: A Trip to the Science Fair

• Text and Photos: HTML (Hypertext Markup Language)
• Specifies what different text in a website functions as (bold, italic, paragraph, heading) and links to images and other places on the web (anchors within a page)
• Posterboard and Construction Paper: CSS (Cascading Style Sheets)
• Allows us to style the text and photos that we put on the web. Used for adjusting colors, fonts, and styles
• Baking Soda Volcano: JavaScript
• Allows for complex functions like animations, logins, games, and applications

Web Development: My Tools

• Atom or Visual Studio Code: A text editor (like Microsoft Word) that you use to edit code (HTML, CSS, JavaScript)
• Download at https://atom.io
• Web Inspector: Google Chrome, Firefox, and Safari have a web inspector that allows you to view and edit the HTML, CSS, and JavaScript on a website
• Terminal: Issue computer commands
• Templates: You can start where other people left off by downloading templates and then customizing them by writing HTML, CSS, and JavaScript

Live Demo: aldenkane.com

• What change does someone want me to make?

Closing Thoughts + Resources

• It can be tough to get started with Web Development
• Tools like Wix and Wordpress are extremely powerful and cut down time to develop a website
• Lots of website builders have off-the-shelf functionalities (like payment processing, checkout, blogging) that would take an engineer weeks and months to build
• w3Schools HTML: https://www.w3schools.com/html/default.asp
• w3Schools CSS: https://www.w3schools.com/css/default.asp
• w3Schools JavaScript: https://www.w3schools.com/js/default.asp
• Questions and Contact: akane2@alumni.nd.edu

Practical Session: Build a Playlist Website Using HTML

​

blog.aldenkane.com

Questions?