CAC 230: Introduction to Web Design

For your first assignment, you should create a personal website using only HTML.

• The subject matter is up to you - it can be a truly personal website, a professional site, a site about a hobby or passion, or a business that you have created.
• The site should contain at least three individual pages, but no more than five.
• Use everything you've learned so far - use headers and text, link to the other pages, embed images or video, etc. Don't be afraid to add content to your site!
• We will build upon this site during Project 2.
• Site must be your own work. As per the syllabus, if you use a service like Wix or Squarespace, you will fail your project with no chance of resubmission.
• Use naming conventions from the syllabus when turning your project in. Failure to do so will result in you receiving a failing grade for the project. If you correct it and resubmit, it will count as your one late project for the semester.

By this time, you should already have formed your groups, established communications and selected your site.

For this first submission, please attach your project sketches to a one-page document explaining why you chose your site, what usability aspects you plan to change for this site, and why you feel these changes will make your site stronger as a result.

Submit the site your group has been working on so far so I can gauge your progress and course correct  if necessary!

Have one representative from your group package and submit everything for your group.

Deliverables:

• At least three HTML pages, fully coded.
• A CSS file that contains all the formatting for your site.
• A plain text document (.txt) with the names of your group members
• A Folder containing your HTML and CSS files, as well as any plugins or media that you used (images, videos, bootstrap, etc.), zipped up and named according to the syllabus naming conventions.

Now that we've been introduced to CSS containers and color, let's put it together.

Try and recreate the PH Scale example in HTML & CSS on pages 258 - 260.  After you've created the basic scale, explore colors using an app like Adobe Color and apply your own colors to the scale.  Submit the final file in .zip format, following the regular project naming conventions.

Utilizing everything you have learned, continue to work on your personal website, this time adding CSS and making it look as professional and usable as possible.

Deliverables:

• A personal website with at least three distinct pages, linked together
• HTML files of your webpages
• A CSS stylesheet containing all the styling on your website. Bootstrap is okay to use, but be sure that you apply your on styles on top of it.
• A folder containing all your files, including media like photos and video, zipped up and named according to the syllabus naming conventions.

Complete the example on pages 324 - 326 and submit it here. Here is a live example.  If you would like to combine it with previous knowledge, feel free to change the fonts and colors and make it your own design. 

Deliverables:

• A completed HTML file, titled according to naming conventions.  Since this is a single-document exercise, just submit the HTML file instead of a zipped folder.

Utilizing everything you have learned, create a website. Subject matter and scope is up to you - it can be another redesigned site, a site for a business you create, or a mobile site.  Whatever you create, make it as styled and usable as you possibly can.

Deliverables:

• A personal website with at least three distinct pages, linked together
• HTML files of your webpages
• A CSS stylesheet containing all the styling on your website. Bootstrap is okay to use, but be sure that you apply your on styles on top of it.
• A folder containing all your files, including media like photos and video, zipped up and named according to the syllabus naming conventions.

Read through Chapter 15 and practice the layout exercise at the end of the chapter.  Here is a live example of the exercise.

After you've built out the page, feel free to try your hand at changing colors, fonts, etc. And put your own spin on it!