ET-710 Web Technology: Building and Maintaining Web Sites

COURSE 2:

Department of Engineering Technology

ET 710 – Web Technology: Building and Maintaining Web Sites

COURSE CREDIT: 3 (2 lecture hours, 2 laboratory hours)


Day: Monday, Tuesday, Wednesday, and Thursday

Time: 6:10pm – 9:50pm

Room: T-22


COURSE DESCRIPTION


ET 710 focuses on the skills needed to build, maintain, and administrate a website. At the beginning of the courses, students will learn how to construct and test code in different interfaces such as HTML, CSS, and HTML5. After that, the course will teach students how to explore different libraries and frameworks, customize existing routines or procedures in their code, and leverage code from past projects to develop code for a new one. At the end, students will demonstrate their coding skills by translating design requirements and instructions into a responsive implementation using different interfaces and frameworks.  


COURSE OBJECTIVES


At the end of the training course, student shall be able to:

  • Build and test code using text editor, and translate design instruction into code.
  • Translate design direction into a responsive implementation using different web development techniques such as HTML, CSS, HTML5, and bootstrap.  
  • Collect and use existing routines or procedures and integrate them into their code.
  • Customize frameworks, like a blueprint or a template, for their application.
  • Display ingenuity and initiative to resolve difficulties while working on individual or team project.
  • Deliver tasks on-time and match quality requirements.
  • Carry his/her share of the team’s load and work with people with a variety of ideas and participate in a team culture.
  • Communicate with instructors and colleagues on application and development of projects.

COURSE MATERIALS


TEXTBOOK

HTML and CSS: Design and Build Websites by Jon Duckett

ISBN-13: 978-1118008188

ISBN-10: 1118008189


ONLINE LEARNING

www.codecademy.com  and www.w3schools.com


GENERAL INFORMATION


ATTENDANCE:  1-19 minutes is considered ONE LATE, THREE lateness is equal to ONE ABSENCE, and THREE absences result in a “WF” or “F” as the lab grade. More than 20 minutes late counts as an absence.


LECTURE CONDUCT: No eating, drinking, smoking, radio playing, cell-phones, and use of inappropriate words in the classroom. Student should clean up the work bench before leaving the classroom at the end of the session; a dirty bench gets points off for the each exam grade.


CLASS ASSIGNMENTS: There are a total of 11 Class Assignment during the semester. Students are required to perform satisfactory work in the lecture and laboratory in order to receive a passing grade in the course. Each Class Assignment is done individually during lab schedule. All Class Assignments MUST be submitted before due date, late Class Assignments will not be accepted and it will be graded as “zero”.


PROJECTS: There are a total of two main projects during the semester. All Projects MUST be typed, presented in a professional manner, and submitted before due date, late Projects will not be accepted and it will be graded as “zero”.


ACADEMIC INTEGRITY POLICY (Department or College): Academic honesty is expected of all students. Any violation of academic integrity is taken extremely seriously. All assignments and projects must be the original work of the student or teammates. Plagiarism will not be tolerated. Any questions regarding academic integrity should be brought to the attention of the instructor. The following is the Queensborough Community College Policy on Academic Integrity: “It is the official policy of the College that all acts or attempted acts that are violations of Academic Integrity be reported to the Office of Student Affairs. At the faculty member’s discretion and with the concurrence of the student or students involved, some cases though reported to the Office of Student Affairs may be resolved within the confines of the course and department. The instructor has the authority to adjust the offender’s grade as deemed appropriate, including assigning an F to the assignment or exercise or, in more serious cases, an F to the student for the entire course.” The college’s policy on Academic Integrity can be found at http://www.qcc.cuny.edu/governance/docs/Academic_Integrity_Document.pdf


DISABILITIES: Any student who feels that he or she may need an accommodation based upon the impact of a disability should contact me privately to discuss his/her specific needs. Please contact the office of Services for Students with Disabilities in Science Building, Room S-132, 718-631-6257 to coordinate reasonable accommodations for students with documented disabilities. You can visit the Services for Students with Disabilities website by clicking on this link: http://www.qcc.cuny.edu/SSD/.



Average of Class Assignments: 40%

Project 1: 15%

Project 2: 20%

Project 3: 25%

TOTAL: 100%


LETTER/ POINTS RANGE/ GPA

A Excellent/ 96-100/ 4.0

A-/ 90-95/ 3.7

B+/ 87-89/ 3.3

B Good/ 84-86/ 3.0

B-/ 80-83/ 2.7

C+/ 77-79/ 2.3

C Satisfactory/ 74-76/ 2.0

C-/ 70-73/ 1.7

D+/ 67-69/ 1.3

D Passing/ 64-66/ 1.0

D-/ 60-63/ 0.7

F Failure/ 0-59/ 0

COURSE OUTLINE


Week 1: Introduction To Web Technology

How the web works, the different type of internet browsers, web servers, screen readers, what do you see on a web and how it is crated, what is HTML, CSS, frameworks, text editors: notepad and atom; where and how to meet the community of web technology. Creating the first web page using basics tags. For these, students will:
  • Be introduced on how HTML describes the structure of a web page.
  • learn how tags or elements are added to your document and how to work with three main tags (tags: body, head, and title)
  • Use headings and paragraphs tags to create structure markups (tags: h1-h6, p, b, I, sup, sub, br, hr)
  • Use words and sentences emphases tags to create semantic markups (tags: strong, em, blockquote, q,  abbr, cite, dfn, address, ins, del, s)
  • Use tags to create three different types of HTML lists: ordered, unordered, and definition lists.  
  • Understand the elements and attributes and how to use them to create links between pages, links to a part of a page using ID and class tags, link to other sites, and email links.
Class Assignment 1: Create a webpage where with different type of hyperlinks and text format

Textbook: Chapter 1: Structure, Chapter 2: Text, Chapter 3: Lists, Chapter 4: Links


Week 2: HTML Technology: Tables, Images, Extra Markup

In the second week students will:
  • Understand the basic elements of images: the different types of images format (jpeg, gif, png), image dimensions, tools to edit and save images, and where and how to use images in a web page.
  • Use the different tags, elements, and attributes to manipulate and control an image display in a webpage.  
  • Learn how to create tables, what information suits tables, and how to represent complex data in tables.
  • Learn about the different versions of HTML and how to indicate which version you are using; how to add comments to your code; how to manipulate global attributes and elements that are used to group together parts of the page where no other elements is suitable; how to embed a page within a page using iframes; how to add information about the web page using the <meta> element; and adding characters such as angled brackets and copyright symbols.
Class Assignment 2: Create a webpage with tables, tables, and links

Textbook: Chapter 5: Images, Chapter 6: Tables, Chapter 8: Extra Markup


Week 3: How to create and present a website proposal

Class Assignment 3: Create a proposal for project 1.

Project 1: Create a basic website, using only HTML, about their favorite city.

Textbook: Material Provide by instructor

Week 4: Complete and submit project 1


Week 5: Introduction to Cascading Style Sheets, CSS

The fifth week introduces students to Cascading Style Sheets, CSS, and the different rules and properties of CSS. Students will:
  • Introduce how CSS works; learn how to write CSS rules and how they are applied to HTML pages; understand and use the various properties of CSS.
  • Learn how to specify colors and color terminology; how to use contrast and ensuring that your text is readable; and to use background colors in an entire page or part of the page.
  • Understand how to use properties in CSS to control a text format such as to choice font, size, weight, style, and spacing.
  • Learn how CSS properties in each HTML elements to control the dimensions of boxes, create borders around boxes, set margins and padding for boxes, and show and hide boxes.
Class Assignment 4: Create a webpage and link to CSS file to modify the HTML view.

Textbook: Chapter 10: Introduction to CSS, Chapter 11: Colors, Chapter 12: Text, Chapter 13: Boxes.


Week 6: CSS Properties and Design Process

The sixth week continues on CSS and how use the different properties of CSS to work with HTML to make webpages nicer. Students will:
  • Learn how to use several CSS properties to work with HTML elements such as lists, tables, and forms. Some of these properties involve in how to specify the type of bullet point or numbering on lists, add borders and backgrounds to table cells, and how to control the appearance of form controls.
  • Understand how to create attractive page layouts: Explore the different ways to position elements using normal flow, relative positioning, absolute positioning and floats; discover how various devices have different screen sizes and resolutions, and how this affects the design process; learn the different between fixed width and liquid layouts, and how they are created; learn how designers use grids to make their page designs look more professional.
  • Learn how to control the size alignment of an image, add background images, and images rollover using CSS.
Class Assignment 5: Design a webpage using divs

Textbook: Chapter 14 Lists, Tables, and forms, Chapter 15: layout, Chapter 16: images.


Week 7: CSS Animations using @keyframes, and Media Icons

In the seventh week students will:Understand CSS animation and use @keyframes to create basic animation, infinitely looping animation, and animate 3D transformation.

How to insert and use Media Icons

Class Assignment 6: Create a webpage with different CSS animations

Textbook: Material provides by instructor


Week 8: HTML5 layout, Process and Design, and How to Create a Project Proposal

In the eighth week students will:
  • Learn how to use HTML5 layout elements that will help to define the structure of a webpage.
  • Understand the process to create a website: how to understand the audience your site may attract and what information they will expect to find on it; how to organize information so that visitors can find what they are looking for; design theory for presenting information in a way that helps visitors achieve their goals; design tips to help you create more attractive and professional sites.
  • Learn some practical information to successful launch a site: the basics of search engine optimization; using analytics to understand how people are using your site after it has launched; and putting your site on the website.
  • What is Project Proposal and how to present a project proposal
Project 2: Project Proposal: Create an Informative website using HTML and CSS

Textbook: Chapter 17: HTML5, Chapter 18: Process and Design, Chapter 19: Practical Information


Week 9: Complete and submit Project 2


Week  10: Introduction to framework and how to work with Bootstrap

In week 10, students be introduced to Bootstrap technology to manipulate basic style and master layouts and layout components

Class Assignment 7: TBA

Textbook: Material will be provided by instructor.


Week 11: bootstrap 4

In the eleventh week, students continue learning bootstrap 4, how to create navigation bar, styling elements, and predesign layout components.  

Class Assignment 8: TBA

Textbook: Material will be provided by instructor.


Week 12: bootstrap 4

In the twelve week, student will learn how to work with interactive components using bootstrap

Class Assignment 9: TBA

Textbook: Material will be provided by instructor.


Week 13: Forms using PHP

In the thirteenth week, students will learn how to create and work with forms using bootstrap and php programming language.

Class Assignment 10: TBA

Textbook: Material will be provided by instructor.


Week 14 and 15: Complete and submit project 3

Project 3: Create a professional portfolio

NOTE: Instructor reserves the right to modify the present outline anytime.


 

Campus Cultural Centers

Kupferberg Holocaust Center (KHC)Opens in a new window
Kupferberg Holocaust Center Opens in a new window

Using the lessons of the Holocaust to educate current and future generations about the ramifications of unbridled prejudice, racism and stereotyping.

Queensborough Performing Arts CenterOpens in a new window
QPAC: Performing Arts CenterOpens in a new window

QPAC is an invaluable entertainment company in this region with a growing national reputation. The arts at QPAC continues to play a vital role in transforming lives and building stronger communities.

Queensborough Art GalleryOpens in a new window
QCC Art GalleryOpens in a new window

The QCC Art Gallery of the City University of New York is a vital educational and cultural resource for Queensborough Community College, the Borough of Queens and the surrounding communities.