Core 1 Interaction

September 12, 2023

Debugging

Let's see where we got stuck. And some methods how we can unstuck ourselves.

By searching online
By talking to Chat GPT
By asking each other for help and sharing our code.

Entry 1 Review

Let’s take a look at some of your entries for this week.

I’d like you to explain your theme and then show us the page for your first entry.
- How did you make use of hierarchy
- Showcase the elements you used and why
Also tell us what your challenges there were, and where you’d like to improve/expand with more time and skills.

L3: CSS!

We’ll start to make these entries look good.

An Intro to CSS

Demo time!

We’re going to work through getting a stylesheet connected and trying out some styles.

First let's restructure our directory.

In VS Code let's make a couple new files so that our directory looks like this.
```
└── harmonic-collection/
├── assets/
│   └── main.css
├── index.html
├── entry-1/
│   └── index.html
└── entry-2/
	└── index.html
```
- Inside our harmonic-collection folder
  - we made a folder called assets
    - with a file named main.css
  - we made a index.html, so we don’t have to remember our URLs.
  - we made a folder for our entry-1
    - and also put an index.html file in it
  - we also made folder for our entry-2
    - and also put an index.html file in it

Remember, index is a special name that will load when you leave off the filename from a URL, so it's a bit easier to write links like that. But if it's easier for you, you can also give your files a name like, entry-1.html for example.

Now, let's open the top-most index.html file in your project repository.

In it, make a list element with two links to our entries:

 <!DOCTYPE html>
 <html>
   <head>
	 <title>Harmonic Collection</title>
   </head>
   <body>
	 <h1>Harmonic Collection</h1>
	 <p>Your name</p>
	 <ul>
	   <li>
		 <a href="entry-1/index.html">Entry 1</a>
		 <a href="entry-2/index.html">Entry 2</a>
	   </li>
	 </ul>
   </body>
 </html>

We’re officially a web site now, with multiple pages! And then as we go forward, remember to add links to your main index page!

In entry-2, let’s experiment with adding some styles to our page:
- Try some inline styles on an element, first
- Move these up to a <style> tag in your <head>
- Create an entry-2.css doc and move your styles over there
- Add a <link> to this from the page’s <head>:
```
 <!DOCTYPE html>
 <html>
   <head>
	 <title>Entry 2</title>
	 
	 <link href="../assets/main.css" rel="stylesheet">
   </head>
   <body>
	 
   </body>
 </html>
```
This is generally the way we’ll be working with styles, with a separate, linked CSS file.
Be sure to commit your work into your repo and push as we go along, as is custom! If it is only on your computer, it’s not online.

Homework

Read the whole CSS lecture above, in detail. Again, we’re going to have to fly through this stuff, to some extent—but I expect you to use these as references for your work.
Finish Paul Ford's What Is Code?. and Upload your reading response as a jpeg to this are.na channel.
- It can be a sentence or two.
- It can be an illustration, or diagram, or infographic.
- It can be a haiku. It can be a series of photographs.
- It can be quotes from the texts that resonated with you.
- It can be questions that you raised while reading.
- It can be other references that remind you of the text.
- It can be ideas that sparked.
Complete entry-2 for your project
- as always
  - upload your entire harmonic-collection folder as a zip onto Canvas
  - remember to push and commit to GitHub once you are done , make sure that your page is live (double-check the URL, hard-refresh your browser)
This should make use of the various CSS from today!
1. Consider your design: Focus on typography, images and color and how they are shaping and structure your entries. Think about details like alignment, scale, spacing and proportion, and find the CSS properties that will help you achieve what you want to style.
2. Start thinking about the frame: How do you tie entries together with your design. Is there an overarching element? hat is unique for each entry?
Go wild with css-properties! I am excited to see what you come up with.