Support NeoGAF

[gutshot]

Intro
I know there are a good amount of web designers and devs here on GAF, so I thought it was high-time we established our own community thread. The programming thread has been something of a home for us devs, but the majority of folks there are software devs. And web designers had no where to congregate on GAF, as far as I know. So this thread seems a good place to bring us all together.

Let's use this thread to share ideas, techniques, and tools. To help our fellow devs with troubleshooting and provide our fellow designers with feedback. Or just to generally talk about the trials and tribulations of being in web design and development. I will also attempt to keep a good list of tools and valuable resources in the OP here, so if you have some you'd like added, just let me know.

To kick things off, maybe we can all share a little about ourselves. What we do, who we work for, what our workflow looks like, etc.


Web Developer Resources

Languages:
HTML
CSS
PHP
JavaScript
Sass
Less
Ruby
Python
Go

Libraries and Frameworks:
jQuery
Compass
AngularJS
RequireJS
BackboneJS
Bootstrap
HTML5 Boilerplate
Node.js
Reactjs
Ruby on Rails
Django

CMSs:
Wordpress
Drupal
Joomla!
Expression Engine
Squarespace
Kirby
Siteleaf
Statamic
Cockpit
The Secretary
Craft
Anchor
Koken
Perch
MediaWiki
Web Hook

Tools:
SublimeText - the best text editor, free trial available (Windows/Mac/Linux)
Notepad++ - free text editor (Windows)
Coda 2 - text editor and FTP software built-in-one (Mac)
FileZilla - free FTP software (Windows/Mac)
CodeKit - compiler for the web (Mac)
Grunt - Javascript task runner
Gulp - nodeJS task runner/compiler
Git - version control


Learning:
Treehouse
Code Academy
Code School
Angular Course
Good web developer career advice
Free Code Camp
The Odin Project
Nanodegree for Front-End
Full Stack Nanodegree
Rails Tutorial
Eloquent Javascript
Practice programming projects for Rails (but probably can be done with any backend language and framework).
Exercism.io: practice problems for JavaScript, Ruby, Python, etc


Web Designer Resources:

Tools:
Photoshop
Illustrator
Google Fonts
Fonts.com
Font Squirrel
Font Deck
TypeKit
Font Awesome


Helpful Sites:
CSS-Tricks
Smashing Magazine
A List Apart
DZone

As I mentioned, the above list is a work-in-progress. If you have anything to share, please post it in the thread and I will add it! Thanks!

Mods: I know this thread should eventually live in OT Community, but posting it directly in there is a surefire way for no one to ever see it. Posting it in OT General for now so it can start to garner a following. Please feel free to move it once you feel it is appropriate.

 

[GeMiNii]

Question: Is there any practical use for Dreamweaver anymore?

Also, dzone.com is pretty a pretty good place to get development links in general.

 

[gutshot]

Dreamweaver can still be useful as a text editor, I suppose. I used to use it, but once I discovered SublimeText, I haven't looked back. Sublime is cleaner and faster and cheaper.

If you are using Dreamweaver as a WYSIWYG editor, however, you are doing it horribly, horribly wrong.

 

[malfcn]

I will keep an eye on this thread. Always want to learn more. And early bird versions of Macaw are out now. That project looks very cool. Maybe they will find time for a Windows version some day.

 

[The Interrobanger]

I still use Dreamweaver as my text editor. Force of habit.

 

[ComputerMKII]

I used this for some of my classes, it was useful: http://www.w3schools.com/

 

[spoonztt]

I'd like to suggest a small sub-section for beginners (like myself), possibly outlining a recommended learning order for those who may not know how to proceed beyond the initial HTML/CSS.

 

[Chris R]

I used this for some of my classes, it was useful: http://www.w3schools.com/

Nooooooooooooo

So much bad advice on w3s.

 

[VanquishUK]

Fight me software devs!

 

[railGUN]

Add Squarespace to the CMS. Also, W3schools sucks.

 

[gutshot]

I will keep an eye on this thread. Always want to learn more. And early bird versions of Macaw are out now. That project looks very cool. Maybe they will find time for a Windows version some day.

Yeah, Macaw looks interesting. I don't think it will completely replace hand coding, but if it produces decent markup it would be a nice way to do quick mock-ups or build-out real simple sites.

 

[industrian]

Question: Is there any practical use for Dreamweaver anymore?

As a text editor, yes. I'm lazy and that code auto-complete is a good timesaver.

 

[VanquishUK]

You should add some learning resources to the OP. I recommend http://teamtreehouse.com/ (PAID) and http://www.codecademy.com/ (FREE) personally.

 

[DUFFMCWALIN]

I don't use anything but VS Ultimate 2012 anymore for work. I miss my Sublime Text.

 

[CheesecakeRecipe]

Sublime Text is the greatest thing in the universe.

 

[Motwera]

I dare to say that chrome's inspect element saved me lots of time when doing web debugging, also, it is good for web design preview

 

[gutshot]

I'd like to suggest a small sub-section for beginners (like myself), possibly outlining a recommended learning order for those who may not know how to proceed beyond the initial HTML/CSS.

This is a good suggestion. If someone wants to write-up a short guide on how to get into more advanced web development, I will gladly add it to the OP. I may be able to do it myself later today, if no one else gets to it before then.

 

[double jump]

I'd like to suggest a small sub-section for beginners (like myself), possibly outlining a recommended learning order for those who may not know how to proceed beyond the initial HTML/CSS.

yes please someone do this

 

[industrian]

I dare to say that chrome's inspect element saved me lots of time when doing web debugging, also, it is good for web design preview

It's my core debugging tool. I've also used it to quickly code/demonstrate stuff to people.

 

[scurker]

I used this for some of my classes, it was useful: https://developer.mozilla.org/en-US/

I noticed you mistyped "MDN", so I fixed that for you.

In all serious, don't use w3schools. Just don't. The Mozilla developer network doesn't have stuff for just Firefox, but is a great resource for across the board browsers. Also, if you need to look up whether or not something is supported in a browser, http://caniuse.com is another excellent tool.

 

[cooljeanius]

I used this for some of my classes, it was useful: http://www.w3schools.com/

Nooooooooooooo

So much bad advice on w3s.

See http://www.w3fools.com/ for more on why it is bad

 

[Linkhero1]

I learned a lot of this on my own but still feel like I don't know enough. Great thread which will hopefully be of use to me in the near future.

See http://www.w3fools.com/ for more on why it is bad

Pretty sure he's trolling.

 

[VanquishUK]

See http://www.w3fools.com/ for more on why it is bad

Add this under useful tools: W3Schools Hider



Come to think of it, there are a couple of useful Chrome extensions that I use.

WhatFont
ColorZilla (Chrome)
ColorZilla (Firefox)

 

[gutshot]

You should add some learning resources to the OP. I recommend http://teamtreehouse.com/ (PAID) and http://www.codecademy.com/ (FREE) personally.

Good call. I also recommend Code School which is paid, but offers some courses for free.

 

[Ghost]

I'd add RequireJS http://requirejs.org/ and Backbone.js http://backbonejs.org/ to libraries and frameworks.

RequireJS isn't perfect but it's a great way of handling dependencies for Javascript which really changes the way you think about what Javascript is good for. The built in optimiser makes turning your collection of javascript folders into one minified line of code so so easy, it's perfect for a small project that might have to go to production one day.

I've been using Backbone as my application framework for about 12 months, I looked at Angular at that time but Backbone just made more sense to me, it's so simple and lightweight I've been able to adjust it and add to it to meet any need I've had.

 

[AbortedWalrusFetus]

So this is just a front end web development thread? That's cool though, because I need more resources for this. I am a back end champ but lost when it comes to front end.

 

[GeMiNii]

I used this for some of my classes, it was useful: http://www.w3schools.com/

Christ on a cracker, I hate w3schools. I actually made a scriptlet to exclude them from search results because I ended up more confused/frustrated after visiting the site than I was before hand.

I'd second codeacademy.com for getting started, it's a little crunchy but it'll get you exposed enough that you can figure out if web development is for you or not.

The most important lesson when getting started is not to be so damn ambitious. It's great that you want to make the greatest website of all time ever, but that's a massively hard target with a lot of room for frustration and error. Start small and conservative, practice the shit out of each block and build up. It'll feel like you are treading water at first, but worst case scenario you retain those basic skills with a lot less frustration than trying to learn 1000 things at once.

 

[onadesertedisland]

I like the autocomplete of DW. Just habit.

Catches my goofy js too.

 

[gutshot]

I'd add RequireJS http://requirejs.org/ and Backbone.js http://backbonejs.org/ to libraries and frameworks.

RequireJS isn't perfect but it's a great way of handling dependencies for Javascript which really changes the way you think about what Javascript is good for. The built in optimiser makes turning your collection of javascript folders into one minified line of code so so easy, it's perfect for a small project that might have to go to production one day.

I've been using Backbone as my application framework for about 12 months, I looked at Angular at that time but Backbone just made more sense to me, it's so simple and lightweight I've been able to adjust it and add to it to meet any need I've had.

Added. About RequireJS, does it essentially replace something like Uglify? It sounds intriguing...

So this is just a front end web development thread? That's cool though, because I need more resources for this. I am a back end champ but lost when it comes to front end.

I'm primarily front end, but I would love if the thread included back end discussion as well. Front end devs will often have to tinker with back end stuff and vice versa, so it would be good to have a place where we can share our knowledge.

In that vein, feel free to suggest resources that I can add to the OP. I may actually break out the lists into front end and back end, if we get enough stuff under each.

 

[pinsomniac]

Question: Is there any practical use for Dreamweaver anymore?

Not really. Sublime's the way to go if you want a text editor. Even Adobe reps seem to be down on Dreamweaver these days, which might explain the Edge suite.

Things like Macaw might be the future for WYSIWYG editors. No official ETA on the public release, but they've been saying "soon." Preview video: http://macaw.co/peek/. Looking forward to it.

I've been meaning to try Emmet + Emmet LiveStyle out. Any thoughts on them?

 

[Kinitari]

A thread where I might actually know some shit, baller

(Front End JavaScript dev, Angular specifically, ask me shit).

 

[rkn]

Need more love for Grunt, been getting into tooling lately and it's really good for setting up all the damn boilerplate so you can just get on with the actual work you need to do.

 

[Zoe]

It's my core debugging tool. I've also used it to quickly code/demonstrate stuff to people.

This + seeing your changes immediately.

So this is just a front end web development thread? That's cool though, because I need more resources for this. I am a back end champ but lost when it comes to front end.

Same here. I make all of my stuff in ASP.NET MVC 3 or 4, but my front end suuuucks.

 

[Aesius]

How long does it take to become a competent Web developer?

I work for a digital ad agency, but I'm a copywriter. I like it, but I've been thinking about expanding my skillset and learning how to code.

Also, is it possible to get into the design aspect without having much artistic ability?

 

[Testicular Sound Express]

How long does it take to become a competent Web developer?

I work for a digital ad agency, but I'm a copywriter. I like it, but I've been thinking about expanding my skillset and learning how to code.

Also, is it possible to get into the design aspect without having much artistic ability?

html/css isn't too bad. you can pick up the basic pretty quickly, but it takes time (like anything else) to get really good. I went to school for it, but as Einstein says I never let education get in the way of my learning. I used to find sites that I liked and I would save them to my computer via the browser to get all the images. Then I would do my best to recreate the page myself. I learned more from this then I did from my classes.

Design isn't for everyone, but everyone things theyre a designer lol.

 

[Flying Toaster]

How long does it take to become a competent Web developer?

I work for a digital ad agency, but I'm a copywriter. I like it, but I've been thinking about expanding my skillset and learning how to code.

Also, is it possible to get into the design aspect without having much artistic ability?

First how long did it take to learn math? Or speak? Programming is just picking up another language and using skills such as logic to make things work.

I believe having an understanding of design is extremely important for web development. From an artistic point it has to look good but also be equal in ease of use and how the end user actually experiences the site.

 

[Walshicus]

Question: Is there any practical use for Dreamweaver

I've never liked Dreamweaver. Notepad ++ and the using FTP through windows explorer for me...

 

[gutshot]

I should probably follow my own suggestion and share my background and experience. I am a front end web developer, working for Duke University. As I mentioned in the OP, SublimeText 2 is my text editor of choice. I have experience building out themes for Wordpress and Drupal; I much prefer the former to the latter. I've recently learned the wonders of Grunt (grunt watch ftw). Oh, and Git is the shit.

A thread where I might actually know some shit, baller

(Front End JavaScript dev, Angular specifically, ask me shit).

I need to improve my JS skills, and want to dabble with AngularJS in particular. Any suggestions on a good intro to Angular?

 

[Zoe]

Maybe the OP should have a breakdown between web designer and web developer?

 

[Xcellere]

Easily my favorite site for learning front-end related stuff: http://www.css-tricks.com

 

[gutshot]

Maybe the OP should have a breakdown between web designer and web developer?

You mean like what the job description/responsibilities of each are?

 

[zephervack]

As per the thread title, does someone know of a GOOD tutorial or a resource to learn how to do a proper "responsive" layout??

I tried doing one manually using and modifying the code provided by this http://www.responsivewebcss.com/ and it was a big mistake, soon enough it was a huge mess and stuff was overlapping, etc.

I still dont understand why I shouldnt just use tables with % based widths, they seem to behave better, but I am open to other alternatives, im in no way "set in my ways" but I also dont want to add unneeded complexity

 

[VanquishUK]

I think Twitter Bootstrap and HTML5 Boilerplate are worth adding to the OP somewhere.

 

[Xcellere]

As per the thread title, does someone know of a GOOD tutorial or a resource to learn how to do a proper "responsive" layout??

I tried doing one manually using and modifying the code provided by this http://www.responsivewebcss.com/ and it was a big mistake, soon enough it was a huge mess and stuff was overlapping, etc.

I still dont understand why I shouldnt just use tables with % based widths, they seem to behave better, but I am open to other alternatives, im in no way "set in my ways" but I also dont want to add unneeded complexity

Find a good responsive starter theme (I use Bones on WordPress) and fool around with it and you'll start to see how everything ties in together.

Also, an invaluable tool when doing responsive design: http://lab.maltewassermann.com/viewport-resizer/

It allows you to change your viewport size on the fly so you can see what your site looks like on different screen sizes.

 

[Ghost]

Added. About RequireJS, does it essentially replace something like Uglify? It sounds intriguing...

Yeah that's part of the process, It uses the dependencies you've written to join files together in the right order then uglifies them for you.

 

[pinsomniac]

Also, is it possible to get into the design aspect without having much artistic ability?

Though it seems natural to do so, try not to conflate the ideas of art and design (in the context of the web). A page or app can be artistic, but because of the interactivity of the medium, far more focus is placed on designing a positive experience for the user. Given limited resources, most firms will settle for a polished interface and flow.

Is it possible to be a designer, given your background? It depends on how much work you want to put in and what problems you hope to design solutions for — a digital ad agency like AKQA creates visually-engaging awareness apps for clients, which may require more of an artistic streak. If you're interested in venturing off to other areas in the field, though, you may have more options.

 

[Testicular Sound Express]

As per the thread title, does someone know of a GOOD tutorial or a resource to learn how to do a proper "responsive" layout??

I tried doing one manually using and modifying the code provided by this http://www.responsivewebcss.com/ and it was a big mistake, soon enough it was a huge mess and stuff was overlapping, etc.

I still dont understand why I shouldnt just use tables with % based widths, they seem to behave better, but I am open to other alternatives, im in no way "set in my ways" but I also dont want to add unneeded complexity

The only time I use tables are when I actually need to style tabular data. The structure gets needlessly complicated extremely fast when you are trying to use it for site structure. rows, columns, etc also have behave differently then regular block level elements so it requires extra markup just to get them to display exactly how you want.

Learn the different options for the display property, it can be very powerful. There is a property called 'table' that you can use on parent elements that allows you to style its children as if they were table cells without having to use the table element.

The best way to is to use block elements like divs, sections, etc along with css to structure your pages.

I tend to stay away from floating, unless necessary and use things like inline block and flexbox.

 

[DUFFMCWALIN]

I think Twitter Bootstrap and HTML5 Boilerplate are worth adding to the OP somewhere.

Bootstrap is pretty great.

Also, an invaluable tool when doing responsive design: http://lab.maltewassermann.com/viewport-resizer/

This is such a nice tool. Thanks for the link.

 

[-COOLIO-]

Just got a new front end job. Perfect timing!

 

[Josh7289]

Good thread. Actually at my company we're moving our site to a new responsive design this year, so the thread title is relevant to me.