I’ve taught Web Programming (Computer B) at GPA from August 2013 – December 2015 (5 semesters). Through each progression of the class, we’ve studied a number of different concepts and I’ve introduced the students to many components of modern web design and programming:
I find the best ways for the students to learn the concepts are for me to:
- Explain the terms and how to use them
- Lead them through coding exercises and website building while displaying the code on the projector
- Copy and match full website designs (on the projector)
- Build templates together to create our own sites
- Modify those templates to incorporate personal elements and interests
The following are just a few of the projects we worked on in class.
(Built with HTML5 & CSS3 – teaching structure & formatting)
This website was inspired by the One Page Resume Site found at CSS-Tricks.com. I found it a particularly good example for teaching website structure, HTML text formatting, and some basic CSS for text formatting.
This site is similar to CodePen.io which I’ve since begin using with students to help them see immediate changes on their sites as they type. The version we coded here is much simpler and requires you to hit the “Run” button in order to display the results in the page frame below the code input fields.
(Built with Bootstrap – teaching frameworks & responsive design)
For our final project one semester, after coding 3-4 other sites (including a Landing Page and Blog) using Bootstrap, I chose the Udemy.com home page as a design to copy and learn from. We used the Bootstrap CSS classes and images pulled directly from the Udemy home page at that time to create cloned HTML/CSS site.
4-page Template Site
(Personalized website based on a template – uses all of the above minus Bootstrap)
The following are some screenshots from the home pages of each student.
To view a LIVE version of each of these websites, please visit the Computer B page at the GPA English website: