Coding
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="header">Home page</div>
<div id="Studentswillbeabletodothefollowing">Students will be able to do the following</div>
<div id="paragraph3">
<p>Defining</p>
<p>- Identify potential users, societal impacts, and other relevant contextual factors
for a chosen design opportunity </p>
<p>- Identify criteria for success, intended impact, and any constraints or possible unintended impacts
​​ </p>
<p>Ideating </p>
<p>- Take creative risks in generating ideas and add to others’ ideas in ways that enhance them </p>
<p>- Screen ideas against criteria and constraints </p>
<p>- Collaborate on idea generation and maintain an open mind about potentially
viable ideas
​​</p>
<p>Prototyping</p>
<p>- Identify and use sources of inspiration and information </p>
<p>- Choose a form for prototyping and develop a plan that includes key stages
and resources </p>
<p>- Prototype, making changes to tools, designs, and procedures as needed </p>
<p>- Record iterations of prototyping
​ </p>
<p>Testing</p>
<p>- Identify sources of feedback </p>
<p>- Develop an appropriate test of the prototype </p>
<p>- Conduct the test, collect and compile data, evaluate data, and decide on changes </p>
<p>- Iterate the prototype or abandon the design idea
​​
Making
Identify and use appropriate tools, technologies, and processes for the production </p>
<p>- Make a step-by-step plan for production and carry it out, making changes as needed</p>
<p>Sharing </p>
<p>-Decide on how and with whom to share product and processes </p>
<p>-Demonstrate the product to potential users, providing a rationale for selected solution, modifications, and procedures, using appropriate terminology </p>
<p>-Critically reflect on design thinking and processes, and identify new design goals </p>
<p>-Assess ability to work effectively both as individuals and collaboratively in a group, including the ability to share and maintain an efficient cooperative workspace ​​ </p>
<p>Applied Technologies </p>
<p>-Choose, adapt, and if necessary learn more about appropriate tools and technologies to use for tasks Evaluate impacts, including unintended negative consequences, of choices made </p>
<p>about technology use </p>
</div>
<div id="bigideas">Big Ideas</div>
<div id="paragraph2">
<p>-User needs and interests drive the design process.</p>
<p>-Social, ethical, and sustainability considerations influence design.</p>
<p>-Complex tasks require different technologies and tools at different stages. </p>
<p>-Multi-stage design projects benefit from collaborative work environments. </p>
</div>
<div id="Studentswilbeabletounderstandthefollowing">Students will be able to understand the following:</div>
<div id="paragraph1">
<p>-design opportunities </p>
<p> -relationship between web structure and content, HTML, style, and design, cascading style sheets (CSS), and website functionality and interactivity</p>
<p>-advantages/disadvantages of websites and content management systems (CMS)</p>
<p>-website design planning tools</p>
<p> -HTML text editing software, WYSIWYG HTML editors user interface (UI) and user experience (UX)</p>
<p> -World Wide Web Consortium (W3C) standards and responsive and optimized web design</p>
<p> -domain and hosting options</p>
<p> -copyright, Creative Commons, fair use protocols for media and content, and ethics of cultural appropriation</p>
<p>-accessibility and functionality in web design</p>
<p>-writing for the web</p>
<p>-principles of creative web design </p>
<p>-security and privacy implications </p>
<p>-principles of database creation and management </p>
<p>-career options in web development and the interpersonal skills necessary for success in this field </p>
</div>
</div>
</body>
</html>
Home page
Vocabulary
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="header">Web Design Vocabulary List</div>
<div id="vocabulary">
<p>HTML:</p>
<p>HTML stands for HyperText Markup Language, and is the language of the web. ​ </p>
<p>CSS:</p>
<p>HTML isn't enough on its own to create beautiful web pages, however. Cascading Style Sheets (CSS) provide a method for designers to create a visual set of rules that determine how different elements within a web page will be rendered on screen by the browser. CSS allows things like the colour of text, the background, the size, shape and position of all the different parts of a page to be set. ​ </p>
<p>Header:</p>
<p>A website header is located at the top of each page of the website. The header typically looks the same from page to page and contains an organization’s logo and navigation, creating a central hub to get elsewhere on the website. ​ </p>
<p>Primary Navigation: </p>
<p>All websites should have primary navigation. Primary navigation is typically a list of prominent links toward the top of the page, with titles that help users determine where they want to go from wherever they are at on the site. The primary navigation features the parent pages of a website, which are typically broad topics leading users to related, more detailed, child pages. ​ </p>
<p>Secondary Navigation: </p>
<p>Secondary navigation is typically found in the website header above the primary navigation. While the primary navigation is considered the main nav, secondary navigation can include helpful items for users that maybe need to be highlighted. A lot of times you’ll find action items like Log In, Donate, or Volunteer. ​ </p>
<p>Dropdown Menu: </p>
<p>Dropdown menus reveal themselves when a user rolls over a primary navigation item, showing a list of child pages (so named since they stem from the parent pages). Dropdown menus help a user dive deeper into website content to find strategically organized pages. ​ </p>
<p>Search Bar:</p>
<p>A search bar is typically located in the upper right-hand corner of the website’s header. It is usually noted by the word “Search” within a form field, or includes some sort of magnifying glass icon. Here, users can type in a word or phrase they’re looking for more information on and then be taken to a results page listing website pages that may have related content within them. This functionality is helpful for site visitors that may know exactly what information they’re looking for but don’t want to browse through your navigation. ​ </p>
<p>Link: </p>
<p>Link allow website users to get from one web page to the next. They can be in the form of text or an image. Text links are typically highlighted in some way, using color to make the words stand out from static copy or making the text look like it’s in a button. Images can be highlighted with some sort of color overlay, words or symbols to make it obvious that it’s clickable. All links, regardless of how they are visually represented, should have some sort of hover state to indicate its clickability. </p>
<p>Selected State:</p>
<p>A selected state is usually found in a list of navigation links to show what link is selected at that moment. This is a great way to show a user where they’re at within the site. For example if a site visitor is on the About Us page, the “About Us” link in the header would have some sort of selected state activated. The text may be bold, underlined, a different color or all of the above. ​ </p>
<p>Homepage: </p>
<p>A homepage is essentially the cover to your website. It’s usually the most unique page on your site, giving visitors an immediate sense of who you are as an organization. A homepage also guides them to other important information throughout the internal pages of your website. ​ </p>
<p>Footer:</p>
<p>A footer is the caboose of any given site. Similar to the header, the footer stays the same page to page, but it appears at the very bottom of every single page of the website rather than the top. A footer is typically a very structured section of the site that serves as the last opportunity to get various information to your site visitors. Some organizations opt to keep this as simple as possible, with only copyright information. Some create large footers, repeating the primary navigation, a call to action or two, and a statement that they are a 501(c)3 to help build credibility. Social media links are another popular item for website footers. ​ </p>
<p>Responsive design: </p>
<p>A responsive design is one that adapts to the user's device, which means a web page will re-paginated itself as the screen size reduces or increases, displaying in multiple columns when viewed on a desktop computer, but only a single column when viewed on a smartphone. ​ </p>
<p>Web hosting definition: </p>
<p>When a hosting provider allocates space on a web server for a website to store its files, they are hosting a website. Web hosting makes the files that comprise a website (code, images, etc.) available for viewing online. Every website you’ve ever visited is hosted on a server. The amount of space allocated on a server to a website depends on the type of hosting. The main types of hosting are shared, dedicated, VPS and reseller. They are differentiated by the kind of technology used for the server, the level of management provided and the additional services on offer.</p>
</div>
</div>
</body>
</html>
Be a web designer
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="headerpage3">Become a Web Design</div>
<div id="para4">The difference between Web Design and Web Developer</div>
<div id="link1"><a href="https://www.abmcollege.com/blog/guide-to-success-how-can-i-be-a-web-designer-and-developer">https://www.abmcollege.com/blog/guide-to-success-how-can-i-be-a-web-designer-and-developer</a></div>
<div id="para5">How to become a Web Designer?</div>
<div id="link2"><a href="https://alis.alberta.ca/occinfo/occupations-in-alberta/occupation-profiles/web-designer/"> https://alis.alberta.ca/occinfo/occupations-in-alberta/occupation-profiles/web-designer/</a></div>
<img src="Screen Shot 2021-12-09 at 2.55.47 PM.png" width="894" height="922" alt=""/></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="PnCHeader">Work platform and Coding Exercise </div>
<div id="PnCsection1">Section 1</div>
<div id="PnCpara1">
<p>Instruction: </p>
<p> Go to Wix.com to build a website. </p>
<p> All your works will post on your website. </p>
</div>
<div id="PnCpara2">
<p>Instruction:</p>
<p>-Go to Chrome</p>
<p>-Search Wix </p>
<p>-Create an account on Wix </p>
<p>-Set an email and password </p>
<p>-Choose Wix Editor to create your website </p>
<p>-Choose a template </p>
<p>-Pick your favorite template </p>
<p>-Connect your domain (choose the free option) </p>
<p>-Delete all Wix pictures. Use your own Photo, Drawing, or Painting. ​ </p>
<p>-Delete all the Wix’s images​ ​</p>
</div>
<div id="PnCpara3">
<p> Edit your site: </p>
<p>-Set up the navigator and plan the layout </p>
<p>-Set up pages</p>
</div>
<div id="PnCpara4">
<p>Home </p>
<p>-Design your front page with your own image and writing. </p>
</div>
<div id="PnCpara5">
<p>About </p>
<p>-First name. </p>
<p>-What is your dream career? </p>
<p>- No personal information. </p>
</div>
<div id="PnCpara6">
<p>Exercise </p>
<p>-Post all the exercise on this page</p>
</div>
<div id="PnCpara7">
<p>Project </p>
<p>-Newspaper layout </p>
<p>-Newspaper website</p>
</div>
<div id="PnCpara8">
<p>Final Project </p>
<p> -Page image </p>
<p> -Coding </p>
<p> -Storyboard </p>
<p> -Timeline/ Role and responsibility</p>
</div>
<div id="PnCpara9">
<p>Contact page </p>
<p> (Don't show your email address on your website yet. The purpose is to protect yourself.) </p>
<p> -Follow the instruction above and building the 4 pages </p>
<p> -You can add more page if you like </p>
<p> -Organize, Design, and Edit each page </p>
<p> -You will post all your works and projects on the setup pages. </p>
</div>
<div id="PnCpara10">
<p>Project posting:</p>
<p>-4 pages Exercise – Exercise page </p>
<p>- Newspaper layout – Project page </p>
<p> -Newspaper website – Project page</p>
</div>
<div id="PnCpara11">
<p>Team Work: </p>
<p>- Story outline _ Final Project page </p>
<p> -Storyboard – Final Project page</p>
</div>
<div id="PnCpara12">
<p>Individual Work: </p>
<p>- Comic website layout - Final Project page </p>
<p>- Character – Final Project page </p>
<p>- Screen shot Comic Image, Code – Final Project page</p>
</div>
<div id="PnCpara13">*Remember Save and Publish*</div>
<div id="PnCsection2">Section 2</div>
<div id="PnC2para1">
<p>Web Design Exercise Instruction:
Build and design a Newspaper Website in Adobe Dreamweaver </p>
<p> -Size: 1024 pixels wide by 768 pixels high.</p>
</div>
<div id="PnCimg1"><img src="Screen Shot 2021-12-15 at 1.27.25 PM.png" width="588" height="380" alt=""/></div>
<div id="PnCimg2"><img src="Screen Shot 2021-12-15 at 1.29.28 PM.png" width="516" height="416" alt=""/></div>
<div id="PnC2para2">
<p>Material:
Notebook
Pen, pencil and color pencil
Eraser
Ruler
Newspaper ( for reference)
​
​ </p>
<p> ​Approve by Mrs. Leung
Seven </p>
</div>
</div>
</body>
</html>
Work platform Coding Exercise
Lesson 1
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="lesson1header">lesson 1</div>
<div id="lesson1para1">Coding Instruction and Lesson 1 - Container</div>
<div id="lesson1img1"><img src="Screen Shot 2021-12-15 at 1.36.55 PM.png" width="291" height="448" alt=""/></div>
<div id="lesson1img2"><img src="Screen Shot 2021-12-15 at 1.37.08 PM.png" width="598" height="423" alt=""/></div>
<div id="lesson1img3"><img src="Screen Shot 2021-12-15 at 1.37.20 PM.png" width="320" height="612" alt=""/></div>
<div id="lesson1img4"><img src="Screen Shot 2021-12-15 at 1.37.31 PM.png" width="583" height="296" alt=""/></div>
<div id="lesson1img5"><img src="Screen Shot 2021-12-15 at 1.37.41 PM.png" width="669" height="224" alt=""/></div>
<div id="lesson1img6"><img src="Screen Shot 2021-12-15 at 1.37.53 PM.png" width="598" height="493" alt=""/></div>
<div id="lesson1img7"><img src="Screen Shot 2021-12-15 at 1.38.08 PM.png" width="598" height="1043" alt=""/></div>
<div id="lesson1img8"><img src="Screen Shot 2021-12-15 at 1.38.22 PM.png" width="598" height="751" alt=""/></div>
<div id="lesson1img9"><img src="Screen Shot 2021-12-15 at 1.38.37 PM.png" width="411" height="205" alt=""/></div>
<div id="lesson1img10"><img src="Screen Shot 2021-12-15 at 1.38.46 PM.png" width="350" height="807" alt=""/></div>
<div id="lesson1img11"></div>
<div id="lesson1para2">The most commonly used resolutions across mobile, desktop, and tablet are: 1920×1080 </div>
<div id="lesson1para3">Save file:save all-Add . html on your file name
</div>
</div>
</body>
</html>
Lesson 2
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="lesson1header">lesson 2</div>
<div id="lesson2p1">Coding Instruction and Lesson 2 - Titlebar / Header</div>
<div id="lesson2img1"><img src="Screen Shot 2021-12-16 at 1.44.10 PM.png" width="601" height="1023" alt=""/></div>
<div id="lesson2img2"><img src="Screen Shot 2021-12-16 at 1.44.34 PM.png" width="346" height="648" alt=""/></div>
<div id="lesson2img3"><img src="Screen Shot 2021-12-16 at 1.44.54 PM.png" width="305" height="464" alt=""/></div>
<div id="lesson2img4"><img src="Screen Shot 2021-12-16 at 1.45.17 PM.png" width="600" height="411" alt=""/></div>
<div id="lesson2img5"><img src="Screen Shot 2021-12-16 at 1.45.39 PM.png" width="463" height="832" alt=""/></div>
<div id="lesson2img6"><img src="Screen Shot 2021-12-16 at 1.45.54 PM.png" width="600" height="375" alt=""/></div>
<div id="lesson2img7"><img src="Screen Shot 2021-12-16 at 1.46.06 PM.png" width="750" height="438" alt=""/></div>
<div id="lesson2img8"><img src="Screen Shot 2021-12-16 at 1.46.23 PM.png" width="855" height="502" alt=""/></div>
<div id="lesson2img9"><img src="Screen Shot 2021-12-16 at 1.46.37 PM.png" width="597" height="724" alt=""/></div>
<div id="lesson2img10"><img src="Screen Shot 2021-12-16 at 1.46.48 PM.png" width="309" height="483" alt=""/></div>
<div id="lesson2img11"><img src="Screen Shot 2021-12-16 at 1.46.58 PM.png" width="764" height="424" alt=""/></div>
<div id="lesson2img12"><img src="Screen Shot 2021-12-16 at 1.47.06 PM.png" width="893" height="465" alt=""/></div>
<div id="lesson2para2">1</div>
<div id="lesson2para3">2</div>
<div id="lesson2para4">3</div>
<div id="lesson2para5">4</div>
<div id="lesson2para6">5</div>
<div id="lesson2para7">6</div>
<div id="lesson2para8">7</div>
<div id="lesson2para9">8</div>
<div id="lesson2para10">9</div>
<div id="lesson2para11">10</div>
<div id="lesson2para12">11</div>
<div id="lesson2para13">12</div>
</div>
Lesson 3
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="lesson1header">lesson 3</div>
<div id="lesson3para1">Coding Instruction and Lesson 3 - Navigation</div>
<div id="lesson3img1"><img src="Screen Shot 2021-12-16 at 2.13.03 PM.png" width="274" height="661" alt=""/></div>
<div id="lesson3img2"><img src="Screen Shot 2021-12-16 at 2.13.18 PM.png" width="902" height="528" alt=""/></div>
<div id="lesson3img3"><img src="Screen Shot 2021-12-16 at 2.13.31 PM.png" width="682" height="612" alt=""/></div>
<div id="lesson3img4"><img src="Screen Shot 2021-12-16 at 2.13.49 PM.png" width="972" height="720" alt=""/></div>
<div id="lesson3img5"><img src="Screen Shot 2021-12-16 at 2.14.01 PM.png" width="646" height="656" alt=""/></div>
<div id="lesson3img6"><img src="Screen Shot 2021-12-16 at 2.14.13 PM.png" width="708" height="434" alt=""/></div>
<div id="lesson3img7"><img src="Screen Shot 2021-12-16 at 2.14.27 PM.png" width="282" height="792" alt=""/></div>
<div id="lesson3img8"><img src="Screen Shot 2021-12-16 at 2.14.40 PM.png" width="256" height="90" alt=""/></div>
<div id="lesson3img9"><img src="Screen Shot 2021-12-16 at 2.14.48 PM.png" width="882" height="510" alt=""/></div>
<div id="lesson3img10"><img src="Screen Shot 2021-12-16 at 2.15.00 PM.png" width="918" height="486" alt=""/></div>
<div id="lesson3img11"><img src="Screen Shot 2021-12-16 at 2.15.10 PM.png" width="598" height="728" alt=""/></div>
<div id="lesson3img12"><img src="Screen Shot 2021-12-16 at 2.15.20 PM.png" width="598" height="339" alt=""/></div>
<div id="lesson3para2">Set the style of your link. Example: Never underline.</div>
<div id="lesson3para3">1</div>
<div id="lesson3para4">2</div>
<div id="lesson3para5">3</div>
<div id="lesson3para6">4</div>
<div id="lesson3para7">5</div>
<div id="lesson3para8">6</div>
<div id="lesson3para9">7</div>
<div id="lesson3para10">8</div>
<div id="lesson3para11">9</div>
<div id="lesson3para12">10</div>
<div id="lesson3para13">11</div>
<div id="lesson3para14">12</div>
</div>
</body>
</html>
Lesson 4
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="lesson1header">lesson 4</div>
<div id="lesson4para1">Coding Instruction and Lesson 4 - Navigation Link</div>
<div id="lesson4para2">Create HTML page for link</div>
<div id="lesson4img1"><img src="Screen Shot 2021-12-13 at 2.11.50 PM.png" width="785" height="562" alt=""/></div>
<div id="lesson4para3">
<p>Highlight the pages</p>
<p>- Home page must name: Index.html </p>
<p> -Type the link page </p>
<p> -Example: Lesson.htm, Contact.html</p>
</div>
</div>
</body>
</html>
Lesson 5
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="lesson1header">lesson 5</div>
<div id="lesson5para1">Coding Instruction and Lesson 5 - Image</div>
<div id="lesson5img1"><img src="Screen Shot 2021-12-13 at 2.18.48 PM.png" width="596" height="369" alt=""/></div>
<div id="lesson5img2"><img src="Screen Shot 2021-12-13 at 2.18.56 PM.png" width="596" height="330" alt=""/></div>
<div id="lesson5img3"><img src="Screen Shot 2021-12-13 at 2.19.04 PM.png" width="596" height="267" alt=""/></div>
<div id="lesson5img4"><img src="Screen Shot 2021-12-13 at 2.19.14 PM.png" width="543" height="223" alt=""/></div>
<div id="lesson5img5"><img src="Screen Shot 2021-12-13 at 2.19.23 PM.png" width="594" height="239" alt=""/></div>
</div>
</body>
</html>
Student's
gallery
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="file:///Macintosh HD/Users/il000145/Desktop/css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="file:///Macintosh HD/Users/il000145/Desktop/final quiz-homepage.html">Home</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-page2.html">Vocabulary</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-page3.html">be a WebDesigner</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-page4.html">Platform/Coding</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-lesson1.html">lesson1</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-lesson2.html">lesson2</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-lesson3.html">lesson3</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-lesson4.html">lesson4</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-lesson5.html">lesson5</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-page10.html">Student'sGallery</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-page11.html">Rubric</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-page5.html">Exercise</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-page6.html">Final Quiz</a>
<a href="file:///Macintosh HD/Users/il000145/Desktop/finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="lesson1header">Student Gallery</div>
<div id="SGpara1">2020-2021</div>
<div id="SGpara2">web1</div>
<div id="SGpara3">web2</div>
<div id="SGpara4">
<p>M.Wasay Shahrukh <a href="https://wasayshahrukh94.wixsite.com/webdesign">https://wasayshahrukh94.wixsite.com/webdesign</a></p>
<p> Vincent Huang <a href="https://vincemcyt.wixsite.com/webdesign">https://vincemcyt.wixsite.com/webdesign</a></p>
<p> Sarah Seto <a href="https://sarahseto8125.wixsite.com/webdesign">https://sarahseto8125.wixsite.com/webdesign</a></p>
<p> Jiarui Li <a href="https://jiarui0522.wixsite.com/webdesign">https://jiarui0522.wixsite.com/webdesign</a></p>
<p> Luke Young <a href="https://lukezcyoung.wixsite.com/webdesign">https://lukezcyoung.wixsite.com/webdesign</a></p>
<p> Kim Khai Tran <a href="https://tonychan862005.wixsite.com/webdesign ">https://tonychan862005.wixsite.com/webdesign </a></p>
<p> Lewis Liu <a href="https://qq1807520261.wixsite.com/webdesign">https://qq1807520261.wixsite.com/webdesign</a></p>
<p> Ivy Qin <a href="https://ivyqin2014.wixsite.com/webdesign">https://ivyqin2014.wixsite.com/webdesign</a></p>
<p> Julia Oliveira Pierobom <a href="https://juliapierobom16.wixsite.com/webdesign">https://juliapierobom16.wixsite.com/webdesign</a></p>
<p> Cole Wlson <a href="https://crw267018.wixsite.com/webdesign">https://crw267018.wixsite.com/webdesign</a> </p>
<p> Mandison Luk <a href="http://mandison888luk.wixsite.com/webdesign">http://mandison888luk.wixsite.com/webdesign</a></p>
<p> Alastard Yung <a href="https://alastardy.wixsite.com/webdesign">https://alastardy.wixsite.com/webdesign</a></p>
</div>
<div id="SGpara5">
<p>Hans Jacob Choa <a href="https://hansjacob10.wixsite.com/webdesign">https://hansjacob10.wixsite.com/webdesign</a></p>
<p> Bonnie Lai <a href="https://laibonnie1324.wixsite.com/webdesign">https://laibonnie1324.wixsite.com/webdesign</a></p>
<p> Wesley Ainu’u <a href="https://theofficeainuu.wixsite.com/webdeveloupment">https://theofficeainuu.wixsite.com/webdeveloupment</a></p>
<p>Benny Hui <a href="https://bennyhui585.wixsite.com/webdesign">https://bennyhui585.wixsite.com/webdesign</a></p>
<p>Jennifer Luo <a href=" https://yili3380.wixsite.com/webdesign"> https://yili3380.wixsite.com/webdesign</a></p>
<p> Lily Liu <a href=" https://liuyi050727.wixsite.com/webdesign"> https://liuyi050727.wixsite.com/webdesign</a></p>
<p> Rebecca Huang <a href="https://miaomiao20050113.wixsite.com/webdesign">https://miaomiao20050113.wixsite.com/webdesign</a></p>
<p>Zoey Lee <a href="https://zoeylee270.wixsite.com/webdesign">https://zoeylee270.wixsite.com/webdesign</a></p>
<p>Adam Chen <a href="https://chentungwei45.wixsite.com/webdesign">https://chentungwei45.wixsite.com/webdesign</a></p>
</div>
<div id="SGpara6">2021</div>
<div id="SGpara7">
<p>Alhit Ibrahim <a href="https://32131231231231213.wixsite.com/webdesign">https://32131231231231213.wixsite.com/webdesign</a> ​ </p>
<p> Aman Baktazh <a href=" https://baktazh.wixsite.com/webdesign"> https://baktazh.wixsite.com/webdesign</a> ​ </p>
<p> Laksh Babbar <a href="https://babbarlaksh360.wixsite.com/webdesign">https://babbarlaksh360.wixsite.com/webdesign</a> </p>
<p> ​
Berenguer Jaime <a href="https://jebb0506.wixsite.com/webdesign">https://jebb0506.wixsite.com/webdesign</a> </p>
<p>​
Harrison Berger <a href="https://harrisonberger100.wixsite.com/webdesign">https://harrisonberger100.wixsite.com/webdesign</a> ​ </p>
<p> Chan Maggie <a href="https://maggiechan930.wixsite.com/webdesign ">https://maggiechan930.wixsite.com/webdesign </a> </p>
<p>​
Fu Sean <a href="https://chinawolfssff.wixsite.com/webdesign">https://chinawolfssff.wixsite.com/webdesign</a>
​</p>
<p> Gandeaga Lia <a href="https://liagandeaga44.wixsite.com/webdesign">https://liagandeaga44.wixsite.com/webdesign</a>
​</p>
<p> Gloria Gao <a href="https://gloriagao58.wixsite.com/webdesign">https://gloriagao58.wixsite.com/webdesign</a> </p>
<p> Green Adam <a href="https://adamtheboo2.wixsite.com/webdesign">https://adamtheboo2.wixsite.com/webdesign</a> </p>
<p>​
Syed Hassan <a href="https://raiyan062016.wixsite.com/webdesign">https://raiyan062016.wixsite.com/webdesign</a>
​</p>
<p> Hira Alishay <a href="https://alishay222.wixsite.com/webdesign">https://alishay222.wixsite.com/webdesign</a> ​ </p>
<p> David Hwang <a href=" https://ddhtheblessed1.wixsite.com/webdesign"> https://ddhtheblessed1.wixsite.com/webdesign</a> ​</p>
</div>
<div id="SGpara8">
<p>Ian Lau <a href="https://il000145.wixsite.com/webdesign">https://il000145.wixsite.com/webdesign</a> ​
</p>
<p>Harry Lee <a href="https://harrylee5130.wixsite.com/webdesign">https://harrylee5130.wixsite.com/webdesign</a> </p>
<p> Julian Lee <a href="https://julianclee.wixsite.com/webdesign">https://julianclee.wixsite.com/webdesign</a> ​ </p>
<p> Willson Li <a href="https://budidyboop.wixsite.com/webdesign">https://budidyboop.wixsite.com/webdesign</a> </p>
<p>Ahmed Madi <a href="https://mbattdungeons.wixsite.com/webdesign">https://mbattdungeons.wixsite.com/webdesign</a> ​ </p>
<p>Taylor / Thomas Nelson <a href="https://abc123street2017.wixsite.com/webdesign">https://abc123street2017.wixsite.com/webdesign</a> ​ </p>
<p> Nima Rasouli <a href="https://nimarasouli.wixsite.com/webdesign">https://nimarasouli.wixsite.com/webdesign</a> ​</p>
<p> Zythelle Santos <a href="https://zysantos11.wixsite.com/webdesign">https://zysantos11.wixsite.com/webdesign</a> ​</p>
<p> Jessie Shao <a href="http://jessieshaoo.wixsite.com/website ">http://jessieshaoo.wixsite.com/website </a> ​ </p>
<p> Gurnoor Thind <a href="https://gurnoorthind44.wixsite.com/webdesign">https://gurnoorthind44.wixsite.com/webdesign</a> ​ </p>
<p> Terrance Wang <a href="https://terancexxo.wixsite.com/webdesign">https://terancexxo.wixsite.com/webdesign</a> ​</p>
<p> Yihang Xu <a href="https://autumnpltx.wixsite.com/webdesign">https://autumnpltx.wixsite.com/webdesign</a> ​ </p>
<p> Andy Zhang <a href="https://zhangjue.wixsite.com/webdesign">https://zhangjue.wixsite.com/webdesign</a> ​
​
​ </p>
</div>
</div>
</body>
</html>
Rubric
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="lesson1header">Web Design Rubric</div>
<div id="rubricImg1"><img src="Screen Shot 2021-12-15 at 2.46.23 PM.png" width="518" height="726" alt=""/></div>
<div id="rubricImg2"><img src="Screen Shot 2021-12-15 at 2.46.33 PM.png" width="518" height="726" alt=""/></div>
<div id="rubricImg3"><img src="Screen Shot 2021-12-15 at 2.46.42 PM.png" width="518" height="457" alt=""/></div>
<div id="rubricImg4"><img src="Screen Shot 2021-12-15 at 2.46.52 PM.png" width="593" height="351" alt=""/></div>
<div id="rubricImg5"><img src="Screen Shot 2021-12-15 at 2.47.05 PM.png" width="593" height="571" alt=""/></div>
<div id="rubricImg7"><img src="Screen Shot 2021-12-15 at 2.47.31 PM.png" width="883" height="1109" alt=""/></div>
<div id="rubricImg8"><img src="Screen Shot 2021-12-15 at 2.47.40 PM.png" width="973" height="692" alt=""/></div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="Exercisepageheader">Exercise</div>
<div id="exercise1">Exercise 1</div>
<div id="exercise2">Exercise 2</div>
<div id="e1para">
<p>Create 3 pages with; </p>
<p> -Container</p>
<p> -Header </p>
<p> -Titlebar </p>
<p> -Navigation bar with Link </p>
<p> -One image on each page </p>
<p> -Bonus mark with extract enhancement </p>
<p> -Screen shoot the Dreamweaver Split </p>
<p> Post the three pages on the Exercise page </p>
<p> ​</p>
</div>
<div id="e2para">
<p>Newspaper Website Exercise</p>
<p> Instruction: </p>
<p>-3 pagers of newspaper layout ( post on Exercise page)</p>
<p> -Follow the layout to build 3 web pages of newspapers </p>
<p>-Screen shoot the 3 pages of coding and the web page on the browser </p>
<p>-Post on the Exercise page</p>
</div>
</div>
</body>
</html>
Exercise
Final Quiz
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="finalquizheader">Final Quiz</div>
<div id="finalquizparagraph">
<p>You are a Web Designer </p>
<p>Re-design the below website by DW--- https://jleung11.wixsite.com/webdesign</p>
<p> Informatio: Re use the website images or add some other image. Re organize and re design the page. Not less than 5 pages including home page ​</p>
<p> Factors need to be address: Appearance / Design / Look & Feel ​ </p>
<p>The Website must be visually appealing, polished, and professional. The visual appeal of the site creates a positively user’s attention. Keep the site’s design clean and easy to navigate. Easy navigation can entail using light bright colors and making sure that the text is easy to read. </p>
<p>​ Images make a huge contribution to your website’s quality appearance. Use quality photography and make sure that images are organized into the right locations on the right webpages. The site must look good on all different devices including a phone, tablet and large screen desktop. Your site should also look good across different popular web browsers such as Chrome, Firefox, IE, and Safari. ​ </p>
<p>Content : The site will need to have thoughtful and relevant copy that is well organized. Remember that content is the most important element in a website. ​ </p>
<p>The website needs to speak to visitors to inform them about the instruction in class. The user shouldn’t encounter any difficulty about finding out the instruction and lesson. ​ </p>
<p>Usability / User Experience: What is your experience of using this website? How is the content structured? Can a visitor easily find the information that they are looking for? Can you make the structure and organize it better for the user? How? ( Colour, text, font,images and...) </p>
<p>What changes, big and small, can you make to your site to improve the site’s ease of use? The answers to each of these would directly affect the page layout. ​ </p>
<p>Make sure your webpages, especially your landing page, aren’t overcrowded with too much blocks of lengthy text, overly large images/videos, or slow-loading plug-ins. In addition to users not wanting to sit and wait for a slow-loading website. ​ </p>
<p>Save you DW file in your own devices </p>
<p>Due: December 17 2021 Friday ​</p>
<p> Credit :the images that you are using outside the site.</p>
</div>
</div>
</body>
</html>
Contact
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css00002.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="container">
<nav class="nav" id="nav">
<ul>
<a href="final quiz-homepage.html">Home</a>
<a href="finalquiz-page2.html">Vocabulary</a>
<a href="finalquiz-page3.html">be a WebDesigner</a>
<a href="finalquiz-page4.html">Platform/Coding</a>
<a href="finalquiz-lesson1.html">lesson1</a>
<a href="finalquiz-lesson2.html">lesson2</a>
<a href="finalquiz-lesson3.html">lesson3</a>
<a href="finalquiz-lesson4.html">lesson4</a>
<a href="finalquiz-lesson5.html">lesson5</a>
<a href="finalquiz-page10.html">Student'sGallery</a>
<a href="finalquiz-page11.html">Rubric</a>
<a href="finalquiz-page5.html">Exercise</a>
<a href="finalquiz-page6.html">Final Quiz</a>
<a href="finalquiz-page7.html">Contact</a>
</ul>
</nav>
<div id="contactheader">Contact</div>
<div id="Room">Room 114</div>
</div>
</body>
</html>