Core 1 Interaction

September 12, 2023


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

Entry 1 Review

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

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.

  1. 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.

  1. 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>
    	 <title>Harmonic Collection</title>
    	 <h1>Harmonic Collection</h1>
    	 <p>Your name</p>
    		 <a href="entry-1/index.html">Entry 1</a>
    		 <a href="entry-2/index.html">Entry 2</a>

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!

  1. 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>
    	 <title>Entry 2</title>
    	 <!-- Remember we have to move up one directory that's why we use ../ -->
    	 <link href="../assets/main.css" rel="stylesheet">
    	 <!-- Your HTML content. -->

    This is generally the way we’ll be working with styles, with a separate, linked CSS file.

  2. 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.


  1. 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.

  2. Finish Paul Ford's What Is Code?. and Upload your reading response as a jpeg to this 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.
  3. 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.