Web Development

This two-part project is for a web design assignment for CCT360: Intermediate Web Design at the University of Toronto’s Communication, Culture, Information, and Technology program with Sheridan College. The task for this assignment is to replicate three pages of an existing website using only HTML and CSS (for part 1) as well as Bootstrap and Javascript (for part 2).

The website replication assignment consisted of two parts, each replicating different sites with the respective tools given. For first part, I replicated the Apple website purely using HTML and CSS. For the second part, I replicated the GitHub website (logged out view) using the CSS framework, Bootstrap 4, and Javascript, on top of HTML and CSS. No other frameworks or front-end languages were permitted for use.

Additionally for each part, as part of the design and development process used through the assignment, wireframes of the website that shows the layout and grid system were made to help analyze the structure and style of the website in order to complete the replication. Furthermore, the wireframes also helped provide guidance when creating layouts using Bootstrap’s grid systems.

The overall goal of the project is to demonstrate what we have learned in the course to recreate a site using standard HTML5 and CSS3 code.

For any links on the website recreation that link to a page that was not developed, a coming soon or construction page was created as a placeholder. All images used on the website including the logo, images and graphic mark belong to the respective website owners. Some sections, animations and features were not possible to implement without using additional code not part of the course content.

Permitted Tools: HTML, CSS
Pages Replicated: Home Page, Macs, Apple TV, Coming Soon (for all other links)

• Website Replication Demo (for Apple)
• Apple’s Website (Reference; May 2018)
• Apple Site Replication Source Code (Apple)

Permitted Tools: HTML, CSS, Bootstrap, Javascript
Pages Replicated: Home, Features, Business, 404 (for all other links)

• Website Replication Demo (for GitHub)
• GitHub’s Website (Reference; May 2018)
• GitHub Site Replication Source Code (GitHub)

For any links on the website recreation that link to a page that was not developed, a coming soon or construction page was created as a placeholder. All images used on the website including the logo, images and graphic mark belong to the respective website owners. Some sections, animations and features were not possible to implement without using additional code not part of the course content.