Assignment 3

Due Tuesday, April 3

The objective of this assignment is to use an Open Source Responsive template and make it your own. This project you will do on your own and explore the world of open source and code modification and image manipulation. I will help you download your initial files and organize them, and of course assist with any technical questions.

Topics for website: A hobby or interst that you can setup an Instructional Website for.

What’s Required

5 page responsive webiste. Credit the original tepmlate used so we can compare your updates.
External CSS for layout, fonts, etc.
Consistent Design
Responsive Tabs or Accordians.
A Responsive Table expand on one you found.
Mobile menu.
Social Media Icons and Copyright.
Headings setup for all h1-h6 even if not being used.
Meta Data on each page.
Fav Icon on each page.
Site Links Defined site wide.
Page Titles properly used on each page..
Alt Tags and Proper Image tagging.
Use SVG files for graphics.
Use CSS Animations for added features.

Start Bootstrap

Start Bootstrap is a collection of free to download Bootstrap themes and templates. Our themes, built with HTML5, CSS3, and Bootstrap 4, are open source and you can use them for any purpose, even comercially!

https://startbootstrap.com/

Templates

CSS Animations

Animate.css. Just-add-water CSS animations. bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, jello, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft ...

Animate.css

A Collection of Pure CSS Animation Snippets & Demos

All of these code snippets can be found in online cloud IDE platforms. These are like webapps that behave as code editors where frontend developers can practice concepts and unique ideas from any web browser. Lots of talented developers enjoy testing their ideas in a cloud platform while pushing the current boundaries of CSS. Feel free to check out any of these code snippets and even copy them into your own project work.

Snippets

What are SVG files

Scalable Vector Graphics are an XML based markup that can contain two-dimensional vectors. The vectors can be simple shapes, paths, or well just about anything you can do in Illustrator. It’s an image format that has more in common with a web page that it does with a JPEG. SVG is much more powerful than other image formats we can use on the web as we can manipulate them with code (either in our text editor or with CSS / JS). l

Learn More