Become a Web Designer
Posted by Superadmin on January 19 2019 06:36:38

Become a Web Designer

 

Today's web designer balances clear, concise design skills alongside a strong foundational background in the technology of the web. Our tutorials cover the skills you need to design rich, engaging websites and applications that look beautiful on both desktop and mobile devices.
Learn the fundamentals of HTML and CSS based web design.
Practice using industry standard, modern tools to design websites and applications.
Create designs that adapt to fit a wide variety of devices and screen sizes.

 

 

 

01

Introduction to Web Design and Development with James Williamson

3h 38m • COURSE
New to web design? Start here first. In these tutorials, James Williamson introduces the fundamental concepts, tools, and learning paths for web design. He explains what it means to be a web designer, the various areas of specialization, and whether web design is the right hobby or career for you. Along the way, he talks to five prominent designers and developers, who have each found success in a different corner of the web.
If you want to get up and running fast, check out the chapter on getting online, choosing a domain name and web host, and getting around the backend of a standard website. Need to stock your tool chest? Learn what you'll need to build a brand new site, from web design software and content management systems, to testing and prototyping tools and development frameworks. Finally, James outlines learning paths for where to go next, touching on subjects such as standards and accessibility, responsive design, and the three core web technologies: HTML, CSS, and JavaScript.
This course is part of a Learning Path approved by the American Marketing Association.
Gain the skills you need to become an AMA Professional Certified Marketer (PCM) in Digital Marketing by using the industry-leading courses and resources in the Learning Path. Take the AMA certification exam to show that you have what it takes to lead the digital transformation.
Topics include: • What is web design? • What is a web designer? • Learning to code • Choosing a web host • Working with a CMS • Exploring how websites are structured • Choosing your framework or software • Designing with standards and accessibility in mind • Learning HTML, CSS, and JavaScript
02

Design Aesthetics for the Web with Sue Jenkins

2h 45m • COURSE
Topics include:
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices
03

User Experience for Web Designers with Chris Nodder

1h 49m • COURSE
As a user experience professional, you often find yourself acting as a liaison between business teams and technology teams, challenged to make design decisions that satisfy both parties. Additionally, you frequently revisit decisions made in the past, looking for ways to refresh and meet the changing needs of today's users. Everything from different devices and form factors to increased awareness around human computer interaction is driving a need to examine and optimize the user experience. Join Chris Nodder as he shares insights to help strengthen your design choices and help you adapt to current and evolving trends. Designers, product managers, strategists, UX newcomers, and curious observers alike can gain an expanded understanding of what it takes to succeed in the field of UX.
Topics include: • Getting an organization started with user-centered design • Substantiating the benefits of UX • Helping systemizers on your team empathize with users • How UX work today compares to the past • Being a generalist vs. being a specialist • Where is UX headed in the future?
04

Mapping the Modern Web Design Process with Morten Rand-Hendriksen

2h 16m • COURSE
Once you eliminate the trends and terminology, web design is about one thing and one thing only: getting your message across to an online audience. This course offers a 10,000-foot view of the web design process, to help ensure you never lose sight of your users. Morten Rand-Hendriksen takes you on a journey from initial consultation and discovery through content strategy and UX considerations, to development, content creation, design, testing, and launch. By the end, you'll understand the different players and phases and how they fit together in a web design approach focused on meaningful communication and a great user experience.
Topics include: • Understanding what your users care about • Creating user personas • Creating content priority hierarchies • Testing wireframes and interaction patterns • Establishing a three-track build process • Incorporating accessibility principles • Using content blocks • Testing and revising your web design • Optimizing for social media and SEO • Launching your web design • Getting feedback from users
05

HTML Essential Training with James Williamson

5h 54m • COURSE
HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that's simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences. So open a text editor, watch these videos, and begin learning to author HTML the right way.
Topics include: • Why is HTML important? • Exploring an HTML document • Formatting content • Displaying images • Using nav, article, and div elements • Linking to pages and downloadable content • Creating lists • Controlling styling (fonts, colors, and more) • Writing basic scripts
06

CSS Essential Training 1 with Christina Truong

2h 36m • COURSE
CSS is a stylesheet language that allows you to control the appearance of your webpages. In this hands-on course—the first installment in an ongoing series—Christina Truong demonstrates the concepts that form the foundation of CSS, and explains how to use this language to add colors and other design elements to take your webpages beyond just black text on a white background. Christina covers selecting content, how the box model defines the spacing and sizing of page elements, styling text, and managing basic layouts. She also explores the tools needed to work with CSS, how to use selectors to target elements, and guidelines for page layouts with floats. Plus, at the end of the course, you'll walk away with an actual project—an online résumé page.
Topics include: • Creating a CSS file • Writing basic selectors • Setting properties • Using different typefaces and web-safe fonts • Understanding cascading and inheritance • Setting a font family, font size, text color, and more • Understanding the box model • Using the float property
07

Sketch Essential Training: The Basics (2017) with Chris Converse

Topics include:
Adding a library to Sketch
Designing a search form
Drawing icons in Sketch
Working with fonts
Setting up an artboard for tablet screens
Using Sketch Mirror to preview your designs
Creating interactive prototypes
Exporting artboards and assets
Collaborating with Sketch Cloud
Course Contents
  • Introduction Learn the basics of Sketch 1m 6s About Sketch and this course 1m Work with fonts in Sketch 51s About the exercise files 25s
  • 1. Get Your File Set Up Add hero image and header bar 6m 11s Set and style the main headlines 4m 36s About Sketch libraries 3m 52s Add a library to Sketch 2m 23s Set up layout guides 3m 48s Add the top navigation 2m 39s Design a search form 8m 45s
  • 2. Draw Icons in Sketch Create a calendar icon 6m 49s Update Sketch library items 3m 16s Create the best price icon 6m 46s Create the chat icon 7m 57s Switch Sketch library files 1m 14s
  • 3. Complete the Web Layout Add icons to the header navigation 4m 22s Set up the great deals section 5m 48s Add the labels for each deal 7m 6s Create the details button 3m 43s Create a nested symbol for ratings 4m 46s Add the services section 5m 53s Add the testimonials section 4m 11s Add the footer 3m 18s
  • 4. Adapt the Web Design for a Smaller Screen Set up an artboard for tablet screens 2m 19s Resize the header for a smaller screen 4m Resize the search section for a smaller screen 3m 2s Using Sketch Mirror 2m 19s Apply the deals section to a smaller screen 3m 42s Apply the services section to a smaller screen 3m 11s Resize the testimonials and footer sections for a smaller screen 3m 57s
  • 5. Share and Collaborate Export artboards to a multipage PDF 1m 32s Collaborate with Sketch Cloud 3m 6s Prototyping: Fixed items when scrolling 3m 46s Prototyping: Interactive linking 2m 48s Prototyping: Control links with symbols 3m 36s
  • 6. Export Assets Export artboards to JPG and PNG 3m 25s Using the Slice tool 3m 39s Export images in multiple sizes 4m 6s Export SVG 4m 35s
  • Conclusion Where to go from here 41s
    • 08

    Photoshop for Web Design with Emily Kay

    2h 33m • COURSE
    Working in web design involves creating UI (user interface) elements—icons, graphics, wireframes, and mockups. Adobe Photoshop provides the capabilities needed to make these design elements transition smoothly and easily to production. In this course, learn how to use Photoshop for modern web design workflows. Join Emily Kay as she takes you through a responsive web design project, including setup, using templates, making comps, and exporting for the web. Emily shows how to work with artboards, libraries, and smart objects. She demonstrates the process for creating several deliverables—wireframes, mockups, mood boards, style guides, navigation elements, and more.
    Topics include: • Setting up workspaces and artboards • Using libraries • Responsive design tips and tricks • Setting breakpoints • Creating navigation elements • Creating textures and backgrounds • Embedding or linking smart objects • Making custom templates • Creating reusable UI elements • Saving and exporting for the web • Using Generator
    09

    Learning Responsive Design with James Williamson

    2h 14m • COURSE
    Web projects need to work across multiple devices, screen sizes, and browsing contexts. Web designs need to be responsive to these variables, providing an optimal viewing experience for each scenario. In this course, author James Williamson introduces responsive design to new web designers and fills in any gaps experienced designers may have, while providing a deeper exploration of how current trends in devices, connectivity, and user experience are driving its adoption. The course covers concepts like screen density, fluid grids, and responsive images, as well as actual design strategies that guide you from mock-up to testing.
    Topics include: • What is responsive design? • Controlling viewports • Designing for multiple screen densities • Working with media queries • Using fluid grids • Building responsive forms • Optimizing site performance • Building responsive mockups • Developing a content strategy • Designing for mobile capabilities • Creating flexible HTML • Testing responsive designs
    10

    Responsive Images with Morten Rand-Hendriksen

    Topics include:
    How responsive images work
    Adding Picturefill to your site
    Making regular images responsive
    Using the element
    Identifying breakpoints and layout changes
    Using the elements for image type fallbacks
    Course Contents
  • Introduction 1m 47s Welcome 49s Who is this course for? 58s
  • 1. Responsive Images: An Introduction 8m 28s How images on the web work 3m 41s How responsive images work 1m 52s New attributes and terminology for responsive images 2m 55s
  • 2. Making Responsive Images Work with Picturefill 13m 9s What is Picturefill? 3m 50s Adding Picturefill to your site 5m 20s Testing to make sure Picturefill works 3m 59s
  • 3. Making Regular Images Responsive 33m 31s When to use responsive images with the tag 1m 37s Preparing images for responsive display 7m 39s Introducing srcset and w 2m 56s Using srcset and w 4m 37s Introducing sizes3m 53s Using sizes 3m 48s Advanced layouts with srcset and sizes 5m 36s Targeting resolution density with x 3m 25s
  • 4. Responsive Images for Art Direction 17m 53s Introducing the element 3m 35s Identifying breakpoints and layout changes for your images 1m 47s Preparing images for element 1m 59s Using the element 6m 53s Challenges with responsive images in art direction 3m 39s
  • 5. Beyond Traditional Image Formats 5m 7s Using the element for image type fallbacks 5m 7s Going Further 2m 8s Responsive images are part of the new world of RWD 2m 8s
    • 11

    Responsive Typography Techniques with Val Head

    2h 9m • COURSE
    Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes. Designer Val Head shows you how to choose quality web fonts, develop a typographic scale and rhythm throughout your design, and build bulletproof font stacks. Plus, learn how to use media queries and CSS rules to keep your type looking great at any size. This course is a collection of best practices and techniques that will soon be an indispensible part of any web typesetter's toolbox.
    Topics include: • Deciding between self-hosted and hosted web fonts • Sizing your type with pixels, ems, and rems • Applying and choosing a typographic scale • Creating a font stack • Maintaining line lengths • Using media queries to set natural typographic break points • Tools for controlling type dynamically with JavaScript and jQuery

    Introduction to Web Design and Development with James Williamson

     

    3h 38m • COURSE
    New to web design? Start here first. In these tutorials, James Williamson introduces the fundamental concepts, tools, and learning paths for web design. He explains what it means to be a web designer, the various areas of specialization, and whether web design is the right hobby or career for you. Along the way, he talks to five prominent designers and developers, who have each found success in a different corner of the web.
    If you want to get up and running fast, check out the chapter on getting online, choosing a domain name and web host, and getting around the backend of a standard website. Need to stock your tool chest? Learn what you'll need to build a brand new site, from web design software and content management systems, to testing and prototyping tools and development frameworks. Finally, James outlines learning paths for where to go next, touching on subjects such as standards and accessibility, responsive design, and the three core web technologies: HTML, CSS, and JavaScript.
    This course is part of a Learning Path approved by the American Marketing Association.
    Gain the skills you need to become an AMA Professional Certified Marketer (PCM) in Digital Marketing by using the industry-leading courses and resources in the Learning Path. Take the AMA certification exam to show that you have what it takes to lead the digital transformation.
    Topics include: 
     • What is web design?
    • What is a web designer?
    • Learning to code
    • Choosing a web host
    • Working with a CMS
    • Exploring how websites are structured
    • Choosing your framework or software
    • Designing with standards and accessibility in mind
    • Learning HTML, CSS, and JavaScript

    1. Introduction
    01_01 Welcome
    01_02 Using the exercise files



    02. Exploring Web Design
    02_01-Getting started with web design
    02_02-Exploring HTML
    02_03-Exploring CSS
    02_04-Exploring JavaScript
    02_05-Learning to code
    02_06 Eye on web design: Stephanie Sullivan Rewis



    03. The Field of Web Design
    03_01-What is a web designer?
    03_02-Is web design right for you?
    03_03-Different areas of web design
    03_04-Remaining flexible: Chris Georgenes



    04. Getting Started
    04_01-Getting online quickly
    04_02-Working with a content management system (CMS)
    04_03-Choosing a web host
    04_04-Registering domain names
    04_05-Administering sites
    04_06-How sites are structured
    04_07-The business of web design: Val Head



    05. Exploring Tools
    05_01-Typical workstations
    05_02-Choosing a code editor
    05_03-Choosing a graphics editor
    05_04-Testing tools
    05_05-Prototyping tools
    05_06-Frameworks
    05_07-JavaScript libraries
    05_08-Choosing the right tools: Ray Villalobos



    06. Learning Web Design
    06_01-What to learn first
    06_02-Standards and accessibility
    06_03-The importance of content
    06_04-Designing for the screen
    06_05-Dealing with a multidevice world
    06_06-The typical web design workflow
    06_07-Learning HTML
    06_08-Learning CSS
    06_09-Learning JavaScript
    06_10-A life of learning: Sam Kapila



    07. Conclusion
    07_01-Where to go from here
    07_02-Additional resources



    Design Aesthetics for the Web with Sue Jenkins

    2h 45m • COURSE
    Topics include:
    - Understanding aesthetics
    - Picking harmonious colors
    - Structuring your layout
    - Using space to organize your design
    - Communicating with the right fonts
    - Aligning objects to achieve balance
    - Adding movement with scrolling and animation
    - Achieving proportion by scaling objects and text
    - Creating CSS for different devices

    1. Introduction
    01_01 Introduction
    01_02 Using the exercise files



    2. Introduction
    02_01-What is aesthetics?
    02_02-Examples from art and design



    3. Using Elements of Design
    03_01-Understanding the elements of design
    03_02-Using color to set the site’s mood
    03_03-Tweaking color value to add contrast
    03_04-Using texture to add depth
    03_05-Repeating shapes to unify your design
    03_06-Structuring your layout with form
    03_07-Using space to organize your design
    03_08-Setting boundaries with lines
    03_09-Communicating with the right fonts
    03_10-Challenge: Working with color
    03_11-Solution: Working with color



    4. Incorporating Principles of Design
    04_01-Understanding the principles of design
    04_02-Using contrast to set areas of interest
    04_03-Applying font styles to show emphasis
    04_04-Aligning objects to achieve balance
    04_05-Using hyperlink styles to create unity
    04_06-Applying background patterns
    04_07-Adding scrolling and animation
    04_08-Using border styles to add rhythm
    04_09-Achieving proportion by scaling objects
    04_10-Creating simplicity
    04_11-Using gradation to create perspective
    04_12-Challenge: Banner ad
    04_13-Solution: Banner ad



    5. Web Design Industry and Trends
    05_01-Emphasis: Designing for hand gestures
    05_02-Typography: Choosing and using web fonts
    05_03-Balance: Editing images for social media
    05_04-Form: Moving beyond flat design
    05_05-Color: Theory and trends
    05_06-Movement: Adding type over video
    05_07-Pattern and gradation
    05_08-Challenge: Type over video
    05_09-Solution: Type over video



    6. Designer’s Role and Web Design Workflow
    06_01-Responsibility: Understanding the designer’s role
    06_02-Research: Form follows function
    06_03-Composition: Using the grid
    06_04-Accessibility: Using size and color
    06_05-Responsive aesthetics: CSS for devices
    06_06-Communication: Leading viewers through a design
    06_07-Originality Stepping out of the Box
    06_08-Challenge: The designer's role
    06_09-Solution: The designer's role



    07. Conclusion
    07_01-Next steps



    User Experience for Web Designers with Chris Nodder

    1h 49m • COURSE
    As a user experience professional, you often find yourself acting as a liaison between business teams and technology teams, challenged to make design decisions that satisfy both parties. Additionally, you frequently revisit decisions made in the past, looking for ways to refresh and meet the changing needs of today's users. Everything from different devices and form factors to increased awareness around human computer interaction is driving a need to examine and optimize the user experience. Join Chris Nodder as he shares insights to help strengthen your design choices and help you adapt to current and evolving trends. Designers, product managers, strategists, UX newcomers, and curious observers alike can gain an expanded understanding of what it takes to succeed in the field of UX.
    Topics include: 
     • Getting an organization started with user-centered design
    • Substantiating the benefits of UX
    • Helping systemizers on your team empathize with users
    • How UX work today compares to the past
    • Being a generalist vs. being a specialist
    • Where is UX headed in the future?

    01. Introduction
    01_01-Welcome



    02. What Makes a Good Web User Experience
    02_01-Building a site for your visitors
    02_02-Understanding how people browse the web
    02_03-Its all about information
    02_04-What causes people to leave sites



    03. Dont Get in the Way of the Information
    03_01-Simple design
    03_02-Consistent design
    03_02-Consistent design



    04. Navigation
    04_01-Elements of navigation
    04_02-Content has a structure
    04_03-Understanding menus
    04_04-Reviewing some menu myths
    04_05-Working with site maps
    04_06-Adding search to your site
    04_07-Understanding links
    04_08-Exploring clickable elements
    04_09-Understanding Fitts law



    05. Site Layout
    05_01-People can begin from any page on your site
    05_02-Elements every webpage should have
    05_03-Creating progressive navigation
    05_04-Arranging your content



    06. Writing for the Web
    06_01-How people read on the web
    06_02-Writing for information exchange
    06_03-Formatting pages for information exchange



    07. Homepage
    07_01-Using your homepage as a site summary
    07_02-Creating fresh content
    07_03-Displaying navigation and search
    07_04-The fivesecond test



    08. Category and Landing Pages
    08_01-Showing people what youve got
    08_02-Making comparisons easy
    08_03-Creating landing pages from ad campaigns



    09. Detail and Product Pages
    09_01-The real purpose of detail and product pages
    09_02-Writing descriptive text
    09_03-Using images to set context
    09_04-Showing the price for products
    09_05-Have a call to action
    09_06-About Us A special detail page



    10. Forms
    10_01-Ask for information in context
    10_02-Making forms as painless as possible
    10_03-Creating form fields
    10_04-Handling errors gracefully



    11. Using Media to Help Tell Your Story
    11_01-Using different types of media
    11_02-Simple question Does it enhance the experience
    11_03-Using graphics for explanation, not decoration
    11_04-What is interactive content
    11_05-Laying out your page for media



    12. Balancing Adverts and Content
    12_01-Making money without selling out
    12_02-Adding graphical ads
    12_03-Creating text ads



    13. Summary Good Design Practice
    13_01-Simple, consistent, and standard design
    13_02-Considering your users



    14. Conclusion
    14_01-Next steps



    Mapping the Modern Web Design Process with Morten Rand-Hendriksen

    2h 16m • COURSE
    Once you eliminate the trends and terminology, web design is about one thing and one thing only: getting your message across to an online audience. This course offers a 10,000-foot view of the web design process, to help ensure you never lose sight of your users. Morten Rand-Hendriksen takes you on a journey from initial consultation and discovery through content strategy and UX considerations, to development, content creation, design, testing, and launch. By the end, you'll understand the different players and phases and how they fit together in a web design approach focused on meaningful communication and a great user experience.
    Topics include: 

     • Understanding what your users care about
    • Creating user personas
    • Creating content priority hierarchies
    • Testing wireframes and interaction patterns
    • Establishing a three-track build process
    • Incorporating accessibility principles
    • Using content blocks
    • Testing and revising your web design
    • Optimizing for social media and SEO
    • Launching your web design
    • Getting feedback from users

    00 Introduction
    0001 Welcome
    0002 What is this course about, and who is it for



    01 Web Designs as a Process
    0101 What do we mean when we say 'web design'
    0102 Creating informational user experiences
    0103 A guide to the web design process



    02 Some Perspective
    0201 The only thing that matters
    0202 All the things the end user does not care about
    0203 Asking what the web can do for you



    03 Preprocess
    0301 Roles and responsibilities
    0302 Establishing baseline documentation
    0303 Version control



    04 The Content Strategy Phase
    0401 Content strategysite
    0402 Establishing user personas
    0403 Content audit
    0404 Content modeling
    0405 Creating content priority hierarchies
    0406 Information architecture
    0407 Wireframing



    05 Prebuild Testing
    0501 Taking it to the streets
    0502 Card-sorting exercise
    0503 Testing wireframes and interaction patterns



    06 The Build Phase
    0601 Establishing a three-track build process
    0602 Creating a living style guide
    0603 Core content-model development
    0604 Baseline development priorities
    0605 Creating a content-only build for accessibility
    0606 Responsive web design as a process
    0607 Designing in the browser
    0608 Using content blocks
    0609 Interactive elements and progressive enhancement
    0610 Art direction Responsive images and graphics



    07 The Test-and-Revision Phase
    0701 Taking it to the streets again
    0702 Accessibility testing
    0703 Break and edge-case testing
    0704 End-user testing



    08 The Optimization Phase
    0801 Optimization priorities
    0802 Optimizing for user experience
    0803 Optimizing for social media sharing
    0804 Optimizing for SEO
    0805 Analytics integration



    09 Launch and Reset
    0901 Prelaunch checklist
    0902 Soft and hard launch
    0903 Create a feedback loop for issues and resolutions
    0904 Post-launch user testing
    0905 The web evolves--so should your site



    10 Going Further with lynda.com
    1001 Continue your path of learning



    HTML Essential Training with James Williamson

    5h 54m • COURSE
    HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that's simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences. So open a text editor, watch these videos, and begin learning to author HTML the right way.
    Topics include: 
     • Why is HTML important?
    • Exploring an HTML document
    • Formatting content
    • Displaying images
    • Using nav, article, and div elements
    • Linking to pages and downloadable content
    • Creating lists
    • Controlling styling (fonts, colors, and more)
    • Writing basic scripts

    00. Introduction
    00_01-Welcome
    00_02-exercise
    00_03-challenges



    01. Introducing HTML
    01_01-Importance
    01_02-syntax
    01_03-state
    01_04-reference
    01_05-editor



    02. Basic Page Structure
    02_01-explore
    02_02-doctype
    02_03-head
    02_04-body
    02_05-models



    03. Formatting Page Content
    03_01-format
    03_02-headings
    03_03-paragraphs
    03_04-breaks
    03_05-emphasizing
    03_06-special
    03_07-white
    03_08-images
    03_09-challenge
    03_10-solution



    04. Structuring Content
    04_01-Structure
    04_02-outlines
    04_03-nav
    04_04-article
    04_05-section
    04_06-aside
    04_07-div
    04_08-semantic
    04_09-aria
    04_10-challenge
    04_11-solution



    05. Creating Links
    05_01-Anchor
    05_02-linking
    05_03-external
    05_04-download
    05_05-fragment
    05_06-challenge
    05_07-solution



    06. Creating Lists
    06_01-unordered
    06_02-ordered
    06_03-description
    06_04-challenge
    06_05-solution
    06_06-conclution



    07. Controlling Styling
    07_01-css
    07_02-inline
    07_03-style
    07_04-typography
    07_05-color
    07_06-external
    07_07-challenge
    07_08-solution



    08. Basic Scripting
    08_01-javascript
    08_02-script
    08_03-function
    08_04-dom
    08_05-listen
    08_06-respond
    08_07-external



    09. Conclusion
    09_01-next



    CSS Essential Training 1 with Christina Truong

     

    2h 36m • COURSE
    CSS is a stylesheet language that allows you to control the appearance of your webpages. In this hands-on course—the first installment in an ongoing series—Christina Truong demonstrates the concepts that form the foundation of CSS, and explains how to use this language to add colors and other design elements to take your webpages beyond just black text on a white background. Christina covers selecting content, how the box model defines the spacing and sizing of page elements, styling text, and managing basic layouts. She also explores the tools needed to work with CSS, how to use selectors to target elements, and guidelines for page layouts with floats. Plus, at the end of the course, you'll walk away with an actual project—an online résumé page.
    Topics include: 

     • Creating a CSS file
    • Writing basic selectors
    • Setting properties
    • Using different typefaces and web-safe fonts
    • Understanding cascading and inheritance
    • Setting a font family, font size, text color, and more
    • Understanding the box model
    • Using the float property

    01. Introduction
    01_01-Welcome
    01_02-What you should know
    01_03-Using the exercise files



    02. Getting Started
    02_01-HTML overview/review
    02_02-Default browser styles
    02_03-Browser support and inconsistencies
    02_04-Text editors
    02_05-Project overview and setup exercise
    02_06-Inline, internal, and external CSS
    02_07-Create a CSS file
    02_08-Naming conventions



    03. CSS Core
    03_01-Syntax, terminology, and naming conventions
    03_02-Type, class, and id selectors
    03_03-Practicing with simple selectors
    03_04-Pseudo-class selectors
    03_05-Selectors Best Practices
    03_06-CSS Comments
    03_07-RGB Hex and keyword color values
    03_04-Cascading inheritance and specifity
    03_05-Cascading inheritance and specificity



    04. Typography
    04_01-Web-safe fonts and the font-family property
    04_02-Web fonts and Google fonts
    04_03-The font-size property
    04_04-Practicing with web fonts and font-size
    04_05-The font-style and font-weight properties
    04_06-The color, line-height, and text properties
    04_07-Adjusting the font-weight property



    05. Layouts
    05_01-Block vs. inline display
    05_02-The box model
    05_03-Margin and page layouts
    05_04-Practicing layouts
    05_05-Practicing with padding and spacing
    05_06-Floats
    05_07-Practicing with floats
    05_08-The box model fix
    05_09-Practicing with columns
    06_01-Next Steps



    Sketch Essential Training: The Basics (2018) with Chris Converse

     

    Topics include:
    Adding a library to Sketch
    Designing a search form
    Drawing icons in Sketch
    Working with fonts
    Setting up an artboard for tablet screens
    Using Sketch Mirror to preview your designs
    Creating interactive prototypes
    Exporting artboards and assets
    Collaborating with Sketch Cloud
    Course Contents
  • Introduction Learn the basics of Sketch 1m 6s About Sketch and this course 1m Work with fonts in Sketch 51s About the exercise files 25s
  • 1. Get Your File Set Up Add hero image and header bar 6m 11s Set and style the main headlines 4m 36s About Sketch libraries 3m 52s Add a library to Sketch 2m 23s Set up layout guides 3m 48s Add the top navigation 2m 39s Design a search form 8m 45s
  • 2. Draw Icons in Sketch Create a calendar icon 6m 49s Update Sketch library items 3m 16s Create the best price icon 6m 46s Create the chat icon 7m 57s Switch Sketch library files 1m 14s
  • 3. Complete the Web Layout Add icons to the header navigation 4m 22s Set up the great deals section 5m 48s Add the labels for each deal 7m 6s Create the details button 3m 43s Create a nested symbol for ratings 4m 46s Add the services section 5m 53s Add the testimonials section 4m 11s Add the footer 3m 18s
  • 4. Adapt the Web Design for a Smaller Screen Set up an artboard for tablet screens 2m 19s Resize the header for a smaller screen 4m Resize the search section for a smaller screen 3m 2s Using Sketch Mirror 2m 19s Apply the deals section to a smaller screen 3m 42s Apply the services section to a smaller screen 3m 11s Resize the testimonials and footer sections for a smaller screen 3m 57s
  • 5. Share and Collaborate Export artboards to a multipage PDF 1m 32s Collaborate with Sketch Cloud 3m 6s Prototyping: Fixed items when scrolling 3m 46s Prototyping: Interactive linking 2m 48s Prototyping: Control links with symbols 3m 36s
  • 6. Export Assets Export artboards to JPG and PNG 3m 25s Using the Slice tool 3m 39s Export images in multiple sizes 4m 6s Export SVG 4m 35s
  • Conclusion Where to go from here 41s

    • 1 - Introduction
    01. Learn_the_basics_of_Sketch
    02. About_Sketch_and_this_course
    03. Work_with_fonts_in_Sketch
    04. About_the_exercise_files



    2 - 1._Get_Your_File_Set_Up
    05. Add_hero_image_and_header_bar
    06. Set_and_style_the_main_headlines
    07. About_Sketch_libraries
    08. Add_a_library_to_Sketch
    09. Set_up_layout_guides
    10. Add_the_top_navigation
    11. Design_a_search_form



    3 - 2._Draw_Icons_in_Sketch
    12. Create_a_calendar_icon
    13. Update_Sketch_library_items
    14. Create_the_best_price_icon
    15. Create_the_chat_icon
    16. Switch_Sketch_library_files



    4 - 3._Complete_the_Web_Layout
    17. Add_icons_to_the_header_navigation
    18. Set_up_the_great_deals_section
    19. Add_the_labels_for_each_deal
    20. Create_the_details_button
    21. Create_a_nested_symbol_for_ratings
    22. Add_the_services_section
    23. Add_the_testimonials_section
    24. Add_the_footer



    5 - 4._Adapt_the_Web_Design_for_a_Smaller_Screen
    25. Set_up_an_artboard_for_tablet_screens
    26. Resize_the_header_for_a_smaller_screen
    27. Resize_the_search_section_for_a_smaller_screen
    28. Using_Sketch_Mirror
    29. Apply_the_deals_section_to_a_smaller_screen
    30. Apply_the_services_section_to_a_smaller_screen
    31. Resize_the_testimonials_and_footer_sections_for_a_smaller_screen



    6 - 5._Share_and_Collaborate
    32. Export_artboards_to_a_multipage_PDF
    33. Collaborate_with_Sketch_Cloud
    34. Prototyping_-_Fixed_items_when_scrolling
    35. Prototyping_-_Interactive_linking
    36. Prototyping_-_Control_links_with_symbols



    7 - 6._Export_Assets
    37. Export_artboards_to_JPG_and_PNG
    38. Using_the_Slice_tool
    39. Export_images_in_multiple_sizes
    40. Export_SVG



    8 - Conclusion
    41. Where_to_go_from_here



    Photoshop for Web Design with Emily Kay

    2h 33m • COURSE
    Working in web design involves creating UI (user interface) elements—icons, graphics, wireframes, and mockups. Adobe Photoshop provides the capabilities needed to make these design elements transition smoothly and easily to production. In this course, learn how to use Photoshop for modern web design workflows. Join Emily Kay as she takes you through a responsive web design project, including setup, using templates, making comps, and exporting for the web. Emily shows how to work with artboards, libraries, and smart objects. She demonstrates the process for creating several deliverables—wireframes, mockups, mood boards, style guides, navigation elements, and more.
    Topics include: 
     • Setting up workspaces and artboards
    • Using libraries
    • Responsive design tips and tricks
    • Setting breakpoints
    • Creating navigation elements
    • Creating textures and backgrounds
    • Embedding or linking smart objects
    • Making custom templates
    • Creating reusable UI elements
    • Saving and exporting for the web
    • Using Generator

    1.Introduction
    01. Welcome
    02. What you should know before watching this course
    03. Using the exercise files



    2 - 1.Setup Your Project
    04.Document setup
    05.Workspaces
    06.Artboards
    07.Color modes and settings
    08.Libraries



    3.2. Design Responsively
    09.What is responsive design
    10.Set breakpoints
    11.Design tips and tricks
    12.Layer comps
    13.Creating navigation elements
    14.Seamless textures and backgrounds
    15.Smart objects - Embedded
    16.Smart objects - Linked
    17.Preset templates
    18.Custom templates
    19.Styles panel



    4.3. Process
    20.Mood boards
    21.Wireframes
    22.Reusable UI
    23.Create comps



    5.4. Collaboration
    24.Style guides
    25.Client review comps



    6.5. Image Considerations
    26.Retina displays
    27.Image types for the web



    7.6. Export Assets for Development
    28.Legacy save for the web
    29.Quick Export
    30.Export As
    31.Using Generator



    8.Conclusion
    32.Next steps



    Learning Responsive Design with James Williamson

     


    2h 14m • COURSE
    Web projects need to work across multiple devices, screen sizes, and browsing contexts. Web designs need to be responsive to these variables, providing an optimal viewing experience for each scenario. In this course, author James Williamson introduces responsive design to new web designers and fills in any gaps experienced designers may have, while providing a deeper exploration of how current trends in devices, connectivity, and user experience are driving its adoption. The course covers concepts like screen density, fluid grids, and responsive images, as well as actual design strategies that guide you from mock-up to testing.
    Topics include: 

     • What is responsive design?
    • Controlling viewports
    • Designing for multiple screen densities
    • Working with media queries
    • Using fluid grids
    • Building responsive forms
    • Optimizing site performance
    • Building responsive mockups
    • Developing a content strategy
    • Designing for mobile capabilities
    • Creating flexible HTML
    • Testing responsive designs

    1. Introduction
    01_01 Welcome
    01_02 Who is this title for



    2.Introducing Responsive Design
    02_01-What is responsive design
    02_02-Exploring the need for responsive design
    02_03-What makes sites responsive
    02_04-Exploring a responsive site



    3. Common Concepts
    03_01-Examining the mobile viewport
    03_02-Controlling viewports
    03_03-Understanding screen densities
    03_04-Designing for multiple screen densities
    03_05-Understanding media queries
    03_06-Creating breakpoints with media queries
    03_07-Using fluid grids
    03_08-Making images responsive
    03_09-Examining the future of responsive images
    03_10-Building responsive forms
    03_11-Improving site performance



    04. Conclusion
    4-1 Exploring fluid grid frameworks
    4-2 Looking at responsive design tools
    4-3 Additional resources



    Responsive Images with Morten Rand-Hendriksen


    Topics include:
    How responsive images work
    Adding Picturefill to your site
    Making regular images responsive
    Using the element
    Identifying breakpoints and layout changes
    Using the elements for image type fallbacks
    Course Contents
  • Introduction 1m 47s Welcome 49s Who is this course for? 58s
  • 1. Responsive Images: An Introduction 8m 28s How images on the web work 3m 41s How responsive images work 1m 52s New attributes and terminology for responsive images 2m 55s
  • 2. Making Responsive Images Work with Picturefill 13m 9s What is Picturefill? 3m 50s Adding Picturefill to your site 5m 20s Testing to make sure Picturefill works 3m 59s
  • 3. Making Regular Images Responsive 33m 31s When to use responsive images with the tag 1m 37s Preparing images for responsive display 7m 39s Introducing srcset and w 2m 56s Using srcset and w 4m 37s Introducing sizes3m 53s Using sizes 3m 48s Advanced layouts with srcset and sizes 5m 36s Targeting resolution density with x 3m 25s
  • 4. Responsive Images for Art Direction 17m 53s Introducing the element 3m 35s Identifying breakpoints and layout changes for your images 1m 47s Preparing images for element 1m 59s Using the element 6m 53s Challenges with responsive images in art direction 3m 39s
  • 5. Beyond Traditional Image Formats 5m 7s Using the element for image type fallbacks 5m 7s Going Further 2m 8s Responsive images are part of the new world of RWD 2m 8s

    • 01. Introduction
    01_01-Welcome
    01_02-Who is this course for



    02. Responsive Images An Introduction
    02_01-How images on the web work
    02_02-How responsive images work
    02_03-New attributes and terminology for responsive images



    03. Making Responsive Images Work with Picturefill
    03_01-What is Picturefill
    03_02-Adding Picturefill to your site
    03_03-Testing to make sure Picturefill works



    04. Making Regular Images Responsive
    04_01-When to use responsive images with the img tag
    04_02-Preparing images for responsive display
    04_03-Introducing srcset and w
    04_04-Using srcset and w
    04_05-Introducing sizes
    04_06-Using sizes
    04_07-Advanced layouts with srcset and sizes
    04_08-Targeting resolution density with x



    05. Responsive Images for Art Direction
    05_01-Introducing the picture element
    05_02-Identifying breakpoints and layout changes for your images
    05_03-Preparing images for picture element
    05_04-Using the picture element
    05_05-Challenges with responsive images in art direction



    06. Beyond Traditional Image Formats
    06_01-Using the picture element for image type fallbacks



    07. Going Further
    07_01-Responsive images are part of the new world of RWD



    Responsive Typography Techniques with Val Head


    2h 9m • COURSE
    Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes. Designer Val Head shows you how to choose quality web fonts, develop a typographic scale and rhythm throughout your design, and build bulletproof font stacks. Plus, learn how to use media queries and CSS rules to keep your type looking great at any size. This course is a collection of best practices and techniques that will soon be an indispensible part of any web typesetter's toolbox.
    Topics include: 
     • Deciding between self-hosted and hosted web fonts
    • Sizing your type with pixels, ems, and rems
    • Applying and choosing a typographic scale
    • Creating a font stack
    • Maintaining line lengths
    • Using media queries to set natural typographic break points
    • Tools for controlling type dynamically with JavaScript and jQuery

    0 Introduction
    01 Welcome
    02 What you should know before watching this course
    03 Using the exercise files
    04 Using challenges



    1 Comparing & Choosing Web Fonts
    05 Exploring the goals of typography and responsive design
    06 Identifying quality web fonts
    07 Matching fonts to chunks of text content
    08 Deciding between self-hosted and hosted fonts
    09 Understanding how web fonts affect page weight



    2 Establishing Rhythm in Your Typographic System
    10.Exploring typography scale and vertical rhythm
    11.Implementing a modular scale to create typographic hierarchy
    12.Vertical rhythm with a base unit
    13.Sizing your type: Pixels, ems, and rems
    14.Applying viewport units (vh and vw) to typography
    15.Applying and choosing our typographic scale
    16.Challenge: Select and apply a different scale
    17.Solution: Select and apply a different scale



    3. Creating Type Prototype Pages
    018 Setting up and populating prototype pages
    019 Testing type across browsers and devices
    020 Establishing the font stack
    021 Challenge: Create a font stack
    022 Solution: Create a font stack



    4 Setting Type for Readability Across Screen Sizes
    23 Maintaining line lengths for comfortable reading across screen sizes
    24 Using media queries to set natural typographic breakpoints
    25 Controlling line breaks for headings
    26 Managing flashes of unstyled text (FOUT) using web font events
    27 Challenge: Handling your own web font events
    28 Solution: Handling your own web font events



    5. Helpful Online Tools and Scripts
    29 Previewing web type choices with the Typecast app
    30 Tools for previewing type and media queries: ish., Edge Inspect, and more
    31 Tools for controlling type dynamically with JavaScript and jQuery



    6 Conclusion
    Next steps: The future of responsive typography