Get Started in Web Design & Coding

Discover the ins and outs of back-end coding, website design, and graphic creation. Find out how to utilize PHP, MySQL, and JavaScript in web development, and learn about popular code editors, web design applications, and Noble Desktop's available classes.

Key Insights

PHP and MySQL are fundamental open-source tools for back-end web development, allowing for dynamic webpage creation and data interaction.
JavaScript can also be used on the back-end, executing code on web servers with tools like Node.js.
WordPress is a prevalent content management system (CMS), enabling the creation and management of websites or blogs using HTML, CSS, JavaScript, and PHP.
Popular code editors include Sublime Text, Atom, and Visual Studio Code, all of which are useful in writing and organizing code.
Web designing and graphic creation can be accomplished through applications like Sketch, Adobe XD, and Photoshop.
Noble Desktop offers classes and certificate programs in web design, HTML, CSS, JavaScript, web graphics, and more, accessible in NYC or live online.

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

Front-end code works in a web browser, whereas the back-end code works on a web server. The front-end of websites involve coding HTML, CSS, and JavaScript that control the look and feel of a website. The back-end of a website involves coding languages such as PHP, MySQL, Ruby on Rails, Node.js, etc. to create application-like functionality that typically interacts with a database.

Front-End Coding

HTML

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

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).

JavaScript & jQuery

JavaScript code is used to add interactivity, animation, and more to the front-end of websites (what you see in a browser). Create slideshows, image galleries, validate forms, and much more. JavaScript can also be used on the back-end of websites to execute code on a web server. jQuery is the most popular JavaScript library, and it makes it easier to target elements, handle events, and more.

Back-End Coding

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.

JavaScript

JavaScript can also be used on the back-end of websites to execute code on a web server (with Node.js for example).

WordPress

WordPress is a free and open-source content management system (CMS) that lets you create & manage a website or blog. WordPress themes control the look and feel of a WordPress site. These themes are built with HTML, CSS, JavaScript, & PHP.

Code Editors

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

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

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

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:

Web Design Certificate: Learn HTML, CSS, JavaScript, HTML Email, and web graphics in this comprehensive program.
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.
JavaScript: Learn to write JavaScript to add animation and interactive functionality to your web pages.
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.