Hi all, and welcome to WRIT 135! In addition to honing your writing skills in class this Fall, you'll also be learning how to build and maintain a personal portfolio website with HTML and CSS, how to digitize and share your work, and how to use Adobe Photoshop and InDesign to create graphics and publications. At the end of the course, you will each have curated a website of your blog posts, formal writing assignments, and final Zine. Here is an example of a finished portfolio.
So what is HTML? HTML is the acronym for Hyper Text Markup Language. HTML documents are broken up into content described by HTML tags, for example: paragraphs and headings. Essentially, HTML provides the building blocks for web design - it's the job of a web developer to take those building blocks - tags - and use them in conjunction with content like text, images, and links to build interesting websites. By using CSS, or Cascading Style Sheets, alongside HTML, you will be able to define how you want the HTML elements in your websites to be displayed. CSS gives you control over the layout and presentation of your website.
This digital skills website is intended to provide explanations, examples, reference, and links to online tutorials that will outline each new skill we'll cover as the semester progresses. You can navigate to each week's lesson by navigating to "INDEX" and choosing the appropriate link in each drop-down section of the syllabus in the "I, or by clicking on "WEEKLY WORK" and clicking the appropriate photo link. Once you've navigated to the week's lesson, explore the introductions for all new material.
Click to open the course syllabus.
For the digital portion of the class, you should keep track of the new skills being introduced each week. Select the current week in the index, or revisit topics already covered to improve your understanding.
As the semester progresses, you'll learn a variety of digital skills that can be used to create and improve webpages displaying the blog posts you write for class. Although you'll work primarily from HTML and CSS templates, by the end of the semester you will have the skills necessary to personalize your work.
Interspersed throughout each the weekly tutorials, you will find assignments (listed below) that are designed to foster each digital skill and to give you opportunities for practice writing code, editing photos, or creating publications. Often, these assignments will require you to revisit work you already started - specifically, your blog posts - and to improve them.
Iterative development, then, is the goal for the digital components of this writing course. Each time you update your HTML or CSS documents, you should ask yourself:
What do I like about this blog post?
What can I change to make it better?
What do I know now about website development that I didn't know when I last updated this blog post?
With this goal in mind, when a weekly assignment asks you to update your blog posts to reflect the content of that week's lesson, you will also be asked to send me an email letting me know that you have updated your work. If you choose to make more changes between assignments, you don't need to send additional emails.
In addition to creating and maintaining websites for each of your blog posts, you'll also dedicate a significant amount of the time spent on digital work for this course building an online portfolio. This portfolio will be finalized and submitted at the end of the class. Though your final website is a big project, it shouldn't be a source of stress; like the blog posts, you'll update your portfolio incrementally throughout the semester as you learn more about website development. You'll also have the option to work primarily from templates.
Your final portfolio will not only contain all of the writing assignments you completed in Living in the Age of the Antihero, it will also demonstrate each digital skill, including writing HTML and CSS, editing photos, and using the Adobe Suite, you learn this semester.
Here are lists of all of the assignments that you'll find in the different "Weekly Work" sections.
NOTE: The assignments marked with three asterisks (***) are integral towards creating, developing, and maintaining your final digital portfolio.
Click on the week you want to access - an introduction to each week's material will drop down on your screen. Each dropdown contains a link to the week's content, but the same links can be found by scrolling down to the Weekly Work section.
In each lesson, you'll find assignments interspersed throughout the new material. Each assignment will be clearly marked, and the content of the assignments will often be crucial for your continued progress in the digital portion of the class. Early assignments will include downloading and creating first HTML and CSS documents for you digital portfolio and blog posts, while later assignments will focus more on the maintenance and improvement of these initial documents (see the Iterative Development section of "Assignments"). When you finish all of the assignments for a weekly section, send me an email (see my contact information below) letting me know that you're done so I can check your CS server account for updates.
In the "Assignments" section of the website (see above), you'll find a complete list of the assignments that are spread through the digital skills tutorials.
How to create and edit documents in Google Drive, how and why to star a folder, how to change the sharing settings for a document so that it cannot be changed but comments can be added, etc.
Jump to the lesson!
How to get a CS account for hosting the personal website, how to install Cyberduck (a File Transfer Protocol - FTP - client) to access the account, how to upload HTML documents to Cyberduck, how to download and use Brackets, how to upload the first HTML page you create --- here's a TEMPLATE for the first HTML page. You will modify it with your name and introductory text for this first HTML assignment.
Once you've arrived at the TEMPLATE website, right click and select "View Page Source". Congrats! You've accessed the HTML code for the website, and you can copy and paste this code into Brackets to modify, save, and upload it with Cyberduck!
Jump to the lesson!
More about HTML... Now that you know how to create and upload simple webpages, it's time to learn how you can make more complex websites. To do this, however, you'll need to know more HTML. In the "Week 3" section of this website, you'll be able to link to several tutorials that explain different HTML skills and demonstrate how they can be used.
Visit the example HTML blog posts created for class 9/22/16.
Jump to the lesson!
No matter how interesting the content of your website is, it's important to make your webpages visually exciting as well. CSS enables you to stylize, format, and organize your websites. When you navigate to the "Week 4" section of the website, you'll find resources to learn about CSS, as well as examples HTML and external CSS stylesheets used together!
Jump to the lesson!
This week we'll focus on images: how to find them, how to cite them, how to resize them to fit your web design need, and how to crop them.
Jump to the lesson!
This week we'll go over how to save your writing assignments (Microsoft Word documents) as PDFs that can be linked to your digital portfolio. You'll also begin to develop a format (a table, a series of lists, etc.) to organize your blog posts and writing assignments in your portfolio.
Jump to the lesson!
This week we'll read about color theory and typography to inform the color and font selections you make for your blog posts and portfolio website. We'll look at examples of well-designed website, then discuss popular layouts of different elements - navigation, heading, content, etc.
Jump to the lesson!
This week, we'll go over skills for basic photo editing and graphic creation in Photoshop. We'll talk about how to isolate elements in photos, to combine elements from different images in layers, and to apply visual effects to the layers. We'll also introduce InDesign and discuss how it is used to make publications. We'll look at tools for adding "text" boxes, placing photos, creating columns for text, and making templates.
Jump to the lesson!
Navigate back to the top of the topic index.
Hover over the images below to see the week's lesson they correspond to, then click to access the lesson. Once you've navigated to any lesson, you'll be able to jump to another week's material using the navigation bar at the top of the screen. To navigate to the top of this page, click "Home". To navigate back to the "Weekly Work" section directly, use the back arrow.
If you have questions about any new concepts or weekly assignments, send me an email or stop by one of my scheduled office hours. I check my email several times a day, and should reply within a few hours.
(TA) Eliza McNair: emcnair@wellesley.edu
Current:
Tuesday: 3:00-4:00 PM, Clapp 131
Thursday: 8:00-9:00 PM, Clapp 131