My Reflections - Sprint Two

Hey friends — here are my personal reflections for Sprint Two.
In addition to reflecting, I am asked to answer some questions.

coffee and laptop

SPRINT TWO REFLECTIONS

Can you describe the steps you did in this exercise in simple terms?

Sprint 2 Workshop Tech Video: Notes on HTML & CSS Shortcuts

  • $ explorer . will open up the directory you're currently inside in the file explorer.
  • The keyboard shortcut for opening up your chrome developer tools: To view the DOM. Ctrl-Shift i. This takes me to the console in Dev tools.
  • Traversing the DOM is when you click on Elements in the Dev tools, and it will show you the styling. You can select individual things and it will change. The changes are only made on the local copy of the code.

  • How do you link index.css to index.html?

       `<!DOCTYPE html>
     <title>SPRINT 2 WORKSHOP</title>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <link href="index.css" rel="stylesheet" type="text/css">

  • Where can I find fonts?

    Google Fonts

  • How can I change something in index.html with css?

    HTML: Class

          This one has the left aligned class.`

    CSS:

    .red-text {

      color: red;

    }

    HTML: ID

    <p id="name"> JEMMA DIXON</p>

    CSS:

    #name {

      font-size:200pt;
                  color: blue;

    }

    • How do I make my website have multiple pages?

      • You do this with an a tag. (Anchor tag).
      • You need to create another index.html file.

      • In my html file for the homepage, I will write:

        <a href="blog.html">This is an A TAG that links to one of our HTML pages! This totally links to our blog</a>

        SPRINT 2 NEW PAGE

        New page

      • How can I click back from this page to the main page?

        • Take the tag I already wrote from index.html and paste it into the body of the blog.html file.

          <a id="name" href="blog.html">This is an A TAG that links to one of our HTML pages! This totally links to our blog</a>

      • Instead of linking to blog.html, obviously, it's going to link to index.html.

        <a id="name" href="index.html">This is an A TAG that links to one of our HTML pages! This totally links to our homepage</a>

      • What if I want to link to an external website?

      • i.e. to Sprint 2 Curriculum Content

        <a href="https://handbook.eda.nz/foundations/curriculum/sprint-2"> this links to Sprit 2 Curriculum (an external website).</a>

How are you finding working with the timeboxes?

  • I need to stay focused with time boxes. I am finding it very frustrating that I'm not able to push to git. I can stage and commit - everything works up until the point that I need to push to GitHub. I feel this is a barrier to getting on with the work. Sometimes it is difficult for me to move onto the next step without having completed the previous one, and in the case of this course, the next steps obviously build upon one another.

Learn HTML and CSS

What obstacles did you come up against? How did you overcome them?

  • Pushing to GitHub.
  • Call with Joseph tomorrow (Friday)
  • Waiting to hear back from a friend to see if they can help diagnose the problem.

What are of you proud of from this challenge?

I'm glad I've learnt how to create links between web pages! I didn;t know how to do this before.

Add HTML and CSS to your Blog Challenge

Write a small story about HTML and CSS and their relationship. You could personify elements or speak from your own personal experience. The story should capture insight about the nature of HTML and CSS.

HTML is architecure - it is the framework and scaffolding which constructs, for example, an art museum.

CSS is the layout, the artist who paints on the paintings which have been 'layed out' by HTML in the museum. CSS decorates, colours, and moves around the art installations from time to time.

There comes a time when the skeletal/architectural framework of HTML becomes old, and outdated. Perhaps we want to move certain paintings into a new room, and categorise them differently. So, we create a new blueprint. CSS comes along and redoes the interior decoration scheme so that the flow and design makes sense in relation to HTML's new scaffolding.

HTML is an architect, CSS is a designer. With no architecture, you have nothing to design. With no design, you have poor architecture. Both are needed.

Any moments of surprise or joy?

Joy = When I learnt how to create links between web pages! Excited to apply this to creating a Navbar.

If HTML and CSS were animals, which animals do you think they would be? Why?

HTML: Elephant. Why? Reminds me of something strong and sturdy. In other words, we need HTML for websites to exist. It is just associative... CSS: Cheetah. Why? They are beautiful. CSS aims to makes things beautiful.