Week 2: The Modern Web

Aug 30

This week we will begin talking about web development languages, tools, and workflow. To goal of the next few weeks is to get acquainted with HTML and CSS in order to write code to build a custom website.

We will start with the basics of authoring webpages with html and css using Visual Studio Code, then will talk about publishing a website using Github pages. This workflow demonstrates how to work locally within a live server environment to prototype for the web. Publishing your work will be done from VSCode using git source control to update files stored on Github and served using Github pages.

Assignment 2: Ode to Things

Objective: Build a website for a collection of objects that bring you joy.

Design:

• Explore possible ways to visually organize a list of items. ie. list or grid layouts
• What kind of content do you need on the page?
• How will you use color?
• Will it have images?
• Will it have text?
• How will that look and feel?

Development:

• Place all HTML and CSS into a single index.html file.
• Make use of necessary HTML elements and CSS selectors to organize content and style the page.
• Prototype locally using the VSCode live server extension

Advanced & Optional:

• Publish as a "Project Site" using Github Pages. The resulting page URL should follow this naming convention: https://rjduran.github.io/ode-to-things. This page should be publically accessible from any browser.
• If you are feeling comfortable with HTML and CSS, explore an aspect of HTML or CSS that is new to you or try using Javascript or a front-end framework.

Resources

• w3Schools.com
• Learning HTML & CSS
• Video: How to Use VS Code and Live Server on Windows
• Video: How to Use VS Code and Live Server on macOS
• Video: How to Use Git with Github on Windows and Deploy with Github Pages
• Code Academy: Learn the Command Line - A great intro to command line concepts and commands.
• Learning Terminal - Look at some of the beginner resources to learn more about the terminal.

Deliverable:

1. A short 1-2 min video screen capture demonstrating your website running locally or on Github Pages. Be sure to briefly introduce yourself and your project, provide an overview of what you made and how it works. Embed the video into your blog post.

   Tip: To create your video you could use OBS, Screencast-o-matic or the built in macOS screen capture tools (CMD + Shift + 5) to document your workflow. Create an account with Youtube and upload your video to generate an embed link for Medium.

2. (Optional) Include a link to your Github repo for the code written. For example, https://github.com/rjduran/ode-to-things.

Submit a link to your blog post on Slack #cmstudio.

Due: Sept 13