Skip to main content
Logo for Berkeley Extension

Wait!

Enter your email address to save your cart.

Your privacy is important to us.

Email Privacy Policy

Your privacy is important to us!

We do not share your information with other organizations for commercial purposes.

We only collect your information if you have subscribed online to receive emails from us.

We do not partner with or have special relationships with any ad server companies.

If you want to unsubscribe, there is a link to do so at the bottom of every email.

Read the full Privacy Policy.

Back to your information.

Thank you, and welcome to the UC Berkeley Extension community!

The following fields are required:
Error has occurred. Please reload this page and try the operation again.
  • Agents
  • Student Login
  • Instructor Login
Extension homepage
      • Areas of Study
        • Art and Design
        • Behavioral Health Sciences
        • Business
          • Accounting
          • Business Administration
          • Economics
          • Finance
          • Leadership and Management
          • Marketing
          • Project Management
          • See the full list
        • Construction and Sustainability
        • Education
        • Humanities and Languages
        • Mathematics and Statistics
        • Sciences and Biotechnology
          • Biology
          • Chemistry and Physics
          • Clinical Laboratory Science
          • Health Advising
          • Life Science Business and Biotechnology
          • Online Sciences Courses
          • See the full list
        • Technology and
          Information Management
        • Writing, Editing and
          Technical Communication
      • Transfer Credit
        • Transfer Credit Courses
      • Online Learning
        • Online Courses and Certificates
      • Events
        • Information Sessions
      • Academic Services
        • Enrollment
        • Transcripts
        • General Information
        • Community Guidelines
        • Locations
      • Course and Program Information
        • Online Course Policies
        • Certificates, Programs and CEUs
        • Concurrent Enrollment
        • International Student Services
      • Student Aid
        • Disability Support Services
        • Financial Assistance
      • Voices
        • Voices Home
        • Educator Insights
        • Student Stories
        • Professional Pathways
        • Industry Trends
      • Events
        • Information Sessions
        • Free and Low Cost Events

  • Berkeley Global

Web Design With HTML5 and CSS3

DESIGN X455

11188390
Delivery Options Online

Get an introduction to HTML5 and CSS3 to create a small or personal website. After Applying web standards as you code and mastering the fundamentals of web development and design, you then proceed rapidly with semantic coding, starting from text editor in the browser and ending with a website on the Internet. Class discussions include alternative open source software and best practices for usability and HTML accessibility.

Learn to code web pages by creating a website and prototyping interactive sites using Figma to build a complete site worthy of a portfolio piece. You begin with the research phase, then continue to wireframing, prototyping and development. Industry standard tools applied in this course include Figma, Visual Studio Code and GitHub. You build out a final website throughout the class by using HTML5, CSS files, video integration, CSS3 transitions and animations, transformations, responsive web design, version control of code, browser development tools and site deployment. We make coding doable and digestible for designers.

Take a moment to view Amanda Hinton’s B-52’s portfolio website which she coded and Kyra Polyudova’s website project fully designed from scratch.

Course Outline

Expand or collapse section

Course Objectives

  • Understand progressive enhancement as a best practice
  • Understand HTML5's document structure
  • Implement element semantic coding
  • Understand the Document Object Model
  • Be able to integrate cascading stylesheets (CSS)
  • Be able to identify principles of web design usability and accessibility
  • Be able to code web pages to create a personal website
  • Be able to identify images for the Web and understand file formats
  • Utilize correct file and folder structures
  • Be able to identify online resources related to your personal website
  • Understand the process to create a web hosting account and optional domain name

What You Learn

  • Understand Document Object Model structure
  • Integrate CSS files
  • Semantic coding
  • Identify HTML accessibility
  • Understand and implement JavaScript/jQuery plugins
  • Wireframe and design multipage website
  • Prototype interactive website using InVision
  • Code web pages to create a website
  • Learn about website optimization and performance
  • Understand document structure
  • Learn deployment and version control with Git

 

How You Learn

We are online! All of the design classes are conducted online and include video classes, mentor-led learning and peer-to-peer support through our student online platform, Canvas. 

  • Lectures
  • Reading assignments
  • Quizzes at instructor’s discretion
  • Small-group activities
  • Homework assignments
  • Capstone project

Is This Course Right for You?

This course is intended for anyone interested in building their own website. The course will be very fast paced and hands-on with an emphasis of during further exploration outside of the classroom. The topics and implementation will be vast, but taught in a smaller compartmentalized manner so students can feel confident and will be set up for success. The goal is to have a narrow scoped project, but open the possibilities of further learning experiences. No prior programming or knowledge is required. Our experienced instructor provides practical Information in web design skills and monitors your development along with peer-to-peer support on our student online platform.

Other classes to be considered: Graphic and Web Design Portfolio, UX Design Portfolio.

This course applies to the following programs:

Professional Program in Graphic Design

Expand or collapse section

Required Courses

  • Visual Design Principles
  • Illustrator I
  • InDesign
  • Typography Fundamentals
  • Photoshop I
  • Web Design With HTML5 and CSS3
  • Graphic and Web Design Portfolio

Courses for Further Advancement

  • Essentials of Motion Graphics
  • Adobe Digital Tools
  • Diagramming and Prototyping for UX
  • Illustrating Children's Books
  • Essentials of User Experience (UX) Design
  • User-Interface (UI) Design
  • Branding

Learn More About This Program

Professional Program in User Experience (UX) Design

Expand or collapse section

Required Courses

  • Essentials of User Experience (UX) Design
  • Diagramming and Prototyping for UX
  • Visual Design Principles
  • User Research for UX
  • Information Architecture (IA) and Content Strategy
  • User-Interface (UI) Design

Electives

  • UX Design Portfolio
  • Qualitative Research: Design, Implementation and Methods
  • Quantitative UX Metrics and Research
  • Accessibility in UX Design
  • Web Design With HTML5 and CSS3
  • Typography Fundamentals
  • Illustrator I
  • Photoshop I
  • InDesign
  • Branding

Learn More About This Program

Notes

Departmental contact: extension-graphicdesign@berkeley.edu


Instructional Types

Live Online
Live Online courses provide an interactive learning experience with scheduled synchronous online sessions held via Zoom video conferencing (Pacific Time). Learn more about the Live Online format.
Online, Start Anytime
Continuous enrollment course begins when you enroll. You have a minimum of 90 days and a maximum of 180 days to complete the course.
Online, Fixed Date
Enroll in this course by its start date and complete it by its specified end date. There are no live sessions, but plenty of opportunities to collaborate with your classmates and instructor.
Classroom
Take classes in-person at one of our buildings or partner locations.

English Language Proficiency Requirements

All of our courses are taught in English. If English is not your first language, please use the following test scores as guides in order to be successful:

  • TOEFL: 90
  • IELTS Academic Format: 7
  • DAAD: C1
  • TEM-4 or TEM-8: Level 70
  • Duolingo: 125

Note: You do not need to submit test scores.

Extension homepage

1995 University Ave., Suite 130

Berkeley, CA 94704-7000

extension@berkeley.edu

Facebook Facebook Icon Twitter Twitter Icon LinkedIn LinkedIn Icon YouTube YouTube Icon Instagram Instagram Icon Medium Small Icon for Medium
WeChat QR code

Locations

  • Berkeley
  • San Francisco
  • Online
  • Other

Resources

  • About Us
  • Administration
  • Accessibility
  • Nondiscrimination
  • Privacy
  • Transcripts
  • Gifts
  • Jobs
  • Contact Us
Western Association of Schools and Colleges

The University of California, Berkeley, is accredited by the Western Association of Schools and Colleges (WASC). UC Berkeley Extension—like all other UC Berkeley schools, colleges and departments—is accredited by WASC through the University.

Copyright © UC Regents

Powered by Modern Campus

Cookie Policy

By clicking “Accept All Cookies,” I agree to permit this website to share my information, including a device identifier and my browsing history on this site, with selected partners, including Google, Meta/Facebook and others, to enhance my browsing experience and to ensure that marketing communications are targeted to my needs in accordance with our Cookie Policy and our Privacy Policy.

Session Time-Out

For security reasons and the protection of your personal information, your session will time out due to a period of inactivity in minute(s) and second(s). Click Extend My Session to continue. For security reasons and the protection of your personal information, your session timed out after a period of inactivity. You will be redirected to the home page.

Confirm

Alert

Privacy Policy

Cookie Policy

This statement explains how we use cookies on our website. For information about what types of personal information will be gathered when you visit the website, and how this information will be used, please see our Privacy Policy.

How we use cookies

All of our web pages use "cookies". A cookie is a small file of letters and numbers that we place on your computer or mobile device if you agree. These cookies allow us to distinguish you from other users of our website, which helps us to provide you with a good experience when you browse our website and enables us to improve our website.

We use cookies and other technologies to optimize your website experience and to deliver communications and marketing activities that are targeted to your specific needs. Some information we collect may be shared with selected partners such as Google, Meta/Facebook or others. By browsing this site you are agreeing to our Privacy Policy. You can revoke your voluntary consent to participate in monitored browsing and targeted marketing by selecting “Disable All Cookies” below.

Types of cookies we use

We use the following types of cookies:

  • Strictly necessary cookies- these are essential in to enable you to move around the websites and use their features. Without these cookies the services you have asked for, such as signing in to your account, cannot be provided.
  • Performance cookies- these cookies collect information about how visitors use a website, for instance which pages visitors go to most often. We use this information to improve our websites and to aid us in investigating problems raised by visitors. These cookies do not collect information that identifies a visitor.
  • Functionality cookies- these cookies allow the website to remember choices you make and provide more personal features. For instance, a functional cookie can be used to remember the items that you have placed in your shopping cart. The information these cookies collect may be anonymized and they cannot track your browsing activity on other websites.

Most web browsers allow some control of most cookies through the browser settings. To find out more about cookies, including how to see what cookies have been set and how to manage and delete them please visit https://www.allaboutcookies.org/.

Specific cookies we use

The list below identify the cookies we use and explain the purposes for which they are used. We may update the information contained in this section from time to time.

  • JSESSIONID: This cookie is used by the application server to identify a unique user's session.
  • registrarToken: This cookie is used to remember items that you have added to your shopping cart
  • locale: This cookie is used to remember your locale and language settings.
  • cookieconsent_status: This cookie is used to remember if you've already dismissed the cookie consent notice.
  • _ga_UA-########: These cookies are used to collect information about how visitors use our site. We use the information to compile reports and to help us improve the website. The cookies collect information in an anonymous form, including the number of visitors to the website, where visitors have come to the site from and the pages they visited. This anonymized visitor and browsing information is stored in Google Analytics.

Changes to our Cookie Statement

Any changes we may make to our Cookie Policy in the future will be posted on this page.