JCU Logo

JOHN CABOT UNIVERSITY

COURSE CODE: "CS 130-2"
COURSE NAME: "Web Design I"
SEMESTER & YEAR: Spring 2024
SYLLABUS

INSTRUCTOR: Marco Scaramastra
EMAIL: [email protected]
HOURS: TTH 3:00 PM 4:15 PM
TOTAL NO. OF CONTACT HOURS: 45
CREDITS: 3
PREREQUISITES:
OFFICE HOURS:

COURSE DESCRIPTION:
The premise of this course is that a web site differs from a traditional media publication because its contents can be updated at any moment, many possibilities exist for making it interactive, and reader attention span is short. The course provides students with technical knowledge and skills required to build a web site, while covering design, communication, and computer-human interaction issues. Topics include web history, HTML, style sheets, and effective information searching. As a final project, students create a web site on a liberal arts topic, which will be judged by the instructor and a reader specialized in the chosen topic.
SUMMARY OF COURSE CONTENT:

1       Introduction: history and essential standards of the World Wide Web. How the Web works. References online: the W3C tutorial.

2       Tools for Web design: Web editors, HTML/CSS Editors, Web publishing.

3       Building blocks of a web page, adding style, images, and links;

4       Layouts' strategies: the box-model.

5      Layouts' strategies for the box-model. Float/Flex

6      HTML5 forms.

LEARNING OUTCOMES:

On completion of the course students should be able to

1.      Develop web pages using HTML5 directly or in combination with a HTML editor.

2.      Use Cascading Style Sheets (CSS) to make web content attractive and comfortable to update.

3.      Create robust layout using the Box-model structure.

4.      Apply skillfully different strategies for positioning the page's elements.

5.      Understand and implement the principles of web page/content/site design and usability.

TEXTBOOK:
NONE
REQUIRED RESERVED READING:
Book TitleAuthorPublisherISBN numberLibrary Call NumberComments
w3schoolW3Schools HTML & CSS Tutorialw3schoolw3school  
https://computerscience.johncabot.eduCS at JohncabotCS at JohncabotCS at Johncabot  

RECOMMENDED RESERVED READING:
NONE
GRADING POLICY
-ASSESSMENT METHODS:
AssignmentGuidelinesWeight
Attendance and class assignments Class assignments are used to encourage students to continuously practice throughout the course. Assignments will require to work on a practical exercise where a given web page must be developed or modified by applying the latest features learnt in class. Students can work on assignments both in class and at home (if they need to complete the task). Some assignments might take more than one class to be completed. They are NOT graded but the work done in class on a given day must be uploaded onto Moodle at the end of class.20%
Final project The final project will require the student to develop a web site in two steps (tasks):The first task is a sort of midterm task and it is due according to the professor's decision. The second task is the final web site and it is due the day of the final exam (there is no final exam). The midterm task is NOT graded but it is a (necessary) practical preparation for your final web site. Students will have the final two weeks of the course to work on their final project in class, although most of the work will be done outside class-time. The final grade will be based upon the following: Coding ability, Pages' design and structure, Content design (navigational features, organization of information), Site design (organization of sections). A grading rubric will be provided in due time. You can check for past semesters' students' projects at https://computerscience.johncabot.edu/ 80%

-ASSESSMENT CRITERIA:
AWork of this quality demonstrates professional-like skills in designing and implementing a web site (final portfoglio task) - All code and style sheets files will have passed the W3C validation te
BWork of this quality demonstrates competent skills in designing and implementing a web site (final portfoglio task) - All code and style sheets files will have passed the W3C validation test
CWork of this quality demonstrates acceptable skills in designing and implementing a web site (final portfoglio task) - Not all code and style sheets files will have passed the W3C validation test
DWork of this quality demonstrates just sufficient skills in designing and implementing a web site (final portfoglio task) - Not all code and style sheets files will have passed the W3C validation test
FWork of this quality demonstrates insufficient skills in designing and implementing a web site (final portfoglio task) - The code and style sheets files will not have passed the W3C validation test

-ATTENDANCE REQUIREMENTS:
Attendance is required.
ACADEMIC HONESTY
As stated in the university catalog, any student who commits an act of academic dishonesty will receive a failing grade on the work in which the dishonesty occurred. In addition, acts of academic dishonesty, irrespective of the weight of the assignment, may result in the student receiving a failing grade in the course. Instances of academic dishonesty will be reported to the Dean of Academic Affairs. A student who is reported twice for academic dishonesty is subject to summary dismissal from the University. In such a case, the Academic Council will then make a recommendation to the President, who will make the final decision.
STUDENTS WITH LEARNING OR OTHER DISABILITIES
John Cabot University does not discriminate on the basis of disability or handicap. Students with approved accommodations must inform their professors at the beginning of the term. Please see the website for the complete policy.

SCHEDULE

Week



Topic

Assignments

1



How the web works: web servers, web browsers, web editors

Introduction to the language of web-design: HTML and CSS.

HTML5; Structure and content of a web page;

CSS3 Style: Add style to structure and content.

Hand-on first practice.

Work in class

2



HTML5; Structure and content of a web page;

CSS3 Style: Add style to structure and content.

Hand-on first practice.

Adding HTML TAGs and CSS Properties to the page.

Work in class

3



Back to the basics - step-by-step learning - practice 1

Back to the basics - step-by-step learning - practice 2

Work in class

4



Apply your new skills.

Background images

Assignment 1

Assignment 2

5



LAYOUT - different methods - some new TAGs' names

LAYOUT - The Box-model - Float and Flexbox

Work in class

6



The Box-model - Float and Flexbox for complex structures

Work in class

7



Apply your new skills.

Assignment 3

8



Apply your new skills.

Assignment 4

9



The Box-model - practice 1

Midterm task

The Box-model - practice 2 - navigation bars

The CSS position property

Work in class

10



The Box-model - practice 3 - a complex structure

Dealing with images

Work in class

11



Layout - complex structures

Assignment 5

Assignment 6

12



Layout - complex structures

Forms

Assignment 7

13



Student's project
Work in class

14



Student's project
Work in class