Coding 101 Workshop

Welcome to Juno College

We’ve been teaching people to code since 2012, and we’re experts at pairing the perfect students with the perfect material and learning environment. How do we know you’ll love Juno?

What We're Going to Cover

The goal of this workshop is to introduce a couple of fundamental concepts of HTML and CSS and get practice writing our first lines of code!

• HTML defines what content is on a website.
• CSS defines how that content looks.

There is a ton to learn about HTML and CSS, and this is only the first step! To learn more, sign up for our Web Development Bootcamp.

Getting Started: Tools

Web Browsers

The main functionality of the browser is to present a web resource in the browser window.

Choose a modern, evergreen, web browser that supports current web standards. Some examples of evergreen browsers include Firefox and Chrome.

Codepen

CodePen is a free online web editor. This is where we will be writing our code and be able to see a real-time preview of what we build. Best of all you can share what you've created for freeeee.

Let's sign up for an account!

Next, let's get set up to build our project for today!

You can view the finished product in full-page mode, or you can view the code.

Once you save the pen, you unlock a few extra features. You get even more features if you verify your email address! I would recommend doing that now!

You can edit the layout of the panels by clicking the "Change View" button.

We're going to "fork" a starter file that has all of the necessary text, image links, and colors for our project today.

Intro To HTML: HyperText Markup Language

HTML: The Content Layer

• HTML is the content of a web site.
• HTML tags describe the content inside of them to the web browser.

    <h1>This tag describes a heading</h1>
    <p>This tag is for paragraphs.</p>
    

Adding Content with HTML Elements

Paragraphs

Paragraphs: whether it's one sentence or more, each paragraph needs its own pair of <p></p> tags.

    <p>This is a paragraph.</p>

    <p>This is a longer paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    

Headings

There are six headings tags ranging from <h1> to <h6> used to describe the hierarchy of the page content. To decide which heading to use, think about how you would arrange an essay outline. The most important title should be given an <h1>, with the second most important getting an <h2>, etc.

    Essay Title == h1

    - Supporting idea == h2
        - point 1
        - point 2

    - Supporting idea == h2
        - point 1
        - point 2
        - First sub-section == h3
                - sub-point 1
                - sub-point 2
        - Second sub-section == h3
                - sub-point 1
                - sub-point 2

    - Conclusion == h2
    

Grouping elements together

Typographic elements like headings and paragraphs on their own don't do the best job of accurately describing what role that content plays on a web site.

To provide that meaning, we can use semantic elements to give our page some structure and grouping. Some examples of the most common semantic elements are:

    <nav></nav>
    <header></header>
    <main></main>
    <section></section>
    <footer></footer>
    

These elements act like containers that we can store our headings and paragraph tags inside of. Nesting one element inside of another like so:

      <header>
          <p>A paragraph nested inside of a header element.</p>
      </header>
    

      <section>
          <h2>My website heading.</h2>
          <p>Lorem ipsum dolor sit amet consectetur.</p>
      </section>
    

Elements with attributes

Images

Images use a self-closing tag, which means they have no closing tag like the heading or paragraph tags.

Importantly, an image element requires some additional information for it to function properly. We give our elements this extra info using an attribute.

When adding attributes, we add them in the opening tag. This is what the syntax looks like:

    <img src="path/to/image/file-name" alt="Description of the image goes here!">
    

• The src attribute is used to tell img elements which img to show
• The alt attribute is used to describe the image content (provides alternative text) for non-visual users (accessibility), SEO, and for when the image doesn't load properly

    <img src="https://placekitten.com/200/287" alt="striped kitten standing to look at the camera">
    

Image File Paths

The links in the src attributes that we're looking at today are called absolute paths, meaning that they link out to a resource that exists somewhere else on the internet. These are simple and useful for learning HTML, but they can be risky to use in practice - if someone else owns and hosts the images, they could change at any time. Although we won't be covering them today, generally it's best to instead use relative links to images that are hosted as part of your own site's files.

Hyperlinks

A hyperlink allows us to travel to a different document, such as another webpage or to a specific location within our website, usually by clicking.

Use the anchor tag, <a> to create the link. It needs its own attribute called href to provide the link's destination.

Anything that goes between the opening tag and the closing tag will be the clickable content that will take you to the source specified in the href attribute.

Lets look at a few examples of how to use links on a website:

    <!-- Links to an external website -->
    <a href="https://junocollege.com/">Juno College</a>
    

    <!-- Links to a internal section of our website -->
    <a href="#about">Go to About Page</a>

    <section id="about">About Page</section>
    

In the second example, we are linking to another section of our website. For the link to understand where it needs to go, we provide a id attribute on the element we want to travel to which matches the same value we provided to the href.

The # character (number sign, octothorp, or hash symbol) designates an element's id.

That's it! That's all the HTML you'll need for today's project!

Break time!

Questions? Drop them in the Zoom Q&A

Apply for our Web Development Bootcamp

Intro to CSS: Cascading Style Sheets

CSS: The Presentation Layer

• Design language to make HTML more presentable
• Follows its own syntax rules

CSS Syntax and Terminology

• Selector: determines which HTML element(s) to apply the styles to.
• Declaration: style rules written in property:value pairs, are wrapped by curly brackets { } and must end with a semi-colon ;

    selector {
        property: value;
    }
    

Properties determine the type of style to be applied (e.g. color). Values are specific to the property (red).

    p {
        color: red;
    }
    

Multiple CSS Declarations

Multiple declarations can be added to one selector. Just be sure to end each declaration with a semi-colon and write them on a separate line for readability.

    h2 {
        background-color: green;
        font-size: 50px;
    }
    

There are many, many CSS properties. New ones are added as old ones are being retired (deprecated). It's good to have a few resources on hand:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
• https://htmldog.com/references/css/properties/

CSS Colors

There are a bunch of different ways to select colors in CSS! Here are a couple that we are going to look at today:

• CSS keywords use the actual name (e.g. red, green, blue, pink, papayawhip, palegoldenrod, darkcyan, aliceblue, etc)
• Hex codes are a number sign ( # ) followed by six characters (0-9, A-F). The first two spots refer to the amount of red, the third and fourth spots refer to the amount of green, and the last two spots refer to the amount of blue (#RRGGBB). #000000 is black, and #ffffff is white.

        h1 {
            color: white;
        }
        

          a {
              color: black;
              background-color: #ff8b67;
          }
        

Color resources:

• http://colours.neilorangepeel.com
• http://coolors.co
• http://wesandersonpalettes.tumblr.com
• http://flatuicolors.com
• http://color.hailpixel.com

Background Images

Beyond colors, we can also use an image as the background of an element using the background-image property.

This property accepts a URL method, and we pass an absolute image link to it. This is similar to how src behaves on an img element in HTML.

    section {
        background-image: url('https://mywebsite.com/image.png');
    }
    

      header {
          background-image: url(https://juno-content-management.s3.us-west-2.amazonaws.com/coding-101/background.jpg);
      }
      

      header {
          background-image: url(https://juno-content-management.s3.us-west-2.amazonaws.com/coding-101/background.jpg);
          height: 100vh;
      }
      

      header {
          background-image: url(https://juno-content-management.s3.us-west-2.amazonaws.com/coding-101/background.jpg);
          height: 100vh;
          background-size: cover;
      }
      

Class Attributes

How are we going to apply different styles to each of our different sections? This is where our class attribute can come in handy!

      <section class="about"></section>
  
      <section class="gallery"></section>
      

        /* targets ALL section elements */
        section {
          background-color: white;
        }
        
        /* applies to any element with the class of about */
        .about {
          background-color: #fffbe7;
        }
        
        /* applies to any element with the class of gallery */
        .gallery {
          background-color: #e6fdff;
        }
      

CSS Typography

There are quite a few CSS properties for styling text. There are a few important ones to discuss today.

First, lets update the typography of our anchor tags and then we will discuss each CSS property.

        a {
          font-family: "Poppins";
          font-size: 18px;
          text-align: center;
          text-transform: uppercase;
          text-decoration: none;
        }
      

• font-family is what we use to change the font of our text. We can use system fonts (fonts that are on your computer) or we can import fonts to use, like from Google Fonts. The fonts we will use today have already been loaded into our project from Google fonts! The fonts will be loaded into our HTML via a link element.
• font-size is what we use to change the font size of our elements. The value can be set in all of the units of measurement available to us in CSS, but it is often set in pixels.
• text-align sets the arrangement of our text on the page. The value for text-align can be center, left, right, or justified (Justified is what newspapers often use to take up the whole width of space!)
• text-transform is used to change our text between lowercase and uppercase. We can also set a value of capitalize to capitalize the first letter in each word.
• text-decoration is used to add flourishes to our text. We can set a value of underline, overline, or even line-through. Anchor tags have an automatic style of underline, to change this we can set the text-decoration value to none.

There are so many others to discover, like font-weight, line-height and letter-spacing (just to name a few!). Take web development with us to learn about them in detail!

      body {
          font-family: 'Poppins', sans-serif;
          font-size: 18px;
      }
      

        h1 {
            color: white;
            font-size: 120px;
        }

        h2 {
            font-size: 42px;
        }
      

Spacing

The CSS Box Model describes the way CSS determines the size and spacing of HTML elements. To the browser, every HTML element is a rectangular/square box.

There are 5 CSS properties used to determine size and spacing:

• width can set the horizontal size of an element
• height can set the vertical size of an element
• margin adds/removes space around an element
• padding adds/removes space inside of an element
• border adds a border around the outside of an element

Margin and Padding

Both margin and padding can be declared by targeting different sides of the element. A variety of measurement units can be used, but today we will stick to pixels and viewport height.

The browser has some defaults when it comes to padding and margin. We can override these defaults by setting a value. Setting the value to "0" will remove any default space and any positive value will add space.

    div {
        padding-top: 2px;
        padding-right: 10px;
        padding-bottom: 2px;
        padding-left: 2px;

        margin-top: 2px;
        margin-right: 10px;
        margin-bottom: 20px;
        margin-left: 2px;
    }
    

Let's try this out.

          header {
              /* ... */
              padding-top: 25vh;
          }
        

        h1,
        h2 {
            margin: 0; /* removes default margin */
        }
        

        a {
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 26px;
            padding-right: 26px;
        }
        

        p {
            margin-top: 0;
            margin-bottom: 40px;
        }
        

Extra Features

      <a class="shimmer" href="#about">Read More</a>
      

Please keep in mind the site is not responsive, which means if you move your screen to be different sizes, your page will look very different and may even look a bit broken! Responsive design is taught in detail in our Web Development courses!