Searching...
- Home
- Video Lectures
Course
| Subject: | Web Design |
| Topic: | Responsive Web Design |
| Views: | 24,691 |
Building a Responsive Website From Start to Finish
Video Lectures
Displaying all 26 video lectures.
Lecture 1 Play Video |
Series Introduction How to build a professional responsive website from start to finish --- DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 2 Play Video |
Discovery & Documentation Today is Part 1 of a multi part series called "How to build a professional responsive website from start to finish" Let's look at planning — Ideation, Discovery, and Documentation. --- DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 3 Play Video |
Sketching, Wireframes & Design Today we sketch UI's ( 2:28 ) and execute a visual design in photoshop ( 24:25 ) --- Extended Photoshop video - http://youtu.be/xHUZyvQGuX4 --- A big thank you to these creators for contributing sample projects for the "work" section: Micael Butial -https://www.behance.net/gallery/14751131/-TYPO-International-Design-Talks Petras Nargėla - https://www.behance.net/gallery/16750837/Free-80-Crispy-Icon... Sergey Valiukh - https://www.behance.net/gallery/13745729/Timeline-Page Ayoub Elred - https://www.behance.net/gallery/15812143/Flat-Mobile-UIUX-Co... Anton Skvortsov - https://www.behance.net/gallery/16483395/City-IN-website-con... Nick Zoutendijk - https://www.behance.net/gallery/13870569/Stripes-Co-Free-ico... Jonathan Quintin - https://www.behance.net/gallery/12748107/Weather-Dashboard-G... Jieyu Xiong - https://www.behance.net/gallery/15063575/Fresh-It-Up-App-Des... --- DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 4 Play Video |
Getting Started With Jekyll, The Static Site Generator In todays episode, Travis Neilson from (DevTips)[https://www.youtube.com/user/DevTipsForDesigners] goes through the process of setting up a local Jekyll Installation and gives us a tour of the working parts and how to use Jekyll. 1:17 - Jekyll overview 3:09 - Installing 5:10 - Tour 10:19 - Front-matter 12:24 - Sass 13:52 - Parting thoughts Jekyll Website / Docs: http://jekyllrb.com/ The Web Ahead Podcast: http://5by5.tv/webahead/54 DevTips Project Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... Talking to Jon about Jekyll Video: http://youtu.be/u22CLlw4_hg Subscribe to phpacademy and enjoy more free web development tutorials! Our channel http://youtube.com/phpacademy Official website http://phpacademy.org Support Forum http://phpacademy.org/forum Follow us on Twitter! http://twitter.com/phpacademy |
Lecture 5 Play Video |
DevTips Starter Kit Use this as a simple structure for a simple start to a simple site. Get it on GitHub: https://github.com/DevTips/DevTips-Starter-Kit Prepros: http://alphapixels.com/prepros/ --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 6 Play Video |
Coding the Header and Footer Today we get into the meat of coding out the site. We code out the header and footer of the project. It's fun! Check out the Github project here to follow along: https://github.com/DevTips/Artists-Theme Check out the whole playlist for all the previous videos: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... --- A big thank you to these creators for contributing sample projects for the "work" section: Micael Butial -https://www.behance.net/gallery/14751131/-TYPO-International-Design-Talks Petras Nargėla - https://www.behance.net/gallery/16750837/Free-80-Crispy-Icon... Sergey Valiukh - https://www.behance.net/gallery/13745729/Timeline-Page Ayoub Elred - https://www.behance.net/gallery/15812143/Flat-Mobile-UIUX-Co... Anton Skvortsov - https://www.behance.net/gallery/16483395/City-IN-website-con... Nick Zoutendijk - https://www.behance.net/gallery/13870569/Stripes-Co-Free-ico... Jonathan Quintin - https://www.behance.net/gallery/12748107/Weather-Dashboard-G... Jieyu Xiong - https://www.behance.net/gallery/15063575/Fresh-It-Up-App-Des... --- DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 7 Play Video |
Profile Section Let's use Flex-Box, media queries and more to make the "About" section of our site! DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 8 Play Video |
GitHub Pull Requests & Refactoring Today we invite people to collaborate on our project using the Github.com pull request feature. --- DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 9 Play Video |
More Pulls Another two community-submitted pull requests. One by ArielSafari, that adds smooth scroll to the page sections. And the second by rkpasia that adds a lot of jekyll flexibility I never knew about. Check out the project on GitHub - https://github.com/DevTips/Artists-Theme - DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 10 Play Video |
Some Quick Pulls Shout out to meecrobe and boodaah on GitHub for these two quick pull requests. --- DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 11 Play Video |
The Work Section Today we build the first part of the 'work' section on our project. Basically, we work it. Check out the project on GitHub - https://github.com/DevTips/Artists-Theme A big thank you to these creators for contributing sample projects for the "work" section: Micael Butial - https://www.behance.net/gallery/14751131/-TYPO-International... Petras Nargėla - https://www.behance.net/gallery/16750837/Free-80-Crispy-Icon... Sergey Valiukh - https://www.behance.net/gallery/13745729/Timeline-Page) Ayoub Elred - https://www.behance.net/gallery/15812143/Flat-Mobile-UIUX-Co... Anton Skvortsov - https://www.behance.net/gallery/16483395/City-IN-website-con... Nick Zoutendijk - https://www.behance.net/gallery/13870569/Stripes-Co-Free-ico... Jonathan Quintin - https://www.behance.net/gallery/12748107/Weather-Dashboard-G... Jieyu Xiong - https://www.behance.net/gallery/15063575/Fresh-It-Up-App-Des... ---- DevTips is a YouTube show about web design and development. --- HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 12 Play Video |
CSS Animations You guys requested that we spend more time on animations and transitions. Who am I to disappoint? Come and get em! http://bouncejs.com Check out the project on GitHub - https://github.com/DevTips/Artists-Theme A big thank you to these creators for contributing sample projects for the "work" section: Micael Butial - https://www.behance.net/gallery/14751131/-TYPO-International... Petras Nargėla - https://www.behance.net/gallery/16750837/Free-80-Crispy-Icon... Sergey Valiukh - https://www.behance.net/gallery/13745729/Timeline-Page) Ayoub Elred - https://www.behance.net/gallery/15812143/Flat-Mobile-UIUX-Co... Anton Skvortsov - https://www.behance.net/gallery/16483395/City-IN-website-con... Nick Zoutendijk - https://www.behance.net/gallery/13870569/Stripes-Co-Free-ico... Jonathan Quintin - https://www.behance.net/gallery/12748107/Weather-Dashboard-G... Jieyu Xiong - https://www.behance.net/gallery/15063575/Fresh-It-Up-App-Des... --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 13 Play Video |
Work Section Interactions Continuing with the work section, today we decide what will happen when you click a thumbnail. --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 14 Play Video |
Ajax Content Today we inject content into our portfolio area using Ajax. — It's what the cool kids are doing. --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 15 Play Video |
Grunt.js & Jekyll 2.2 Fix Today we talk to Riccardo about making our project comparable with Jekyll 2.2 Using Grunt.js --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 16 Play Video |
Community Pull Requests You won't believe how cool these pull requests are. What an awesome community! --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 17 Play Video |
Dylan's Pull For the third video this week, we have GitHub contributor Dylan Spicker (@ZDesign) walks us through his updates to the Artist Theme --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 18 Play Video |
Testimonial Markup and Style Let's create the testimonials section of our site! Scrolls like butter. --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 19 Play Video |
Testimonial Javascript AAAAHHHHHH!! Javascript and other stuff!!! Today we make the client testimonials go swooosh, swooosh!!! --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 20 Play Video |
Responsive Clients Today we clean up a few things in the clients section, making it responsive and more. --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 21 Play Video |
Community Pulls Woo! You guys make our code better and better! More pull requests from the DevTips community! Out project on GitHub - https://github.com/DevTips/Artists-Theme --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 22 Play Video |
Font icons & Social Contacts Use font-icons to make cute little social links. Soooooo cute! Clone the repo from github: https://github.com/DevTips/Artists-Theme --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 23 Play Video |
Contact Form Today we use https://formspree.io/ to set up a contact form on our portfolio site! (the url changed since I made this video) --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 24 Play Video |
Use FitText for Responsive Text Today we use http://fittextjs.com/ to make the header responsive and awesome! --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 25 Play Video |
Free Hosting with GitHub! Today I show you how to get free hosting with gh-pages on GitHub. This is the last episode of the series! ... for now ;) https://pages.github.com/ --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
Lecture 26 Play Video |
Series Overview: How to build a professional website from start to finish Now that our big project is done. Let's look at what we've done! --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPV... "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh... "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwM... ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson |
