In this virtual classroom, a non-judgmental environment, your Professor strives to maximize student engagement and opportunity.
This course is designed to allow every student a voice, to feel heard and respected, to recognize their value as a scholar regardless of background or experience. Your words, your ideas are important.
Montgomery College is a welcoming institution that is proud to represent more than 135 countries, students of all ages and backgrounds. As a community, we are committed to diversity, inclusion, and equity in education. At Montgomery College, we aspire to be JEDIs in our treatment of students, committed to:
All Class sessions will be recorded via zoom and posted the same day.
For this assignment, students create a user interface design based on text, navigation and elements provided to them for the 2GoGreen.me concept homepage content. Using the same content, students come up with different design solutions for a UI design.
See Fall '21 2GoGreen Design Examples
See Spring '22 2GoGreen Design Examples
For this assignment, students create a user interface design with their own concept and content. This design will serve as inspiration for the final assignment, A coded 3-page website. Plans for HTML development provided in class Padlet below specific to each student's design. Using the plan as a guide students code the HTML; from there we step through in class how to create CSS to style sites, and how to make and link to additional pages or link to anchored sections on the same HTML page. Coding work will be posted here by Professor Hubley once complete, students will learn how to make their sites live via GitHub Pages if they choose to.
See Fall '21 Individual Layout Design Examples
See Spring '22 Layout Design Examples
For this assignment, students began with a provided HTML Page, with images. With this starting point students practiced: File Management, Creation and Linking of Style Sheet, Image Optimization for .SVG and .JPG files, Replacing images in HTML, Implementing hosted fonts via Adobe or Google Fonts, Overriding Default Styles Applied to HTML Elements, CSS Layout Techniques and CSS Typographic Properties and Values.
The purpose of this assignment was to expand our vocabulary for CSS Properties and Value Options, leading into the final coding assignment for the class
This Assignment was uploaded by Professor Hubley, though for the final assignment, students will also practice uploading files via GitHub Pages.
Numbered Examples Below of Perspectives Coding Assignment from previous Semesters:
Using the plans discussed in class and provided above in the class Padlet as a guide, students code the HTML for their homepage. From there, we review the steps for creating and linking an external CSS document, and coding CSS to style the look of their page. Students then make additional HTML pages and link to those pages via the navigation. We'll also cover creating named anchors on a single HTML page and linking to those anchored page sections via navigation links for students who prefer a single-page website experience. Coding work will be posted here by Professor Hubley once complete. Within the context of this assignment, students learn Responsive Design strategies, and how to make their sites live via GitHub Pages.
Numbered Examples Below link to Final Assignment Examples:
An examination of principles of design and design considerations as applied to the creation of Web pages and Web sites. Emphasis is on visual communication principles and visual presentation aspects of Web pages, including page layout, typography, color theory, navigation, and image creation and editing. Students will apply principles of design in the creation of a website.
No textbook purchase is required for this class, materials authored by your Instructor are provided via BlackBoard, along with curated resources for the study of Web Design.
Login to Blackboard Course Site for detailed Assignment descriptions and due dates.
100 points | Due 06/07/22
50 points | Due 06/14/22
100 points | Due 06/21/22
100 points | Due 06/28/22
100 points | Due 07/10/22
To calculate your grade, divide your points earned by points possible. Points earned are entered on Blackboard Grade center.
A 90 B 80 C 70 D 60 F 0-59
May change due to overall class progress or advances in technology/emerging standards.
Introduction to Web Design concepts and User Interface (UI) Design; Creating design mockups with a grid; Typography resources and strategies; Design strategies specific to the Web as an evolving, non-fixed medium.
Creating, collecting and organizing information; Implementing a cohesive design style.
Introduction to Hypertext Markup Language (HTML) & Cascading Style Sheets (CSS); How proper HTML markup affects both findability and accessibility.
Utilizing Google Fonts & Adobe Fonts on Web Pages with application of (1) stylesheet link for HTML head, and (2) font-family declaration(s) for desired CSS selector(s.)
Best practices for fine-tuning Web typography through complementary or contrasting type family combinations, as well as implementation of strong typographic hierarchy.
Optimizing images for the web (JPEG, PNG, SVG, GIF.)
Strategies for moving from design program concept to working web prototype in-browser.
Solutions for common CSS layout issues.
Strategies and techniques for creating a variety of CSS-based layouts
Linking pages and/or views; Uploading pages developed locally to a Web Server via File Transfer Protocol (FTP); Working with Codepen.io and other Online coding environments.
Exploring responsive design concepts & techniques.
Preparing images for, and the creation of slideshows, swipers, and galleries.
Embedding audio and video; Creating and embedding animated gifs; CSS-based Animation.
Contact form design; Website hosting and domain registration; Identifying essential areas in Web hosting control panels; Low/no-cost hosting options; Building on coding essentials—overview of frameworks and popular publishing environments.
Presentations of final website projects and class discussion.
https://www.linkedin.com/learning (login with your MC Email address for access)
https://www.montgomerycollege.edu/resilient-mc/index.html
https://www.montgomerycollege.edu/coronavirus/students/index.html
https://www.montgomerycollege.edu/coronavirus/federal-cares-emergency-assistance-request.html