Session 1: Today we will select students for the Google-Fu assignment. This participation assignment requires each student to research and comment about the content for a particular week of the class.
Assignment 2: “Google-Fu” Interactive Design Research Skills
Due: Before Session 2 of the Assigned Week (6 points)
Description:
Each student will be assigned one of nine weeks (2-10) from the class content. The student is required to research the content for their week using Google and find three current and relevant web-based articles about the subject(s) contained within their assigned week that are not already included in the class content. The link to each article and a 1-3 sentence description must be entered as a comment on the class website before session 2 of the assigned week.
Requirements:
1. Enter a single comment with three links and descriptions for the assigned week
2. Make sure the links are current, relevant, and not previously included in the course content
3. Enter your comment 24 hours before session 2 of the assigned week for approval
Points Breakdown:
1 point is awarded for each relevant link
1 point is awarded for an accurate description of the article
Following the discussion we will continue demonstrations for the “Project Portal” This will include creating a basic “normal flow” layout including a header, content area, and footer. We will also look at lists, links, images, and some basic CSS properties. A portion of class time will be available for studio work and feedback.
<!DOCTYPE html> <html> <head> <!-- this is an HTML comment --> <meta charset="UTF-8"> <title>Title of the page goes here<title> </head> <body> <h1>h1 is the largest of the six header tags</h1> <p>All content is contained in the body tag</p> </body> </html>
Relevant Resources:
W3Schools CSS Tutorial
W3Schools HTML4 and HTML5 Tutorial
This weeks reading:
Speaking in Styles – Chapters 2, 3, and 4 (Pages 17 – 88)
Session 2: Today is the last day to get feedback on the “Project Portal”. We will also look at the “Google-Fu” research. Finally, in-class demonstrations will center on completing the layout, techniques, and requirements for the “Project Portal”. This will include a discussion regarding the anatomy of CSS rules and demonstration regarding “box model.”
Relevant resources:
Selectutorial – CSS selectors
W3 Schools – The CSS Box Model
Next week’s reading:
Speaking in Styles – Chapters 5 and 6 (Pages 89 – 175)
Brainjar CSS Positioning article
http://mdcollins.aisites.com/im1480/world/
In this week we are working on our Portal Projects. This project is introducing us to the basics of HTML and CSS and the relationship between them. In this week we are learning about the bare basic formatting/structure or “normal flow” of HTML.
The links below are tutorials and layout structures for formatting an HTML correctly.
http://css.maxdesign.com.au/selectutorial/index.htm
http://learnlayout.com/
http://www.w3.org/Style/Examples/011/firstcss.en.html
Coding is still very new to most of us, I myself have not memorized the basis coding instructions. I found some basic coding guides to look back on if you have forgot one thing or another. Also a practice board for anyone at home, without the soft wear to do the real thing.
http://hostbaby.org/wiki/Basic_HTML_Tricks_for_the_Wizard
http://blog.hubspot.com/blog/tabid/6307/bid/19727/Easy-HTML-Tricks-for-the-Non-Technical-Marketer.aspx
http://www.practiceboard.com/
Google-fu assignment
Like most people in this class, I am both excited and a bit nervous to learn more about coding. I watched a couple beginners guide on html, and I also found some tips for beginners. I also looked at a couple sites for kids and wanted more daughter to look at these and see if she could learn from them.
https://generalassemb.ly/education/coding-for-beginners-html-and-css
http://www.cnet.com/how-to/best-free-sites-for-learning-how-to-write-code/
https://www.edsurge.com/guide/teaching-kids-to-code
This week we are diving into the basics of html coding for our Project Portals. I have learned quite a bit about coding within the past 7 days of class; coding is a completely new concept for me and I have zero prior knowledge/skill. This week I learned how take photos from the internet or specific web page by inspecting their element to figure out the url in order the place them in my own layout. This is called “background.” Here is an interesting tutorial I found on manipulating background images in a few different ways. It teaches how to repeat a single background, make backgrounds transparent as well as creating gradient overlays.
http://www.tizag.com/htmlT/htmlbackground.php
Another link I found supportive to what I learned this last week working with the background. This tutorial shows how to make an image the full size of your background all while retaining scale and remaining centered. Enjoy.
https://css-tricks.com/perfect-full-page-background-image/
This third link is probably way out of my league but i did find it interesting. This tutorial shows how to mix a narration with background music. Could be useful ?
http://manual.audacityteam.org/manual/o/man/tutorial_mixing_a_narration_with_background_music.html
I know that most of us in this class are beginners at coding, just like myself, so I wanted to find some websites that could help us out. While doing my research I found a site that lays out instructions, a code and the result of your coding all on one page. You read the explanation the follow the instructions. I completed a few of the steps and it was incredibly helpful in explaining what things mean when coding.
http://www.codecademy.com/en/tracks/htmlcss
One thing that has been hard to grasp is the basic coding terms. I found this site that laid out some of the basic ones with a clear and concise definition. I read through it and found it extremely helpful to understand what these terms mean.
http://html-editor-software-review.toptenreviews.com/commonly-used-coding-terms.html
Lastly I found a site that links to some great resources to help out beginners! They have a link for resources and people shared various sites and books they use to help them code.
http://lifehacker.com/the-best-resources-to-learn-to-code-1517844722
I hope you find these helpful while we kick off our coding experience together!
This week we were learning about the basics of html coding for a website and how to use all of them in a fashionable manner to make a webpage! Below are three links to different tutorials that have to do with CSS selectors.
This link holds a ton of great tutorials on the basics of CSS selectors, such as the body, html coding, divs, lists, and much more!
http://css.maxdesign.com.au/selectutorial/
This link holds all the CSS selectors that you should memorize, such as color, width and height, margins, etc.
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048
This link goes over the basics, and why they are needed as a whole in order to stylize your webpage further than the basics, and each thing symbolizes or does, for example the part inside the curly brackets is the called the declaration, and so on and so forth.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors