Web Page Design - Class Setup

Part 1 - Getting to Know You and Teacher Introduction

Document:  Activity 1 Docs - Getting to Know...
Presentation: Welcome to Class Slides

Part 2 - Rules, Syllabus, and Internet

Seating Chart (Temporary)
Assign Activity 2 - The Internet
Presentation: Class Guidelines Slides

Part 2A- VGA Adapter, Syllabus, and CTEL Club

Setup: VGA Adapter Training
Setup: Displays Screenshot Video
Document: Web Design Syllabus
Continue Document: Activity 1 (Q&A) - Submit
CTEL Club - Remind, Meeting Dates, and Club Google Classroom | Screenshot

Part 3 - Student Interviews, Internet and WWW

Document: Activity 3 - Interviews

Student Interviews Activity (pairs) for Activity 3

Part 4 - Visual Studio Code

Macbook Setup: Install Visual Studio Code | Extensions

Part 5 - Visual Studio Code Extensions

Macbook Setup: Install Extensions

• Auto Rename Tag
• Open in Browser (alt + b)
• VS Code Icons
• VS Code Pigments
• HTML Tag Wrap (alt + w)
• CSS Peek (hover over + ctrl)
• Beautify
• Indent Rainbow
• Bracket Pair Colorizer
• HTML Preview (ctrl + shift + v)
• Live Server (click go live)
• Path Intellisense
• Adobe Photoshop 2020
• Adobe Dreamweaver 2020

You will be required to create a video using Screencastify showing all installations for points.

Install Screencastify on Chrome (Video)

Create video with Screencastify highlighting Visual Studio Code installation along with extensions.

 

 

 

The Internet (web 1 Videos)

Video: What is the Internet?

Video: Meet the Father of the Internet: Vinton (Vint) Cerf

The WWW

Video: A Brief History of the World Wide Web

Video: The World Wide Web Turns 25

Assign Activity 4 - Inventors

Part 6 - Folder Organization (structure)

Update Preferences
Select Finder, Select Preferences, Select Advanced Tab. Click Show Filename Exensions.

Create Folder Structure (on Desktop) - Windows

Create Folder Structure1-List | Structure2-Columns - Mac

Create Folder Structure Practice

• ChagoyanManuel Folder
• LemusMaria Folder (Video)
• Student Folder (Video)

Web 2 - Go to quarter 1 work

Web 1 - Angel Guided and Ryan Guided:

Video (Mac): Angel | Ryan

Handout001	Angel
Handout002	Ryan
Handout003	Brock
Handout004	Jared

Compressing Files and Folders

- Photos to Download (3)

- Photos to Compress (3)

Email Attachments (teacher)

- (gmail) - Compressed file

Video - Compress and Email (Mac)

On Your Own

- Select Images, Download, Compress, and Email

- (gmail) - Compressed file to teachers (5 images)

Part 8 - Extracting and Organizing Files and Folders

Extracting Files and Folders

- Compressed - Photos (zipped file)

- Compressed - Colors (zipped file)

Folder and File Organization:

Classifications - Animal

Categorization - Target

Part 9 - Organizing Files and Folders

Organizing

Colors Sort Zip - Sorting Images

Breakout Groups

• Which View is best?
  • Icon
  • List
  • Column
  • Gallery

Windows Keyboard Shortcuts:

• Backspace (exit a folder)
• Enter (go into folder)
• Arrows (move)
• Ctrl-X (cut)
• Ctrl-V (paste)
• Alt + F4 (close window)
• Esc (escape)
• Ctrl + Z (undo)
• Ctrl + Y (redo)
• Ctrl + A (select all)
• Shift + F10 right-click menu (see context options)

Mac Keyboard Shortcuts:

• Cmd + up arrow (exit a folder)
• Cmd + down arrow (go into folder)
• Arrows (move)
• Cmd-X (cut file)
• Cmd-C (copy and cut) Folders
• Cmd-V (paste a copy)
• Cmd + Option +V (paste a cut)
• Cmd-W (close window)
• Esc (escape)
• Cmd + Z (undo)
• Cmd + shift + Z (redo)
• Cmd + A (select all)

Animal Sort Zip - Sorting Images

Character Sort Zip - Sorting Objects (practice and apply keyboard shortcuts - multiselect)

• Shift + Arrow Keys (multi-select adjacent files) Mac and Windows
• Ctrl + Spacebar (multi-select/delect non adjacent files) Windows
• Ctrl (Cmd) + Mouse Click (multi-select/delect non adjacent files) Mac