This repository will be an on-going resource for Mixd's team in the various presentations, lectures and workshops they conduct.
- Working Locally: MAMP (FREE / $39) (Mac + Win)
- Bug Fixing: CodePen (FREE)
- Text Editor: Sublime Text (FREE / $70) (Mac + Win)
- FTP: FileZilla (FREE) (Mac + Win)
- Hosting & Git: GitHub Student Pack (FREE)
- Sass: CodeKit ($29) (Mac)
- Learning: Codecademy (FREE)
- PageSpeed: ImageOptim (FREE)
Total: $138 (£86)
Making changes locally and then pushing with FTP to a live location to see it working is labourious. You should be working locally.
Can be used on either Mac or Windows. Once installed, it will give you a local Apache/MySQL server to work from, so you can have WordPress running on your local machine.
We would recommend getting the Pro version ($39), as it allows you to resolve your own URLs to folders on your computer. For example, I could point http://mywebsite.dev/ to a folder within Applications/MAMP/htdocs.
Where possible, we would suggest not using DreamWeaver. Whilst it is personal preference, there are many other more 'polished' text editors with useful functionality.
- Sublime Text (3) ($70 ^) (Mac + Win)
- Coda ($99 *) (Mac)
- Atom (FREE)
* Has a free trial
^ Has a free version
We'd suggest getting one of these editors because:
No-one (should) be using it, it doesn't work...ditch it!
The is really useful when trying to read code. Whilst DreamWeaver does it for some languages, the above text editors just do it better. Modern-day text editors will come with a good bunch of themes, but some will also allow for themes made by 3rd parties.
Modern text editors will allow you to drag an entire project folder into it, and it'll show the folder / file structure and hierarchy. No need to browse through Finder and open each file in turn!
Modern text editors offer lots of customisation, and lots of developers have pounced on the opportunity to make their favourite editor better.
As you're learning, you and your classmates are likely helping each other. But you've probably found it pretty labourious; send them the files, set it up, look through the code.
CodePen (FREE): A browser-based snippet sharer, allowing you to add HTML, CSS (and Sass), and JavaScript. You can create a public snippet and just share the link with whoever you're getting help from.
We personally don't use FTP anymore, but here's a list of stand-alone clients for if you need it:
We'd definitely recommend that you have the experience of working with hosting outside of your allocated University space. This means buying your own hosting!
DigitalOcean: As a student, you're eligible for getting $100 credit at DigitalOcean. Signing up to GitHub using your academic e-mail (@leeds.ac.uk) and registering for your Student Pack. Depending on what package you choose, that'll get you between 10-20 months of free hosting.
Having a working understanding of Version Control by the time you graduate is beneficial. It demonstrates that you understand the importance of tracking changes to project over time / people change code.
GitHub: As a student, you're eligible for a micro account for as long as you're a student. Signing up to GitHub using your academic e-mail (@leeds.ac.uk) and registering for your Student Pack. A micro account gives you 5 private repositories, which would usually cost $7 (~£4) a month.
To bring down the learning curve, we'd recommend using an app to compile your Sass for you. Typically, they're better for beginners because compilers are more visual, and give prompts when there's an error in your code.
CodeKit ($29) (Mac): Really simple to use, just install and get started using Sass.
It's important to test your websites on different browsers and devices to ensure users are getting the desired experience.
If you're using a Mac, you won't have Internet Explorer...even though it's the biggest culprit for messing up!
Having access to another machine that has IE is preferable. The majority of machines in the New Media lab have IE on them. If you do, press F12 on the keyboard and the developer tool bar will appear. You can emulate how older versions of IE will render a website (IE7, IE8, IE9) with the drop-down within the toolbar.
If not, you can use something like:
BrowserStack ($39 p/mo...30 day free trial): Give it a web address and choose the browser you'd like to see the website in. These aren't emulations, it's a window into a real-life machine running the browser you've requested.
If you're doing Responsive Web Design (you should!), resizing your browser isn't a guarantee of what smartphone/tablet users will see. You need to test on as many real devices as you can get your hands on.
GhostLab ($49...7 day trial) (Mac): So long as the device has access to the same wifi connection as your laptop, you can use GhostLab to preview a website you've got locally. It will even fill in forms and scroll on all devices.
As well as testing for styling quirks in different browsers and devices, you should also be testing for speed. You can have a beautiful website, but there's not much point if it takes 30 seconds to load on anything that's not fibre broadband.
What you're looking for are files that can be compressed, code (CSS/JS) that can be minified and any way you can reduce the number of HTTP requests made.
ImageOptim (FREE) (Mac): Images saved out from Photoshop tend to be much larger in file-size than they need to be. They hold all sorts of meta-data that's simply not needed. If you run your images through ImageOptim, it will strip out meta-data and reduce the file-size of an image but without losing its quality/clarity. You can, on average, shave 9% off any image...which soon adds up!
- Treehouse ($9 p/mo *)
- Codecademy (FREE)
- Code School ($9 p/mo *)
* Discounted price, you'll need to verify you're a student with them with a valid ID.
Even if you think you know a topic, it's always worth running through these online tutorials to plug up any gaps in knowledge. We would recommend:
- HTML / CSS
- JavaScript / jQuery
- PHP
- Sass