Modern Web Design Process

The Core Process

Web pages are made up of HTML code. They are stored on a web server and served by that web server when your browser (the client) requests them. The starting page is almost always called index.html (variants would be index.htm, index.php, or index.aspx, although these last two variants are a whole different animal.)

There are supporting files that go along with websites, such as .js files or .css files, as well as various media files, such as .jpg, .gif, .png and a host of video files.

The Modern Web Design Tools

While the list below looks overwhelming, the good news is that you don’t have to do all of these, all at once.

You generally only need one source control software, one markdown language, one server side language, both client side frameworks, one server side technology, and one text editor. You will most likely need all the web browsers. You will also need Photoshop, although Gimp will do if you’re broke.

  • Source Control
  1. Git -allows you to have multiple versions of files, as well as collaborate with others(commonly stored on Github)
  2. Subversion – allows you to have multiple versions of files, as well as collaborate with others
  • Markup languages
  1. Markdown – generates html code from .md files
  2. Textile – generates html code from .textile files
  3. Jekyll – a Ruby gem – necessary if you use one of the above mark up languages)
  4. HTML5 – plain text files- ends in .html or .htm-this is the most direct route
  • Frameworks

Server Side

  1. Symfony (using PHP)
  2. CakePHP
  3. WordPress – also uses PHP but is more similar to using Email and other simple blogging tools
  4. Drupal
  5. Joomla
  6. Django (using Python)
  7. Web2Py
  8. Rails (using Ruby – commonly called Ruby on Rails)
  9. MVC – general information on MVC, which is used by the above frameworks

Client Side

  1. CSS
  2. BootStrap (mostly CSS and some JavaScript – assists in responsive design)
  3. Less
  4. SASS
  5. JavaScript
  6. CoffeeScript
  7. Backbone.js
  8. JQuery (JavaScript Library)
  • Server side technologies
  1. PHP – Open Source scripting language that processes on the server
  2. Node.js– server side JavaScript
  3. ASP.Net – scripting language that processes on the server
  • Databases (Middleware)
  1. CSV files
  2. Microsoft SQL Server
  3. MySQL
  4. NoSQL
  5. PostGres
  6. YAML
  7. JSON
  8. CouchDB
  9. MongoDB
  10. Oracle
  11. XML
  • Development Tools
  1. Text Editor / IDE (Integrated Development Environment)

Windows

  • Notepad++ – much better replacement for Notepad, which is Window’s default editor
  • Aptana IDE -useful for JavaScript, as well as a smattering of other scripting languages
  • Visual Studio – Microsoft’s software development tool

MAC OSx

Linux

  • gedit – Linux default text editor (under Gnome)

Cross Platform

  • vim – Open Source text editor – cross platform
  • Eclipse – Multi-purpose open-source software development tool
  1. Multiple Browsers (for testing)
  1. Web Servers
  • IIS – Microsoft’s Web server- comes free with any server version of Windows
  • Apache
  • nginx

So, how do you go about learning all this material? One way is by going down the rabbit hole via all the links above. Another way is to explore some free and not quite free options listed below.

Free Tutorials

Low Cost

  • Treehouse – $25-$49/month-
  • Lynda– $25 -$37.50/month – I have actually paid for this service before and would do it again
  • safaribooksonline -Quit buying books on coding and use this service instead – I have actually paid for this subscription before and would do it again

Note that nowhere in here am I saying that a College Degree is required, for a career in Web Design / Web Development. It certainly couldn’t hurt; however, the most important thing for Web Designers/Developers is their portfolio of websites, and for Programmers, their list of software that they’ve made. You are judged on the quality of your work, not the prestige of where you learned these skills.

There are a lot of options on what to learn and I understand that it’s very confusing. Below is a path to learning. Note that on the Back End section, you need to learn something about MVC, but then you can branch off from there, based on what interests you.

Diagram of the path for a career in Web Design / Web Development

Side branches are additional skills/technologies that are related to the main skill (e.g. CSS leads down to JavaScript but across to BootStrap. BootStrap makes CSS work very well, but some basic knowledge of how CSS works is needed.)

Also, you don’t have to learn both. Many a person has made a very fruitful and rewarding career just being a Front End Developer (or a Back End Developer, although some basic knowledge of HTML and CSS is still needed.)