We’ll start off today by looking at your Project 1: Manuscript sketches from last week. We’re going to try and do this by breaking up into smaller groups—so find your name below, and then find your classmates, and (physically) relocate yourself around the auditorium. Try to spread out, as it will probably be noisy:
Group 1: Stella, Vasu, Sanjana, Caroline
Group 2: Ina, Kinjal, Azra, Vidushi
Group 3: Tanvi, Madhura, Giselle, Dayna
Group 4: Sarah, Hamza, Kendall, Lucine
Group 5: Fahila, Shanshan, Sandra, Andre
Group 6: Jocelyn, Sushanto, Mariia, Myriam
Group 7: Dhruv, Dusha, Chi, Keren
Group 8: Osayiuwamen, Shivaranjani, Abhishek, Amaya
Once you are situated, you will present your work to each other. You will have about 40 minutes with just your group, and each group will have about 10 minutes or so with one of us (your instructors) as we roam around the room.
Your 40 minutes gives each of you about 10 minutes to talk through your project. Introduce your classmates to your reading, briefly discuss your response, and then show them your sketches and how they reflect and relate to this content. This should be relatively informal; use Slack to send links to your Figma documents to each other, to follow along. Leave some of your time for your classmates to weigh in. But stick to the clock! Everyone should present.
We will be moving from group to group. When we come to yours, each student will (quickly) show us their work for 2–3 minutes, each. In that time, we’ll focus on formal, aesthetic considerations. Our goal is that one of us should see and comment on every student’s sketches. Let’s see if this works!
We should wrap this up around 10.
We’ll take our break here, slightly earlier than normal. We’ve still got a lot to cover today.
And now, HTML
We’re going to introduce you to our old friend, HTML.
An intro to HTML
Let’s write some code
We’re going to dive right in and make our first web pages, no big deal! We’ll do this all together.
Everyone should follow along on their computers. If you have trouble, we’ll take a look after going all the way through, first. We’ll also have this recording for you to refer back to.
You should have downloaded Visual Studio Code, which we’ll use as our text editor for the course. Get it now, if you have not.
You’ll hear us refer to this as an IDE, for Integrated Development Environment (if you remember our reading). Think of this as a fancy text editor with coding-specific features, like syntax highlighting and tabs. There are many of them! VS Code is probably the most popular, right now. (It is made by Microsoft.)
We didn’t have time to get… into Git, so for now just focus on creating your
index.htmlfile. We’ll talk about Git/GitHub next week.
Also open up GitHub Desktop, which we’ll use to manage our code. Sign in there with your GitHub account (which you should have already created).
Git is version control software, which tracks changes and helps developers work together. GitHub is a very, very widely-used, web-based host for Git projects—known as repositories. You can work with Git via the command line (and even right from VS Code), but we’ll use their Desktop app for now. (This is now also owned by Microsoft.)
Create a repository for your Manuscript. Think of this as your project folder. For consistency, let’s name all our repos
In VS Code, make an
index.htmlfile in the directory of the repository. You can start with this HTML:
<!DOCTYPE html> <html> <head> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <p>This is my first web page.</p> </body> </html>
Then commit this file and push your changes up to GitHub. Think of Git’s commits as tracked, commented, and reversible saves.
Go to your repository on GitHub (the site) and then enable Pages, if it isn’t already.
You should be able to see your page (after a couple minutes) live, on the web:
For next week
Read through the HTML lecture from today at your own pace, studying the various examples and links. We’re going to have to move pretty quickly through these technical lectures in class, but expect you to use these as a resource in your work.
Just because we didn’t talk about it directly does not mean we don’t expect you to know it, and then see you use it. We will be able to tell; this is your engagement.
You will then finish the exercise we start in class as your homework. This is the next phase of your first project, the semantic DOM.
Modify the web page we created together in class with the content for your projects—pulling in the text from your selection, along with your response.
Refer back to the HTML lecture, and structure your document—using appropriate semantic elements to organize the content, as if you are outlining the material. You should make full use of a range of elements and containers.
When you are done, submit
a link to your repo and live URLyour
We will review these at the start of next class. If you get stuck, refer to the recording, look through the lecture again, and then consult each other, before reaching out to us.