Inkscape and Bootstrap 3 -> Responsive Web Design!

Design responsive websites using Free tools Inkscape and Bootstrap 3! Mood Boards and Style Tiles to Mobile First!
4.0 (21 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
3,322 students enrolled
$40
Take This Course
  • Lectures 43
  • Contents Video: 2.5 hours
    Other: 3 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2014 English

Course Description

UPDATE: Course updated and is ready for 2016

Get the course now while the price is still low ... just CHECK OUT THE REVIEWS below!

Over 1400 students have joined this course ... a HUGE thank you to each and everyone. Do not miss out - enroll NOW and join them!

Create Inspirational Websites with Mood Boards and Style Tiles to Mobile First Design!

The digital age is upon us - and this means we have to learn its language ... become web-whisperers!

Introducing inspirational web design to companies of all sizes - companies that are lost in the ocean of loud noise and customers with ADHD - has never been in more demand.

If you are a web designer and need to communicate creative and inspiring ideas and proposals to customers - this course is for you.

If you are a building a start-up company or are a project manager and you need to understand the flow of things in the world wide web - then this course is for you.

If you want to design your own website and you find that Photoshop is too expensive and too inflexible ... this course is for you.

Have your customer feast her eyes on the bright and rich style tiles you create with Inkscape and allow them to taste the sweet and colorful nuggets of Bootstrap 3 goodies!

Present a beautiful and scenic responsive web design ready for the most demanding project.

ENLIST NOW to inspire your boss and draw in new customers with your stunning skills.

I will walk you through the design process of a real life case study web design project using the flexible vector drawing tool Inkscape and the popular mobile first Bootstrap 3 HTML and CSS framework!

Inkscape is a wonderful FREE professional vector graphics drawing tool that you can use on Windows, Mac OS X and Linux. It's free and open source.

Responsive design is fast growing - exploding really - and same can be said about Bootstrap ... as the major framework for creating websites that look great on all internet browsers ... from mobile and tablets to desktops.

Designing custom websites using these two solid and trending platforms will get your projects noticed and enable you to MAKE MORE!

In this course I lead you ... step by step - focusing on the most important and demanding tasks you need to complete!

You will be surprised by how much you can do.

My promise to you is this:

You will create a complete web design that you can show your boss or customer - based on Style Tiles and a stunning Bootstrap 3 prototype.

Everything based on standard and most up to date server vector graphics and HTML.

Take the supplied design and customize as you like. Use for your own job advancement or sell to local clients for hundreds or even thousands of dollars!

This How-to course is fast-paced ... so hold on as we speed ahead. If you feel I am going too fast - just rewind the video and watch it again :)

By following the lectures carefully, you can get a job as a web designer or even sell complete designs to highpaying customers.

Does this sound exciting?

You must promise me ... and yourself ... to study the entire ... course (don't skip through it and don't just download the design ... make changes and create your own beautiful designs.

Use the shortcuts I give you here and just do as the course shows you.

Take notes as you go along.

I try to answer all messages the same day.

Now ... Let's get started

I can't wait to see those amazing web design projects that you'll create using Inkscape and Bootstrap 3!

Get ready to have your own design up and running today, right after going through this course ... and be earning big - soon after that!

Grab Your Copy Now.

Get up and running with this inspiring course on web design success.

  • Full, free lifetime access
  • All future extra lectures and upgrades are always included for free
  • Unconditional Udemy 30 day money-back guarantee ... that's my personal promise of your success!
  • ... and much, much more!

ONE FINAL POINT

Now you can have your own web design inspiration as you go through this course ... and start earning those big round numbers!

Click the [take this course] button, top right, now ... every hour you delay is costing you money...

What are the requirements?

  • Only an internet connected computer, tablet or smartphone.
  • Optional: Notebook and pen :)

What am I going to get from this course?

  • Create inspirational web design for companies of all sizes
  • Use Inkscape to create style tiles
  • Use Bootstrap to design the steps of the sales process

What is the target audience?

  • Web designers who need to communicate creative and inspiring ideas with customers
  • Solution providers that plan on selling web site design to high paying customers
  • Inspiring people from any country and any age!
  • This course is probably not for you if you want to study only part of it! You must take the full course to get the most benefit from it!
  • Web developers that want to get a fresh look at methods to design a sweet website look and feel as well as creating yummi components
  • Small business owners that want to know about the best methods and learn the language of web design

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
03:59

Get a better understanding of what you are getting out of the course.

Introducing inspirational web design to companies of all sizes - companies that are lost in the ocean of loud noise and customers with ADHD - has never been in more demand.

If you are a web designer and need to communicate creative and inspiring ideas and proposals to customers - this course is for you.

If you are a building a start-up company or are a project manager and you need to understand the flow of things in the world wide web - then this course is for you.

If you want to design your own website and you find that Photoshop is too expensive and too inflexible - this course is for you.

04:49

A powerful, free design tool

Whether you are an illustrator, designer, web designer or just someone who needs to create some vector imagery, Inkscape is for you!

  • flexible drawing tools
  • broad file format compatibility
  • powerful text tool
  • Bezier and spiro curves
05:55

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web!

This video answers the question WHY we want to use Bootstrap 3 with some convincing statistics.

01:56

Having a real-life case-study to follow along should give you a deeper understanding about what is needed for the design and what the end result could be.

04:27

Introducing all the sections and what they cover

How to start a Discussion

How to create a course Review

Go into a course

How courses are marked watched

Important to take all lectures

How to play the videos

Section 2: Inkscape: Get up and running!
02:09

Finding Inkscape.org on the web and downloading on your machine is a snap!

06:14

Here is a quick overview of Inkscape and the simple graphics tools you have access to. Cricles, Boxes, Lines, Curves and Coloring...

Physical Deliverable - Inkscape Cheat Sheet Download!
1 page
Section 3: Inkscape: Easy Logo Design using Inkscape
Logo design - Inspiration of Colors and Emotion
07:17
Case Study - Logo design for carz.is with chrome effect using Inkscape
07:31
Physical Deliverable - Carz.is logo in SVG
Article
Action Step - Share your own logo design and get feedback!
Article
Section 4: Inkscape: Cooler Web Design Method!
03:05

Taking down the customer ideas about the web site design from something like a mood board and using Inkscape to come up with a usable design method using style tiles.

02:43

Finding the template for the style tiles at GitHub and downloading the SVG file to open with Inkscape.

02:21

Start adding the logo to the style tile.

05:54

Cool ways to find great color combinations.

color.adobe.com - kuler

05:56

Adding textures and patterns from the mood board to our style tile.

02:13

Google has got us covered with fonts:

google.com/fonts

03:18

Adding the Google fonts into our Inkscape design

03:11

Giving our design some nice coloring adding background - all in Inkscape.

Concluding our design.

Physical Deliverable - Cheerful Car Rental - Logo and Mood Board
Article
Inkscape
1 question
Section 5: Bootstrap: Get up and run some more!
07:36

There are SO MANY nice components that Bootstrap 3 has to offer. From Buttons, Labels, Menu structures to advanced Javascript stuff like the Carousel.

05:02

Download the code from getbootstrap.com and get it running!

07:33

Bad example - www.sphere.bc.ca/test/sruniverse.html

Simple example - google.com

Newspaper - www.nytimes.com
-5 columns-non responsive

Newsweek - www.newsweek.com
-responsive-bootstrap 3

Facebook

Class-container - around all-row - contains the columns-col-md-xx - for the content

Physical Deliverable - Download Bootstrap 3 Cheat Sheet!
Preview
1 page
Where do I find Bootstrap 3?
1 question
Section 6: Bootstrap: Coolest CSS and HTML Web Design Framework!
04:00

Moving the design from Inkscape to Bootstrap 3 is not that hard once you have the clear goal in mind.

03:02

Its great to be able to use the free web fonts from Google - and it makes sure the site looks good whereever we are.

04:04

Bootstrap 3 has some nice features to control the navigation of the web site we are designing.

Section 7: Bootstrap: Booking Engine Web Elements!
07:14

The first step in our car rental case study is to get pickup and return location and dates.

08:11

The second step is for displaying a list of available cars for hire. With pricing and other information. Also carrying the Booking information forward.

04:00

No - this is more about displaying the list of extras for the selected car :)

04:57

Gathering information about the driver.

Everything nice and setup to go for the payment gateway.

Physical Deliverable - carz.is Booking Engine
Article
Section 8: Conclusion
00:53

CONGRATULATIONS on finishing the course :)

If you want to promote your newly created Bootstrap 3 and Inkscape Web Design Project eMail me with the URL of your site and why you found this course of great value in your project.

thrandur@thrandur.net

I will then create a post on my PR3 website with an image of your design and a HIGH VALUE link.

Please send me ideas for things that need clearing up.
I try to answer all questions the same day – and may even create a new lecture...

THANKS FOR WATCHING!

If you found GREAT VALUE in the course please consider leaving a 5 star review :)

New lectures coming soon!
Article
Section 9: BONUS - Inkscape 101
02:06

Tools

Left toolbar - drawing and editing tools

Top menu - the usual stuff

Top tools control - tool specific controls

Bottom status bar and quick color selector

Drag canvas - middle mouse

(also ctrl+arrow key or scrollbars)

Zoom in or out:

Ctrl-Rotate the mouse wheel

(also + and - keys

or Zoom tool

or the Z: box bottom right)

01:49

Rectangle ellipses stars spirals

Handles - try dragging

Controls Panel

Ctrl-Z - undo

02:37

Selector - (or F1 or Space)

Move - drag with mouse

(Ctrl restrict movement

to horizontal or vertical)

Scale - drag handle

(Ctrl - preserve ratio)

Click again - handles change

Rotate - drag corner handles

(Ctrl - restrict to 15 degree steps)

Drag CROSS MARK for center of rotation

Skew - drag non corner handles

02:29

Select - Shift-Click or Drag around

selection cue - dashed frame

Esc - deselect all selected objects

Ctrl-A select all objects

Ctrl-G - Group objects

Ctrl-U - Ungroup

Ctrl-Click - work with an individual object in a group

Shift-Ctrl-Click - work with more objects in a group

02:21

Object|Fill and Stroke

(or Shift-Ctrl-F)

Fill

Stroke paint (outline)

Stroke style

x-button

Color pickers

-RGB, CMYK, HSL and Wheel

Wheel

Opacity - Alpha

Gradient

Dropper tool

Click - give selected object that color

Shift-Click - give select object that stroke color

01:28

Ctrl-D - Duplicate

Ctrl-Shift-A - Align Dialog

02:06

Home - raise to top

End - lower to bottom

Raise - PgUp

Lower - PgDn

Select object under cursor - Alt-Click

Export bitmap
01:18

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Thrandur Arnthorsson, BsCS, Web Solution Provider and Entrepreneur

Thrandur has a BS degree in Computer Science from the University of Iceland and a Diploma in Entrepreneurship from Klak Business Accelerator.

He has great passion for spreading the joy of web design and web development using best practices and simple and easy to use tools - preferably free.

Through the years Thrandur has created a number of popular websites and rock solid software solutions - some for high paying customers. Recently he discovered how to use free tools like Inkscape and Bootstrap 3 to create beautiful web designs and how to use WordPress, Bootstrap 3, PHP and MySQL for profitable web development.

Discover how YOU too can create inspirational websites using mood boards and style tiles to mobile first design! Have your customer feast her eyes on the bright and rich style tiles you create with Inkscape and allow them to taste the sweet and colorful nuggets of Bootstrap 3 goodies!

Dive further into the world of WordPress and Bootstrap 3 web development. Sink your teeth into some amazing and tasty Bootstrap 3 treats. Enjoy the sweet aroma when you crack open the colorful pieces of smooth CSS and HTML goodies. Delight your guests with an attractive and custom baked website that you magically piece together into a wonderful WordPress theme.

ENLIST NOW in these courses to inspire your boss and draw in new customers with your stunning skills.

Expertise:

o WordPress Development - custom themes and plugins using Bootstrap 3, PHP and MySQL

o Web Design - using Inkscape and Bootstrap 3

o Project Management - with Trello and Google Drive

o Video Creation - for Youtube and Udemy using Camtasia and Explaindio

o Online Marketing - best way for Google search, Facebook and Youtube

What are you waiting for ... ENLIST NOW!

Ready to start learning?
Take This Course