183
edits
(12 intermediate revisions by the same user not shown) | |||
Line 26: | Line 26: | ||
Fachmodul:<br /> | Fachmodul:<br /> | ||
MFA Medienkunst/-gestaltung, MFA Media Art and Design, MSc MediaArchitecture | MFA Medienkunst/-gestaltung, MFA Media Art and Design, MSc MediaArchitecture | ||
==Syllabus (subject to change)== | ==Syllabus (subject to change)== | ||
To be announced | To be announced | ||
==Project 1 Information== | |||
'''Due Date: 9 Nov'''<br /><br /> | |||
'''Objective:''' | |||
Develop a 3 page personal/portfolio website using only a text editor. Your website should include at | |||
least a home page (index.html), an about page, and a contact page. It also should use an external CSS | |||
file. The website design should conform to current web design standards, and appear the same in all | |||
major browsers (Firefox, Chrome, Safari, Internet Explorer/Edge). | |||
The content of your website is entirely at your discretion. It may be either a personal website or a | |||
portfolio of your work. Images may be found from online resources or created from scratch. The text | |||
on the website should be original. What is most important is that the HTML and CSS is correct, and the | |||
images and links work correctly. At a minimum, the website should be at least 3 pages. Each page | |||
should have a navigation area and have working links to all of the other pages. | |||
==Project 2 Information== | |||
'''Due Date: 30 Nov'''<br /><br /> | |||
'''Background:''' | |||
Bootstrap is an open-source framework for developing responsive websites for both desktop and mobile screens. Unlike many web frameworks, it deals purely with front-end development (HTML, CSS, and JavaScript). First released in 2011 under the name of Twitter Bootstrap, Bootstrap is the most popular front-end framework for mobile web development. | |||
'''Objective:''' | |||
Develop a custom dynamic website using the Bootstrap 4. The website design should be intuitive, conform to current web design standards, and appear the same in all major browsers (Firefox, Chrome, Safari, IE/Edge). | |||
Website requirements: 4+ page Bootstrap website, functional design in all browser window sizes | |||
'''Grading:'''<br /> | |||
This project will be graded on:<br /> | |||
• creative and effective approach to your website design<br /> | |||
• demonstration of technical proficiency with using Bootstrap 4<br /> | |||
• effective implementation of responsive web design<br /> | |||
• all images load correctly<br /> | |||
• all navigation elements work properly (no dead links)<br /> | |||
==Class Resources== | |||
Now that I have access to modify this wiki, I will be adding links and resources relevant to this module. --brian | |||
'''Web Design Resources/References:'''<br/> | |||
[https://www.w3schools.com W3Schools]<br/> | |||
[http://lesliefranke.com/files/reference/csscheatsheet.html CSS Cheatsheet]<br/> | |||
[http://media-study.com/resources/pdfs/web-standards-ckecklist-1-18.pdf Web Standards Checklist]<br/> | |||
[http://getbootstrap.com Bootstrap Homepage]<br/> | |||
[https://jquery.com jQuery Homepage]<br/> | |||
[https://www.ascii.cl/htmlcodes.htm HTML Codes Table]<br/> | |||
[https://unicode-table.com/en Unicode Character Table]<br/> | |||
<br /> | |||
'''Web Development Tools:'''<br /> | |||
[https://validator.w3.org HTML Validator]<br/> | |||
[http://jigsaw.w3.org/css-validator CSS Validator]<br/> | |||
[http://www.css3-generator.de CSS3 Generator]<br/> | |||
[https://converticon.com Favicon Converter (.ico)]<br/> | |||
[http://www.pagecolumn.com/grid_layout_generator.htm Grid Layout Generator]<br/> | |||
[https://startbootstrap.com Bootstrap Template Examples]<br/> | |||
[https://fonts.google.com Google Fonts]<br/> | |||
[http://fontawesome.io Font Awesome]<br/> | |||
[https://www.htaccessredirect.net htaccess Generator]<br/> | |||
<br /> | |||
'''Other Useful Links:'''<br/> | |||
[http://www.webpagesthatsuck.com Web Pages That Suck – Learning Good Design Through Bad Design]<br/> | |||
[http://media-study.com/resources/PrinciplesofGraphicDesign/main.swf Principles of Graphic Design]<br/> | |||
[https://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf SEO Starter Guide]<br/> | |||
[http://www.zombo.com Zombo.com]<br/> |