Line25

25 Detailed Tutorials for Coding Up Your Web Designs

25 Detailed Tutorials for Coding Up Your Web Designs
Home » Tutorials » 25 Detailed Tutorials for Coding Up Your Web Designs

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

One of the best ways to get into web design is to learn the process of transforming your Photoshop concept into a fully working coded website. Luckily there are various handy tutorials from across the web that document the process of writing a site with HTML and CSS in a step by step guide.

This post pulls together the best web design tutorials for coding and also some PSD to HTML conversion tutorials to help you along your way to becoming a CSS master.

Want more? Check out these CSS tutorials for beginners and all about learning WordPress!

Flexbox

Flexbox tutorials for coding Pin

Flexible Box Layout is a new layout mode in CSS3 designed for laying out complex applications and web pages. Flexbox allows you to lay out elements in a container, arrange and order them. You can also use it to arrange elements inside a container in either direction. Learn more about it in this tutorial.

Auto-Layout: Introducing Stacks — Flexbox for Sketch

Flexbox for Sketch tutorials for codingPin

Flexbox for Sketch enables designers to think and design in terms of grids, making the design more complex and consistent. In case you are not familiar with the term, a Stack is a special type of Group that defines the layout of its child Layers. You can learn more about it and how to use it, in the tutorial above.

Web Designing Basics (HTML and CSS)

Web Designing Basics (HTML and CSS)Pin

This is an introductory tutorial that will teach you everything there is to know about HTML and CSS and it will give you a good idea of how to start designing your website.

Free CSS Tutorial

Free CSS TutorialPin

This is yet an another good tutorial that will introduce you to the basics of CSS. You’ll find out about inline CSS, internal CSS and so much more.

Color basics in HTML and CSS

HTML Color CodesPin

Colors are important in regards to web design. This example comprises a great set of short and easy tutorials about using colors in HTML and CSS and even an advanced tutorial of SCSS techniques.

Getting Started with HTML & CSS

Free Interactive HTML TutorialPin

If you’re at the beginning of your web design career, this tutorial might come in really handy. Feel free to check it out and have some fun with this interactive tutorial.

How to create flexible layouts with Susy and Breakpoint

How to create flexible layouts with Susy and BreakpointPin

This website will help you create responsive layouts. It’s become more and more common for designers to turn to frameworks and Sass to simplify the process and this tutorial will help you learn how to do it.

HTML Advanced Tutorial

HTML Advanced Tutorial Pin

If you wanted to dig in some more into HTML5, this advanced tutorial might be exactly what you’ve been looking for. You’ll learn about input types and embedded content such as videos and audios.

Coding a Clean Web 2.0 Style Web Design from Photoshop

View the PSD to HTML tutorialPin

Develop a bright and fresh website design, and code the concept into XHTML and CSS with this step by step guide. In the second part of this tutorial, you will also be taught how to create the layout in Photoshop, and then convert it to a standards-compliant (X)HTML web design.

Adapting to Input

Adapting to Input tutorials for codingPin

In this article, Jeremy Keith once observed that fixed-width, non-responsive designs are built on top of a consensual hallucination. Learn more about adapting to input by following this comprehensive tutorial.

How To Create A Parallax Scrolling Website

HTML and CSS tutorials for codingPin

Learn how to create a parallax scrolling website, a technique that has been used by games designers and other artists for many years, and has taken off as a popular way for web developers to show off their creativity.

Create a Killer Band Site with Drupal: A 6-part Tutorial Series

View the PSD to HTML tutorialPin

Follow this extensive tutorial by Sean Hodge to see the whole process of not only creating a site in XHTML and CSS but continuing on to building into the Drupal platform.

Free Ruby Tutorial

Free Ruby TutorialPin

Ruby is considered to be an object programming language in the purest sense. Its language was designed to be powerful yet simple enough to be used by beginners.

The Most Detailed PSD to HTML Tutorial

PSD to HTML TutorialPin

This is one of the most detailed PSD to HTML tutorials you can find. It will teach you how to design and code a site from scratch and convert them into responsive HTML websites!

Building Your First Web Page

Building Your First Web PagePin

As the name implies, this tutorial will help you build your first web page from scratch. It is a very detailed tutorial that also takes you through all the basics and shows you a few tricks along the way.

html.net tutorials

TutorialsentutorialPin

You can learn a lot on about HTML and CSS on this website, starting with the basics of HTML and ending with JavaScript. Have a look if you’re interested in improving your skills or learn something new.

Lesson 12: Layout (CSS)

Layout (CSS)entutorial - HTML.netPin

This tutorial might come in really handy if you’re looking for ways to improve your design. This tutorial is about styling up your website’s layout using CSS.

BASIC HTML & CSS for NON-WEB DESIGNERS

Don’t Fear the Internet tutorialPin

This is a basic HTML & CSS tutorial for non-web designers that will teach you every step of a responsive web design with fluid width layouts. This guide will take you from web layout zero to hero.

HTML5 Tutorial

W3Schools Online Web TutorialsPin

This HTML5 tutorial contains hundreds of HTML examples and tips and tricks on how to work with HTML. This tutorial teaches you everything about HTML.

Invisible Things: Scripts, Metadata, Viewports, and Comments

Invisible ThingsPin

This example covers the invisible things of HTML such as scripts, metadata, viewports, and comments which are all important when coding up your website.

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

24 Comments

Would you like to say something?

  1. Marianne McDougall says:

    Fabulous tutorial, thank you for sharing Line 25

  2. Internet Marketing Auckland says:

    hey Iggy, thanks for this, I was looking for more info to pass onto Rish, our head coder, I am sure he will find this useful

  3. Kellie says:

    Thank you for linking to these tuts.

  4. R Aflec says:

    Great compilation! Thanks a lot for putting it all in one place, but there is another one to add to your list.

    Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.

  5. Tarquin says:

    Brilliant selection of tutorials! Most useful. Thanks for sharing.

  6. JXL15 says:

    Let me give you several examples: When you are sports fan you are united to that team. ,

  7. Soumya says:

    Just what i was looking for! Great compilation! thanks a lot Chris! :)

  8. logodesigner says:

    Thanks for the list of tutorials for web design. I will be try this

  9. Umesh says:

    Awesome stuff, I really need these type of help from you.

    thanks

  10. Ivan Mišić says:

    Great stuff. thx

  11. Jorge says:

    Muy Buena recopilación de tutoriales…gracias.

  12. ross says:

    This is a lovely list, but am I the ONLY person using Fireworks these days?

    To me its far more fluid than using photoshop and its bloody marquee select to outline objects and create graphics.

    Fireworks + Photoshop is a wicked combination for workflow, with both pieces of software complimenting each other when used for their specific functions.

  13. Jubranz says:

    thanks chris that was awesome!

  14. Car Wallpapers says:

    They are so many Great Tutorial, Really Thanks.

  15. Nardyello says:

    So much great information! HTML 5!?!? It looks much simpler and much like XML actually.

    Will love to learn about this new technology. Thank you for sharing these great articles!

  16. Noel Wiggins says:

    I believe that each designer has their own unique approach to designing websites, but I think we would all benefit from sharing a similar approach, why reinvent the wheel right?

    This collection is a great way to try and standardize the process, so we can get in and out, leaving the creativity on how the design looks opposed to how we do the design…


    Thanks & Regards
    Noel from nopun.com
    a professional graphic design studio

  17. Digitaluscious says:

    Thanks so much for sharing such a great list of tutorials, much appreciated!

  18. Andy Feliciotti says:

    great post and some great links

  19. Johnny says:

    Hey! Thanks for putting one of my tutorials on your list. Makes me feel great. Thanks :)

  20. Matt says:

    Great stuff, Chris!

  21. Tomas Laurinavicius says:

    Useful article, thanks.

  22. Website Design Services says:

    Nice and clean designs! :)

  23. All for Design says:

    Great article !
    Thanks for sharing these amazing tuts

  24. Dzinepress says:

    these of all best techniques of coding for web designs. thanks

Please Share