Ending In:
$1,209
97% off
Courses
9
Lessons
486
Enrolled
1,822
Courses
9
Lessons
486
Enrolled
1,822
What's Included
Mobile App Design in Sketch 3: Learn UX/UI From Scratch
$199 Value
Master Web Design in Photoshop
$199 Value
Mobile App Design: Learn UX/UI and Start Freelancing Career
$199 Value
Creating Responsive Web Design
$150 Value
Web Design: HTML & CSS For Rookies
$147 Value
Rapid Prototyping for Entrepreneurs - Build a Demo in 2 Hours
$97 Value
Bootstrap UI Development For Everyone
$80 Value
Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours
$79 Value
Mobile First & Responsive Web Design: Build Modern Websites!
$59 Value
Product Details
Access
Lifetime
Content
6 hours
Lessons
5
Mobile App Design in Sketch 3: Learn UX/UI From Scratch
Learn Mobile App Development By Mastering This Powerful UX/UI Tool & Key Design Principles
By Rob Percival | in Online Courses
With more people than ever browsing the Web through different devices--phone apps, desktop browsers, and more--it's important for designers to build responsive sites that look good no matter how they're viewed. Dive into responsive design by mastering Sketch 3 and UX best practices, and consolidate your knowledge by building a full app from start to finish utilizing the principles outlined in this course.
- Dive into responsive, mobile-first Web design w/ 6 hours of content
- Master Sketch 3 as a design tool: work w/ layers, edit shapes, use symbols, etc.
- Understand key UX concepts: the history of UX, user-centered design principles, etc.
- Apply UX theory to the real world: discover target users, create personas & more
- Create your own app: ideate, research, mock up, design, prototype & deploy it
- Apply your newly acquired skills to build other usable, beautiful apps
- Become a full-fledged mobile designed by course's end
Edurila is a platform for discovering online courses that teach you new skills wherever you may be in the world. Taught by best-selling instructors and top industry experts, our courses bring the best experience in the game to your computer screen. For more details on the course and instructor, click here.
This course is hosted by StackSkills, the premier eLearning destination for discovering top-shelf courses on everything from coding—to business—to fitness, and beyond!
Details & Requirements
- Length of time users can access this course: lifetime access
- Access options: web streaming, mobile streaming
- Certification of completion not included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: beginner
Compatibility
- Internet required
- Mac computer or OS X desktop environment required
- Sketch 3 required (available for free for 30 days)
- Basic HTML & CSS knowledge required
Course Outline
- Introduction
- Intro (2:44)
- Why Sketch 3?
- Photoshop VS Sketch 3 (9:04)
- Getting Started With Sketch 3
- Getting Our Feet Wet With Sketch 3 (14:11)
- A Few Other Sketch Pointers (9:00)
- Sketch 3 Resources (4:11)
- Learning By Designing
- Acorn Screen Sketch File
- Starting First App Screen (14:15)
- Pagination (10:39)
- Finish Top Content (5:55)
- Starting The Graph (8:08)
- Adding Dashed Lines & Values (18:52)
- Challenge 1 (1:34)
- Solution One (10:01)
- Lines For Our Graph (9:21)
- Cool Effects (9:12)
- Finishing The Screen (6:18)
- Sketch School 101
- Welcome to Sketch School (2:59)
- The Interface (6:25)
- All About The Layers (11:08)
- An Introduction to Shapes (1:51)
- Editing Shapes (6:46)
- Boolean Operations (4:03)
- Transform, Masking, Scissors, Rotate Copies, Pencil (6:27)
- Intro to Text & Text Rendering (8:12)
- Shared Text Styles (2:25)
- Text Path & Outline (2:21)
- Bitmap Images (5:03)
- Symbols (6:23)
- Introduction to Styling (4:46)
- Styling (9:43)
- Organizing: Groups, Artboards, & Pages (9:34)
- Canvas Settings (9:52)
- Exporting Assets (10:34)
- UX School 101
- What is User Experience? (5:24)
- Where UX Started (5:14)
- Usability (3:49)
- User Centered Design (3:59)
- 10 Principles of User Centered Design (7:32)
- Business Needs vs. User Needs (3:24)
- Qualities of a Good UX Designer (6:32)
- UX Design Process (3:10)
- UX School Applied: Discovering Our App
- Your Assignment (1:00)
- Discovering Target Users (5:11)
- More Information About The User (1:52)
- 20 UX Research Methods (8:49)
- Creating Personas (7:03)
- User Flow Chart (5:03)
- Drawing Mockups (4:27)
- Mockups In Sketch (7:23)
- Icon Pack
- Video Camera Icon (2:17)
- Location Icon (2:18)
- Pie Chart Icon (3:39)
- Music Note Icon (3:11)
- Analytics Line Icon (1:45)
- Half Moon Icon (2:14)
- Sun Icon (3:13)
- Summarized Paper Icon (6:44)
- Clock Icon (3:06)
- Color Box Icon (3:14)
- Gear Icon (3:04)
- Icon Challenge (0:49)
- Challenge Solution (5:33)
- Designing Our App
- Tour Screen One (18:07)
- The Second Tour Screen (11:14)
- Tour Screen Three (2:11)
- Last Tour Screen (9:31)
- Customize It Screen (15:55)
- Let's Get Organized (4:31)
- Default/Home Screen (18:10)
- Adding To The Home Screen (13:40)
- Finalize Home Screen (6:28)
- Settings Screen (10:40)
- Finalize Settings Screen (7:01)
- Second Settings Screen (4:23)
- Individual Article Screen (4:24)
- Prototyping With Invision
- Intro to inVision (4:40)
- Preparing for Upload (4:09)
- Prototyping Our App (14:20)
- Little Changes (4:08)
Access
Lifetime
Content
9 hours
Lessons
78
Master Web Design in Photoshop
Unlock the Potential of This Popular, Powerful Program to Burnish Your Design Skillset
By Barin Cristian Doru | in Online Courses
Here's a surefire way to increase your desirability by employers everywhere: learning and improving at professional Web design skills. Take advantage of Photoshop as a design tool, using it to apply key design principles such as how to work with white space, utilize contrast, design logos, and more. Upon finishing this course, you'll be fully acquainted with how to create sleek, stunning designs that work as beautifully as they look.
- Master Photoshop foundations & important web design principles w/ 9 hours of content
- Design custom graphics & icons, then incorporate them in your work
- Understand where to source fonts & graphics, plus how to implement them
- Plan & wireframe website layouts that follow the principles of good design
- Consolidate your knowledge & skills by completing 2 projects
- Access resources like PSD files, a cheat sheet, website templates & more
- Build impressive websites, craft a killer portfolio & accrue clients
Barin Cristian Doru is a web designer with 5+ years experience. He started out by designing and coding complete websites, then started learning Photoshop so he could focus only on design. After ample practice, he became a fast, efficient designer capable of creating stunning website designs in no time. Additionally, Barin is an entrepreneur having started his first business at 18 and today running multiple online businesses: an online shop, a web design business, an app creation studio for Android devices, and more. For more details on the course and instructor, click here.
This course is hosted by StackSkills, the premier eLearning destination for discovering top-shelf courses on everything from coding—to business—to fitness, and beyond!
Details & Requirements
- Length of time users can access this course: lifetime access
- Access options: web streaming, mobile streaming
- Certification of completion not included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: all levels
Compatibility
- Internet required
- Photoshop required
Course Outline
- Latest Updates
- Introduction to this section (2:12)
- Character & Paragraph Styles (8:21)
- Smart Objects explained (3:05)
- How to use a Smart Object (3:51)
- How to create a realistic mockup with Smart Objects (2:09)
- How to use Adobe Generator (3:47)
- How to use Layer Comps (5:47)
- Layer Comps with Smart Objects (1:51)
- Introduction - My Story
- Introduction - My Story (6:11)
- The basics
- System requirements & best settings (7:48)
- Color management (5:35)
- Color management quiz
- Photoshop version comparison (14:25)
- Piracy & stealing (3:07)
- Monitors: best panel types, resolution, brand, size (8:31)
- Monitor Quiz
- Web design just in Photoshop, no coding (3:05)
- What you need to know about Photoshop (5:49)
- How to monetize the skills you are about to learn (5:35)
- Grid systems (5:06)
- Grid system quiz
- Setting up your workspace (2:55)
- Topics I won't cover in depth (1:51)
- The principles
- Communicate effectively (6:31)
- Communicate effectively quiz
- A website must tell a story and create an atmosphere (10:49)
- Simply & clean or highly detailed? (5:25)
- How to understand the clients' needs (9:05)
- All about inspiration (6:44)
- Exercise: Inspiration
- Hands on: How I get my inspiration (8:47)
- Step by step approach (4:55)
- Hands-on: Using the step by step approach to create an icon (19:43)
- All about wireframes (8:23)
- All about wireframes quiz
- The role of imagery, stock photos and free photos (9:12)
- Custom Graphics (6:10)
- Hands-on: Creating custom graphics (14:21)
- Alignment tools (4:18)
- Symmetry, proper spacing and white space (12:35)
- Working with a brief (6:50)
- Working on a ‘small project’ (4:56)
- What ‘simple, modern, clean’ & other client terms actually mean (9:02)
- Using layer styles the right way (19:32)
- The pitfalls of your imagination (4:29)
- Understanding contrast (7:26)
- Using freebies & the meaning of being a designer (12:05)
- Optimizing your layers panel (8:11)
- Hands on: How to organize a messy project (18:24)
- Dummy content (4:34)
- Logo design (5:45)
- The importance of speed (6:29)
- Choosing the right projects (5:30)
- Pricing guide for your work (10:52)
- How to constantly get better (4:57)
- Typography tips, tricks and techniques
- Best sources for fonts (8:21)
- The Character Panel (11:57)
- How to identify a font (4:47)
- Mixing fonts (5:33)
- Typography tips, tricks and techniques (12:41)
- The project
- Introduction & project description (9:32)
- Setting the layout (4:12)
- Putting in content (6:26)
- Creating the header (16:02)
- Creating the hero area (11:22)
- Creating the content area (12:49)
- Creating the testimonial and footer areas (12:04)
- Conclusions (3:45)
- Flat design project
- Flat design: definition, examples, flat animations, history, skeuomorphism (10:25)
- Avoid these flat design mistakes (5:35)
- Building a flat website - Introduction (1:28)
- Building a flat website – Creating the header (6:46)
- Building a flat website – Creating the central point (9:24)
- Building a flat website – Testimonials and CTAs (9:06)
- Building a flat website – Finishing up with the footer (4:41)
- Final conclusions
- Final conclusions (1:11)
- Download all resources here
- Download all resources here
- Preview the resources
Access
Lifetime
Content
6 hours
Lessons
141
Mobile App Design: Learn UX/UI and Start Freelancing Career
Boost Your Career Prospects & Salary with This Course on All Things UX/UI
By Deimantas Brandišauskas | in Online Courses
Here's your chance to jumpstart your career in UX/UI design, one of the hottest fields in today's job market. You'll learn how to go from idea to working product, doing everything from identifying potential users to creating wireframes for your app. Whether you're developing a product you strongly believe in or strengthening your career prospects, you're guaranteed to not only develop your UX/UI skills, but also take them to the next level.
- Take your app idea from a mere vision to reality w/ 6 hours of content
- Perform user research to find your target audience, then market to it
- Learn how to plan, research, tell stories, sketch & wireframe your app’s UX
- Use Photoshop to design your UI: use layers, create buttons & more
- Design different pages in your app: login screen, categories screen, etc.
- Complete assignments & take quizzes to consolidate your knowledge
- Boost your employability & monetize your new skills
Deimantas Brandišauskas is a passionate mobile UX/UI designer and Front-End Developer who firmly believes that well-designed apps are just as important as well-built apps. He sees UX design as all about creating relationships between users and technology, and boasts over 5 years of experience in front-end development. His workflow involves going from initial app idea to a polished, well-developed app. For more details on the course and instructor, click here.
This course is hosted by StackSkills, the premier eLearning destination for discovering top-shelf courses on everything from coding—to business—to fitness, and beyond!
Details & Requirements
- Length of time users can access this course: lifetime access
- Access options: web streaming, mobile streaming
- Certification of completion not included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: all levels
Compatibility
- Internet required
Course Outline
- Getting Started
- About Course Instructor
- What Are We Going to Create in this Course?
- How to Better Use this Course?
- Tools We are Going to Use
- What is User Interface Design?
- What is User Experience Design?
- UX vs UI
- Getting Started Quiz
- Starting From Idea .....
- A Great Imagination and How to Come Up with an App Idea)
- Identify Target Audience
- Why Should You Identify Target Audience?
- How to Figure Out Who to Target?
- What After That?
- Assignment 1: Come Up with Your Own App Idea
- Start from Idea Quiz
- UX Planning, Research, Storytelling, Sketching, Wireframing
- Section Overview
- How to Improve Login Form?
- Improving Login Form
- How to Improve Checkout Form?
- Improving Checkout Form
- Coming up with Top 3 Features for the App
- Top 3 Features
- Top 3 Features (Notes)
- Using / Creating Personas
- Persona Template
- Assignment 2: Create a Persona for Your Own App Idea
- Storytelling
- Assignment 3: Create Storyboard for Your Own App
- Sketching
- Assignment 4: Sketch Your App Idea
- Wireframing
- Assignment 5: Create Wireframes for Your App
- Final Words on UX
- User Experience Quiz
- Photoshop for UI Design
- Intro to Photoshop
- Learning the Interface
- Layers
- Grids
- Free Transform
- Creating the Button
- Adding Two Fields
- Intro to Layer Styles
- Using Background Image and Overlay to Create a Background for the App
- Typography
- Free Font Lato by tyPoland Lukasz Dziedzic
- Create a Testimonial
- Intro to Layer Masks
- New Lecture
- Clipping Masks
- Create a Checkbox
- Create a Radial Progress Bar
- Assignment 6: Re-create this Mobile App Screen
- Congratulations! You’re ready for an actual app design!
- Visual App Design: Login Screen Design
- Searching for Inspiration
- Resource for Free Mobile Icons
- Finding Free Social Icons on the Web
- Starting with our Sketch of the Login Screen
- Designing Background for the Login Screen
- Adding Status Bar (TeehanLax)
- Designing Logo
- Creating Two Fields for Email and Password
- Creating Login Button
- Adding Icons for Logining with Social Accounts
- Login Screen Design (Photoshop File)
- Visual App Design: Topics / Categories Screen Design
- Starting With a Sketch
- Creating Top Bar Design
- Designing Image for the Topic
- Designing Title of the Topic and a Follow Button
- Designing Unfollow Button
- Add Topics Screen Design (Photoshop File)
- Visual App Design: News Screen Design
- Creating Top Bar
- Creating Image Box
- Designing Title
- Finnishing the Work
- Main News Screen Design (Photoshop File)
- Visual App Design: News Detail Screen Design
- Creating Top Bar
- Creating Image Box
- Adding Title, Date and Time
- Add Content
- Tabs Design
- News Details Screen Design (Photoshop File)
- Visual App Design: Navigation Drawer Screen Design
- Create a background
- Add Photo and Name
- Filling All Information
- Navigation Screen Design (Photoshop File)
- Making Money With Your New Skills
- Selling on GraphicRiver
- How Does GraphicRiver Work?
- How to Promote Your Work on GraphicRiver?
- Contests on 99designs (Crowdsourcing Website for Designers)
- Winning Tips on 99Designs
- Selling your services on Fiverr (Sell Services for $5 or More)
- Selling Tips on Fiverr
- How to Get Started in Freelancing?
- Make Money on Elance
- Starting a Blog or a Website
- $4,000 A Month Guide
- Conclusion
- Congratulations (but its' not the end) !!!
Access
Lifetime
Content
4 hours
Lessons
56
Creating Responsive Web Design
Ensure the Products You Build Look Great No Matter How They're Viewed
By Chris Converse | in Online Courses
Learn responsive design, and you'll never waste hours toiling over a stunning design only for it to look distorted on a particular device. From configuring your site's HTML content to stylizing its layout using CSS, you'll make certain that anything you design will look good no matter the viewport.
- Master the design of responsive websites w/ 4 hours of content
- Prep your site’s HTML content & structure: add content, navigation, etc.
- Use CSS to create your site’s style & layout: import fonts, define basic text styles, etc.
- Create a menu system that's easily navigable
- Adjust layouts for screens of different sizes: large, medium & small
- Make adjustments to print layouts & content
Chris Converse has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. He possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngulatJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network. For more details on the course and instructor, click here.
This course is hosted by StackSkills, the premier eLearning destination for discovering top-shelf courses on everything from coding—to business—to fitness, and beyond!
Details & Requirements
- Length of time users can access this course: lifetime access
- Access options: web streaming, mobile streaming
- Certification of completion not included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: all levels
Compatibility
- Internet required
Course Outline
- Introduction
- Introduction to this course
- About this course
- Terms and technology we'll be covering
- What you'll need to complete this course
- About the exercise files
- Preparing the HTML Content and Structure
- Setting up our project
- The HTML strategy for our layout
- Creating the main HTML containers
- Adding content into the header
- Add content to main section
- Add content to atmosphere section
- Add content to the How-To section
- Adding the navigation
- Adding the footer content
- Creating the Style and Layout with CSS
- Importing a Google Font
- Defining the basic text styles
- Style the heading and page container
- Style the logo and hero item
- Creating the button style
- Setting up three-column row
- Adding graphics to the main section
- Clearing floats with CSS pseudo-elements
- Styling the Atmosphere section
- Styling the How-To Section aside elements
- Styling the How-To Section blockquote element
- Adding content with pseudo-elements
- Styling the Footer
- Creating a Menu System with CSS
- Re-positioning the Nav
- Styling the nav list-items and links
- Showing and Hiding the nav sub menus
- Device compatibility options for nav
- Adding indication arrows
- Making Layout Adjustments for Large and Medium Screens
- Making minor adjustments for larger screens
- Making adjustments for large screens
- Making adjustments for medium screens
- Making Adjustments for Small Screens
- Moving the navigation for smaller screens
- Adjusting to the logo and hero elements
- Rearranging the main and atmosphere sections
- Rearranging the how-to section
- Rearranging the navigation
- Adjusting the spacing of the navigation and footer
- Making Adjustments for the Smallest Screens
- Adjustments for the header and hero
- Adjusting the How-To section
- Adjusting the footer
- Making Layout and Content Adjustments for Print
- Strategy for printing
- Linking a CSS file for print
- Setting up the base styles
- Setting up the header
- Displaying URLs when printing
- Setting up the Main section
- Setting up the Atmosphere section
- Switching our image tags with CSS
- Styling the footer
- Setting page breaks with CSS
- Where To Go From Here
- New Lecture
- Where to go from here
Access
Lifetime
Content
6 hours
Lessons
38
Web Design: HTML & CSS For Rookies
Master These Fundamental Programming Languages to Build Sites From Scratch
By BiteSizedSchool | in Online Courses
Guided by step-by-step tutorials, you'll become a master at crafting simple websites--setting a strong foundation for more complex sites you aspire to build. Learn how to lay out your web pages' structures using HTML, then manipulate CSS to further stylize your site and consolidate your skills as a skilled Web developer.
- Master Web design using HTML & CSS w/ 6 hours of content
- Understand which code editors are effective to use
- Utilize HTML to create tables, lists & frames
- Use CSS to create external style sheets, build a Web layout, etc.
- Ensure your HTML & CSS code is pristine w/ debugging tools
- Build & style HTML forms using tables, CSS & more
- Craft animations w/ Animate.css
- Become an efficient & effective Web developer
Brett Romero is a software engineer and entrepreneur who has started several businesses. Bitesizebschool.com is his latest business, where he writes about applying business principles to the real world and solving technology issues that every online business faces. He has also written desktop applications in languages running from Delphi to C# winforms/WPF, as well as built ASP.NET webforms and MVC based applications. He is also an iOS developer and currently has seven apps in the iTunes App Store. For more details on the course and instructor, click here.
This course is hosted by StackSkills, the premier eLearning destination for discovering top-shelf courses on everything from coding—to business—to fitness, and beyond!
Details & Requirements
- Length of time users can access this course: lifetime access
- Access options: web streaming, mobile streaming
- Certification of completion not included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: all levels
Compatibility
- Internet required
Course Outline
- Course Introduction
- Overview
- Interactive Code Snippets
- Code Editors
- Desktop Editors
- Online Editors - A Great Way To Share and Access Your Code Anywhere
- HTML
- Introduction To HTML [Interactive Code]
- HTML Tables & Lists [Interactive Code]
- HTML iFrames & CSS Simulated iFrames [Interactive Code]
- CSS
- Project Files For This Section.
- Introduction To CSS
- Creating External Style Sheets and Exploring Class & IDs
- Building Your Webpage's Layout In CSS
- Debugging HTML & CSS
- Enabling Developer Tools
- Using Debugging Tools 2
- Building and Styling HTML Forms
- HTML Forms [Interactive Code]
- Formatting an HTML Form Using a Table [Interactive Code]
- Styling an HTML Form With CSS + Button - Project Files
- Styling an HTML Form With CSS
- HTML Form Button Styling With CSS [Interactive Code]
- Building A Sprite Based Navigation
- Sprite Project Files
- Creating A Sprite Image
- Sprite Based Navigation With CSS
- CSS Pseudo-Elements
- Before and After Styling (project files attached)
- Interesting Techniques With Pseudo-Elements
- Displaying Images
- HTML5
- HTML5 Introduction Project Files
- The Missing Introduction To HTML5: What HTML5 Is and Isn't
- Doctype (project files included)
- Article and Section Tags (project files included)
- Header and Footer Tags (project files included)
- Aside Tag (project files included)
- Nav Tag (project files included)
- Content Models
- CSS Attribute Selectors
- Introduction (project files attached)
- Regular Expressions
- Techniques With Forms
- CSS Animations With Animate.css
- Introduction To Animate.css (project file attached)
- Building Out Animations
- Summary
- Completely Upgrade Your Web Design Skills
Access
Lifetime
Content
9 hours
Lessons
42
Rapid Prototyping for Entrepreneurs - Build a Demo in 2 Hours
Quickly Transform an Idea into a Working Demo--No Coding Required
By Evan Kimbrell | in Online Courses
No longer is building a product a tedious, time-consuming process. With rapid prototyping principles, you'll be able to turn out a real demo of your app in just 2 short hours--valuable to you whether you're an entrepreneur intent on launching an MVP, a product manager seeking user feedback, or more.
- Quickly turn ideas into working demos without coding a line w/ 9 hours of content
- Test the viability of your ideas: products, features & designs
- Get an overview of prototyping concepts: key terms, when to use wireframes, etc.
- Understand which prototyping tools to use
- Formulate your strategy & define the scope of your project
- Build a low fidelity version of your prototype: sketch it out, use templates & more
- Handle images in Pidoco, use Balsamiq, etc.
- Create an interactive prototype: design & polish it, create a tablet version, etc.
Evan Kimbrell is the founder and director of Sprintkick, a referral based full service digital agency based out of San Francisco. Over the last 4 years, he has overseen the development and launch of over 100 web and mobile apps. Clients range from 1-2 man startups bootstrapping their idea, to multibillion dollar Fortune 100s like Wal-Mart, Dick's Sporting Goods, & GNC. Before founding Sprintkick, Evan worked as a VC for the LA-based Juvo Capital firm. For more details on the course and instructor, click here.
This course is hosted by StackSkills, the premier eLearning destination for discovering top-shelf courses on everything from coding—to business—to fitness, and beyond!
Details & Requirements
- Length of time users can access this course: lifetime access
- Access options: web streaming, mobile streaming
- Certification of completion not included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: all levels
Compatibility
- Internet required
Course Outline
- Introduction
- Course Overview
- Course Format
- The first thing to do
- Crash course terminology
- What is a wireframe? What is a prototype?
- High fidelity and low fidelity
- Understanding why we use wireframes and prototypes
- Picking a tool
- Important things to understand beforehand
- Following the construction path
- Section 1 review material
- Coming up with details
- Coming up with strategy
- Coming up with scope of our project
- Section 2 review material
- Building our low fidelity version
- Intro to sketching
- Materials for sketching
- Sketch it out part 1
- Sketch it out part 2
- Upgrade to a tool, getting started with Pidoco
- Getting used to the features in pidoco
- Creating a quick sitemap upfront
- The site elements to start with
- Using templates
- Handling images in Pidoco
- Adding and controlling Layers in Pidoco
- Annotate everything
- Alternative: Using Balsamiq part 1
- Alternative: Using Balsamiq part 2
- An example project created in Balsamiq
- Creating the low fidelity version of the Happy Hour app
- Section 3 review material
- Creating an interactive prototype
- Getting it designed and polished
- Why I don't use HTML/CSS
- Introducing M.A.P.
- Adding interactivity to your prototype
- Collaborators & reviewers
- Creating the tablet version
- Section 4 review material
- Prototyping and beyond
- What's next?
- Keep the learning going
- Section 5 review material
- Feedback section
- Send feedback about new lectures & courses
Access
Lifetime
Content
7 hours
Lessons
67
Bootstrap UI Development For Everyone
Use This Potent Responsive Framework Tool to Quickly Develop Web Pages & Apps
By Brian Gorman | in Online Courses
Get in on Bootstrap, one of the most widely adopted responsive frameworks for Web and device development. It's a cost-effective, efficient tool for building web pages and apps that look good no matter how they're viewed--regardless of device, screen size, or browser type. You'll learn to utilize responsive grids, insert page elements, and more, mastering this essential development tool in absolutely no time.
- Use Bootstrap to rapidly develop Web & device UIs w/ 7 hours of content
- Install & set up key bootstrapping tools: Boostrap, jQuery, etc.
- Work w/ a responsive grid: nest rows & columns, position them, etc.
- Format page elements: align text, organize lists & tables, and more
- Implement advanced page components: dropdowns, button groups, etc.
- Insert carousels, accordions & other features using JavaScript & jQuery plugins
- Build automation w/ Node.js & Grunt
- Quickly build an online business presence
Brian Gorman is an experienced .Net developer, certified as an MCSD.net in C#.net. He also has five years of experience instructing college courses online in SQL databases, C#/VB.net programming, java programming, and Microsoft office technology. He owns and runs MajorGuidance, a training, consulting, and audio and video production company. For more details on the course and instructor, click here.
This course is hosted by StackSkills, the premier eLearning destination for discovering top-shelf courses on everything from coding—to business—to fitness, and beyond!
Details & Requirements
- Length of time users can access this course: lifetime access
- Access options: web streaming, mobile streaming
- Certification of completion not included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: all levels
Compatibility
- Internet required
Course Outline
- Welcome
- Course Overview and Welcome
- How To Learn Technical Topics
- Tools and Setup
- Download Bootstrap
- Download The Gimp [if you don't have photoshop or another editor]
- Download Microsoft Expression Studio [or other editor]
- Install Adobe Brackets [Alternative to Microsoft Expression]
- Download JQuery
- Setup the Default Project
- I just can't wait, I need a template now!
- The Grid
- Cheet Sheet
- Rows
- Columns
- Nesting Rows And Columns
- Fluid Rows And Columns
- Containers
- Offsetting Columns
- Pushing Columns Left or Right
- Clearfix Style Reset
- Page Elements and CSS Styles in Bootstrap
- Section 4 Overview
- Lead body copy, Initialism, and Abbreviations
- Small, Bold, Italics
- Aligning Text and Blockquotes
- Blocks for Code and User Input
- Lists
- Tables
- Contextual Color and Background Classes
- Images and Responsive Images
- Forms
- Buttons
- Visible Utility Classes
- Less configurator to change default styles
- Page Components
- Glyphicons, Input and Button addons
- Dropdowns
- Button Groups
- Navs [Tabs and Pills]
- Labels and Badges
- List Groups Panels and Wells
- Progress Bars
- Alerts
- Navbar
- Thumbnails
- Breadcrumbs and Pagination
- Jumbotron and Page Header
- Media
- Javascript and JQuery Plugin Options
- Carousel
- Accordion and collapsing divs
- Tooltips and Popovers
- Modal Dialogs
- Affix
- Build a Single Page Application Template with Scrollspy
- Advanced - Build Automation with Node and Grunt; Using LESS and Bootstrap Mixins
- A quick note about the advanced section
- Get Node.js Installed
- Get and Install Grunt
- Configure Grunt Part 1 - Less and Watch
- Configure Grunt Part 2 - CSS Minify
- Configure Grunt Part 3 - Uglify
- Configure Grunt Part 4 - Chrome Live Reload
- Getting setup for manual Bootstrap builds
- LiveReload Setup & Using Mixins part 1: Rounded Corners
- Columns
- Animations
- Transitions
- Transformations
- Gradients
- Opacity, Drop Shadows, Centering, and Sizing
- Ready to rock
- Final Thoughts, Course Wrap Up, and some additional resources
Access
Lifetime
Content
4 hours
Lessons
24
Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours
Understand How to Structure & Stylize a Site in No Time
By Code College | in Online Courses
Round out your Web design skill sets by learning to bring your Photoshop mockups to life. With this course, you'll take PSD files and turn them into fully functional websites coded in valid HTML5 and CSS3. Whether you're building sections of your site using HTML, or stylizing them using CSS, you'll acquire the knowledge necessary to hand-code fully functional web pages.
- Turn a Photoshop mockup into a semantic HTML5 & CSS3 website w/ 5 hours of content
- Hand-code your first website in 4-hours
- Set up your work environment: configure your folder structure, etc.
- Code an HTML5 skeleton, header, content section & footer
- Use CSS to add a stylesheet, style the navigation bar, etc.
- Validate your HTML5 & CSS3
A highly skilled professional, Brad Hussey is a passionate and experienced web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the Web, crafting design solutions, and speaking in code. Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios--when he's not passing on his knowledge to hundreds of thousands of students and counting through his online coding tutorials. For more details on the course and instructor, click here.
This course is hosted by StackSkills, the premier eLearning destination for discovering top-shelf courses on everything from coding—to business—to fitness, and beyond!
Details & Requirements
- Length of time users can access this course: lifetime access
- Access options: web streaming, mobile streaming
- Certification of completion not included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: all levels
Compatibility
- Internet required
Course Outline
- Introduction
- Welcome to PSD to HTML5 & CSS3
- Preparation
- What we are building
- What you need to start
- Setting up our Folder Structure
- Code Chunks
- The PSD
- Becoming Familiar with the Layout
- Gathering Assets & Saving for Web
- HTML
- Coding an HTML5 Skeleton
- Coding the "Header"
- Coding the "Content Section"
- Coding the "Footer"
- CSS
- Adding a Stylesheet to your Website
- Normalize vs. Reset: What is the difference?
- Global Styles & Typography
- Layout: Styling the Navigation Bar
- Layout: Styling the Header
- Layout: Styling the "Content Section" — Part I
- Layout: Styling the "Content Section" — Part II
- Layout: Styling the Footer
- Validation
- Validating your HTML5
- Validating your CSS3
- Conclusion
- Review
- Brand New Bonus Lectures!
- How to Buy Domain & Hosting for your Website
- How to Code a CSS Sticky Footer
Access
Lifetime
Content
5 hours
Lessons
35
Mobile First & Responsive Web Design: Build Modern Websites!
Create Websites That Always Look Great on Mobile
By Chris Dixon | in Online Courses
Considering how many people browse the Web on a mobile device, and how many different phones and tablets exist on the market--it's imperative for you learn mobile-first, responsive Web design. Ensure your websites and apps look great on any device by mastering use of fluid grids, adding responsive features like carousels, and much more.
- Understand what responsive design is & why it's important w/ 5 hours of content
- Work w/ fluid grids to craft responsive web pages
- Build your website by wireframing designs, configuring site organization & more
- Use jQuery plugins to implement responsive carousels & social share buttons
- Use CSS Flexbox to easily map out & build responsive layouts
- Utilize the Bootstrap framework, jQuery Mobile & more
- Optimize your site’s images so that they conform to the needs of a responsive website
Chris Dixon is a web developer and online teacher. He is passionate about his work, as well as teaching others about it, and has started various online and offline businesses. He was personally motivated to become his own boss and have more freedom and flexibility in his life. He built his first website back in 1999, back when the Internet was first beginning to popularize in usage. For more details on the course and instructor, click here.
This course is hosted by StackSkills, the premier eLearning destination for discovering top-shelf courses on everything from coding—to business—to fitness, and beyond!
Details & Requirements
- Length of time users can access this course: lifetime access
- Access options: web streaming, mobile streaming
- Certification of completion not included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: all levels
Compatibility
- Internet required
- Basic HTML & CSS knowledge required
Course Outline
- Welcome & Getting Started
- Welcome to the course
- What is responsive design?
- What you will need and useful tools
- Why mobile first?
- Fluid Grids & Responsive Essentials
- Getting started with the fluid grid
- Relative units
- Viewport Meta Tag
- Media Queries & Breakpoints
- Lets Get Building
- Download Project Images
- Wireframe with Gliffy
- Setting up the project
- Header & Navigation
- Adding the main content
- Creating the sign up area & footer
- Mobile first styling
- Mobile styles continued & adding media queries
- Finishing our project
- jQuery Plugins for Responsive Design
- Responsive Sliding Carousel
- Responsive Social Share buttons
- Responsive Images & Improving Page Load Times
- Responsive images introduction
- Reducing image file sizes
- Important update- please read
- Minification & Page Speed Insights
- Picture Element
- Adaptive images
- CSS Flexbox
- Introduction to Flexbox
- Flexbox grid
- Holy grail layout using Flexbox
- Flexbox sticky footer
- Responsive Frameworks
- Bootstrap framework
- jQuery Mobile part 1
- jQuery Mobile part 2
- Other popular frameworks
- Thank You
- Final project files
- Thank you
Terms
- Instant digital redemption