Get $1 credit for every $25 spent!

The Start-to-Finish Web Design Bundle

Ending In:
Add to Cart - $50
Add to Cart ($50)
$476
89% off
wishlist
(23)
Courses
5
Lessons
361
Enrolled
221

What's Included

Product Details

Access
Lifetime
Content
9 hours
Lessons
73

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

Instructor

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.

Important Details

  • 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: intermediate

Requirements

  • 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

View Full Curriculum


Access
Lifetime
Content
6 hours
Lessons
23

Learn Responsive Web Design from Scratch

Develop Interactive Websites That Adapt Seamlessly to Any Device

By EDUmobile Academy | in Online Courses

Responsive websites are ones that adapt to varying screen sizes and resolutions. Considering how many people use tablets and smartphones as their primary devices, it is absolutely essential for web developers to know how to build responsive sites. This course will teach you just that, arming you with the skills to design websites that look great on any screen.

  • Access 23 lectures & 6 hours of content 24/7
  • Discover HTML5 & its structure
  • Use CSS3 media queries
  • Learn response CSS fluid layouts
  • Understand Twitter Bootstrap
  • Dive into other frameworks like Zurb Foundation, HTML5 Boilerplate & Skeleton
The EDUmobile Academy was founded in 2008 as a bootstrapped initiative of Vishal Lamba, who has been actively involved in the technology space since 1989. We're very passionate about creating courses that have world class standards, and providing heroic support to our community of learners.

Every course is created by USA based, technologically qualified mentors, having an absolutely clear diction and command over spoken English. Over the years we've provided guidance and training to a developer community of over 80,000.

Details & Requirements

  • Length of time users can access this course: lifetime
  • 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

Course Outline

  • Mobile Web Overview
    • The Importance of Mobile Web (9:52)
    • What is Responsive Web Design (10:22)
    • Tools for Responsive Design - Part 1 (11:22)
    • Tools for Responsive Design - Part 2 (21:22)
  • HTML5 Structure
    • File & Folder Structure (10:42)
    • HTML5 Structure - Part 1 (23:43)
    • HTML5 Structure - Part 2 (11:31)
  • Responsive CSS Fluid Layouts
    • Base CSS (15:15)
    • Fluid Layout (20:41)
    • Sticky Footer (27:52)
  • CSS3 Media Queries
    • JQuery Screen Size Display (11:38)
    • Media Queries for iPads & Laptops (15:27)
    • Responsive Navigation (13:04)
    • Media Queries for Smartphones (18:29)
  • Twitter Bootstrap
    • Bootstrap Overview (9:58)
    • File Structure (14:15)
    • Navbar (11:38)
    • Jumbotron & Grid (21:37)
    • Grids & Panels (18:48)
    • Forms, Wells & Footer (14:22)
  • Other Frameworks
    • Zurb Foundation (16:40)
    • HTML5 Boilerplate (10:31)
    • Skeleton (9:02)

View Full Curriculum


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/ 4 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.

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

View Full Curriculum


Access
Lifetime
Content
17 hours
Lessons
204

Complete Guide to Front-End Web Development and Design

Learn the Primary Web Programming Languages & Watch Your Job Prospects & Income Soar

By Laurence Svekis | in Online Courses

The information age has put a premium on web developers and made web development skills more important than ever. In this course, you'll learn valuable front-end development concepts so you can start building your own websites from scratch. With an immersion in HTML5, CSS3, JavaScript and jQuery, this course will give you a wealth of knowledge that may be an excellent foundation for your development career.

  • Access 204 lectures & 17 hours of content 24/7
  • Discover popular coding languages over 4 distinct, well-organized units
  • Use comments & meta information in HTML
  • Transform your HTML code w/ CSS
  • Build navigation bars, format pages & make your website come to life
  • Debug using JavaScript
  • Create elements on the fly w/ JavaScript
  • Traverse the Document Object Model (DOM) w/ jQuery
Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert, having professional experience in a wide range of digital areas: from Search Marketing, Video Marketing, Content Creation, User Experience, application architecture, to web programming.

After launching his first websites he quickly realized that to get traffic on your site you need to be able to market online. Researching and using personal experimentation as to what are the most successful ways to effectively drive traffic to his websites, he was able to successfully build multiple success eCommerce sites. He used his expertise to provide Search Engine Marketing Services SEO to 100's of clients.

In the advent of Social Media in 2006, he had identified it as an excellent opportunity to drive traffic and connect with users. He created many successful sites that integrated with Myspace and then later into Facebook. He was able to monetize the traffic on several platforms, driving in some cases 10K+ clicks daily to the various platforms..

Applications he has created have entertained, informed and engaged tens of millions of people and he has over billions of page views on various platforms.

Details & Requirements

  • Length of time users can access this course: lifetime
  • 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

Course Outline

  • Modern Web Development introduction to course content
    • Modern Website Development Introduction
    • Modern Web developer Sneak peek
  • Learn HTML fundamentals of website
    • 1 HTML CSS Course Introduction
    • 2 Getting Started with HTML
    • 3 Learn about HTML what is HTML
    • 4 resources
    • 5 Create an HTML template to use and reuse multiple times
    • 6 HTML Comments and Meta Information
    • 7 HTML Paragraphs LineBreaks Headings
    • 8 Meta information and whitespace in HTML files
    • 9 Working with HTML attributes and images
    • 10 List types HTML
    • 11 Working with Tables HTML
    • 12 Connecting webpages with hyperlinks
    • 13 Source and Resources
    • 14 How to create a basic form in HTML
    • 15 HTML5 Input Types
    • 16 Creating amazing forms in HTML
    • 17 HTML5 Web forms
    • 18 Source and Resources
    • 19 Practice HTML Code
    • 20 HTML5 Content Sectioning
  • Learn CSS fundamentals of website development
    • 21 How to add CSS and JavaScript to HTML pages
    • 22 Source and Resources
    • 23 Working with Style Colors and text alignment CSS
    • 24 CSS Background Styling options
    • 25 Using CSS Selectors
    • 26 Source and Resources
    • 27 CSS box Model Borders
    • 28 CSS Box model padding shorthand
    • 29 CSS Box Model Margins
    • Source Code
    • 31 CSS Shorthand vs Long Declarations PX EM and Percentage
    • 32 Source and Resources
    • 33 CSS display options
    • 34 CSS position elements
    • 35 Source and Resources
    • 36 CSS pseudo Classes
    • 37 CSS pseudo Elements
    • 38 Source and Resources
    • 39 Multiple Selectors Same Properties
    • 40 CSS Selector Nesting
    • 41 CSS Clean up CSS and transform our webpage
    • 42 Transform a list into a navigation bar
    • 43 Create 2 columns in main content area
  • CSS Next Steps
    • 44 CSS more styling of HTML page
    • 45 Make it responsive CSS website
    • 46 Adding Google Fonts
    • 47 Source and Resources
    • 48 Source and Resources
  • JavaScript creating interactive Dynamic Content
    • 50 JavaScript Introduction course resources
    • 51 First JavaScript Code
    • 52 How to add JavaScript to your webpage
    • 53 Syntax of JavaScript how to write code
    • 54 Source Code
    • 55 Debugging Dev tools console messages in JavaScript
  • Writing JavaScript code
    • 56 JavaScript Variables Data Types
    • 57 Source Code
    • 58 JavaScript How arrays work
    • 59 JavaScript working with Arrays
    • 60 JavaScript Arrays in Action
    • 61 JavaScript Arrays as Strings and Slices
    • 62 Source Code
    • 63 JavaScript Working with Objects
    • 64 JavaScript Constructor Objects
    • 65 Source Code
    • 66 JavaScript Introduction to Functions
    • 67 JavaScript working with Functions
    • 68 JavaScript Functions in Action
    • 69 JavaScript Global Scope Values in Functions
    • 70 Source Code
  • JavaScript in Action get Dynamic and Interactive
    • 71 What is the DOM
    • 72 JavaScript DOM Document Object Model
    • 73 JavaScript getElementById
    • 74 JavaScript DOM select elements via Class and Tags
    • 75 JavaScript the Document Object data
    • 76 JavaScript Update Styling attributes using the DOM
    • 77 Source Code
    • 78 JavaScript DOM onclick
    • 79 JavaScript Mouse Event Listeners
    • 80 Source Code
    • 81 JavaScript addEventListener
    • 82 Source Code
    • 83 JavaScript Queryselectorall multiple elements event listeners
    • 84 JavaScript More Element Selection options
    • 85 Source Code
    • 86 JavaScript Creating New Elements
    • 87 Source Code
    • 88 DOM and Form Create Form Validation
    • 89 Source Code
  • JavaScript fundamentals
    • 90 JavaScript Fundamentals
    • 91 JavaScript Operators Introduction
    • 92 JavaScript Operators increment alternating row colors
    • 93 JavaScript Conditional ternary operator
    • 94 JavaScript Logical operators
    • 95 Source Code
    • 96 JavaScript Math Method
    • 97 JavaScript Date Method
    • 98 Source Code
    • 99 JavaScript Conditions
    • 100 JavaScript working with Conditions
    • 101 Source Code
    • 102 JavaScript Switch Condition
    • 103 Source Code
    • 104 JavaScript While Loop
    • 105 JavaScript Do loop
    • 106 JavaScript For loop
    • 107 Source Code
  • JavaScript JSON and AJAX
    • 108 JavaScript introduction to JSON
    • 109 JavaScript Multiple Objects
    • 110 JavaScript AJAX connection
    • 111 JavaScript Get JSON data using AJAX
    • 112 JavaScript External JSON file Data using AJAX
    • 113 Source Code
    • 114 JavaScript AJAX more details
    • 115 JavaScript AJAX server interaction
    • 116 JavaScript AJAX send data to server
    • 117 JavaScript AJAX post data to server
    • 118 Source Code
    • 119 AJAX Challenge send another field
    • 120 Source Code
  • jQuery for quicker coding
    • 121 SourceCode-in-Lessons-jQuery
    • 122 Introduction to jQuery
    • 123 How to add jQuery to your webpages
    • 124 Course resources Add jquery into your webpage
    • 125 Course Resources
    • 126 what is the DOM in JavaScript
    • 127 Learn about the DOM
    • 128 Document Object Model information via the browser
  • jQUERY easy AJAX
    • 129 How to write jQuery code
    • 130 jQuery Check First jQuery Code
    • 131 Source Code
    • 132 Use jQuery to update web page content
    • 133 All about jquery selectors pick elements from your webpage
    • 134 jQuery Web page manipulation and content interaction
    • 135 Source Code
    • 136 Using Each and THIS to get element contents
    • 137 Updating Elements Before After Prepend Append
    • 138 Source Code
    • 139 Modify Elements Empty Remove
    • 140 each loop advanced
    • 141 Source Code
  • jQuery Events and Traversing
    • 142 Event listeners Interactive web pages
    • 143 jQuery event listeners Click events shorthand vs regular
    • 144 jQuery Challenge 1 create interactive list
    • 145 Source Code
    • 146 jQuery Solution to Challenge 1
    • 147 Common jQuery Mouse events
    • 148 jQuery Mouse Events Mouse Pressed
    • 149 jQuery Keyboard Events
    • 150 Source Code
    • 151 Form Events
    • 152 Source Code
    • 153 jQuery Form Challenge 2
    • 154 Source Code
    • 155 jQuery Challenge 2 Solution Form Field Check
    • 156 Source Code
    • 157 jQuery power of Find
    • 158 Source Code
    • 159 Parents and Children selection
    • 160 jQuery more selection of Children looping
    • 161 jQuerry Traversing Next and siblings
    • 162 Source Code
    • 163 Traversing First Last Selection
    • 164 Source Code
    • 165 jQuery Filters for selection
  • jQuery Styling and Effects
    • 166 jQuery Add CSS Values
    • 167 jQuery how to work with classes
    • 168 jQueryCSS remove Class
    • 169 hasClass CSS challenge Toggle class
    • 170 Source Code
    • 171 Source Code
    • 172 jQuery challenge solution Toggle Dynamic List Items
    • 173 Source Code
    • 174 jQuery Attribute Content and update
    • 175 Source Code
    • 176 jQuery Effects Hide Show
    • 177 jQuery Toggle Element
    • 178 jQuery Callbacks
    • 179 Source Code
    • 180 jQuery Fading Elements
    • 181 Source Code
    • 182 jQuery Element Sliding
    • 183 Source Code
    • 184 animate your Elements with jQuery
  • jQuery AJAX
    • 186 jQuery and AJAX
    • 187 Simple loading content to element via AJAX
    • 188 jQuery AJAX get
    • 189 jQuery getJSON data from external file
    • 190 Source Code
    • 191 jQuery working with POST data
    • 192 jQuery AJAX method
    • 193 Source Code
  • Bringing it together HTML CSS and jQuery
    • 194 HTML CSS Lesson plan
    • 195 jQuery Keyup Content match in form field
    • 196 Source Code
    • 197 Form Select return value on change
    • 198 jQuery Event AJAX response from server
    • 199 jQuery and radio buttons and check boxes
    • 200 Source Code
    • 201 jQuery UI autocomplete setup
    • 202 jQuery UI autocomplete from Dynamic JSON file
    • 203 Source Code

View Full Curriculum


Access
Lifetime
Content
4.5 hours
Lessons
37

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/ 4.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.

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: intermediate

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

View Full Curriculum



Terms

  • Instant digital redemption
×
Your Ad Blocker Is On!
Sadly, recent updates to your Ad Blocker are preventing crucial parts of our shop from loading. Frustrating. We know. We hate to nag, but please turn off your Ad Blocker or whitelist us to continue exploring our shop.