Scribd
Upload
2K views

Best Resources For Web Design and Development With HTML5 & CSS3

The document provides a collection of links and resources for web design and development using HTML5 and CSS3. It includes over 150 links organized into chapters that cover topics such as web design basics, HTML, CSS formatting, adding effects with jQuery plugins, optimizing websites, and keeping up with the latest in the web industry. The resources include tutorials, code references, tools, inspiration sources, free images and icons.

Uploaded by

Adriana Cernaianu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Best Resources For Web Design and Development With HTML5 & CSS3

The document provides a collection of links and resources for web design and development using HTML5 and CSS3. It includes over 150 links organized into chapters that cover topics such as web design basics, HTML, CSS formatting, adding effects with jQuery plugins, optimizing websites, and keeping up with the latest in the web industry. The resources include tutorials, code references, tools, inspiration sources, free images and icons.

Uploaded by

Adriana Cernaianu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

BEST RESOURCES FOR WEB

DESIGN AND DEVELOPMENT


WITH HTML5 & CSS3

The free e-book for the Udemy course


Second Edi7on, April 2015
1. WELCOME TO THIS E-BOOK
This e-book is a collec.on of the links to all the amazing resources, tools and ar.cles
we use in the Responsive Web Design AND Web Development with HTML5 &
CSS3 course. All the tools and resources we use in the course can be found in the
corresponding chapter of this e-book.

Beside that, I also share a lot of other resources with you in this e-book, in order to
make your life as a web designer and developer a lot easier! I found all of these tools
and resources over a period of years, spending days of my precious .me looking for
things that I needed. So I decided to pack all of them into this e-book, so that you
dont have to go through the same hassle!

Now before you start reading, please take a look at my course Responsive Web
Design AND Web Development with HTML5 & CSS3 right now by clicking on the
buQon below (with a HUGE discount on the original price)!

START LEARNING HTML5 AND CSS3 TODAY!

2. WEBDESIGN BASICS
2.1 INTRODUCTION TO WEBDESIGN
Design course in form of ar.cles:
hQps://hackdesign.org/lessons

Learn more about at design:


hQp://www.webdesignerdepot.com/2013/12/infographic-at-design-vs-
skeuomorphism/
2.2 TYPOGRAPHY
Google fonts: tons of free, easy to use webfonts:
hQps://www.google.com/fonts

Fonts for free download:


hQp://www.fontsquirrel.com/

List of best free fonts for designers:


hQp://www.crea.vebloq.com/graphic-design-.ps/best-free-fonts-for-
designers-1233380

Very good for nding good font combina.ons:


hQp://www.fastprint.co.uk/blog/the-art-of-mixing-typefaces.html

Find even more good font combina.ons:


hQp://fontpair.co/

learn even more about typography:


hQp://www.typogui.de/

2.3 COLORS
Cool Flat UI colors:
hQp://atuicolors.com/

Even more cool colors:


hQp://getuicolors.com/

Find varia.ons of colors (very good):


hQp://www.0to255.com/
Adobe Color CC, play around with colors:
hQps://color.adobe.com/create/color-wheel/

PaleQon, play around with colors:


hQp://paleQon.com

Beau.ful gradients for webdesign:


hQp://uigradients.com/

Learn about colors:


hQp://www.rocket-design.fr/color-template/

Learn even more about colors:


hQp://webdesign.tutsplus.com/ar.cles/an-introduc.on-to-color-theory-for-web-
designers--webdesign-1437

2.4 WORKING WITH IMAGES


Basically all free images in one place:
hQp://thestocks.im/

Images from many sources:


hQp://www.pexels.com/

Unsplash, a must see:


hQps://unsplash.com/

Food images:
hQp://foodiesfeed.com/

A curated collec.on of free resources:


hQp://www.imcreator.com/free
Huge paQern library:
hQp://thepaQernlibrary.com/

Subtle paQerns:
hQp://subtlepaQerns.com/

Free videos:
hQp://mazwai.com/

Techniques for working with images in CSS:


hQp://css-tricks.com/design-considera.ons-text-images/

2.5 WORKING WITH ICONS


Beau.ful icon font:
hQp://ionicons.com/

Another beau.ful icon set:


hQp://entypo.com/

Font awesome icons:


hQp://fontawesome.io/icons/

Big collec.on of SVG fonts:


hQp://iconmonstr.com/

Yet another icon font:


hQp://icon-works.com/
2.6 USER EXPERIENCE
UX crash course in 31 days
hQp://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals

UI tricks that can lead to higher conversion rates:


hQp://www.goodui.org/

2.7 GETTING INSPIRED


Find beau.ful websites:
hQp://www.siteinspire.com/

Dribble, show and tell for designers:


hQps://dribbble.com/

Behance:
hQps://www.behance.net/

Inspira.on for one-page websites:


hQps://onepagelove.com/

Even more webdesign inspira.on:


hQp://www.admiretheweb.com/

Flat design inspira.on:


hQp://atdsgn.com/

Collec.on of specic design elements and paQerns:


hQp://paQerntap.com/

Another collec.on of design elements:


hQp://calltoidea.com/
Google fonts inspira.on:
hQp://femmebot.github.io/google-type/

Some amazing designers on Dribble:


hQps://dribbble.com/victorerixon
hQps://dribbble.com/benske
hQps://dribbble.com/peternlan
hQps://dribbble.com/Radium

2.8 EVEN MORE RESOURCES


Huge list of front-end development resources:
hQps://github.com/dypsilon/frontend-dev-bookmarks

Curated resources for everything crea.ve:


hQp://oozled.com/

3. DIVE INTO HTML


The best text editor for front-end web development in the world:
hQp://brackets.io/

Complete HTML reference:


hQp://www.w3schools.com/html

HTML special characters


hQps://css-tricks.com/snippets/html/glyphs/
4. FORMATTING WITH CSS
Complete CSS reference (this is really good):
hQp://tympanus.net/codrops/css_reference/

Important CSS selectors:


hQp://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--
net-16048

Cool things you can do with Google Chrome Developer Tools:


hQp://www.labnol.org/sokware/chrome-dev-tools-tutorial/28131/

5. THE KILLER WEBSITE PROJECT


5.1 7 REAL-WORLD STEPS TO A FUNCTIONAL WEBSITE
1. Dene your project (goal and audience)
2. Plan out everything
3. Sketch your ideas before you start designing
4. Design and develop your website with HTML and CSS
5. Its not done yet: op.miza.on
6. Launch the masterpiece
7. Site maintenance

Periodic table of web design process:


hQp://www.newdesigngroup.ca/blog/web-design-process-infographic/
5.2 LINKS USED IN OUR PROJECT
Free, simple and easy-to-use uid grid:
hQp://www.responsivegridsystem.com/

Get random user proles:


hQp://randomuser.me/

Subtle hover eects:


hQp://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-eects/

Up-to-date browser support tables for CSS and HTML:


hQp://caniuse.com/

Using Internet Explorer on a Mac


hQps://www.modern.ie

Social network colors:


hQp://designpieces.com/2012/12/social-media-colours-hex-and-rgb/

6. LETS ADD SOME COOL EFFECTS


6.1 LINKS USED IN THE COURSE
Animate.css:
hQp://daneden.github.io/animate.css/

6.2 COOL JQUERY PLUGINS


Webappers, huge list of plugins:
hQp://www.webappers.com/category/components/tool.ps/
jQuery Rain, another huge list of plugins:
hQp://www.jqueryrain.com/

Magnic popup:
hQp://dimsemenov.com/plugins/magnic-popup/

Tool.pster:
hQp://iamceege.github.io/tool.pster/#demos

Maplace.js, google maps plugin:


hQp://maplacejs.com/

Typer, a plugin that types:


hQp://cosmos.layervault.com/typer-js.html

OnePageScroll:
hQp://www.thepetedesign.com/demos/onepage_scroll_demo.html

7. OPTIMIZING AND LAUNCHING OUR


WEBSITE
Favicon Generator:
hQp://realfavicongenerator.net/

Compress images:
hQp://op.mizilla.com/

Minify CSS code:


hQp://www.minifycss.com/css-compressor/

Minify JavaScript code:


hQp://www.minifyjavascript.com/
HTML valida.on:
hQp://validator.w3.org/

Preview your website on mul.ple mobile devices at once:


hQp://www.responsinator.com/

SEO checklist:
hQp://webdesign.tutsplus.com/ar.cles/a-web-designers-seo-checklist-including-
portable-formats--webdesign-10740

Google analy.cs
hQp://www.google.com/analy.cs/

8. KEEPING UP WITH THE WEB INDUSTRY


Treehouse show, weekly video about new things in webdesign and development:
hQp://teamtreehouse.com/library/the-treehouse-show

Sidebar: the 5 best design links, every day:


hQp://sidebar.io/

Codrops, webdesign blog with lots of freebies:


hQp://tympanus.net/codrops/

Webdesignerdepot, webdesign blog:


hQp://www.webdesignerdepot.com/

Smashing magazine, webdesign blog:


hQp://www.smashingmagazine.com/

1st webdesigner, webdesign blog:


hQp://www.1stwebdesigner.com/
Hey designer, curated list of webdesign ar.cles:
hQp://heydesigner.com/

Sitepoint, learn HTML, CSS and more:


hQp://www.sitepoint.com/

THANK YOU FOR READING THIS E-BOOK!


I hope you found this e-book really useful!

So now that you have all these resources and tools, wouldnt it be great to learn how
to actually use them for a real-world project? Let me help you with that!

All you need to do is to enrol in the course Responsive Web Design AND Web
Development with HTML5 & CSS3 right now by clicking on the buQon below

You even get a HUGE discount because youre awesome and read this e-book all
un.l the end :)

START LEARNING HTML5 AND CSS3 TODAY!

You might also like