WEB 1 - HTML-CSS-JS
Chloe
Christina
Daniel
Ebony
Galine
Kardiniyah
Katianna
Kirk
Mélissa
Mercedes
Michael
Natacha
Robert
Shiyue
Sofia
Valeriy
Wardah

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

- EXERCISE 1 -

*** 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...)

    - CLASS 17 -

    Oct. 23, 2018

    Let's get animated!

    For today's class we took a look at how to animate elements on our web pages without requiring a pseudo class hover to trigger them. Keyframe animations (@keyframes) are used in conjunction with a series of animation properties in our CSS stylesheet to create dynamic visuals on our web pages that trigger when the page loads in the viewer's browser.

    Follow the link below to learn more about how to create and apply animation effect to your webpages:

    Exercise 2.1

    Add some animation to your transformations page.

  • Apply at least 1 animation effect to your page by using the @keyframes declaration in your CSS stylesheet.
  • The animation(s) can be whatever you like but remember not to overwhelm your audience with too many bells and whistles.
  • HTML file uploaded and linked to the 2022.micromediaweb.com server in student#/web1/

  • Due for Wednesday, October 31, 2018.
  • - CLASS 18 -

    Oct. 24, 2018

    Today's class was preempted by Vanier College's PED day, however we have planned an official photo walk in downtown Montreal. Although not mandatory to attend this is a great opportunity to get some visual content for an upcoming web project as well as learn a bit more about photography in general and maybe a bit more about the city you live in.

    We'll be meeting in the lobby of Concordia University's EV building (Corner of Guy and St. Catherine's) at 1pm Oct. 24th, where we will eventually make our way through the city to the old port.
    Hope to see you there!

    Take a look at the links below to learn a bit about the basics of photography:

    - CLASS 19 -

    Oct. 30, 2018

    Today we had a chance to work on our animation project a bit. Remember with @keyframes unlike the :hover or :active pseudo-classes your animation will trigger when your page loads.

    Check out the links below to see some cool examples of keyframe animation at work:

    Also today we were introduced to Javascript. We covered some of the basic concepts and general syntax of the overall language. The main purpose of Javascript is to add functionality to websites allowing for more interactivity between the user and the website that they are viewing. Javascript is able to modify the DOM (Document Object Model) of a webpage making it an ideal solution for dynamic alteration of DOM content. Javascript is not exclusive to web development and can be run locally on computers or within certain applications.

    For more information on Javascript take a look at the following sites:

    - CLASS 20 -

    Oct. 31, 2018

    Happy Halloween Everybody!

    Today we took a closer look at some of the finer points of how to apply some basic javascript to your webpages. Be sure to download a copy of the following link: SAMPLE JS TEST to see how we applied some basic javascript to the html elements on the sample webpage.

    Take a look at the following links to help you better understand some of the concepts we covered in class today:

    If you're having trouble with these concepts and find that you're becoming frustrated:

    Just ask for some help! :)

    - EXERCISE 3 -

    *** DUE - Nov. 6, 2018 ***

    Create a web page that features elements that will be dynamically altered using javascript. Your page should include the following:

  • CSS Stylesheet linked to your HTML page.
  • A Javascript file linked to your HTML page.
  • 3 elements on your page with different properties triggered by a javascript Event Listener applied to each.
  • Basic description for each element explaining what will happen when the user interacts with that element.
  • Hyperlink back to your main homepage as well as a hyperlink to this project on your homepage titled 'Javascript Test'.
  • HTML, CSS and JS 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...)

    - CLASS 21 -

    Nov. 6, 2018

    Getting close to the finish line gang... but we still have some work left to do!

    We looked at some of the new features that we can add to our webpages by using javascript, including add / remove classList and conditional statements.

    Exercise 3.1

    Add some more advanced javascript to your javascript page.

  • Apply at least 1 javascript effect to your page by using either a toggle or add/remove classList script. This will essentially allow for the triggering of an effect both off and on.
  • This javascript can be applied to an already existing element on your page or you can add an additional one to those already in place.
  • As always make sure that there is a hyperlink back to your main homepage as well as a hyperlink to this project on your homepage titled 'Javascript Test'.
  • HTML file uploaded and linked to the 2022.micromediaweb.com server in student#/web1/

  • Due for Wednesday, November 14, 2018.
  • - CLASS 22 -

    Nov. 7, 2018

    ⇐JAVASCRIPT

    YOU⇒

    As you've almost certainly learned by now, javascript can be quite stubborn...

    Unlike markup languages, such as HTML and CSS, Javascript requires a bit more applied logic and mathmatical finesse for it to run properly. However, like HTML and CSS, the order of the written code is crucial to the functionality of the script itself. Due to the order-of-operations brackets used in JS it often requires more de-bugging in order to find out where the mistakes were made. Be sure to use your "inspect element panel" option in your web browser to see the code being fed to it. This will show you any errors in your javascript code that may arise in the "console" section of your "inspect panel".

    We spent a bit of time working on Exercise 3.1 in class today and also learning a bit more about javascript in general. We were introduced to the concept of Arrays and Loops.

    Arrays allow for the storing of multiple values in a single variable while Loops are used to repeatedly run a block of code until a certain condition is met.

    Check out the links below to learn a bit more about each: