Interactive Media # 1

Aka DES261

Week # 10

Survey Link for Class

https://www.surveymonkey.com/r/FWTR92Q

Let's go over your Assignment

  • Now that you have finished the HTML for a single page, I'd like you to finish up up at least another 2 HTML pages for your project. I've given you more time in class to make up for the increase in the breadth of the assignment. 
  • Please email me your html pages to omarpatel123@gmail.com. 
  • I'll be correcting these throughout class, along with CSS. This might take a while, but I want to make sure you guys have a good sense of HTML/CSS before this course is finished. 

Continue

Implementing HTML & CSS into your Project

  • Hopefully, you've finished at least 3 pages of HTML for your project. Some of you have also begun working on your CSS. I'll try and have the corrections to your assignments by the end of the day. 
  • Start implementing your CSS in this class if you haven't already done so. 

HTML and CSS Reference

HTML: http://www.w3.org/community/webed/wiki/HTML/Elements

 

CSS: http://www.w3.org/community/webed/wiki/CSS/Properties

Reminder

You now have 2 choices: 

1. If you feel comfortable with building up your project based on the knowledge you learned, simply open up sublime text and start building it!

2. If you're still confused on how to implement the HTML & CSS you learned, you can either:

a) Go to the https://www.codecademy.com/en/skills/make-a-website tutorial and use that to learn how to implement the skills you just gained. 

b) Ask me and I can help show you the steps you need to take to construct your project.

Basic Structure of a Web Application

  1. Directory Structure

    1. HTML files

    2. index.html

    3. assets

      1. CSS files

      2. JavaScript Files

      3. images

 

What every Web application should have

  1. HTML

  2. CSS

Basic structure of an HTML File

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="stylsheet.css">
    </head>

    <body>


    </body>
</html>

Example of a linked CSS file located in assets/CSS/stylesheet.css

body {
    color: gray;
    font-size: 12px
}

Linking Files

<header id="header">
	<a href="index.html"><img class="house_logo" src="assets/images/house.png"></a>
	<nav id="nav">
		<ul>
			<li><a href="html_files/contact.html">Contact Us</a></li>
			<li><a href="html_files/about.html">About</a></li>
			<li><a href="html_files/property_management.html">Property Management</a></li>
			<li><a href="html_files/sellers.html">Sellers</a></li>
			<li><a href="html_files/buyers.html">Buyers</a></li>
			<li><a href="index.html">Home</a></li>
		</ul>
	</nav>
</header>

Sample Site and Code

Site: http://osp123.github.io/Dad_site/

Code: https://github.com/OSP123/Dad_site

Final Project

Hopefully, you'll have finished your HTML pages by now and at least have some CSS finished by the end of this class. Next week, I'd like you guys to have a completed HTML/CSS project completed. Again, I'm lenient with grading, I just want you guys to try. I'll be correcting your code as the class progresses and I'll get them back to you as soon as possible. Keep trying and keep breaking things!

 

Here is a link to the project guidelines: https://docs.google.com/document/d/1aa7EwIk4Dc-jn7yPfHGCUIvMam3N6Wryy7ohROOi3F4/edit?usp=sharing

Copy of Interactive Media # 1 Week 10

By Omar Patel

Made with Slides.com

Copy of Interactive Media # 1 Week 10

  • 653

More from Omar Patel