Wednesday, November 9, 2016

Welcome to Web Design WD 110!

Hello Web Design_WD110!

Week 1


Image result for html5 css3

This is a blog dedicated to the Notebook Web Design project. Here you will find the resources that will help you to complete this project.  In today's class we've already discussed the basics of Hypertext Markup Language and Cascading Style Sheets.  For a refresher, please visit the links below and feel free to refer back to them whenever you need to (which will be a lot). Leave questions/ comments in the discussion section for the class.  I will be sure to answer them all at least once.

*Do not pay attention to the dates on these posts. I've arranged them in the order you're supposed to read them.

Resources

CSS Cheatsheet
HTML Cheatsheet
Videos
Interactive Learning
Discussion Forum
Jsfiddle.net

For this course, you will be using jsfiddle.net to write and view your code. Please watch this Youtube video tutorial on how to use the website.


Course Objective
Build an interactive website to take your class notes. 
Duration: 7-9 Weeks

Week 1: Research and Design

1. Create a Google Drive account, if you already have one, move on to step 2.
1. Create a Web101 folder and save it to Google Drive. Share the link with me at kenyasow@buffalo.edu.
2. Within the Web10l folder, create a "Screenshots" folder to store your screenshots of other websites.
Week 2: Introduction to HTML
Week 3: Introduction to CSS
Week 4: Start Coding HTML
Week 5: Start Coding CSS
Week 6: Tweaking and Testing
Week 7: Tweaking and Testing and Submission (for extra credit)
Week 9: Final Submission



Click on the image below to view the mockup that will assist you in creating your design. Look over it carefully, it provides a breakdown of HTML/CSS elements and properties used to write the jsfiddle code.

Sunday, November 6, 2016

Website Layout Code and Live View

Week 2

Hello class!

I've taken the liberty of embedding the HTML and CSS code in this post so you can use it as a reference for your project. Feel free to tinker around with it by clicking on the "Edit in JSfiddle" link on the upper right hand corner of the module, or copy and past it whichever HTML/CSS text editor you decide to use.
There are three tabs in this module: HTML, CSS and Result. To edit the code, click on the HTML or CSS tabs, then click Save to create a new JSfiddle document. Next click Run to view the code as it would look on your web browser.

If you forgot how to use jsfiddle.net, please refer back to this post for a link to the Youtube video tutorial and other resources.