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.
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.
Remember to use your basic html tags to create some visual hierarchy on your page.
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.
Add some content to your site as well as some style.
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
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:
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.
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.
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.
Add some structue to your site as well as CSS Grid.
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.
Create a page to share a hobby or passion.
Your page should include the following:
Remember to use a colour palette, fonts and visual hierarchy to help visually communicate your content.
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:
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.
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.
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.
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:
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 */
/* visited link */
/* mouse over link */
/* selected link */
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:
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:
As always choose your design elements carefully to insure maximum visual impact on your webpage. (Balance, Hierarchy, Colour, etc...)