{"id":11641,"date":"2014-01-02T06:00:55","date_gmt":"2014-01-02T14:00:55","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=11641"},"modified":"2024-03-27T04:20:02","modified_gmt":"2024-03-27T11:20:02","slug":"5-useful-tutorials-for-web-designers","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers","title":{"rendered":"5 Useful Tutorials for Web Designers"},"content":{"rendered":"

Whether it’s HTML5 or responsive design, learning how to create the website of your dreams, or the website of your client’s dreams, requires a lot of skill and a lot of practice. Though it feels bravely Wild West to attempt many coding projects or designs solo, it makes far more sense, and is far more successful, to watch a few tutorials before diving in. With so many options floating around the ‘net, choosing the best can be difficult. So, here are five of the best web design tutorials to help you cut through the code and hone a new skill with plenty of time leftover to make some unique icons<\/a>.<\/p>\n

<\/span>Beginner’s Guide to Responsive Web Design<\/span><\/h2>\n

\"Screen<\/a><\/p>\n

\nThe most exciting and essential thing happening with web design today is responsive design. It’s critical for your pages to work across all mobile platforms, from tablets to smart phones, so users on the go can browse them. If you’ve never tried creating a responsive website, this helpful responsive design tutorial<\/a> will baby step you through the process, which has a pretty different set of techniques than you may be used to.\n<\/p>\n

<\/span>How to Create Flat Style Breadcrumb Links in CSS<\/span><\/h2>\n

\"Screen<\/a><\/p>\n

\nIf CSS is your bread and butter you’ll definitely want to learn how to make these links. Flat design<\/a> is big and getting bigger, whether it’s the graphics, logo or full website, thin is in. With this easy to follow breadcrumbs tutorial, you’ll no longer have to use the background image to create shapes. Check out the details at Line 25<\/a>.\n<\/p>\n

<\/span>How to Make an HTML5 iPhone App<\/span><\/h2>\n

\"Screen<\/a><\/p>\n

\nJust about everyone has at least one iPhone app on the market, probably even your mother. So, if you haven’t yet thrown your name into the ring because you don’t have a handle on the process and you haven’t mastered Objective-C, this HTML5 app tutorial <\/a>will have you primed to create the next Angry Birds, or at least Tetris, with just a few minutes reading a bit more practicing.\n<\/p>\n

<\/span>Thumbnail Hover Effects<\/span><\/h2>\n

\"Screen<\/a><\/p>\n

\nDo you love hover effects? So does everyone else playing with the Internet. You can learn how to create graphics that when moused over show more information or create a wrinkled or folded page effect. It’s a neat trick, and any client would love to showcase it. You can see all the steps at Tympanus<\/a>, including watching a demo and downloading the source.\n<\/p>\n

<\/span>A Backwards Compatible HTML5 Portfolio<\/span><\/h2>\n

\"Screen<\/a><\/p>\n

\nEveryone needs a high quality website that advertises their skills, work history and important projects. A modern one-page portfolio site can utilize HTML5 even before the web is ready for it, if you make it backwards compatible. Watch the demo and download the files at InspectElement<\/a>.\n<\/p>\n

+++++++<\/p>\n

\nThe future of web design is happening right now, and in order to keep up with the pace you’ll have to spend some time researching new skills. Fortunately, online tutorials are plentiful and ready to help you discover all the amazing things that are possible with a little practice.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"

Whether it’s HTML5 or responsive design, learning how to create the website of your dreams, or the website of your client’s dreams, requires a lot of skill and a lot of practice. Though it feels bravely Wild West to attempt many coding projects or designs solo, it makes far more sense, and is far more […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[95,716,717,718],"topics":[],"class_list":["post-11641","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-how-to-2","tag-tutorials","tag-tutorials-for-designers","tag-web-designers"],"acf":[],"yoast_head":"\n5 Useful Tutorials for Web Designers - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Useful Tutorials for Web Designers\" \/>\n<meta property=\"og:description\" content=\"Whether it’s HTML5 or responsive design, learning how to create the website of your dreams, or the website of your\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-02T14:00:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T11:20:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/01\/27033749\/Screen-Shot-2013-12-12-at-12.24.31-PM-560x313-1.png.webp\" \/>\n<meta name=\"author\" content=\"maryam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maryam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-useful-tutorials-for-web-designers\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-useful-tutorials-for-web-designers\",\"name\":\"5 Useful Tutorials for Web Designers - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-useful-tutorials-for-web-designers#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-useful-tutorials-for-web-designers#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/01\\\/27033749\\\/Screen-Shot-2013-12-12-at-12.24.31-PM-560x313-1.png.webp\",\"datePublished\":\"2014-01-02T14:00:55+00:00\",\"dateModified\":\"2024-03-27T11:20:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/c37446cfabe1d2bfdee6a548f16fd0f0\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-useful-tutorials-for-web-designers#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-useful-tutorials-for-web-designers\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-useful-tutorials-for-web-designers#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/01\\\/27033749\\\/Screen-Shot-2013-12-12-at-12.24.31-PM-560x313-1.png.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/01\\\/27033749\\\/Screen-Shot-2013-12-12-at-12.24.31-PM-560x313-1.png.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-useful-tutorials-for-web-designers#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Useful Tutorials for Web Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Useful Tutorials for Web Designers - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers","og_locale":"en_US","og_type":"article","og_title":"5 Useful Tutorials for Web Designers","og_description":"Whether it’s HTML5 or responsive design, learning how to create the website of your dreams, or the website of your","og_url":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2014-01-02T14:00:55+00:00","article_modified_time":"2024-03-27T11:20:02+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/01\/27033749\/Screen-Shot-2013-12-12-at-12.24.31-PM-560x313-1.png.webp","type":"","width":"","height":""}],"author":"maryam","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"maryam","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers","url":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers","name":"5 Useful Tutorials for Web Designers - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/01\/27033749\/Screen-Shot-2013-12-12-at-12.24.31-PM-560x313-1.png.webp","datePublished":"2014-01-02T14:00:55+00:00","dateModified":"2024-03-27T11:20:02+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/c37446cfabe1d2bfdee6a548f16fd0f0"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/01\/27033749\/Screen-Shot-2013-12-12-at-12.24.31-PM-560x313-1.png.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/01\/27033749\/Screen-Shot-2013-12-12-at-12.24.31-PM-560x313-1.png.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/5-useful-tutorials-for-web-designers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 Useful Tutorials for Web Designers"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/11641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=11641"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/11641\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=11641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=11641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=11641"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=11641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}