Learn Web Design
Introduction to Web Design
(also known as Web Design for Print Designers)
This class was specifically created to be the friendliest possible introduction to hand-coding for the web (Please note – this is an all coding class). Originally designed to help print designers crossover to implementing web designs on their own without assistance, this class is the perfect introduction for anyone who wants to learn the right way to build search engine friendly, semantically correct, standards-based, efficient web pages in the shortest amount of time possible.
This class assumes no previous experience with either web design or coding. Students will dive deep into HTML to learn how to properly structure a web page and deep into CSS to learn how to implement layouts and design (HTML5 and CSS3 are covered in this class). Javascript is only touched on briefly in this level — students learn how to use industry standard pre-existing javascript plugins to enhance sites without learning how to program javascript (basic javascript programming is introduced in the advanced level of this series).
Who should attend this class?
Anyone with basic computer skills who wants to learn the best practices for building web pages and is not afraid of learning to hand-code.
- 18 hours of hands on training – 9am to 4pm on three consecutive days
- 100% custom training content exclusive to C2
- USB Flash drive with all class files
- Learning Web Design provided as reference (we do not use the this book for any class exercises)
- 1 year of email tech support
- 1 year free retake policy
- 100% Satisfaction guarantee
Class Outline by Topic
Design Goals for web design
- Effective communication
- Creating pages that work on all kinds of devices
- Creating pages that work on all size screens
- Designing to support all browsers
- Search engine optimized content
- Accessible content and design
- Optimize for speed
- Resizeable text
- Design trends
Planning and preparing designs
- Focus on content-first planning and design
- Hosting and domain process
- Storyboarding and outlining a site
- Setting up tracking and analytics
- What tools we use for developing web sites
Preparing text content
- Cleaning up text
- Basic HTML page structure
- Importance of text for search engines
- Additional online tools to help with text
- Grabbing text from existing webpages
Introducing HTML
- What it means to markup text
- Proper page titles for users and search engines
- The paragraph – the basic unit of content
- Heading tags to introduce content
- Headings for page structure
- Block vs inline elements
- The line break
- Lists for content and navigation
- Emphasize text with inline styles
- Special symbols using character entities
- Linking with anchors
Introducing CSS
- Where CSS can go and where it should go
- CSS resets
- CSS font and typography control
- Selecting the right page element with selectors
- Basic page design with HTML and CSS
- Classes and ID’s to name elements for CSS
- The CSS Box Model
- The CSS 3 Step Design process
- Rough-in page from Photoshop comp
- Detailed CSS design one element at a time
HTML – Tables
- When to use tables on web pages
- Table use for HTML emails (very brief discussion – HTML emails is a separate class)
- Basic CSS table styling
- Accessible tables
HTML – Video and multimedia
- Preparing video for the web
- Hosting options
- Embedding options
- Flash or HTML5 for video and multimedia
- Tool options for creating multimedia and video
HTML – forms
- Form hosting options
- How forms work
- Front-end form design
- Form tags and inputs
Preparing graphics
- Using Photoshop to prepare graphics for the web
- Batch converting images for web
- File formats and types
HTML – iframesÂ
- Bringing in remote content with iframes
- Using common iframe-based APIs (Twitter, Facebook)
CSS – Advanced positioningÂ
- Multiple ways to create multiple columns
- Float and Clear columns
- Inline-Block columns
- What to do about Flex-Box and CSS Grid
- Absolute and relative positioning
Advanced CSS3 Features
- Rounded corners
- Drop shadows
- Gradients
- Advanced colors with transparancy
- Opacity control
- Text shadows
- Downloadable typefaces
HTML5
- New HTML5 tags
- New semantic structure tags
- Deprecated tags
- HTML5 shim/shiv for IE 6-8
- Using HTML5 Boilerplate
Advanced CSS tricks
- CSS rollovers
- CSS sprites
- CSS drop down menus
Advanced Forms with CSS and javascript
- Advanced form design with CSS3
- New HTML5 form tags and attributes
- Advanced accessibility concerns
- Advanced mobile considerations
- Validating forms with jQuery plugin
Javascript interactivity via plugins
- Adding slideshow
- Adding overlays
Introduction to Basic Responsive Design
- What is responsive design?
- Planning for mobile
- Mobile detection vs responsive design
- Converting static design to responsive
- Percentage-based design
- Media queries to detect viewport size
- Appropriate font sizes for mobile
- Hiding and showing content
- Testing mobile layouts on desktop browsers
- Making images auto-scale
- Meta tags for mobile
- Managing the menu problem between mobile and desktop
- Managing concerns about touch devices vs mouse
- Tablet and phone dimensions
- Alternate devices (watches, TVs, game consoles)
- Download speeds on cellular networks
- Mobile device statisics and analytics
- Managing client expectations
- User behaviour changes on mobile
- Content decisions driven by small screens
- Hosting content for testing
- Responsive tools and web support
- Supporting older versions of Internet Explorer
- Testing designs using online services
Upcoming Class Dates
Schedule a live instructor for this class
Book an instructor at the same price as all our classes – no additional fees
I graduated in May and was asked to learn coding! My training is in Graphic Design and Marketing – I had only taken one Dreamweaver course in college. After taking one 6 hour course, I feel like I have learned a semesters-worth of materials!
James was a great instructor. I liked that he taught us the best standards to use, and the right way to do things.
Taught me more in 6Â hours than some web classes have taught me in 24 hours of class time. Instructor was very personable and helpful.
Content was perfectly suited to my needs as a print designer crossing over to web. It was presented very clearly, while also leaving time to thoroughly answered questions.