Instructor: Cindy Royal, Ph.D.
Week of March 26
Description
We’ll review the building blocks of front-end development: HTML, CSS and JavaScript, and then discuss modern frameworks for their professional application.
Objectives
- Understand the languages of front-end web development
- Describe the concept of responsive design
- Comprehend the ways in which HTML Forms and JavaScript create interactivity
- Understand how developers use frameworks like Bootstrap or content management platforms like WordPress
Instructor Videos
At this point, it is important to highlight that programming is essentially problem solving. Programs rarely work the first time, and the actual act of programming is in how you go about finding a solution to a problem. It is quite gratifying to you and your students when you get something to work! Modeling problem-solving techniques is the best skill an educator can have in teaching coding.
Files – you can find the files associated with this module on this GitHub repository. Use the Download or Clone button and download a zip file of the files.
Resources
In the workshop, we will complete an exercise that demonstrates each of the concepts covered in the vidieos. You may not be able to review all the items during this week, but return to them when you have time and bookmark for future reference.
Additional Tutorials – Depending on your familiarity with these topics and what else you want to learn, you can review the tutorials on my website CodeActually.com.
Responsive Design
Responsive Web Design, A List Apart, by Ethan Marcotte
Frameworks and Content Management
- Bootstrap – Bootstrap is a fronted development framework library that simplifies and provides advanced functionality for Web development features. It was originally a project of Twitter by Mark Otto and Jacob Thornton, but has since spun off on its own.
What is Bootstrap and How Do I Use It?
Other Frontend Frameworks like Bootstrap – Foundation, Skeleton.
- WordPress – WordPress is a well known and widely used content management system. It can be hosted at WordPress.com with minimal functionality and theme choice, or preferably as a self-hosted installation, with a robust developer community that make themes and plugins.
Getting Started with WordPress
Other CMSs like WordPress – There are many other CMSs on the market, each with varying levels of complexity, usage and functionality: Drupal, Wix, Weebly, Squarespace, Medium, Tumblr.
Hosting
- The final thing you need to do in making a website is host it! You can get domains and virtual hosting from many, many vendors, but we now use Reclaim Hosting for student projects. It is relatively affordable and has good customer support. I also maintain a Bluehost account, and have been pleased with their offering, as well.
A Word About Design
There are many resources on design, trends and best practices. In this module, we are focused on coding, but how you design the entire experience for the user is critical. See the Resources page for User Experience Design resources. We will discuss more during the workshop.
Discussion and Assignments
Create a one-page document using html and css. You can start with this template (find testcss.html in the github repository). Use any plain text editor or html editor. You can use the css in the document in the <style> section, as opposed to creating a separate stylesheet, since we are only working with one page. Demonstrate the following:
- Multiple headings for sections of the page
- Paragraphs of content
- Image – add image(s) of your own.
- Links
- CSS – page background, other colors. Any other CSS you want to use to create your desired design.
- If you feel like experimenting with the JavaScript techniques you learned, add something interactive to your page.
- Anything else creative you would like to add to the page.
Upload your html file to #webdevelopment on Slack. Have fun with this. Use whatever resources necessary to solve problems and accomplish your design goals.
HTML/CSS/JavaScript Quiz
When you have completed the videos and reviewed the resources, take this HTML/CSS/JavaScript quiz. It is mainly for your own assessment purposes. See how you do and go back and review any areas you missed.
Finally…
I just want to reiterate that we are covering a lot in this module. These are topics we cover in 2-3 different courses, so to be able to cover everything, we’d need more than a week or a few hours in a workshop. But this overview should provide a foundation and many resources for further development. We’ll do exercises in the workshop, and I can answer any questions.
Extra!!!
Mobile App Development
We won’t have time to cover Mobile App Development in this module of the workshop, but I have provided this demo video for anyone interested in this topic. I can do a brief demo of using XCode and Swift to make a mobile application during a lunch session at the workshop, if anyone is interested. Visit mobile.cindy.digital (starting with the Developing an iPhone App Introduction on the Course Outline) for more information and resources for mobile app development.