Univad's Diploma in Web Design and Development offers a comprehensive education in the art and science of web creation. You'll dive deep into HTML5 for structuring web pages, CSS3 for styling, and JavaScript for adding interactivity, all while mastering advanced responsive design techniques.

The program is designed to equip you with the skills needed to create visually stunning, user-friendly websites that work seamlessly across devices. Whether you're just starting out or seeking to enhance your existing skills, this diploma prepares you for a dynamic career in web design and development. Graduates will be ready to meet the demands of today's digital world, with the ability to build engaging, responsive websites that stand out.

Sample Certificate

Semester 1: Introduction to HTML5

About this Course

Thanks to a growing number of software programs, it seems as if anyone can make a webpage. But what if you actually want to understand how the page was created? There are great textbooks and online resources for learning web design, but most of those resources require some background knowledge. This course is designed to help the novice who wants to gain confidence and knowledge. We will explore the theory (what actually happens when you click on a link on a webpage?), the practical (what do I need to know to make my own page?), and the overlooked (I have the code, but how do I put it on the web to share with others?). Throughout the course there will be a strong emphasis on adhering to syntactic standards for validation and semantic standards to promote wide accessibility for users with disabilities.

This course will appeal to a wide variety of people, but specifically those who would like a step-by-step description of the basics. There are no prerequisites for this course and it is assumed that students have no prior programming skills or IT experience. The course will culminate in a small final project that will require the completion of a very simple page with links and images. The focus of this course is on the basics, not appearance. You can see a sample final HTML page at https://example-site-1--wd4ehtml.repl.co/ .

What you'll learn

• —Recognize and use common HTML5 tags.

• —Be aware of what an editor is and how to use one.

• —Compose HTML5 code that can create images and links.

Skills you'll gain

• —Web Design

• —Web Accessibility

• —HTML

• —Html5

IN PARTNERSHIP WITH

—University of Michigan

Course Syllabus

Week One: Learn About the Web

• Reading: Course Syllabus

• Introduction to HTML5

• Reading: Pre-Course Survey

• Reading: Required Course Materials

• Reading: Optional Course Resources

• Reading: Resources

• The Evolution of HTML

• Discussion Prompt: The Browser Wars

• How it Works: The "Magic" of Page Requests

• Reading: Browsers

• Looking at Your Browser Options

• Editors: How to Use an Editor to Create an HTML File

• Editors: How to use VS Code

• Reading: Editors: How to use VS Code

• Editors: How to use Replit

• Reading: Additional Resources

Week Two: Structure of a Web Page20 steps

• Reading: Resources

• The Document Object Model (DOM)

• Reading: HTML5 Tags and Syntax

• HTML5 Tags and Syntax

• Reading: Cheatsheets

• Reading: Semantic Tags

• Semantic Tags

• Reading: Code Placement

• Template Page in Visual Studio Code

• Template Page in Replit

• Reading: Images and Icons

• Reading: Images and Icons

• Images

• Reading: Copyright, Fair Use, and Inclusive Images

• Accessible Images

• Reading: Alternative Text

• Hyperlinks

• Reading: Hyperlink Tag

• Useful Tags

• Reading: Additional Resources

Week 3: Hosting and Accessibilty15 steps

• Reading: Resources

• Accessible Web

• Reading: Does Your Browser Support Accessibility?

• Validating Your Site

• Reading: Putting Your Code Out on to the Web

• Hosting Your Site

• Creating a GitHub Pages Account (Optional)

• Uploading to GitHub Pages Account (Optional)

• Sharing Your Page from Replit

• Reading: Final Project Description

• Final Project Demo

• Reading: Congratulations!

• Reading: Post-Course Survey

• Closing

• Reading: Watch for a link to more material

Semester 2: Introduction to CSS3

About this Course

The web today is almost unrecognizable from the early days of white pages with lists of blue links. Now, sites are designed with complex layouts, unique fonts, and customized color schemes. This course will show you the basics of Cascading Style Sheets (CSS3). The emphasis will be on learning how to write CSS rules, how to test code, and how to establish good programming habits. When done correctly, the styling of a webpage can enhance your page. When done incorrectly the result can be worse than no styling at all. To ensure that your sites do not put up barriers for people with cognitive and/or physical disabilities, you will learn how to evaluate pages using the standardized POUR accessibility guidelines. Upon completion of the course, learners will be able to sketch a design for a given HTML page.

Using that design they will use CSS to implement the design by adding fonts, colors, and layouts. Here is a sample final CSS page: https://wd4ewebsite1css.wd4e-css.repl.co/ This is the second course in the Web Design For Everybody specialization. Subsequent courses focus on adding interaction with JavaScript and enhancing the styling with Responsive Design. It will be difficult to complete this course if you do not have access to a laptop or desktop computer for the homework.

What you'll learn

• —Understand the importance of the separation of content and style.

• —Write a simple CSS rule that can modify the colors and fonts on a web page.

• —Modify the appearance of the text on a page using width, line-height, and text transformation.

Skills you'll gain

• —Web Design

• —Web Development

• —Style Sheets

• —Cascading Style Sheets (CSS)

IN PARTNERSHIP WITH

• —University of Michigan
  

Course Syllabus

Week one: Getting Started with Simple Styling

• Reading: Course Syllabus

• Introduction to CSS3

• Reading: Pre-Course Survey

• Reading: Resources

• Reading: Building Your First Web Page

• Cascading Style Sheets

• Colors

• Styling Your Text

• Code Together: Applying Style

• Display and Visibility - Part 1

• Display and Visibility - Part 2

• Code Together: The Display Property

• Reading: Code Placement

• Final Project Description

Week Two: Advanced Selectors, Display and Design16 steps

• Reading: Resources

• Display: Grid

• Reading: Display: Grid

• Display: Flex

• Reading: Display: Flex

• Styling Links and Lists

• Reading: Review of the DOM

• Advanced Selectors

• Attribute Selectors

• Code Together: Navigation

• Reading: Browser Defaults

• Browser Capabilities

• Reading: Browsers

• Code Together: Background Images and Opacity

• Designing For Accessibility

• Reading: Additional Resources

Week Three: The Box Model and Positioning9 steps

• Reading: Resources

• Reading: Borders

• Reading: Margin and Padding

• Box Model

• Reading: Code Together: Box Model

• Code Together: Box Model

• Reading: Positioning

• Reading: Positioning

• Reading: Additional Resources

Week Four: Pseudo-classes, element & Final Project10 steps

• Reading: Resources

• Pseudo Classes and Elements

• Code Together: Styling Images with Pseudo-classes

• Transitions

• Transforms

• Code Together: Transitions

• Accessible Navigation

• Reading: Additional Resources

• Reading: Final Project Description

• Final Project Description

Week Five: Where To Go From Here?2 steps

• Reading: Univad Options

• Reading: Post-Course Survey

Semester 3: Interactivity with JavaScript

About this Course

If you want to take your website to the next level, the ability to incorporate interactivity is a must. But adding some of these types of capabilities requires a stronger programming language than HTML5 or CSS3, and JavaScript can provide just what you need. With just a basic understanding of the language, you can create a page that will react to common events such as page loads, mouse clicks & movements, and even keyboard input.

This course will introduce you to the basics of the JavaScript language. We will cover concepts such as variables, looping, functions, and even a little bit about debugging tools. You will understand how the Document Object Model (DOM) is used by JavaScript to identify and modify specific parts of your page. After the course, learners will be able to react to DOM Events and dynamically alter the contents and style of their page. The class will culminate in a final project - the creation of an interactive HTML5 form that accepts and verifies input. This can be completed as the third or fourth course in the Web Design For Everybody specialization.

What you'll learn

• —Understand how JavaScript is used to react to user events.

• —Write your own JavaScript code to let a person interact with your page.

• —Discuss how JavaScript can introduce accessibility issues.

Skills you'll gain

• —Document Object Model (DOM)

• —Web Development

• —JavaScript This course is part of multiple programs.

IN PARTNERSHIP WITH

• —University of Michigan

Course Syllabus

Week One: Data Types17 steps

• Reading: Course Syllabus

• Introduction to JavaScript

• Reading: Pre-Course Survey

• Reading: Course Resources

• Reading: "What are these deadlines?"

• Reading: Resources

• Reading: The Document Object Model (DOM)

• DOM Review with Object Oriented Programming

• Reading: Accessing the DOM Methods

• Newer DOM Methods

• Reading: Semicolons

• Output

• Reading: Trying to Create and Debug Your Own Output

• Variables

• Data Types

• Operators and Expressions

• Discussion Prompt: Share Your Tips

Week Two: Reacting to Your Audience

• Reading: Resources

• Reading: Functions

• Functions

• Code Placement

• Reading: Organizing Your Code

• Folder Structure / Organizing Your Code

• Events

• Reading: Mastering Events and Functions

• Code With Me: Events

• Reading: Just a little note before the next video

• "this"

• Reading: Homework Time!!

• Homework: JavaScript Interactive Photo Gallery

Week Three: Arrays and Looping4 steps

• Reading: Resources

• Reading: A JavaScript Cheat Sheet

• JavaScript Arrays

• Code With Me: Arrays

Week Four: Using JS for Interactive Images10 steps

• Reading: Resources

• Reading: Advanced Coding Techniques

• Code With Me: Randomizing Your Images Using Arrays

• Code With Me: Using Lightbox

• Code With Me: Looping through Images

• Reading: "Cool Stuff" - Friend or Foe?

• Reading: Final Project Description

• Final Project Description

• Conclusion

• Reading: Post-Course Survey

Semester 1: Advanced Styling with Responsive Design

About this Course

It used to be the case that everyone viewed web pages on about the same size screen - a desktop computer. But now it is just as likely that someone will be using a smartphone, tablet, or assistive technology to access the Internet. Therefore, people viewing your site will now expect that it will perform regardless of the device (smartphone, tablet, laptop, desktop computer, or screen reader) AND take into account some common personal settings such as colour schemes.

This ability to respond to any platform and user preferences is called Responsive Design. This course will expand upon the basic knowledge of CSS3 to include topics such as wireframes, fluid design, media queries, and the use of existing styling paradigms.

After the course, learners will be able to:

• —Explain the mobile-first paradigm and the importance of wireframes in the design phase

• —Create sites that behave across a range of platforms

• —Recognize existing design frameworks such as Bootstrap

A basic understanding of HTML and CSS is expected when you enroll in this class, so it can be taken third or fourth in the Web Design for Everybody specialization. Additional courses focus on adding interactivity with the JavaScript Programming Language and completing a capstone project.

What you'll learn

• —Describe basic knowledge of browser tools for responsive design.

• —Understand the importance of a "mobile-first" paradigm for web design.

• —Write rules for responsive design for a mobile and large-screen view.

Skills you'll gain

• —Bootstrap (Front-End Framework)

• —Responsive Web Design

• —JavaScript

• —Cascading Style Sheets (CSS)

IN PARTNERSHIP WITH

• —University of Michigan

Course Syllabus

Week One: Style with Responsive Design

• Reading: Course Syllabus

• Introduction to Responsive Design

• Reading: Pre-Course Survey

• Reading: Course Resources

• Reading: Frequently Asked Questions (FAQ)

• Reading: Week 1 Resources

• What is Responsive Design?

• Reading: Examples of Poor Responsive Design

• Testing Sites

• Reading: What To Do When Your Tool is Deprecated

• Benefits of Responsive Design

• Discussion Prompt: Site Reviews

• Reading: Fluid Measurements Background Readings

• Fluid Measurements

• Code With Me: Fluid Measurements

• Reading: Your Personal Responsive Design Story

• Reading: Additional Tools and Resources

Week Two: Basic Concepts10 steps

• Reading: Week 2 Resources

• Media Queries

• Code With Me: Fluid Measurements and Media Queries

• Practice Quiz: Challenge Problem

• Wire Frames

• Breakpoints

• Media Queries Part Two

• Code With Me: Responsive Navigation

• Reading: Homework Description

• Homework Review: Basic Media Queries

Week Three: Media Queries for Layout and Access10 steps

• Reading: Week 3 Resources

• Preview of Week 3

• Code With Me: Using Media Queries with Grid

• Code With Me: Using Media Queries with Flex

• Media Queries for Accessibility

• Reading: Prefers Reduced Motion

• Reading: Color Schemes and Color Contrast

• Accessibility Testing

• Reading: Accessibility Testing Options

• Reading: Additional Resources

Week Four: Frameworks15 steps

• Week 4 Resources

• Using Frameworks

• Introduction to Bootstrap

• Reading: Getting Started With Bootstrap

• Bootstrap Grid System

• Code With Me: Bootstrap Grid Example

• Code With Me: Bootstrap Navigation Example

• Optional: Interview with M W

• Optional: Interview with H W

• Optional: Interview with H N

• Reading: Additional Resources

• Reading: Final Project Description

• Homework Review: Final Project

• Conclusion

• Reading: Post-course Survey

The next application deadlines are:

• Priority Deadline: September 1, 2024

• Final Deadline: September 15, 2024

Have questions? Attend an upcoming Information Session or use the chat box at the bottom right corner of the screen.

For more information about the Univad Diploma Tuition, session durations, and deadlines, kindly visit the Tuition page to access this information and even more.

Self-paced

• Students who hold Bachelor's degrees and wish to concentrate or expand their knowledge in the field

• Professionals who have several years of working experience

• Anyone who wishes to gain a new skill for personal growth or to start a career.