vcc.ca
CSTP 1106: Website Development
Effective date
September 2022
Department
Computer Systems Tech Diploma
School
Trades, Technology and Design
Description
This course covers the fundamentals of website development and design using Hypertext Markup Language (HTML5), Cascading Style Sheets (CSS), and JavaScript as scripting languages to add dynamic component to static websites. The emphasis in this course is the Front-End of web application.
Students learn how to create structured websites using HTML5; how to use the most up-to-date CSS styles to create responsive, visually-interesting pages and captivating graphical designs; and how to implement client-side script using basic concepts in JavaScript to access Document Object Model (DOM) elements, to validate web forms, and to perform site management.
Learners gain familiarity with various modern HTML design tools and APIs such as FlexBox and Grid. Students learn to use JavaScript frameworks such as react.js and Vue.js to make it easier to design complex and modular webpages. Students get familiar with the popular Online Code repository and versioning service Git by using it to keep track of their assignments and projects; all projects and assignments may be submitted to the instructor through Git. Student learn to perform Git activities such as commit, pull, push, pull requests, branching, and cloning.
Credits
3.0
Year of study
1st Year Post-secondary
Prerequisites
None
Corequisites
None
Course Learning Outcomes
Upon successful completion of this course, students will be able to:
- Describe the World Wide Web and Hyper Text Markup Language (HTML)
- Describe how web browsers work using HTTP and related protocols to retrieve information from web servers
- Describe the role of JavaScript in adding dynamic components to a web page
- Describe the role of CSS (Cascading Style Sheet) in a web page
- Design web pages using multimedia resources and CSS
- Design web pages using tables, columns, and CSS Grid
- Use Browser Developer Tools and their features
- Perform Media Queries as part of responsive design
- Use tools to design consistent web pages for both mobile and desktop
- Identify introductory JavaScript features such arrays, loops, and conditional statements
- Implement basic client-side programming using JavaScript for accessing DOM elements and adding interactivity to a webpage
- Describe the basics of SEO (search engine optimization)
Prior Learning Assessment & Recognition (PLAR)
None
Hours
Lecture, Online, Seminar, Tutorial: 35
Clinical, Lab, Rehearsal, Shop, Kitchen, Simulation, Studio: 25
Total Hours: 60
Clinical, Lab, Rehearsal, Shop, Kitchen, Simulation, Studio: 25
Total Hours: 60
Instructional Strategies
Instructional strategies include classroom lectures, demonstrations, group discussions, computer lab and hands-on practical work.
Grading System
Letter Grade (A-F)
Passing grade
C
Evaluation Plan
|
Type |
Percentage |
Assessment activity |
|
Assignments |
60 |
All assignments are web design and development projects. |
|
Midterm Exam |
20 |
|
|
Final Exam |
20 |
Final Design project: A mockup web page is provided and students must code the page. The page must contain all major design and interactivity features taught in the course. |
Course topics
- The basics of the World Wide Web and HyperText Markup Language (HTML)
- HTML vs CSS
- Web pages: fonts, colours and graphics
- Web pages: multimedia resources
- Web pages: tables and Grid, FlexBox
- DOM
- CSS frameworks: Bootstrap and others
- Adding javascript script to HTML
- Javascript basic features and components: variables, arrays, functions, operators, Conditionals
- Vue.js and React.js
Notes:
- Course contents and descriptions, offerings and schedules are subject to change without notice.
- Students are required to follow all College policies including ones that govern their educational experience at VCC. Policies are available on the VCC website at:
https://www.vcc.ca/about/governance--policies/policies/. - To find out if there are existing transfer agreements for this course, visit the BC Transfer Guide at https://www.bctransferguide.ca.