Tania Rascia

Skip Navigation
My Complete Front End Web Development Setup

My Complete Front End Web Development Setup

 /  57 responses

I’m a self-taught web developer who has been working professionally in the field since June, 2015. I’m going to write about the setup, programs, and plugins I use on a daily basis with some brief descriptions and alternate options.

View on GitHub


It doesn’t matter what you use: Mac or Windows. Vim or Emacs. Tabs or spaces. PHP or Python. If all the options didn’t have merit, there wouldn’t be an argument. This list is not meant to be an endorsement for or against anything, just one person’s web development workflow. Learn. Be open minded. Try new things. Research. Discover what works best for you. This is not an extensive list; this is my list.


Operating System

The software a computer runs on.


I use: macOS (Apple)

Other Options: Windows, Linux

I used Windows exclusively from 1994 to 2015. Now I work on a Mac, currently running Sierra. One of the biggest game changers for my web development journey was learning how to use the command line, which is done through the Terminal application in macOS.


Edit 12/29/2016 – I wrote an entire article dedicated to setting up a development environment for macOS.

Set up a Mac


The program used for navigating the internet.


I use: Google Chrome

Other Options: Firefox, Opera, Safari (Mac only), Edge (Windows only)

As a front end web developer, you should have all the browsers downloaded for testing. If you’re in an Apple environment, you can download virtual machines or generate screenshots of Edge at the Microsoft Developer Tools website.


Hosting / Cloud Computing

A service that allows a website to be viewed on the internet.


I use: NearlyFreeSpeech

Other Options: Amazon Web Services (AWS), Digital Ocean, MediaTemple, Rackspace

You have a choice between managed hosting, or setting up your own Virtual Private Server (VPS) in the cloud through services like Digital Ocean and AWS. The tradeoff is security and simplicity with managed hosting vs. having complete control and being able to keep prices down with a VPS.

I have some experience with both, and NearlyFreeSpeech has been a great middle ground for me. It’s inexpensive, allows me more control than traditional shared hosting, and I don’t have to worry about server security and upkeep. I might change my mind in the future, but for now, it works for me.


The software bundle used for web development.


I use: Linux Apache MySQL PHP (LAMP)

Other Options: MEAN

A stack describes the platform used for web development. The server my website runs on and the professional websites I’ve made have been on the LAMP stack, which has been a stable and popular choice for many years. The LAMP stack is a generalized name, as you can easily change out Linux for Windows, Apache for NGINX, MySQL for MariaDB, PHP for Python, and so on. Every layer in LAMP is free and open source.

For local development, I use MAMP instead of installing everything manually. MAMP is easy to set up and leaves my default system settings alone, creating sandbox environment. This is preferable for me, but might not be for others.

  • Operating System: Linux (many distributions available)
  • Web Server: Apache
  • Database: MySQL
  • Language: PHP

Text Editor / IDE

The program used to write code and edit text files.


I use: Brackets

Other Options: Sublime Text, Atom, Visual Studio Code

Brackets is not the most popular choice for text editors, but after downloading and playing around with a few different ones, it remains my favorite. VSC and Atom have a delay with syntax highlighting that bothers me too much. I like to refrain from relying on a text editor for doing things like minification, prefixing, and compiling Sass, so I feel comfortable switching it up. I don’t currently use an Integrated Development Environment (IDE).


All extensions are installed by going to File > Extension Manager.


    "styleActiveLine": true,
    "themes.theme": "new-moon",
    "brackets-indent-guides.enabled": true,
    "useTabChar": true,
    "spaceUnits": 2,
    "tabSize": 2,
    "closeTags": {
        "whenOpening": false,
        "whenClosing": true,
        "indentTags": []
    "fonts.fontSize": "14.5px",
    "fonts.fontFamily": "'Menlo', monospace"

Version Control Hosting

The Git repository hosting service used for keeping track of revisions and collaboration.


I use: GitHub

Other Options: BitBucket, GitLab, AWS CodeCommit

GitHub is easily the most well-known place to host public and private Git repositories. Depending on what you want to do with private repositories, other options might be better or cheaper. GitHub doubles as a web development portfolio and resume and industry-specific social media.

Content Management System (CMS)

The software used to create and manage a website through an admin dashboard.


I use: WordPress

Other Options: Jekyll

Currently, I use the WordPress CMS both for professional projects and my personal website. The alternative option is using a Static Site Generator like Jekyll and countless others, which have many advantages like speed and increased security. WordPress is extremely popular and extendable, and it works for me at the moment. I also like to play around with and learn other systems, so I might update or change my personal site in the future.


JS Task Runner

Command line automation for common repetitive tasks.


I use: Gulp

Other Options: Grunt, Brunch

Task runners like Gulp are useful for watching changes to files and performing tasks like compiling, minifying, autoprefixing, linting, and more. I use Gulp to automatically watch for changes in my /src Sass directory, and output the minified, prefixed, compiled CSS, along with Sourcemaps. I don’t currently use Gulp for automatically refreshing the browser with the new content, or JavaScript, as I don’t work with very advanced JavaScript at the moment.


CSS Preprocessor

Extend the features of CSS and compile it back into CSS.

I use: Sass

Other Options: LESS, Stylus

A preprocessor is a program that takes a bit of code and compiles it into a different bit of code. In the case of CSS preprocessors, we’re compiling the Sass language into regular old CSS that the browser can interpret. I like having the ability to define variables, nest, create loops, and organize my project into multiple files, all of which and more I can do with Sass, specifically the .scss extension. I started with LESS, but as Sass grew in popularity, I switched over and now prefer it.

CSS Framework

A base stylesheet used as a starting point for designing a website.


I use: Primitive

Other Options: Bootstrap, Foundation

The first responsive designs I made were with Bootstrap, because I didn’t yet understand the underlying concepts of grids, media queries, viewports, and so on. When I realized I didn’t feel comfortable making a website without a framework, I sought to teach myself how to make a grid, navigation, and other UI elements from scratch. I started building all my websites that way, but when I realized I was re-writing a lot of the same code, I compiled it all into my own framework. Now I understand how my entire system works, only use exactly what I need, and I save a lot of time, with the added bonus of working on my documentation skills by making a page for it.

This has been my choice because I have the freedom to do so, but I also feel comfortable jumping into any framework if necessary.

Encryption (TLS/SSL)

Protocol that increases the security of data transmitted through the internet.


I use: ComodoSSL

Other Options: Let’s Encrypt

Encrypted websites are becoming the standard, and there’s no reason not to encrypt your site’s traffic with a TLS certificate. I got a $10/year certificate through ComodoSSL, which was before I learned about Let’s Encrypt, a free option. Either way, transmitted content through my website is more secure, and my site is more trustworthy.

Generate Certificate Request
openssl req -new -newkey rsa:2048 -nodes -keyout example.com.key -out example.com.csr
Extra WordPress Configuration
$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_ADMIN', true);
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]


Content Delivery Network (CDN)

Deliver cached website content to geographically dispersed servers.

I use: Cloudflare

Other Options: MaxCDN, AWS CloudFront

I pay for hosting based on bandwidth usage. Utilizing a CDN was as easy as pointing my name servers to Cloudflare’s, and my bandwidth usage immediately dropped by at least 60%. My site got a speed and performance boost, I pay less for bandwidth, and it was fast and free to implement.

Performance and Search Engine Optimization (SEO)

Improve speed, performance, and search rankings.

I regularly run my site through multiple speed and performance tests to see how well I’m doing and what I can improve. Much of what I’ve listed above contributes to my positive scores and high search rankings.

Steps to Improve Google Search Ranking

  1. Make good content.



Track and report website traffic.


A few other programs I use on a regular basis.

  • Evernote – for note taking, synced accross multiple devices (well, 2).
  • Slack – for communication between teams.
  • Adobe – I use Photoshop and Illustrator for design.
Things I don’t know about yet
  • Vagrant
  • VirtualBox
  • Docker
  • Composer
  • JavaScript frameworks (React, Angular, Vue)
  • Programming languages besides PHP
  • A lot of other stuff


There’s a lot that goes into being a web developer, and I’ve hardly even scratched the surface. I’ve tried to explain and simplify all the layers involved in making a website here, from the operating system you use to the final performance and analytics of the website. You can find tutorials for most of these concepts around the website. I hope this has given you some insight into how one individual puts all the pieces together to design, develop, and maintain a website.


Get updated when I create new content.
Unsubscribe whenever. Never any spam.


I'm Tania. I turn down every ad, affiliate, and sponsor request I get. I write free resources that help thousands of people successfully become devs. If you enjoy my content, please consider supporting what I do.

Support my work

Write a response

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

All code will be displayed literally.


  • Tony Jovanovic says:

    Thank you Tania for putting this wonderful piece together describing your web dev environment. I am also in the process of "self teaching" and it can most definitly be an information overload trying to research and learn on your own. I appreciate the no BS approach to your writing style……Tony J…..also from Chicago!

  • Mbuso Mngoma says:

    this has helped me alot bro

  • Robyn Hollis says:


    I'm helping Track-R.net look for investment in their SaaS and your site came up as an investor/possibility so I have to ask.

    Here is their https://www.crowdcube.com/companies/studio-ten-online-marketing-ltd/pitches/bgBrPZ CrowdCube investment pitch.

    If you'd like to invest, it's a scalable, profitable business that has minimal overheads and is a complete software that has customers.


  • Aldrin says:

    Hi Tania, thanks for sharing this setup of yours. I seriously find it really helpful. And kindly satisfy my curiosity, why did you switched to VSCode from Brackets? Thanks!

    Aldrin of <a href="http://netsearch.com.au">Net Search</a>

  • Sherri says:

    Hi Tania! Thanks for everything that you share with us. I am self-teaching myself to become a front end developer (and hopefully, a full stack developer). Have you made any updates to your front-end development setup? If so, do you plan on updating the site? Keep up the great work!

  • Cheryna Hamilton says:

    Yep! I appreciate the organized flow of info here! Becoming a developer is difficult when you dont know how to put all the pieces together. You expressed that very well! Thanks!

  • gabriele says:

    thank you tania 🙂

  • Fazil Ahmed says:

    Thank you Tania Rascia, this is one of the most sensible and honest tutorials i have ever seen.

  • Ale says:

    Conocí este blog hoy y no puedo dejar de leerlo, ver tus redes, no sé, todo me parece excelente. El contenido, las cosas que contás, desde dónde las contás, y cómo. Gracias por compartir todo esto.

    Además me encanta la estética que tienen tus proyectos.

    En este camino del desarrollo web también estoy, cambiando radicalmente de rubro profesional, y en este momento estoy en ese tramo donde se hace cuesta arriba, pero espero ver frutos pronto.

    Blogs como el tuyo ayudan a confiar y seguir 🙂

  • vimal says:

    Hey there,

    Hi Tania Rascia,
    My name’s Vimal and I am frontend web developer too, and I think we do pretty much the same work with the same skills and i’ve been looking for open minded and likewise people to work or collaborate with or just keep in touch with.

    I was googling for testing frameworks’ options for frontend figuring out which is the best when i dropped her in your blog post.. The article’s been nicely written. Although i didn’t get much help for my particular thing that i was looking for. I wanted to get in touch with you thinking of maybe working / collaborating with you on some ideas or keeping in touch just for broadening my network with people in our industry ( i think you get that ), or if we have mutual interests for a certain things or projects ( I have been working on a few things in our area ) and see if anything of mutual benefit comes out..
    If you would like to / or get time to.. then please drop me a mail on my e-mail address [email protected]

  • Nate Elliott says:

    awesome blog post, thank you for sharing it.

  • Johnathan Solorzano says:

    Thanks for sharing. Definitely a lot of value

  • Kevin says:

    I am just starting to learn web development, 4 weeks so far, and your article has helped me break down what I need. I am in the process of learning HTML5, CSS, and Javascript. Still learning how everything is put together to complete a website and publish on the Internet. I also just learned about CSS grid! I am wanting to change careers from being a 20 year retail manger to web developer. I was in college for Computer Information Systems and dropped out after 3 years and got married. Ready to start my dream again!

  • annettenator says:

    Good write up. Shows a solid understanding of the field for where you were at the time, less than 1.5 years into the profession. All of these tools work fine until you start needing more than they can offer, or you start really putting their advanced features to use. Would be interesting to see you revist the topic as you learn to really leverage the power of things like Vagrant and VV/VVV, Node and npm, Ruby gems, Bower, etc. What does your current stack look like?

    Putting this here for anyone who sees your post (#1 on Google – congrats!) and wonders what the next level might look like: https://char.gd/blog/2017/how-to-set-up-the-perfect-modern-dev-environment-on-windows

    • Tania says:

      Ah, I’ve written a few articles since this one about setting up Node, Vagrant, and VirtualBox. Haven’t done too much with Ruby gems and Bower except for when I’ve specifically needed the for a task. Stack has changed slightly, but I’ll wait until I do something completely different to write a follow up.

  • a. mejia says:

    Thank you so much for sharing! As someone getting back into web dev / programming after being out for a while, I’ve found your site to be super helpful in getting back up to speed ( …and… I’m still not up to speed yet… but getting there!). Also, love the ‘ no-nonsense.’ 🙂

  • Stas says:

    My favorite free IDE is Codelobster: http://www.codelobster.com

  • Zuhaili says:

    Hi. Can i get know whats FTP apps for OSX did you used?

  • Max says:

    Sadly, the fact that you are self taught tells me you lack the foundation upon which higher-level design rest on.

    • Glen says:

      Gladly, she never claimed to be a high level designer, and her blog’s comment section wasn’t intended to be a venue in which you can boost your self-esteem by poo-pooing others.

  • Anonymous says:

    truly you are a goddess of web development. many thanks for the site.

  • Paris says:

    This helped me alot . It was simple and straight to the point . Thanks for the being brilliant .

  • ddrt says:

    It does matter if you use spaces. It matters a great deal. #teamtabs

  • Manish says:

    wow! finally a BS-free non-“docker-is-god-sgift” list for simple, effective web development. Thanks!! I will def follow your writings

  • Alexandre Caruso says:

    Just finished reading your disclaimer … it seems Im gonna have a awesome reading ahead! C’ya 🙂

  • Anton says:

    Thanks, it is interesting to read what other developers use and why. About IDE and editors, I’ve never tried Brackets before I read about it in your article – quite interesting and lightweight editor!)
    By the way, did you try IDE PHPStorm by JetBrains (https://www.jetbrains.com/phpstorm/) it is not for free but it is worth using.

  • Pedro Vagner says:

    Hi Tania, I really impressed with your web development skills, for who just starting coding in middle 2015. You even has developed a CSS Framework (Primitive). So nice! Good luck with your self taught learning.

  • Viktor says:

    I like your site and this was a nice post I haven’t seen anywhere in such detail.

    I got interested in your Primitive. So I’d like to ask how is the compatibility across browsers and diffrent versions and any problems with responsibility?
    I confess that I haven’t studied it in detail and just checked the info on github you prepared and all the examples.

    Thanks for letting me know and I wish you the best for this year and all following ones too!

  • Juan says:

    Hi Tania, nice article!
    I found it very useful, because you show all the tools, resources and the complete path to get a website up.
    Thanks for sharing your knowledge

  • amin says:

    Great article! Minor point – grammar in Conclusion: I hope this have given you…

  • MARK LEE says:

    Thank you for a great article.

  • Rossi says:

    Thank you for the incredibly useful info! You have a great approach – I’ve made some changes to my workflow after researching a few of your suggestions and I’m very pleased – keep up the great work and the invaluable content!

  • thinsoldier says:

    Is everything in your portfolio wordpress based?

  • Thanks you Tania for taking the time to share these valuable tips.

  • Booligoosh says:

    Another good Chrome extension is Tampermonkey which lets you run userscripts (little snippets of JavaScript) every time you visit a specific page.

  • Bogdan says:

    Tania, great article!
    I have a question.
    When developing front-end for wordpress, what instruments do you use?
    For example, first you develop static site. Then you need to apply this design for customer and make it dynamic.
    You have to convert this to wordpress theme.
    Do you use any frameworks, f.e. Genesis, Unyson, Bings etc?
    Or you develop your own theme from scratch?

  • Joaquín says:

    Really useful post! Thanks 🙂

  • Ted Martin says:

    Love your site and reference it frequently. I’m a developer in Michigan and have only been in web development for a year and a half. Not to be a nitpick but you might want to change, “…performance tests to see how good I’m doing.” to “…performance tests to see how well I’m doing.” I’m a grammar snob but if the only thing lacking in an article is an adjective that needs to be an adverb I’d say your doing great! On a more serious note, I couldn’t recommend VVV enough (https://github.com/Varying-Vagrant-Vagrants/VVV). Coupled with VV (https://github.com/bradp/vv) and life changes :).

  • Sefhi says:

    Hey Tania thanks for your tutorials ! Wanted to ask, with a site as “big” as yours (idk the actual traffic), how much do you pay for nearly free speech hosting using CloudFlare?

    • Tania says:

      I’m getting around 60k visits per month right now, and I’d say I’m paying around $8/month.

      • jeremie says:

        Hello Tania,

        I’m following your tutorials and i think that vim for mac changed their address in enter this in the terminal and you will find the error : Apples-MacBook-Pro-2:/ apple$ git clone https//github.com/vim/vim.git
        fatal: repository ‘https//github.com/vim/vim.git’ does not exist

        if I’m right i think that this is the new address : https://github.com/macvim-dev/macvim

        Thanks a for your work i’m learning through your tutorials.


      • jeremie says:

        Hello Tania,

        I was wondering if you don’t have problems with https://www.nearlyfreespeech.net/ on paper they sounds great i was really excited to try them and have a website hosted on pay as you go base and was already planning on transferring more domains, but i’m starting to doubt about them i have 1 page at freelondonmap.com and it carries on appearing and desappearing since 2 days now. I’m patient and hope it will get fixed but i’m afraid that sometime cheap is expensive. It is the pitty though i liked there policy : simplicity, honesty, and sustainability…

      • Tania says:

        I haven’t had any problems with NFS in the past 2-3 years or so I’ve been with them.