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

9 thoughts on “Modern Web Design Process”

  1. Do you mind if I quote a couple of your posts as long as I
    provide credit and sources back to your site? My blog site is in the exact same area of interest as yours and my
    visitors would truly benefit from some of the information you present here.
    Please let me know if this alright with you. Appreciate it!

    1. Absolutely! I have no issues whatsoever with you doing quoting me. (Sorry about the massive delay in getting back to you. I have comments quarantined and it’s been quite a while since I looked through them. I will put in a weekly reminder to do this task for the future.)

  2. Hi there! This post couldn’t be written any better!
    Reading through this post reminds me of my old room mate!
    He always kept chatting about this. I will forward this post to him.
    Fairly certain he will have a good read. Thanks for sharing!

    1. Nope. It’s called Twenty Fifteen Version: 1.3 by the WordPress team. It’s a free theme. I like clean and legible design, so it fit the bill pretty well. It’s a little outdated, but that’s on the list of things to fix.

  3. Hey there would you mind sharing which blog platform you’re working with? I’m planning to start my own blog in the near future but I’m having a hard time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something unique. P.S My apologies for being off-topic but I had to ask!

    1. I’ve used B2evolution before, as well as WordPress (which is what this platform is). I’ve found that, while B2evolution was interesting and initially offered more features (especially towards multiple users contributing to the blog), WordPress has definitely caught up. I prefer WordPress. It’s a simple installation if you are doing it manually, so long as you have the database created, with a database name, user account with god-like privileges on said database, database password and host that the database is sitting on (usually localhost). Those four pieces of info can be gotten via phpmyadmin on your webserver. If your hosting company offers a one button installation option, then it’s even easier (GoDaddy offers this and I’ve used it the last three times (not counting my hosting move or my new project).

      In addition, WordPress offers up more options for plugins, modules and themes, in my opinion. NOTE: there is a difference between you hosting it yourself (e.g. mydomain.com) and letting WordPress.com host your blog for you. (e.g. myname.wordpress.com). I am assuming that we are discussing the former and not the latter. The latter is the easiest possible method to get started on a WordPress blog, but I honestly don’t know what configuration options (like themes) you will get with that. Best of luck to you…

  4. I truly enjoy reading on this internet site , it has superb content . “Words are, of course, the most powerful drug used by mankind.” by Rudyard Kipling.

Leave a Reply

Your email address will not be published. Required fields are marked *