- CLASS 1 -

Aug. 22, 2018

Started off slow and learned a bit about general internet stuff and then jumped into the basics of the structure of HTML. Looked at some examples from W3schools.com.

- CLASS 2 -

Aug. 28, 2018

Continued with the basics of HTML and then got our fix of acronyms for the year by looking into WWW,URLs, ISPs, DNSs, HTTP & FTP, IP addresses, TCPs as well as the basic concepts of web hosting and web servers.

Next we downloaded and installed a code editor (Sublime Text) along with some plug-ins (SFTP & Emmet) that will help make our lives a bit easier this semester. Finally we connected to our accounts that will host our sites for the duration of the Micromedia program.

- CLASS 3 -

Aug. 29, 2018

Wednesday cut the power on us so class will be rescheduled for a later date. In the meantime take a look through the links below and read up on all things design. See you on Tuesday!

- CLASS 4 -

Sept. 4, 2018

Started the class with a recap to connecting to our web server (2022.micromediaweb.com) as we had technical issues with our ftp during the last class. Everything is A1 now. Uploaded our first webpage and added some links to other websites on our page.

Discussed the 'target="_blank"' attribute and how it can be used to create new windows/tabs in your web browser when opening hyperlinks. Introduced the concept of proper site structure when building webpages as well as how to add images in html.


*** DUE - Sept. 5, 2018 ***

Create a web page for Web 1: HTML, CSS & Javascript which will eventually link to all your exercises and projects. It should include the following:

  • Your Name
  • 2 or 3 things about yourself
  • Links to 3 different websites that you find interesting
  • HTML file uploaded and linked to the 2022.micromediaweb.com server in student#/web1/
  • Remember to use your basic html tags to create some visual hierarchy on your page.

    - CLASS 5 -

    Sept. 5, 2018

    Introduced to CSS as a way to stylize your html content. We looked at both inline styles as well as styles applied inside the <style> tag. These styles can be used to adjust the colour, size, position etc. of any tag element in your html structure.

    Exercise 1.1

    Add some content to your site as well as some style.

  • At least 1 image
  • At least 2 attributes applied as CSS in the <style> tags in the <head> of your HTML file.
  • HTML file uploaded and linked to the 2022.micromediaweb.com server in student#/web1/

  • Due for next class, Tuesday, September 11, 2018.
  • - CLASS 6 -

    Sept. 11, 2018

    Recapped the concepts of inline styles along with the <style> tag and introduced the <link> tag in relation to linking a css style sheet to an HTML document. This allows for one single CSS document to be applied to one or more HTML documents for styling purposes.

    We also covered the differences between relative and absolute links in order to create hyperlinks to external sites as well as our own webpages.

    Last but not least we covered the concept of website structure in regards to content organization using various tags to define the parts of a webpage such as <header>, <nav>, <main>, <article>, <section>,<footer>. We also briefly discussed the idea of nesting in HTML

    Exercise 1.2

    For this homework you will find a website and inspect its html code to disover as many of the following structure tags as you can:

  • <header>
  • <nav>
  • <main>
  • <article>
  • <section>
  • <footer>

  • Due for next class, Wednesday, September 12, 2018.
  • - CLASS 7 -

    Sept. 12, 2018

    Your training continues...

    We spent a bit of time dicussing the importance of understanding how to code as the future of many industries relies heavily on UI and UX for various interfaces.

    Used some class time to finish up the last homework exercise and explore a bit with more CSS styling of our web content.

    We looked at how to link to full resolution graphics by using the image file name as the href link. In other word this is using an image as a thumbnail to hyperlink to the actual image file.

    Between now and next class take a look at the following links to learn a bit more and try to improve on your homepage both visually and structurally.

    - CLASS 8 -

    Sept. 18, 2018

    Started off the class today by creating a new HTML document with the proper HTML structure (<header>, <nav>, <main> and <footer>) and then populated the tags with some basic content. We then proceeded to apply styles via an external stylesheet, making the content look a bit more presentable.

    We were then introduced to the concept of the CSS GRID SYSTEM which allows us to not only place content where we want it on the webpage but it also allows for an easier integration of content to mobile devices.

    Check out the links below to help you out with learning the CSS Grid System.

    - CLASS 9 -

    Sept. 19, 2018

    Don't slow down now!

    For this class we had time to explore a bit and tryed added some structure to our site along with applying CSS Grid in order to place our conent appropriately on the page. Refer to the links in the previous post for more detailed insturctions for CSS Grid.

    Don't forget to keep working on your stylization of content as well.

    Exercise 1.3

    Add some structue to your site as well as CSS Grid.

  • Apply the structure tags to your content (<header>, <nav>, <main> and <footer>)
  • Apply CSS grid to your homepage and work out a logical order and hierarchy to the content placed on your page.
  • Integrate a navigation section to your homepage to have access to your links.
  • HTML file uploaded and linked to the 2022.micromediaweb.com server in student#/web1/

  • Due for Wednesday, September 26, 2018.
  • - CLASS 10 -

    Sept. 25, 2018

    Thats it! You're getting it!...

    Before you know it you'll be ready for the deep end of the pool...

    Most of the class was spent getting your Exercise 1.3 finished up. In the meantime check out the following links covering the <figure> and <figcaption> tags. These tags will be used for the upcoming Project 1 to help define html structure for images as well as adding captions to describe the subject matter of the images.

    - PROJECT 1 -

    *** DUE - Oct. 10, 2018 ***

    Create a page to share a hobby or passion.

    Your page should include the following:

  • Your Name
  • Link back to your home page
  • Text & photos sharing your hobby or passion
  • Links to other sites / resources related to your hobby
  • Use CSS Grid Layout in a separate .css file (External Style Sheet)
  • Include these HTML elements:
  • <title>
  • <header>
  • <nav>
  • <main>
  • <h1> <h2> <p>
  • <img> <figure> <figcaption>
  • <footer>
  • HTML file uploaded and linked to the 2022.micromediaweb.com server in student#/web1/
  • Remember to use a colour palette, fonts and visual hierarchy to help visually communicate your content.

  • Due for Wednesday, October 10, 2018.
  • - CLASS 11 -

    Sept. 26, 2018

    Now you're cookin'!

    Spent the class adding our own image to our home page and placing them inside of the <figure> tag and adding a caption to the image inside of the <figcaption> tag. We also looked at how to make our images auto scalable (responsive) to our screen size when placed inside of our grid cells by applying the following attributes to the img tag selector in your CSS style sheet:

    img {
      width: 100%;
      height: auto;

    We also had time to start Project 1 where we are creating a webpage describing a personal hobby or passion, making sure that it is linked to our homepage.

    Take a look at the following links to help to better explain Semantic HTML and why it is so important.

    - CLASS 12 -

    Oct. 3, 2018

    Introduced the concept of Media Queries, what they are and what role they play in responsive web design.

    Be sure to always add the following tag to the head of your HTML document in order to help out with the mobile and responsive sizing attributes of your CSS style sheet:

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

    This will ensure that one device pixel is equal to one CSS pixel unit.

    Click here to download a sample file that will help to better understand how media queries work.

    Also, check out the links below that explain media queries, responsive design and mobile-first practices in more detail.

    - CLASS 13 -

    Oct. 9, 2018

    Spent most of the class working on Project 1, getting our content together and arranging it in our grid layout.

    Discussed the possibility of applying a mobile-first approach to the content you've alread placed on your pages by using media queries and setting specific break-points.

    Take a look at the link below to see some great examples of a mobile-first approach to web design.

    We were also introduced to the <iframe>, (inline frame) tag, which allows for the embedding of another document inside of your web page.

    The <iframe> tag can be used for any number of document types but one of the most common uses is to place videos such as youtube inside your web page without having to download and host the video file yourself.

    - CLASS 14 -

    Oct. 10, 2018

    You're well on your way to rock-star status!

    Used the class today to finish up the last minute alterations to your Hobby page (Project 1) and upload it to the web server. If time permits try applying some media queries and break-points to your page.

    Check out the links below for some cool CSS visual effects that can be applied to your page elements:

    - CLASS 15 -

    Oct. 16, 2018

    Today we were introduced to pseudo-classes which are used to define a specific state of an element such as when someone is hovering their cursor over an object on your page. The most classic example of pseudo-classes are applied to the <a> tag as in the following example:

    /* unvisited link */
    a:link {
    color: #FF0000;

    /* visited link */
    a:visited {
    color: #00FF00;

    /* mouse over link */
    a:hover {
    color: #FF00FF;

    /* selected link */
    a:active {
    color: #0000FF;

    - CLASS 16 -

    Oct. 17, 2018

    In this class we learned a bit about applying transformation and transition effects using the CSS transform and transition properties and also how to apply them via a hover effect pseudo class.

    Both transform and transition can be used for numerous visual effect on web pages and allow for an additional level of user experience.

    Check out the links below to discover a bit about these effects and how they can be applied to your web page content:

    - EXERCISE 2 -

    *** DUE - Oct. 23, 2018 ***

    Create a web page that features elements that will be visually altered when the user hovers over them using CSS transform and transition properties. Your page should include the following:

  • CSS Stylesheet linked to your HTML page.
  • 3 elements on your page with different transformations and transitions applied to each.
  • Basic description for each element explaining what will happen when the user hovers over that element.
  • Hyperlink back to your main homepage as well as a hyperlink to this project on your homepage.
  • HTML and CSS files uploaded and linked to the 2022.micromediaweb.com server in student#/web1/
  • As always choose your design elements carefully to insure maximum visual impact on your webpage. (Balance, Hierarchy, Colour, etc...)