Summer 2023: Intro to Web Coding

Coding Time is offering our first course this summer!

The Intro to Web Coding course is suitable for students with some know-how with computers, but have no experience with coding or web development.

Students who have experience creating web sites with tools like Wordpress or Wix in the past will be able to build upon their knowledge and learn to make web pages by code and put them on the internet.

Basic Information

• First course special pricing: $150 for 6 classes
• Length: 6 weeks // 1 class per week // 1.5 hour per class
• Class is in person, in Elk Grove. It is not a remote/zoom class.
• Class location: 8153 Elk Grove Blvd #20, Elk Grove, CA 95758
• Date range: June 24, 2023 to August 1, 2023
• Class time: Tuesday 5:00-6:30pm OR Saturday 11:00am-12:30pm 
• Primarily for high school students, but we welcome slightly younger or older students.
• BYOL - Bring Your Own Laptop. Software and other materials will be provided at no charge.
• (Windows or Mac OS required; not Chromebooks.)
• (If you have questions about laptop equipment, please contact us and we will try to accommodate your needs)

Course Materials / Syllabus

Our course aims to give students an understanding of how a web page is created from scratch in HTML code, and learn about a web server and its role in putting a web site on the internet for the world to see.

We strongly believe in the benefits of unleashing your creativity and the power of learning with a community. It is our instructor's vision that the best way to learn to code is to create a project that you want to create, and in the process of building it, learn about all the elements that you need to know in order to build what you want.

First phase

Goal: Be able to create a web site and put content (text and images) on it, put it on the internet.

• Learn about a web browser and web pages
• HTML Files and your computer/OS
• Learn the basics of HTML, your first web page from scratch
• Headers, paragraphs, images
• Basic styling: Font, colors
• Links to other pages
• Web servers: Putting a web page on the internet
• FTP: WinSCP (Win) / Cyberduck (Mac) to upload files
• Have a URL to share your web site with friends and family

Project: Put up a web page, that has a URL, on the internet. You can visit it from class, from home, from phone, show it to friends!

Second phase

Goal: Learn the building blocks of a web page, basic HTML elements, some CSS

HTML

• h1 - h6 tags: header text
• p tag: paragraph text
• div tag: division box
• img tag: image
• table
  • tr: table row
  • td: table data cell
  • th: table header cell
• form
  • input: text, checkboxes, radio buttons
  • button: submit button
  • select: dropdown

Basic CSS

• Inline styling
• Styling texts
  • color
  • font-size
  • font-family
  • font-weight
  • font-style
• Styling inline text
  • span tag
• Class styling
• Bootstrap or Skeleton CSS
  • Grid system: page layout

Exercise: Learn to recreate a web site's look and feel using your own HTML and CSS.

Project: Think of a topic you like (about some anime, movie, games, etc.), build a web site about it, with text, images and so on.

Third phase

Goal: Learn what Javascript is on a web page, interactivity, programming logic, and the basics of server side code.

Frontend Programming

• Hello world in Javascript
• alert(), confirm() interactions
• console.log(): And the browser console on Chrome/Firefox/Edge
• document.write()
• jQuery: Create interactivity on web pages with ease
• CSS animation and jQuery animation
• CSS box model

Server-side backend Programming

• Introduction to PHP, Python and/or Node.js
• How PHP outputs HTML for the user browser
• Taking in a simple form submission from the browser to the server
• Saving data from the user into a very simple database
• Loading data from a database to show on a web page
• Intercoolerjs: Load from server in real time