Web 1


links

exercise 4: fix up

Use the remaining class time to fix up your site including some or all of the following as appropriate:

  • links to all exercises and projects are properly labelled with exercise number and title
  • your name and link back to your home page should appear on all your pages, at least in the footer
  • fix up and correct anything that was suggested for your projects
    • 2: Photo Gallery
    • 3: SPA
    • organize your files deleting duplicates or files that are no longer needed (make a backup of your USB first!!)
    • double check all links

    due: Dec. 6th

all hallows' eve

SPAs (Single Page Apps, not places to relax and be pampered)

exercise 3.1: Single vs Multipage Apps (read & comment)

Read and respond to the Neoteric article.

Single-Page Application vs Multi-Page Application

due: Oct. 23/24

exercise 3.3: SPA plan

Plan your spa, posting to your SPA research page the following elements:

  • short description of your site, it's purpose and who will be using it
  • a list of the sections of your site
  • wireframes for mobile and desktop
  • a list of the media elements you will need
    • logo (in Illustrator)
    • photos (edited in Photoshop)
    • videos or other elements

Share your sites with others.

due: Nov. 7

exercise 3.2: SPA research

Find at least 3 SPA sites you like. Link to and comment on them on your SPA research page.

Share your sites with others.

due: Oct. 30/31

Let's do some research

Find at least 3 SPA sites you like. Link to and comment on them on a separate page for SPA research

Check out this one from the Bell Bros.

Student SPAs for inspiration

some more examples here or perhaps here or maybe even here?

  • ideas for topic / subject
  • 30-second brainstorms
  • what you did this week / month
  • favourite places
  • moments of joy / emotion
  • people you love / respect

Javascript lessons

Links to resources

part 1: console, getElementById(), innerHTML and variables
part 2: addEventListener(), classList.toggle()
part 3: functions, querySelectAll(), Array.from(). ... forEach
part 3: continued
part 4: conditional statements and arrays

css grid layout part 1: photo gallery

check out this 8 min video

Here's the gallery

css grid layout part 2: nav & media queries

check it out

Here's the gallery

part 3: modals

part 3 eh

Here's the gallery

Week 7 & 8: a photo gallery

2.4 create a photo gallery using HTML & CSS

We will be taking & editing themed photos then posting them in a gallery with some cool CSS3 effects & animations.

We will continue to use CSS Grid Layout (and possibly Flexbox) to create our layout.

CSS3 techniques and animation will enable us to enhance the user experience.

Your theme is micro (as in microscope or small) and macro (as in very large) patterns, shapes and textures.

Here is a breakdown of some of the steps.

  • create a folder for your photo-gallery project i.e. photo_gallery
  • create an html page with CSS for you gallery
  • link to your gallery from your homepage
  • take photos
  • edit your photos in Photoshop, export them into an images subfolder
  • add the images to your gallery
  • add a way to view larger versions of the images

check out my gallery

css3 transitions

adding a modal with js

You will need to do multiple steps.

  • be sure your gallery section has an id of "gallery". Check out my source to see the actual html structure.
  • add the modal to your html
  •  <section class="modal closed" id="modal">
      <figure> 
        <img src="images/bridge6.jpg" alt=""> 
        <figcaption>this is a bridge</figcaption> 
      </figure>
      </section> 
      <div class="modal-overlay closed" id="modal-overlay"> 
  • add the css for the modal
  • #gallery img, .modal img{
      width: 100%;
    }
    .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1200px;
      max-width: 92%;
      z-index: 1100;
    }
    
    .modal::before{
      content: "x";
      position: relative;
      top: 1.2em;
      background-color: rgba(255,255,255,0.5);
      font-size: 2em;
      right: 0;
    }
    
    .modal-overlay {
      z-index: 1000; /*z-index lower than for modal*/
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.7);
    }
    
    .modal.closed, .modal-overlay.closed{
      display: none;
    }
  • connect the javascript with a "script" tag and upload

CSS

check list for ex. 1.1: home page and ex. 2.2: hobby page

Your homepage should include the following:

  • your name (in heading & title tag)
  • something unique or specific about you
  • at least one image
  • 2 or 3 links to sites you like
  • ex. 2.1: Mobile First comment (on the page or linked)
  • ex. 2.2: html structure & css layout (link)
  • ex. 2.3: Respsonsive Design comment (on the page or linked)

Your ex 2.2: html structue & css layout (or hobby / passion page) should include the following

  • heading & title
  • your name
  • link back to your home page
  • text & photos sharing your love
  • links to other sites / resources related to your hobby
  • coding uses CSS Grid Layout in a separate .css file
  • it may also use Flexbox

margins & padding

use margins & padding to provide white or negative space.

margins add space outside the element

padding adds space inside the bounds of the element.

See css margins and css padding

exercise 2.3: responsive web design (read & comment)

Ethan Marcotte established a web-design, best-practice so that we no longer have to make multiple versions of websites for phones, tablets, laptops & desktop computers.p>

Read the following and add a comment to your Web 1 home page.

Ethan Marcotte's article on responsive web design

read more by Ethan Marcotte

due: Sept 27 / 29

columns??

Add columns to an element using one of the following 3 techniques:

  • flexbox (like for my nav)
  • nested CSS grid, by setting a grid item to display=grid
  • add more columns to your css grid layout

media queries

Add @media queries to your site to make it responsive.

@media screen and (min-width: 60em){..}

See my css for syntax & an example

Plus add this the to head of your html page:

<meta name="viewport" content="width=device-width, initial-scale=1">

links

css resources

Jen sent me a link to this video on CSS Grid Layout. You might want to check it out:

Thanks Jen for this tutorial on CSS Grid Layout

links

exercise 2.2: html structure & css layout

Create a page sharing your love for an activity, hobby or passion with well-structured html including tags such as:

You can see my demos here:

due: Sept 27 / 29

exercise 2.1: mobile first (read & comment)

Because of the everchanging nature of web development, it is important to keep up with developments in the field. Reading, commenting, sharing and practicing is a great way to keep up.

Read the following and add a comment to your Web 1 home page.

Luke W: Mobile First

read more by Luke W

due: Sept 11/12

css typography

Professional web designers use css to create legible and beautiful typography that works on mobile-first and other devices from tablets to laptops to desktops, plus

Here are some best practices

  • set html font-size to 100%
  • use rem (or em) to set font-size of other elements
  • use em for media queries
  • use font-family web stacks for selecting fonts
  • or use web fonts with a stack for fallback
  • only use decorative font for titles
  • a mix of serif & sans-serif fonts is good

web page structure

The basic structure of a web page is:

The body contains the page's content including navigation, sections & articles (see the next info box

list of all HTML elements, nicely grouped

from W3Schools

web page content

The body should be well organized with elements that describe their roles such as:

more resources

plain html demo

insert an image

Watch this video about how to insert an image

Here's the code

<img src="images/setup.jpg" >

add links

to link, watch the video below

Here's the code

<a href= "http://vanier.college" >Vanier</a>

Welcome

Welcome to Vanier and OST: Micromedia in particular.

As you may have guessed, we will be learning web design and improving our coding skills in html, css and javascript.

Get Connected

To upload a web page to the web server, we can use FTP (file transfer protocol).

Your web hosting accounts have been set up. Please let me know if you are unable to connect.

  • how to connect using FTP
  • exercise 1.1: create a web page

    Set up your /web1 site / homepage. It should include the following:

    • linked at student####/web1/ (check link from student list below)
    • your name
    • something unique or significant about you
    • at least one image
    • link to 2 or 3 of your favourite sites

    due:

    exercise 2.1: mobile first (read & comment)

    Because of the everchanging nature of web development, it is important to keep up with developments in the field. Reading, commenting, sharing and practicing is a great way to keep up.

    Read the following and add a comment to your Web 1 home page.

    Luke W: Mobile First

    read more by Luke W

    due:

    Still Hungry?

    Read about responsive web design from Ethan Marcotte.

    Yes, this will be a future read & comment exercise.

    Sublime Text & Images

    Our goal for the second class is to

    • install & set up Sublime Text on our USB drives
    • take, edit and publish a photo on our web pages

    Photoshop quick fix

    crop, adjust exposure, touch up and export your photos

    student sites on micromediaweb.com