Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Inkscape and Bootstrap 3 -> Responsive Web Design!

Name: Inkscape and Bootstrap 3 -> Responsive Web Design!
Rating: 4.1 (41 reviews)

Design responsive websites using Free tools Inkscape and Bootstrap 3! Mood Boards and Style Tiles to Mobile First!

Created byThrandur Arnthorsson

Last updated 6/2018

English

What you'll learn

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

Course content

9 sections • 43 lectures • 2h 26m total length

Why Responsive Web Design and why choose Inkscape and Bootstrap 3?3: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.
Inkscape - Creating vector graphics for responsive web design!4: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
Bootstrap - Mobile first web design to take you further5: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.
Case Study - CarZ.is: The Cheerful Car Rental!1: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.
Introduction to the course and the Udemy environment4: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

Surprising way to gather customer needs!3: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.
Web Design Layout using a "secret" method!2:43
Finding the template for the style tiles at GitHub and downloading the SVG file to open with Inkscape.
PLEASE NOTE: Since there are some problems opening the the GitHub version of the SVG template with Inkscape 0.92.3 - you can use the file attached with this lecture.
Begin with the most important Logo!2:21
Start adding the logo to the style tile.
Cooler color selection!5:54
Cool ways to find great color combinations.

color.adobe.com - kuler
Textures and Patterns set the stage!5:56
Adding textures and patterns from the mood board to our style tile.
A great source of fonts: ready for the web!2:13
Google has got us covered with fonts:

google.com/fonts
Designing with fonts!3:18
Adding the Google fonts into our Inkscape design
Final touches and cooler styling!3:11
Giving our design some nice coloring adding background - all in Inkscape.

Concluding our design.
Physical Deliverable - Cheerful Car Rental - Logo and Mood Board0:04
Inkscape

Overview of the Bootstrap 3 goodies!7: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.
Action Step - Set up Bootstrap 3 on your own machine!5:02
Download the code from getbootstrap.com and get it running!
BONUS: Bootstrap 3 Grid System!7: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!1:00
Where do I find Bootstrap 3?

Color - Start moving the design from Inkscape to Bootstrap 34:00
Moving the design from Inkscape to Bootstrap 3 is not that hard once you have the clear goal in mind.
Adding Google Fonts to our website3: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.
Branding the header with our logo and making the navbar work as it should4:04
Bootstrap 3 has some nice features to control the navigation of the web site we are designing.

A time and a place - getting picked up and returned safely..7:14
The first step in our car rental case study is to get pickup and return location and dates.
A list apart - the obvious choices...8: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.
Extras! Extras! - Read all about it!4:00
No - this is more about displaying the list of extras for the selected car :)
Getting personal - do we really need all that info?4:57
Gathering information about the driver.

Everything nice and setup to go for the payment gateway.
Physical Deliverable - carz.is Booking Engine0:06

Congratulations and a BONUS!0: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!0:23

Pan and zoom2: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)
Create Objects - Rectangle ellipses stars spirals1:49
Rectangle ellipses stars spirals

Handles - try dragging

Controls Panel

Ctrl-Z - undo
Moving - Scaling - Rotating2: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
Selecting and Grouping2: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
Fill and stroke2: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
Alignment and Distribution1:28
Ctrl-D - Duplicate

Ctrl-Shift-A - Align Dialog
Z-Order2:06
Home - raise to top

End - lower to bottom

Raise - PgUp

Lower - PgDn

Select object under cursor - Alt-Click
Export bitmap1:18

Requirements

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

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

Who this course is for:

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

Inkscape and Bootstrap 3 -> Responsive Web Design!

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 21min

A powerful, free design tool

Inkscape: Get up and running!3 lectures • 9min

Inkscape: Easy Logo Design using Inkscape4 lectures • 15min

Inkscape: Cooler Web Design Method!9 lectures • 29min

Bootstrap: Get up and run some more!4 lectures • 21min

Bootstrap: Coolest CSS and HTML Web Design Framework!3 lectures • 11min

Bootstrap: Booking Engine Web Elements!5 lectures • 24min

Conclusion2 lectures • 1min

BONUS - Inkscape 1018 lectures • 16min

Requirements

Description

Who this course is for: