Session 1: Check announcements on Canvas for your assigned week for the Interactive Design Research Skills assignment. This participation assignment requires each student to research and comment about the topic(s) for a particular week of the class. Afterward we will have a discussion regarding the techniques necessary to complete the “Project Portal.” This will include “normal flow” or block level layout: headers, content areas, and footers. LECTURE: We will also look at lists, links, images, “box model”, and the anatomy of CSS rules.
Another important consideration is file management and file naming conventions. Following the rules below for all of the projects and exercises this semester will increase your chances of success:
1. Keep it simple yet organized: use sub-folders only when necessary
2. Do not use special characters or punctuation (!@#$%^&*+/(){}[]) in folders or filenames
3. Only use lowercase letters, numbers, hyphens between words, and a dot before the extension (contact-form.html)
4. Be semantic: your files and folder names should describe what they contain
5. Separate web files (html, css, jpeg, gif, png, pdf) from assets (ai, psd, doc, tiff)
6. Backup your files in a minimum of three places!
Assignment 2: Interactive Design Research Skills
Due: Before Session 2 of the Assigned Week (5 points)
Description:
Each student will be assigned one of thirteen weeks (3-13) from the class content. The week assignments can be found under Announcements on Canvas. The student is required to research the content for their week using Google and find three current and relevant web-based articles, not already included in the class content, about the subject(s) contained within their assigned week. The link to each article and a 1-3 sentence description must be entered as a single comment on the class website before session 2 of the assigned week.
Requirements:
1. Enter one comment with three links and descriptions for the assigned week
2. Make sure the links are current, relevant, and not previously included
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
Relevant resources:
Selectutorial – CSS selectors
W3 Schools – The CSS Box Model
Get More Out of Google [infographic]
![Get More Out of Google [infographic]](http://ust.johnkeston.com/wp-content/uploads/2025/09/google-640x7078-1-scaled.png){kind=link}
<!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>
Session 2: In-class demonstrations will center on completing the layout, techniques, and requirements to finalize the “Project Portal”. This will include a demo of CSS rules, “box model”, review of links, lists, images, headers, and a demonstration on how to use an FTP client (FileZilla) to add files to your student webspace. A portion of class time will be available for lab time.
Relevant Resources:
W3Schools CSS Tutorial
W3Schools HTML4 and HTML5 Tutorial
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
-Introduction to CSS Box Model. Talks about content, padding, border and margin areas
http://learn.shayhowe.com/html-css/opening-the-box-model/
– Goes more in-depth about the CSS Box Model. Specifically how to work with individual border sides, border radius and box siding.
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048
– Lists 30 CSS Selectors that are important to have memorized and gives you a description about what each selector does.
http://www.w3.org/TR/css3-selectors/
–This article gives a lot more in depth information- especially in lesson 6- more in depth information with the different types of pseudo class- and information on Combinators.
https://saucelabs.com/selenium/css-selectors
–This Saucelabs.com article talks about the sub-string matches followed by examples and steps to achieve the correct coding.
http://www.sitepoint.com/web-foundations/css-box-model/
This Article by Adam Roberts goes more depth and talks about different kind of elements to shape the CSS Box. The other articles posted shows more step by step, but this article is more in depth about the distinguished types- it’s more customizable.
http://learn.shayhowe.com/html-css/opening-the-box-model/
This article gives very in-depth information on the box model structure of websites, including examples showing how to customize the boxes of content.
http://www.thesitewizard.com/webdesign/create-good-filenames.shtml
This website provides some guidelines to follow when naming files for websites.
http://lifehacker.com/5911330/five-handy-things-you-can-do-with-googles-new-knowledge-graph-search
This article gives more ideas of how to more effectively use Google, specifically with the Knowledge Graph feature.
http://1stwebdesigner.com/css-effects/
This site gives demonstrations about different tips and tricks you can put on a site using CSS.
https://www.linkedin.com/pulse/20130716014745-7374576-why-you-need-to-know-code-and-how-you-can-learn-in-a-month
This article discusses why everyone should know a little bit of coding. The number of coding jobs is expected to grow by 30% by 2020 but coding can be applicable in many other jobs as well.
http://www.w3schools.com/css/css3_animations.asp
This article explains fun animations you can add to a website to make it more interesting.
Color Formulator
coolors.co
http://www.teaching-materials.org/htmlcss/lesson5/slides.html#slide
I like this website because it really breaks down and simply explains how to create different elements of the CSS layout. It uses simple pictures that display the code for that particular element, while also displaying how that code will appear on a webpage.
https://css-tricks.com/non-transparent-elements-inside-transparent-elements/
One element that I want to add to my project portal is being able to change the opacity of a box while not changing the opacity of the text within this box. This website breaks down very simply how to change the opacity of the box without changing the opacity of the text for html and css.
https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/
This website provides a bunch of text shadow effects that could be added to someone’s header. It keeps it simple with the code provided and a sample picture of the effect.
-This article gives an overview of the CSS box model and provides coding examples. There is also an interactive box-model demo where the sliders are adjustable (margin, padding, borders) and the CSS code is generated.
http://unmatchedstyle.com/news/a-to-z-css-box-model.php
-While experimenting with CSS, I found this article extremely helpful as it serves as a “CSS cheat sheet.” It contains information on selectors, pseudo-classes, floats, positioning and much more.
https://www.turnkeylinux.org/blog/css-cheat-sheet
-This article gives an overview of how CSS works by going in depth on what CSS actually is and how it affects HTML.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works
https://www.khanacademy.org/computing/computer-programming/html-css
This website has video tutorials on the basics and other aspects of HTML and CSS.
https://www.tipsandtricks-hq.com/basic-guide-to-css-2023
Good website with a lot of the basics of CSS spelled out step by step.
https://speckyboy.com/50-css-tutorials-techniques/
This article has a lot of tutorials on how to do more complex, yet appealing aspects of CSS.
1.
https://youtu.be/pFyOznL9UvA
The above link is a you tube guide for photoshop beginners. I am a visual learner so this was helpful for me. It is a bit long though at nearly 37 minutes.
2.
http://help.adobe.com/en_US/creativesuite/cs/using/WS6E857477-27FE-4a88-B8A4-074DC3C65F68.html
The above link is from Adobe. It provides the reader with step-by-step instructions on how to optimize images for the web using Photo Shop.
3.
https://woocommerce.com/2016/02/fast-high-quality-product-photos/
The above link is for an article about making images run load quickly while optimizing quality. It also speaks to the relationship between image optimization and SEO.
https://www.smashingmagazine.com/2010/01/obscure-adobe-photoshop-time-savers/
This article shows tricks and time-savers you can use within Photoshop, including a list of key combinations to quickly navigate the program.
https://design.tutsplus.com/articles/50-great-photoshop-tutorials-for-clever-beginners–psd-785
This website shows 50 various Photoshop tutorials. They may be more involved than what we will be using the program for, but they are very interesting if you want to continue to use Photoshop in the future.
http://www.creativebloq.com/photoshop/common-mistakes-5133023
This article covers 10 common Photoshop mistakes, and how to avoid them. These tips could be very useful especially if you are a beginner to the program.
http://www.htmlhelp.com/reference/css/structure.html
This webpage discusses CSS structure, it lays out the rules and syntax very nicely. What I found specifically helpful was the section about grouping as well as comments, which we have not gotten into quite yet.
http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/
This resource was exceptional at putting on paper, what professor Keston discusses in class. It nicely lays out the content with headers and subheaders and discusses debugging HTML content within a browser.
http://learnlayout.com
This interactive resource goes over step-by-step how to create a layout using CSS, noting important key-terms that play a great role in CSS.
https://www.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf
This is a quick reference guide cheat sheet with all of the different attributes for CSS styling. It’s helpful because you’re able to see a lot of useful attributes without having to search for them. I have this printed out above my desk at work when for when I need to quickly evaluate options.
https://templated.co/
This site has free HTML5 and CSS templates that you can modify yourself. They come working fresh out of the box and the code is well written and concise. This could be a great way to have a well-designed portfolio, without all of the baseline work.
https://www.lynda.com/CSS-tutorials/CSS-Fundamentals/417645-2.html
This Lynda.com video is a great beginner’s tutorial of CSS and it’s relation to HTML. It covers frameworks and grids, floats and positioning, as well as other necessary fundamentals. UST offers students free access to Lynda, which has tons of video courses on everything from web design to business management. Instructions on how to sign in with your current UST account are here: https://www.stthomas.edu/its/facultystaff/training/lynda/
https://www.codecademy.com/
A good interactive (and fun) way to get the basics of code down. Used it for a few weeks last summer for practice.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
This is an introduction to CSS and the basics of the box model. Discusses how CSS is determines elements such as the size, position, and properties (color, background, border size, etc.) of these boxes.
https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
This article takes a look at the syntax of CSS code. The article goes through declarations, declaration blocks, rulesets, and statements.
1
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
It is a very simple way to know what is HTML before we go deep into the subject.
2
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
The article is an introduction to what is a basic website structure and how to build it, and to present it using HTML.
3
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
The article is focusing on the basic rule syntax, as well as keywords for CSS standard names.
4
https://internetingishard.com/html-and-css/css-box-model/
The article is about the CSS box model and introducing; padding, borders, and margins.
1. https://www.youtube.com/watch?v=rIO5326FgPE
This video is an introduction to the CSS box model. This easy-to-follow, 8-minute video explains how to make and change margins, borders, and paddings.
2. https://learn.shayhowe.com/html-css/creating-lists/
This page covers how to make unordered, ordered, and description lists. It also goes over how to nest lists inside a list, how to change the marker style and position, how to use a background as a marker, and how to horizontally display or float images.
3. https://www.geeksforgeeks.org/css-styling-images/
This page shows what to do to format images differently using CSS. It goes through thumbnail images, rounded images, responsive images, transparent images, and centered images.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
This website gives a nice introduction to the HTML format. This is good for people not familiar with the material because it breaks down the language.
http://www.thesitewizard.com/webdesign/create-good-filenames.shtml
This website shows how to label and name different files.
https://www.w3schools.com/css/css_boxmodel.asp
This website gives examples of how to use margins, boarder and more CSS language.
https://www.w3schools.com/html/
This website gives a nice introduction to the HTML format. This is good for people not familiar with the material because it breaks down the language.
http://www.thesitewizard.com/webdesign/create-good-filenames.shtml
This website shows how to label and name different files.
https://www.w3schools.com/css/css_boxmodel.asp
This website gives examples of how to use margins, boarder and more CSS language.
https://blog.codeanalogies.com/2018/05/09/the-relationship-between-html-css-and-javascript-explained/
The link above shows how HTML, CSS, and JavaScript connect to make a website work. I was curious how you connect HTML and CSS if they are different file formats, and this website gives nice analogies to explain it.
https://webaim.org/resources/contrastchecker/
This link brings you to a contrast check for color where you can insert the HEX #, RGB, or HSL for your foreground and background. It shows a contrast ratio and accessibility pass/fail for users. In CSS it’s important to consider this as a design tool.
https://dev.to/paulomoro/html-comments-uses-and-importance-4f96#:~:text=Comments%20are%20also%20used%20to,understanding%20and%20maintenance%20of%20code.
The above link talks about commenting in HTML5 and CSS as a way to clarify the process you used for other people who want to maintain the code in the future. This is especially helpful for shortcuts, but it’s important to remember to keep the code as clean as possible.
https://getcodingkids.com/code-skill/creating-a-hyperlink/
This link shows a website that is kid-friendly to learn how to utilize coding. It has multiple missions and explanations to help get a kickstart to making a website, an app, or games. It teaches HTML, CSS, and Javascript.
https://www.semrush.com/blog/html-link-code/
This link provides information on HTML Link codes. It gives an explanation as to what a hyperlink is, how to create different types of them, and how to add them with HTML code. It also tells you how to add a hyperlink to an image.
https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf
This link provides a cheat sheet in HTML. It includes basic tags, formatting, lists, etc. All of these codes are beneficial when it comes to building a website. It also is from Stanford, meaning it is a credible source. It might be valuable to print this out.
1. https://css-tricks.com/css-checkerboard-background-but-with-rounded-corners-and-hover-styles/
This website provides how to do add a checkerboard background, rounded corners and hover styles.
2. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
This website provides article contents element. It’s similar to lists but it looks nice and organized.
3. https://www.toptal.com/front-end/eight-expert-css-tips
This website provides eight CSS tips to on how to advance layouts and effects. It shows examples of how to do each tip.
1. https://www.sliderrevolution.com/resources/css-animated-background/
This website shows some cool examples of fluid/animated backgrounds, and some explain exactly how you can create it using JS.
2. https://www.blog.duomly.com/css-background-image-tutorial-with-examples/#span-class-s1-5-how-to-create-a-color-changing-background-image-animation-span
Here we learn exactly how to create a color-changing background for a website. It might not be the most useful, but I thought this was super interesting. The grid background image is a super cool idea too.
3. https://html.com/media/
This website has more information on different media embeds such as audio and video.
1. https://guides.library.illinois.edu/introdata/filenames
This article talks about the importance of file naming conventions. It reminds readers that before you start collecting data or creating a project, you should have a place to store the data where you can easily access it later on. It is also explains the importance of having files easily identifiable. A helpful trick to organize files is to include the project name and date the file was created in YYYY-MM-DD format.
2. https://www.w3schools.com/css/css_boxmodel.asp
This article goes over the CSS box model. The article explains the box model and what it consists of. The article also goes over what each section of the model entails and how to adjust these sections in code format.The article also has helpful tips to remember when adjusting the layout of a webpage and exercises that ensure the reader understands how to implement changes.
3. https://www.hostinger.com/tutorials/what-is-css
This article goes into the brief history of CSS. The article then goes into the definition of CSS and provides a video to help readers understand further. The reading also talks about the advantages of CSS and how CSS works in combination with HTML.
https://edu.gcfglobal.org/en/basic-css/the-css-box-model/1/#
This resource defines the box model and talks about the four pieces within it. This article also gives you examples to try to help gain a better understanding of the material.
https://web.dev/learn/css/box-model/
This article gives examples for writing CSS and talks about content and sizing which is very helpful in this class.
https://www.devdoc.net/web/developer.mozilla.org/en-US/docs/Learn/CSS/Basics/Box_model.html
This resource talks about the box model and give a more detailed definition to the content within the box model. This also gives examples of how to use box model properties.
kdjfhg skdugh sdlkugh sdlkrugh
https://ust.johnkeston.com/dima358-week-2/
dlfkjgh sdkjghsdkjgh sdljfgh sdlfjgh sdfkljg hsdfklgj
https://uofstthomasmn.my.salesforce-sites.com/summit__SummitEventsRegister?instanceID=a0zHq000009xVvXIAU
dsfgsdgf sdfg dsfg sdfg sdfg sdfg adsg
https://www.instagram.com/p/C__D0VEOL7Z/?img_index=1