So you want to learn to design and build websites? Let’s talk about where should you start, what you need to learn, apps you’ll need, industry terminology, and more. There are two sides to creating websites: design and coding:
- Designers decide the appearance and user experience of the website.
- Developers use code to make the website function in a web browser.
Front-End versus Back-End
To create web pages and emails we use HTML code (Hypertext Markup Language). HTML tags mark up (label) content to indicate headings, paragraphs, lists, links, images, and more.
CSS (Cascading Style Sheets) code is used to style the contents of a webpage (or email), based on the HTML markup. CSS controls the appearance of everything, from fonts and color to building responsive page layouts that look good across screen sizes (mobile, tablet, and desktop).
PHP & MySQL
PHP is a free and open source language for back-end web development. It can create web pages dynamically by interacting with a database, collect and process data from web forms, and much more. MySQL is a popular open source database that is commonly used with PHP.
When writing code you’ll want a good code editor. Here are three popular ones. They are all good and you really can't go wrong with any of them.
- Sublime Text ($80, free unlimited trial): This is our favorite and what we recommend.
- Atom (Free): Made by GitHub, this is a great free code editor.
- Visual Studio Code (Free): Made by Microsoft, it has been gaining users and is also very good.
Designing Websites & Creating Web Graphics
Sketch is a Mac-only app that many web designers are using, and more people every day are switching to it. Not only can you create your designs (for website, apps, etc.), but you can even turn them into working prototypes to show clients and do user testing with.
You can buy Sketch for $99 which includes 1 year of updates and Sketch Cloud. After that, you can renew the license for $69/year if you want updates and access to Sketch Cloud.
Adobe XD is a newer Adobe app that is very similar to Sketch. It’s an easy to use app that enables you to design and prototype your ideas. Unlike Sketch though, it works on Mac and PC. It’s a relatively new app and is still developing rapidly.
You can get XD for free (with some limitations), as a single app for $9.99/month, or as part of the Creative Cloud.
Photoshop has been around the longest and is used by many web designers. It is a photo editor with web design features added on, so some web designers are turning to other apps such as Sketch and Adobe XD which were created solely for the purpose of visual and UX design.
You can get Photoshop for $9.99/month, or as part of the Creative Cloud.
Learn in Noble Desktop Classes & Certificate Programs
We offer classes in NYC, but you can also attend them live online. Here are some classes you should check out:
- Intro to HTML & CSS: Get a quick intro to HTML & CSS in this 3-hour hands-on class.
- Web Development Level 1: Learn to create websites by coding HTML & CSS.
- Learn to create web graphics in Sketch, Adobe XD, or Photoshop for Web.
Practice, Practice, Practice
Build sites, lots of them. Bang out a few small sites. Start each one from scratch for the practice of setting things up. Start simple, and get more complex later. If you try to do all the complex stuff on your first site you can get frustrated and are more likely to get discouraged. Try to get freelance projects from friends, family, and colleagues.