Web Technologies
Spring 2024 | IFSC 1310
Site Planning and Interviewing Clients
- Site Planning and Interviewing Clients
- Sitemap Tools
- Prototyping Tools
- Figma
- Mockflow (free)
- Wireframe.cc
- Moqups
- proto.io
SEMESTER WRAP UP AND FINAL INFORMATION
To successfully complete this semester the following assignments should be posted to your course homepage
- Prototype HTML Assignment
- CSS Demo
- Positioning Exercises (These 4 are required but you could do extra for additional credit)
- Float 1
- Float 2
- Absolute 1
- Absolute 2
- Flexbox Froggy
- CSS Diner (Extra Credit)
- Corel Vector Logo
- Bear on Moon
- SpaceX Dragon or equivalent project
- Cycle Lab (Image Slideshow)
- SpaceX Dragon Revised
- Progressive Enhancement Writing Assignment (Written on Course homepage)
- Dragon Project Revision and Reflection (Written on Course homepage)
Web Forms
- Hosted Solution
- Using Server-Side Technology
- Web Based Image Optimization Tool
Bringing it all Together
- Finalizing your page template
- Duplicating pages for your site
- Setting up Workspace for your project
Image Manipulation
- Removing the Background from an Image
- Exporting Files
- Other Tools
Image Manipulation and Optimization
- Vector vs Raster Images | 1 | 2
- Tools Overview
- Adobe Creative Suite – Paid Subscription
- Adobe Illustrator – Vector Editor
- Adobe Photoshop – Raster Editor
- Corel Vector – Web App | Install: Windows | Mac | Chromebook
- Workspace Overview
- Introductory Tutorials
- Adobe Creative Suite – Paid Subscription
Positioning Lab Debrief
- Review Positioning Exercises (Codecast)
- Image Editing Tools
- Vector vs Raster Images | 1 | 2
- Tools Overview
- Adobe Creative Suite – Paid Subscription
- Adobe Illustrator – Vector Editor
- Adobe Photoshop – Raster Editor
- Corel Vector – (Formerly Gravit) – Introductory Tutorials
- Pixlr Suite – Raster and Vector – Tutorials
- Adobe Creative Suite – Paid Subscription
Positioning Lab
- Positioning Overview
- CSS Positioning | Demo
- Set up a directory structure for the positioning lab. | Starter HTML
- Positioning Lab | Demo
Introduction to CSS Grid
Lab Prep
- Set up a directory structure for the positioning lab. | Starter HTML
Introduction to CSS
- Codecast
- Styling Page Elements
- Aside
- Footer
- Additional Elements | Sample HTML
- Style Blockquotes
- SVG Backgrounds
CSS Positioning
- Positioning Overview
- CSS Positioning | Demo
- Set up a directory structure for the positioning lab. | Starter HTML
Introduction to CSS
- Codecast
- Styling Page Elements
- Aside
- Footer
- Additional Elements | Sample HTML
Introduction to CSS
- Codecast | Starter Code
- Creating and attaching a Stylesheet
- Styling Page Elements
- Page Body
- Google Fonts
- Background
- Header
- Navigation
- Content
- Articles
- Aside
- Footer
- Page Body
- CSS Box Model – Description | Demonstration
Introduction to CSS
- Codecast | Starter Code
- Creating and attaching a Stylesheet
- Color and Typography
- Understanding Color | Adobe Color
- Write down your Color Codes
- Styling Page Elements
- Page Body
- Google Fonts
- Background
- Header
- Navigation
- Content
- Articles
- Aside
- Footer
- Page Body
- CSS Box Model – Description | Demonstration
Introduction to CSS
- Codecast | Starter Code
- Creating and attaching a Stylesheet
- Color and Typography
- Understanding Color | Adobe Color
- Write down your Color Codes
- Styling Page Elements
- Page Body
- Google Fonts
- Background
- Header
- Navigation
- Content
- Articles
- Aside
- Footer
- Page Body
- CSS Box Model – Description | Demonstration
Introduction to CSS
- Quiz
- Homework Q & A
- Adding style to your page: Type, Class, and ID Selectors
- Creating and attaching a Stylesheet
- Setting up our work environment
Validation, Naming Conventions, and File Management
Publishing your Work to GitHub
- Publishing your work to Github
- Naming Conventions, Meta Naming, Directory Structure
- Setting up your first project
HTML5 Assessment
- Create and Validate a prototype HTML document that includes examples of all HTML elements covered thus far. For a list of requirements view this page.
- Use today’s session to work on and complete this assignment. You are welcome to partner with a classmate to work on this but each of you must submit code that you have written. No Copy/Paste!
- Create a link to this assignment from your course homepage. Name it “Prototype HTML5 Assignment”
- When complete publish it to your Github account with the Commit Note “Prototype HTML5 Assignment Submission”.
- Due 2/19/2024
- Reading Assignment: CSS Basics
Introduction to HTML5
- Codecast
- Forms
- Sectioning an HTML Document using DIVs
- Sectioning using HTML5 Structural Elements
- Semantic and Structural Elements
- Obsolete and Redefined Elements
- What is Validation?
- Create a Repository using these instructions.
- Be sure to submit your github pages URL.
Introduction to HTML5
- Codecast
- Marking Up Lists
- Text Level Semantics
- Special Character Encoding: Details | Reference
- Block vs. Inline Elements
- Hyperlinks
- Inserting Images
- Tables
- Forms
Introduction to HTML5
- 300 Million Dollar Button
- Codecast | Set up Codepen.io
- What is HTML5?
- Doctypes & DTD’s – Document Type Definition
- Declaring a Language Type
- Exploring the <head>
- Title Attribute
- Meta Tags
- Sample Content
Course Introduction
Course Syllabus
Introduction to the Virtual Classroom
We will be using a broad array of tools to support this course this semester. If you would like to familiarize yourself with these feel free to do so. I will explain and do walkthroughs with the tools when we begin to use them. You are welcome to go ahead and create your accounts (they are all free) but make sure to keep track of your credentials.
- Codepen.io – Codecasting Service for Lectures and Reference
- Gitpod – Cloud-based Integrated Development Environment (IDE)
- GitHub (Student Pack) – Code Versioning Repository for submitting assignments
- Gravit.io – Cloud-based Vector Imaging editor