Interactive Media # 1

Aka DES261

Week # 8

Let's go over your Assignment

Finish the final part of the the tutorial by next week. This includes: INTRODUCTION TO CSS, CSS CLASSES AND IDS, CSS ELEMENT POSITIONING

Quiz time!

Let's go through some concepts before we move on

We're gonna review the concepts covered in Code Academy and I'll answer any questions you have. 

Implementing HTML & CSS into your Project

Now that you've completed the course on the basics of HTML and CSS, we're ready to start building up our projects!

Implementing HTML & CSS into your Project

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

Work Time!

Implement one or both options from the previous slide. You guys are encouraged to collaborate with each other, in order to help each other understand the material, get creative feedback about your project, and learn how to work as a development team. 

Assignment # 8

Finish 1 page of HTML. That is, there should be a single page of HTMl that represents a page on your comp. Please email me if you have questions!

No Quiz, just work on projects!

Next Week's Quiz

Copy of Interactive Media # 1 Week 8

By Omar Patel

Made with Slides.com

Copy of Interactive Media # 1 Week 8

  • 592

More from Omar Patel