Web Design Fundamentals: Everything You Need To Learn HTML/CSS

Web Design Fundamentals: Everything You Need To Learn HTML/CSS

Everything you need to learn the tricks of the trade and start building your own websites.

It is extremely valuable to understand the fundamentals of web design if you want to work in digital marketing, social media or design. Fortunately, there are many excellent online courses and tools that will help you learn web design fast. At a minimum, a basic understanding of HTML, CSS and design is essential if you want to do anything on the web.

If you aren’t familiar with how websites are built, HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) provide the fundamental code that constructs the graphic user interface of the Internet’s World Wide Web. In a few hours of studying these two web markup languages you will be able to start building your first website. But it doesn’t stop there. There are other useful skills you should learn like using a content management system (CMS) like WordPress and mastering a responsive design framework so that all your websites are mobile-optimized.

This guide has everything you need to hack your education and start building your own beautiful websites. I recommend that you try out the different courses and tools to see what best fits your individual learning style. You’ll be surprised how much you can learn in a short time.

The Best Free Web Design Courses:

There are lots of free online courses and education platforms for learning web design. These ones are your best options.

CodeAcademy – This is my favorite free way to learn HTML and CSS. Codeacademy makes learning fun with scores, badges, interesting projects and an excellent Q+A forum if you ever have any questions.

1. CodeYear – Learn how to build a website or a web-based game  in 4 weeks through e-mail.
2. Code Avengers – Discover how to construct web apps and websites using HTML5, CSS3 and Javascript.
3. Mozilla’s School of Webcraft – A free online community for learning  web design and development.
4. 30 Days to Learn HTML & CSS – A free course from Tuts+ where you are taught how to build your first website in a month.
5. Hack Design – Receive a design lesson in your email inbox each week. Currently 26 lessons from professional designers.
6. A Beginner’s Guide to HTML/CSS – Learn front-end design and development principles like typography, backgrounds and gradients.
7. HTML5 & CSS3 Fundamentals: Development for Absolute Beginners – 21 excellent video episodes in web design from Channel 9.
8. Basic HTML and CSS For Non-Web Designers – Short videos for learning CSS, HTML, PHP and WordPress from Don’t Fear The Internet.
9. Diploma in Web Design – This free course from ALISON walks you through how to use the essential web design and development tools.
10. Programmr – Learn through completing live HTML exercises in your browser.

Premium Web Design Courses:

These courses tend to have better content than the free ones. The full-fledged web design academy websites like TreeHouse and CodeSchool are highly recommended.

1. HTML and CSS for Beginners (Udemy) – Learn to create a dynamic, visually-pleasing website with no previous coding experience. $49
2. Treehouse – The video-based learning modules and gamified approach on Treehouse  makes learning addictive. For $25/month you can learn web design, mobile app development and even how to start your own web business.
3. Become a Web Developer from Scratch (Udemy) Learn the web development languages HTML/HML5, CSS3, Javascript and PHP. $199
4. HTML & CSS From Scratch in 30 Days (SkillShare) – Learn how to build your own website. This course has over 11 hours of video training. $25
5. HTML/CSS Learning Path (CodeSchool) – Learn web design and front-end development. $25/month
6. Learnable: Front-End Development – A mix of resources to learn web design, Javascript, WordPress and more. $29/month
7. Design for Engagement: How to Design So People Take Action (Udemy) – An excellent course in design psychology and user experience design.
8. Logo Crust – Get reference from hundreds of images from top level designers.
9. Tuts+ – Browse 100s of easy-to-follow tutorials for web development and graphic design. $19/month
10. Skillcrush – Didn’t get a chance to try this one but the landing page sure is beautiful and convincing. $125
11. Lynda.com – Over 400 web design and development-related instructional videos. Nicely organized and quality instructors. $25/month

HTML/CSS Tutorials:

Hack together some new design and coding skills with these hand picked HTML and CSS tutorials.

1. CSS Mastery (Tuts+) – Learn how to build stylish web applications with CSS3.
2. HTML/CSS Tutorials (W3Schools) – An excellent online web design reference. If you’re a complete newbie, start here. If more advanced begin here.
3. Getting Started with CSS (Mozilla) – Mozilla has a good introductory tutorial for using Cascading Style Sheets (CSS).
4. Free Web Design Course – This Free Web Design Course includes a comprehensive course with 4+ hours of video tutorials and lifetime access. You get to learn responsive web designing to create exciting and dynamic web pages using HTML5, CSS3, JavaScript and Bootstrap.
5. Web Design Tutorials (WebMonkey) – A collection of tutorials on HTML, CSS3, AJAX and Javascript.
6. HTML, CSS, and Javascript from the Ground Up (Google Code University) – Video tutorials from Google.
7. Web Development from Scratch (Tuts+) – A series of web development tutorials for those with zero experience in web design. Covers HTML, CSS and AJAX.
8. HTML Code Tutorial – Quick tutorials for learning the ins-and-outs of HTML and other web development related topics like CSS, stylesheets, forms, frames and Javascript.
9. HTML.Net Tutorials – A nice collection of tutorials for learning HTML, CSS, PHP and Javascript.
10. HTML and CSS Tutorials (HTML Dog) – Quick and easy-to-follow tutorials, references and examples to perfect your HTML and CSS skills.
11. Web Design Tutorials (Boogie Jack) – Learn HTML, CSS, website planning, Javascript and a whole lot more.
12. Dev.Opera – Learn the latest open web technologies: Javascript, HTML5 and CSS3.
13. How to Become a Designer Without Going to Design School – Excellent advice to follow by a designer who did the DIY way.

HTML/CSS Ebooks:

These are a few of the most recommended books for aspiring web designers.

1. HTML and CSS: Design and Build Websites – An accessible, beautifully designed introduction to HTML and CSS.
2. CSS Mastery – If you’re already experienced with CSS but you want to learn more advanced topics, this is an excellent book.
3. The Web Book – A free ebook on how to create websites and applications with HTML, CSS, JavaScript, PHP and MySQL.
4. CSS Basics – Learn the basics of CSS design in this informative 18 chapter ebook.
5. Don’t Make Me Think: A Common Sense Approach to Web Usability – A classic book that will get you thinking like a pro designer.

Web Design Frameworks:

Web design frameworks dramatically speed up your development time by providing a foundation of code and the latest responsive HTML5/CSS3 markup to build from. They also make it easy to have your websites look perfect on every devices and screen size.

1. Foundation – Light and fast mobile-first design framework.
2. Gumby – Beautiful design framework that uses SASS (Synctactically Awesome StyleSheets), an extension of CSS3.
3. Skeleton – A full web development kit for constructing responsive, mobile-friendly websites fast.
4. Twitter Bootstrap – The most popular responsive web framework. It is packed with features, regularly updated and a good framework to start with.
5. Base – A simple responsive, grid-based framework for web design.
6. Responsive Grid System – A simple framework for building responsive themes fast.

Content Management Systems (CMS):

Barely anybody builds standalone HTML websites anymore. If you’re serious about web design, I recommend that you learn how to encode themes for a CMS. WordPress is by far the most popular option. Believe it or not, most websites that are made for under $5000 are hacked together from WordPress themes.

1. WordPress – Powers more websites than nearly every other CMS combined. Lots of free plugins and themes.
2. Joomla – More complicated than WordPress but also more powerful. Excellent community and lots of addons.
3. Drupal – The most flexible of the open-source CMS platforms. Steep learning curve.
4. Squarespace – Cloud-based web design and hosting platform. Good for amateurs and quick websites.
5. Tumblr – Free blogs that can be heavily customized. Massive community.
6. ModX –  A relatively new CMS that looks interesting.

Web Portfolio Networks:

Having a professional web design portfolio is much more important than your resume or credentials. These websites will help you network with other designers and feature your best work for feedback from the community.

1. Behance – The web’s largest community for designers. Recently bought by Adobe for over $150 million.
2. Dribble – A community of designers sharing their work, process, and projects. The talent of designers on Dribbble is simply astounding.
3. Cargo – A design community where they make apply and get approval from other designers.
4. Scoutzie  – A portfolio site for professional designers that want freelance work with startups.
5. DeviantArt – More of an artist showcase community but this site is huge.

Design Feedback:

If you’re learning online, you’ll want to reach out to a community of fellow designers and get their feedback on your skills.

1. Forrst – Improve your web design through feedback in this community.
2. Hunie – Collaborative community for peer-to-peer design critiques.
3. Usabilla – Let’s you build curated library of design patterns as you browse the web and share them with others.
4. DesignDrop – Conduct design reviews and get feedback from clients and colleagues with visual annotations.

Find Freelance Design Work:

One of the easiest ways to get experience when you’re starting out is to to bid on outsourcing websites. Start bidding low and you’ll be able to build a portfolio, social recommendations and a track record on these websites. Then, you can go after the more lucrative web design contracts.

1. Elance – I find this to be the best outsourcing website. Build up your portfolio, reviews and references to land the big projects.
2. oDesk – Similar to Elance, bid on 100s of web design projects and build up your online profile to get noticed.
3. DesignCrowd – Web design specific marketplace where you can bid on projects.

Web Designer Forums:

If you have any questions or you want to hear what the latest buzz among web design professionals is, get involved in one of these forums.

1. SitePoint – Massive web development and design forum with over 700,000 members.
2. Designers Talk – A web design forum with over 20,000 members.
3. DigitalPoint – Another massive web forum that has been around a long time.
4. V7N – Huge web development forums.
5. HTML Forums – Everything web design related.
6. StackOverflow – Ask and answer questions from other designers and developers.
7. Mozilla’s Webmaker – Global web design community dedicated to creating, remixing and teaching web skills.
8. Mozilla Developers Network – An open community of web designers and developers.
9. The Secret Handshake – An online resource for young students and creatives who want to break into the digital design industry.

Inspiration From The Pros:

These websites feature the work of some of the world’s finest designers. They are excellent resources for inspiration.

1. Awwwards – Recognizes the world’s best web designers.
2. The Best Designs – A curated gallery of the well-designed websites.
3. WebDesign Inspiration – Another curated guide to the best designed websites.
4. SiteInspire – A showcase of web and interactive design.
5. The Design Inspiration – Inspiration for logos, art, websites and business cards.

 

Useful tools:

1. Firebug – Inspect HTML and modify style/layout in real-time.
2. W3C Markup Validation – Make sure your code validates with HTML and CSS web standards.
3. XAMPP – Creates a local web server on your Internet connection so you can develop websites locally.
4. Adobe Creative Cloud – Adobe recently re-branded their Creative Suite and put it all in the Cloud to cut down on piracy. It is not cheap but this is the professional toolset that powers most of the creative design industry. It includes the essential tools that professional designers use: Photoshop, Illustrator, InDesign and Dreamweaver. Monthly plans from $49.99
5. FileZilla – The best, free open-source FTP for transferring files to a remote web server.
6. Adobe Kuler – Create color schemes for your websites.
7. CoffeCup HTML Editor – One of the best HTML editors for designers. $69
8. NotePad++ – A great free, open-source syntax and code editor.
9. GIMP – The best free, open-source Photoshop alternative.
10. Thimble – A tool from Mozilla that lets you write and edit HTML and CSS right in your browser (and it corrects your mistakes).

Web Design Blogs:

Besides ours of course 😉 These are some well-visited web design blogs that you may want to follow religiously.

1. Smashing Magazine – My personal favorite. This website publishes some of the most extensive posts and design guides that I’ve ever seen.
2. Web Designer Depot  – Also an excellent blog for designers. They have a great newsletter to follow.
3. UX Booth – Expert commentary, posts and resources on usability, user experience, and interaction design.
4. Six Revisions – Forward thinking design posts from talented design professionals from all over the world.
5. Hong Kiat – An excellent blog for useful design tricks, tools, tutorials.

 Good References:

1. Web Developer’s Handbook – A massive resource for everything you need related to web design and development.
2. Web Platform Docs –  A new community-driven site that aims to become an authoritative source for web design and development.
3. Move The Web Forward – Understand web standards and how they are evolving.
4. Mozilla CSS Reference – A good reference for CSS markup.

Once you’ve mastered HTML and CSS I recommend you then learn HTML5 next. It will help you take your web design skills to the next level and create more interactive websites.