Welcome to the webDev Class Hub! This is a repository to help introduce and orient Pitt students to the GitHub collaboration environment.
| Week 1 | In class | For next class |
|---|---|---|
| Mon 10/22 | Welcome! Intro to working in oXygen. Setting up accounts for web server and for GitHub. Getting started with GitHub and our webDevClass-Hub. | Install oXygen software on your own computers. Instructions and license key posted on Courseweb. |
| Wed 10/24 | HTML: shared contexts as controlled vocabularies. The w3c and web standards. Accessing a web server with a secure shell: joining newtFire, SSH keypairs. | Read our Introduction to HTML in preparation for next class. Install Filezilla (or other SFTP client) before next class if you have not done so already. |
| Fri 10/26 | Building on the Web: HTML. Hands-on: SFTP into the Apache Server for newtFire. File directories and their association with web URLs. | Consult our Introduction to HTML as you work on the homework exercise: HTML/CSS Exercise 1. NOTE: Do not submit this assignment on Courseweb. Instead, submit this homework by using SFTP to post to our newtFire web server. |
| Week 2 | In class | For next class |
|---|---|---|
| Mon 10/29 | HTML and Intro to CSS: See ourIntroduction to Cascading Style Sheets (CSS), and w3 Schools CSS Reference as you code. (Also, check out Paletton (or hunt for other color scheme generators on the web) to help think about choosing a balanced color scheme for your website. Experiment with writing CSS to control font, layout, color, backgrounds. | HTML and CSS Homework: Improve the HTML of your index.html file and add CSS from an associated CSS-file. No in-line CSS inside your HTML-file (As with the first HTML Homework, submit this homework by using FTP to post your updated HTML-file and associated CSS-file our newtFire web server.) |
| Wed 10/31 | Digital Studies Certificate: http://www.greensburg.pitt.edu/academics/info/digital-studies HTML and CSS: Validate your HTML: https://validator.w3.org/ Validate your CSS: http://jigsaw.w3.org/css-validator/ TUTORIAL: HTML and CSS tutorial CSS Box Model: https://www.w3schools.com/css/css_boxmodel.asp |
HW-03: Improve your existing HTML and CSS: Add stying to new selectors besides the background (body-element). For ideas, see: w3 Schools CSS Reference and check out colors at: Paletton. Use comments in both HTML and CSS to identify these changes. After uploading to webpage, check to see if your HTML and CSS are valid using the validator sites! |
| Fri 11/02 | CSS: In-line/Internal vs. External CSS SSH Keys: Open CourseWeb Announcement |
Homework-04: Remove all internal and in-line CSS in your HTML files, Improve your HTML by including Semantic Structure, as described in the Semantic HTML tutorial. |
| Week 3 | In class | For next class |
|---|---|---|
| Mon 11/05 | Semantic HTML: Semantic HTML tutorial Example: Our Intro to CSS file. Linking to other files. |
Homework 5: Create a NEW HTML-file called resume.html that includes structure through: <header>, <article>, <section>, <aside>, <footer> as seen here: Semantic HTML tutorial and link it to your Homepage (index.html). See the assignment on the Github Issue: https://github.com/ghbondar/webDevClass-Hub/issues/14 |
| Wed 11/07 | HTML and CSS: class and id attributes; Internal links; Inserting and styling images | HW06 See specific requirements for the assignment in the posted Github Issue. |
| Fri 11/09 | HTML and CSS: Web browsers and display variations, The CSS Box Model tutorial | Homework 7: Style the images and content of one of your web pages using the Box Model: See detailed Homework 7 assignment in the Github Issue. Consult Learn CSS Layout, Flexbox Tutorial, and w3 Schools CSS Reference as you code. |
| Week 4 | In class | For next class |
|---|---|---|
| Mon 11/12 | Controlling layout with Flexbox: see tutorial, with newtFire examples: HTML: Open URL in oXygen: http://newtfire.org; CSS: Open URL in oXygen: http://newtfire.org/nfIndex.css. Hands on work together with HTML and CSS and posting to newtFire. XML that makes graphics: SVG (Scalable Vector Graphics). Drawing elements, and screen grid coordinates. Introductory slideshow Play with w3Schools SVG Tutorial. | Work through the w3Schools SVG Tutorial to complete the SVG basic and SVG shapes pages. Filters, gradients, examples, and reference are optional. SVG Exercise 1 |
| Wed 11/14 | Inkscape: An editor for vector-graphics. Manipulating raster images using Adobe Photoshop: Sample Image | HW09: Take two or three tasteful pictures with your phone or camera and upload them to your computer. Using Adobe Photoshop, resize them to 1024x768 px. Display these pictures, and your SVG-image, inside Flexboxes on your Homepage (index.html) or a new page that is linked to your Homepage. See the Github Issue for additional details about this assignment. |
| Fri 11/16 | Server-sided Includes: 1) DH Course Syllabus: A) HTML for syllabus, B) SSI code: top.html | Use SSI's to add standard formatting to two or more of your webpages. See assignment sheet on github for more details. |
| Week 5 | In class | For next class |
|---|---|---|
| Mon 11/26 | 1) Intro to Javascript; 2) JavaScript Tutorial | HW11: See Github Issue for details |
| Wed 11/28 | Intro to Javascript | HW12: External JavaScript Exercise 1 |
| Fri 11/30 | Class Examples; Toggling with JavaScript; Another class example | HW13: External Javascript Exercise 2 |
| Last Week | In class | For next class |
|---|---|---|
| Mon 12/03 | Discuss Proj Guidelines and Creative Commons licenses | Finish HW13: External Javascript Exercise 2 and Work on Final Course Projects. |
In order for you to participate fully in this shared class space, I need to add you as a collaborator. Set up your own GitHub account and write to me to tell me how to find you.
Now that you're here, you should try to "clone" this repository on your local computer.
Read and follow the instructions here to get started with Git: http://newtfire.org/dh/explainGitShell.html
When you have set up an account and have installed the Git Bash shell locally on your computer, you are ready to experiment with pushing (or committing) new files to this repository. Save a file in your local folder (or the "clone" of this repository), and then use your GitHub client to "push" a file into this online collaboration space. To do this, first commit your changes and write the required commit message. Then you must push in order to sync these changes to the GitHub cloud.
Always be sure to "sync" your local folder to receive any changes pushed to this GitHub repository. At command line, that means, issue a "git pull" (or a "git fetch" and "git merge") command to retrieve changes to the directories from the cloud before you begin working. Always sync your local directory with our cloud directory here on the web when you begin work, and when you conclude work at a local computer.
There are things we'll do together only in the webpage view of GitHub: See if you can find the "Issues" and "Wiki" areas by mousing over the icons on the top (in the new view) or the right-hand (old view) side of the GitHub page: "Issues" is the exclamation point inside the circle, and the "Wiki" pages will be under the icon for a book. We're using the "Issues" page to open conversations about questions, problems, things we need to discuss and fix and work on together. If we formulate a new method or policy we definitely want to follow, we'll post a Wiki page about it. The Issues and Wikis are searchable, and you write in them using markdown syntax, which lets you easily and quickly format headings, lists, bold, italics, or share an image, etc.
Here is our new and revised schedule for this course:
Schedule: https://github.com/ghbondar/webDevClass-Hub/blob/master/docs/index.md