Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this live Q&A session, Nick answers student questions about responsive images, front-end frameworks, getting a job in the industry, and much more.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[Web Design Q&A with Nick Pettit]
0:00
[Nick Pettit @nickrp] Hey everybody, I'm Nick Pettit.
0:04
My Twitter handle is @nickrp,
0:06
and this is a live Q&A session about web design,
0:09
so you can go ahead and ask me any question
0:13
about web design, web development,
0:16
careers in the web industry, or whatever else is on your mind.
0:18
We already have our first question here.
0:23
Rodrigo asks is there any CSS framework
0:25
that uses ems in media queries?
0:29
I'm sure the answer to this is yes.
0:32
That's probably the simple answer.
0:34
But we can go ahead and look and see what a popular framework does.
0:37
If we head over to Bootstrap here,
0:43
we can go ahead and download Bootstrap,
0:47
unzip it, and dig into the CSS.
0:51
We'll go ahead and open that up in Sublime Text.
0:56
It looks like it already was open there.
1:01
I'll go ahead and search for em,
1:05
and it looks like it's being used in a couple of places.
1:11
It's being used for some positioning, some padding.
1:16
It looks like there was an h1 there that already had it
1:19
being used for some font size adjustment.
1:23
But I'm assuming that the question that Rodrigo was asking
1:30
is related to resizing text in media queries.
1:33
I'm looking here. I don't see it used in that way.
1:41
And it's also not actually used to describe the minimum and maximum widths
1:44
for the media queries either.
1:50
That is typically described in pixels, because that's the way that you want to try to define your break points
1:52
in media queries is by using pixels.
1:59
If you were to use ems, you might get some pretty strange results.
2:02
I'm not actually sure what would happen.
2:07
I guess it would adjust as you're resizing the browser,
2:09
but not in the same ways that you would expect with pixels.
2:13
The next question is what is the advantage in learning Python
2:18
if you already know PHP?
2:22
Well, there's a ton of advantages to diversifying the languages that you know.
2:25
Python and PHP are both back-end languages,
2:32
at least typically,
2:36
and that allows you to interact with the database.
2:38
You can do all sorts of back-end business logic and basically create front-end code
2:42
that's then delivered to the client side.
2:49
You generate your HTML, CSS, JavaScript,
2:51
and you can go ahead and deliver that to the client in general.
2:55
That's back-end/front-end programming in a nutshell.
2:59
PHP is really great if you're just getting started
3:06
and you have no back-end programming experience whatsoever.
3:10
PHP is really easy to get into because the environment is typically a little bit easier to set up
3:14
than for something like Ruby on Rails, for example.
3:20
I'm actually less familiar with Python,
3:23
but Python and its framework, Django,
3:26
is a little bit more I guess comparable to Ruby on Rails
3:31
in that it's a more robust web app framework,
3:36
and in PHP you do have those.
3:40
You have those with things like CakePHP and a couple of others,
3:43
but the really, really popular ones
3:48
for building web apps are Django and Rails.
3:52
If you've done a little bit of PHP and you're ready to move into something more advanced,
3:56
Django might be a really good option.
4:01
But knowing as many languages as possible
4:04
is always going to be your best bet, because once you learn one language,
4:08
it's really easy to pick up other languages.
4:12
How's that for a non answer?
4:17
The next question is David asks do you use browser feature detection
4:20
when creating websites?
4:26
It depends.
4:29
I typically do not.
4:31
I try to build my sites so that they can be progressively enhanced
4:34
or gracefully degrade, whichever term you prefer.
4:41
They're similar terms.
4:44
It basically means that you have some sort of fallback plan
4:46
for browsers that don't support particular features,
4:52
and if you want to use feature detection you can.
4:55
It's a perfectly legitimate way to go.
5:00
In fact, in CSS there's a new rule that's being introduced pretty soon.
5:03
I believe it's @supports.
5:10
I'm going to google that real quick
5:12
to see if that is on the way,
5:17
because I know David Walsh was blogging about that.
5:22
Hmm, this is interesting.
5:27
It is on the Mozilla Developer Network.
5:29
I'm going to go ahead and see if supports—
5:31
actually, I'm going to go to caniuse.com
5:36
and see where support is at.
5:41
Yeah, so CSS Feature Queries.
5:48
It doesn't look like it's supported in Internet Explorer
5:51
even in version 11.
5:54
That's not terribly surprising.
5:56
But it looks like Firefox and Chrome support it,
5:58
so that's actually interesting.
6:00
I have not used supports a whole lot.
6:04
I didn't know that both Firefox and Chrome supported it at this point.
6:07
It looks like Safari is still lagging behind, though,
6:11
so that might make you not want to use it at this point,
6:14
but that's another way of doing feature detection for CSS.
6:19
You could also do feature detection in JavaScript,
6:25
and that's testing whether or not something is actually available for you to use in the browser.
6:29
The next question is Carlos asks what is the best way to create and use responsive
6:37
and retina-ready images?
6:44
That's a really great question, because the answer is kind of in flux,
6:48
and I guess in short, the answer would be it depends.
6:53
It depends on what kind of site you're trying to build,
6:57
how many images maybe you really want to load up.
7:00
There's a simple answer and a complex answer.
7:05
The complex answer is to use basically a tool
7:10
that will go ahead and swap out your image sources.
7:14
I'll take a look at those in just a second.
7:17
The simpler answer is to actually create just 1 retina-sized image
7:20
and not bother switching over to a smaller image
7:27
if the screen isn't a retina display
7:30
or I guess a high resolution display, if you will.
7:33
Retina-ready images actually tend to compress really well.
7:38
You can get away with a lot more JPEG compression
7:43
on larger images than you can on smaller images.
7:47
For example, if you had a photograph
7:51
at 2x resolution, you could probably get away with setting the compression
7:55
in Photoshop in Save for Web to 20% or 30%,
8:02
which sounds really low, but once you set that
8:06
and it gets resized for retina displays
8:10
and it gets rescaled in the browser, even if the device isn't a high res display
8:14
it will still look really good.
8:20
All of those compression artifacts will shrink away,
8:23
and in some cases the larger image, when it's heavily compressed,
8:26
actually ends up with a smaller file size
8:31
than a smaller image with less compression.
8:34
Hopefully that made sense, and in most cases,
8:39
you can really get away with having just the retina sized image or just the 2x image
8:44
and putting a lot of compression on it.
8:49
That's the simple answer.
8:53
The more complex answer is to use some sort of framework,
8:55
I guess if you will, to swap out your image sources.
9:03
There's a couple.
9:09
Is it adaptive images that I'm thinking of?
9:11
Yeah, so this will actually go ahead and swap them out
9:14
using a PHP file, so adaptive images is one option.
9:19
Let's see, responsive images.
9:29
I'm trying to think what this other project is called.
9:36
I can't think of the name of it.
9:41
There's another one.
9:43
There's Zurb Interchange
9:45
from Zurb Foundation.
9:48
Let's type in "interchange" here.
9:51
This was actually for Foundation 4.
10:00
I believe Foundation 5 just came out.
10:03
I haven't taken a look at it yet, but I would assume Interchange is still a part of that,
10:05
and Interchange, again, is just another option
10:10
for swapping out your image sources,
10:14
and this is nice because not only can you swap them out
10:17
for resolution reasons or I guess for DPI reasons,
10:19
so for example, you could swap image sources from a retina image
10:25
to a non-retina image, but you can also swap image sources
10:29
if you want maybe slightly different cropping
10:34
on a smaller display.
10:37
I'm trying to think what that other project was.
10:41
Let me go ahead and Google this really quick.
10:46
I blogged about this recently,
10:52
and I might be able to find it here.
10:57
Let's see, I think it's svg first is the title of the blog post.
11:00
I can't quite find it. Ah, there it is.
11:16
It was called "Scalable Web Design,"
11:19
and I know the link is in here somewhere.
11:21
This is actually a blog post where I talk about how it's good to use SVGs first
11:24
if at all possible.
11:31
A-ha, okay, there it is.
11:33
I googled responsive images, but I couldn't find it.
11:36
Responsiveimages.org is the responsive images community group,
11:41
and this is yet another way to go ahead and swap out your image sources.
11:45
They're kind of pushing for the picture element,
11:50
which would make swapping image sources pretty easy,
11:53
but here they have a really great example
11:56
of what you can do when you swap out image sources on different devices.
11:58
On a large display you might want to show the entire picture,
12:03
but if there was a focal point in the image,
12:06
and in this case it's this dog here,
12:10
they want to go ahead and zoom in
12:13
to the most important part of the image,
12:16
because if you have this very large image
12:18
and it was shrunken down to this portrait view
12:20
on this phone, it would be a little bit difficult
12:24
to really see all the detail there that you'd want to see.
12:28
Anyway, those are a couple of options.
12:33
I'm sure that's probably more complex of an answer
12:35
than you were hoping for, but that's the truth.
12:39
There's no simple answer to creating retina-ready images.
12:42
What's your opinion on SVGs?
12:49
I'm having problems with cross-browser compatibility.
12:51
Well, it depends on what browsers you're trying to support,
12:55
but SVGs are pretty well supported at this point.
13:00
I have Can I use... here up at caniuse.com.
13:03
And SVGs are currently supported with basic support
13:08
all the way back to Internet Explorer 9.
13:16
That's 2 versions back now,
13:19
so you should be fairly safe to go ahead and start using SVGs
13:22
as long as you provide some sort of image fallback.
13:27
They're also supported in Firefox,
13:31
Chrome, and Safari
13:34
and pretty well supported across all mobile browsers.
13:36
You can go ahead and use SVGs in the image element,
13:42
so that's actually using them as the source for your image.
13:45
You can also use SVGs in CSS backgrounds,
13:50
and that for some time was a little bit less supported,
13:54
but it looks like support is pretty good at this point.
13:59
You can also do SVGs inline,
14:03
and something that's a little bit newer are SVG filters,
14:07
so that's described as using Photoshop-like effects on SVG objects.
14:11
You can go ahead and do things like blurring or color manipulation,
14:17
all sorts of other cool effects.
14:20
That is still a bit less supported,
14:23
and it's also pretty computationally intensive,
14:27
so it's something that you don't want to use in abundance.
14:30
But it looks like support is coming pretty soon here.
14:32
That's good.
14:38
But if you do need to support Internet Explorer 8 and back,
14:41
you will need some sort of fallback,
14:45
so again, in this same article, "Scalable Web Design,"
14:47
I talk about using vectors first,
14:52
and you can go ahead and create a bitmap-based fallback,
14:57
and there's a really great tool that does that.
15:05
It's called Grumpicon or Grump icon.
15:07
I'm not really sure how you pronounce it.
15:12
You can go ahead and drag and drop an SVG right here,
15:15
and it will create a bitmap-based fallback for you.
15:19
That's a really good solution if you need to support browsers
15:28
that don't necessarily support SVGs as well as you'd like.
15:30
Hopefully that answers your question.
15:36
The next question says I'm just getting started at Treehouse on building websites.
15:39
Awesome.
15:44
But I'm still having trouble grasping the basics.
15:46
I was recommended starting with Bootstrap.
15:48
Any other suggestions?
15:52
It depends what you're trying to accomplish.
15:55
If you're still really, really new to web design
15:59
I'd recommend going on to Treehouse and learning about HTML and CSS.
16:03
You probably started with the project How to Build a Simple Website
16:09
where we actually build this website called Smells Like Bakin'.
16:13
You can see a sample of it at smellslikebakin.com.
16:18
And it's a simple website for a bakery.
16:21
We do use a simple grid system,
16:24
but we don't use a full-blown framework
16:27
in this particular project.
16:30
If you do feel like you have some of the basics of HTML and CSS down
16:33
you may want to go on to using a more robust framework.
16:38
The one you mentioned is Bootstrap,
16:42
which I have up here, and that's what's called a front-end framework.
16:45
It's basically going to be a collection
16:52
of CSS and JavaScript, and you can use Bootstrap
16:54
to build more complex grids rather than using the simple grid system
17:02
that we introduced in that project.
17:07
Bootstrap is very robust, and it's used by lots of websites.
17:09
It's really, really great,
17:14
and it does make it very easy to get started building grids.
17:16
There are other options for front-end frameworks, though.
17:21
This is another one,
17:25
and it's called Zurb Foundation.
17:27
Let me pull it up here.
17:30
Zurb is the company that puts it together,
17:32
and as I mentioned previously,
17:35
it's now in version 5,
17:37
and you'll find a lot of the features in Zurb that you would find in Bootstrap.
17:39
They're very, very competitive with one another,
17:45
so one is not necessarily better than the other.
17:49
It really comes down to personal preference, so if you're still new to web design
17:53
and you're just starting out and you're ready to start using a framework like this
17:58
to try and accelerate the pace at which you can build websites,
18:02
I would try using Zurb and try using Bootstrap
18:05
in 2 separate projects and see which one you like better,
18:11
because you might find that you have a preference for one over the other,
18:15
and that's perfectly fine.
18:18
That's why there's more than one front-end framework,
18:20
and those are actually just 2.
18:23
They are 2 major front-end frameworks
18:25
that are very popular and very feature-complete.
18:28
But there's lots and lots of other front-end frameworks
18:32
if you feel like these are a little bit too robust for you.
18:35
You can type in front-end framework into Google
18:37
and start searching around a little bit,
18:41
maybe read some blog posts, and you'll find lots of others that you can go ahead and test out.
18:43
The next question is from Rodrigo,
18:50
and he says is an Internet Explorer 8 fallback still needed?
18:55
Well, that depends on the audience for your site.
19:00
If you are looking in your Google Analytics for the site
19:04
and you're noticing you're getting a lot of Internet Explorer 8 traffic,
19:10
then yeah, you probably still need to support Internet Explorer 8
19:13
in some degree or another.
19:19
If you look there and you see that your site really isn't getting a lot of traffic
19:22
from IE 8, then you're probably okay.
19:27
If it's down to 1% or 2%,
19:31
that's probably the point where you can start cutting off support
19:34
or at least not offering support for some of the more advanced features
19:37
that require a newer browser.
19:43
Let's go ahead and look up browser market share,
19:47
because you usually get a pretty good idea
19:54
of some usage statistics here.
19:58
Let's see, I'm actually looking for a particular version of IE.
20:02
I'm not sure if this table offers that.
20:11
This Wikipedia article actually uses a variety of sources
20:17
for their statistics on browser market share,
20:20
but this isn't what I'm looking for.
20:25
Let's see, let's go ahead and go back
20:28
and see if we can find net applications,
20:33
because they usually have a pretty good—
20:38
is this it, NetMarketShare?
20:45
I'm not sure.
20:48
We're going on an adventure here together.
20:50
Anyway, I would just look at the usage stats for IE8.
20:53
You can usually find it pretty easily by googling,
20:59
a little bit more easily than that.
21:02
But also make a decision based on your audience.
21:04
That's really the most important thing because if nobody is visiting your site that's using IE8,
21:08
then in your case it doesn't really matter.
21:12
Something to think about.
21:15
The next question says do you have any good recommendations
21:17
or resources for blog post templates?
21:22
Not really.
21:29
I'm actually not too much of a WordPress guru.
21:31
I've used WordPress quite a lot in the past.
21:35
But I'm definitely not an expert.
21:38
WordPress goes pretty deep.
21:42
But for blog post templates, when I think of blog post templates
21:44
I think of WordPress themes.
21:48
If you're using WordPress, that would definitely be the place to look.
21:53
You would want to type into Google WordPress themes,
21:57
and you'll find tons and tons of themes that are both free
22:03
and paid ones as well,
22:08
and it's definitely a case where you're going to get what you pay for for the most part.
22:11
There's plenty of really great free themes,
22:17
but some of the paid ones are pretty nice,
22:19
and there's a reason that they're paid.
22:22
It's because the people that made them put a lot of work into them.
22:24
I don't have any great recommendations or resources in that regard,
22:29
but our WordPress teacher Zach at Treehouse definitely would,
22:33
so if you're a Treehouse member you might want to hit up Zach in the forum and ask him
22:38
if he has any good recommendations.
22:43
The next question says any advice for back-end developers
22:46
who are interested in web design?
22:51
Oh, yes.
22:53
I have worked with lots of developers in my time.
22:55
In fact, I've done lots of development myself.
22:58
I self-identify as a web designer,
23:00
but that doesn't mean I don't do any development at all.
23:03
In fact, I do quite a lot.
23:08
I have plenty of advice for developers that are looking to break into web design.
23:10
The #1 thing that I see from developers
23:16
in terms of designing websites is that they tend to ignore
23:19
the use of space.
23:25
You can always tell when a layout is designed by a developer
23:28
because there will be text that's running right up against the edge of the site
23:32
or another element.
23:37
There won't really be enough space between all the elements on the page,
23:39
because if you're newer to design, it can be a little bit strange
23:44
to actually include a lot of space, because it feels like you're literally adding nothing
23:51
to the page, but space is important,
23:57
because when you have negative space between elements,
24:00
it makes things a lot easier to read and navigate.
24:04
I actually wrote a blog post about this as well,
24:08
and I'm going to go ahead and search here.
24:13
I think it's called 5 mistakes web developers make
24:17
or something like that.
24:26
Let's see.
24:31
Or it's 5 things every developer should know.
24:34
Five design tips every developer should know.
24:42
I just went over the first one, use negative space.
24:47
So just make sure there's enough space between your elements,
24:51
and there's a bunch of more detailed tips about that there.
24:56
You also need to pay attention to contrast,
25:01
and you want to create contrast through value or lightness and darkness.
25:05
You don't want to create contrast through color too much.
25:11
You actually really want to rely on the lightness and darkness of the color
25:15
before you rely on color itself.
25:19
A really great way to test that is to put your page
25:23
in black and white and look at it in gray scale
25:27
and see if you notice any areas that are too light
25:32
or too dark or aren't really contrasting with one another enough,
25:36
because by removing all color,
25:39
you'll see areas that are not contrasting through value
25:42
but might be contrasting through color and are just hidden as a result.
25:46
There's a couple more here, add variety with texture,
25:53
although flat design is all the rage right now,
25:56
so maybe that's not such a great tip anymore.
25:59
I can't really tell these days.
26:02
You want to try to communicate using shape,
26:04
so websites are really great for creating rectangles,
26:07
but it can be difficult to create non-rectangular shapes.
26:12
Fortunately, it is actually a little easier these days
26:16
with CSS3 because you can create really nice shapes
26:22
using things like border radius or pseudo elements
26:28
and a couple of other things, so this is a list of shapes
26:33
on CSS Tricks, and it's linked here in this article,
26:37
and all of these shapes are created with a single HTML element.
26:40
It's pretty incredible some of the shapes that you can make,
26:45
and you can do a lot to draw attention to an element
26:49
just by changing its shape slightly.
26:52
And the last one is to make sure that you have really good balance on the page,
26:55
so you don't want elements to be too heavy on one side and too light on another or vice versa.
27:00
And a good way to check that is to flip your page upside down.
27:07
You could take a screenshot of it
27:12
and flip it upside down in an image editor,
27:15
or you could actually go ahead and use CSS3
27:17
and rotate the entire body of the page.
27:21
You could do that in the developer tools, for example,
27:23
in Google Chrome or Firefox or a lot of other browsers.
27:25
You could go ahead and flip your page upside down,
27:29
and that way you'll be able to look at the composition of the page
27:31
and judge without looking at the text
27:35
or other elements that seem familiar,
27:40
does the page feel heavier on one side or the other?
27:42
That's a really good way to check balance.
27:45
Hopefully that answers your question.
27:48
The next question says how do you handle image sizing
27:52
when dealing with 2x images in your CSS?
27:57
There's a couple of different ways.
28:01
Generally you want to have your images at 2x the resolution
28:04
that you would need them to be at.
28:10
If it is a background image,
28:12
you need to set the background size to 50%.
28:15
I think that's correct. My math might be slightly off on that.
28:19
Or it's the other way. I'm not sure.
28:22
But in general, I think you need to set them to 50%
28:26
in order to size them down.
28:31
You also can set an explicit width on images
28:33
or on elements that are the container for images.
28:37
If you know that the container is going to be a certain size,
28:42
you just need to set the image to be 2x that size
28:45
when you're actually creating it so that when you drop it in
28:49
it's resized by the browser.
28:52
But that is the general rule is that you want to create 2x images.
28:54
You need them to be at 2x the resolution
28:59
and then resized in the browser.
29:02
The next question is from Kevin.
29:07
He asks for a large website project,
29:09
would you recommend starting with Bootstrap,
29:12
Foundation, or neither?
29:15
Well, we've already answered this previously.
29:18
You should use whatever front-end framework you feel most comfortable with,
29:21
and you should try out a couple different ones to see which matches your personal preferences.
29:27
However, the second part of the question, or neither,
29:32
I would definitely use a front-end framework every time.
29:35
I wouldn't go into a huge web project
29:39
without some sort of framework there, because you're going to have such an easier time
29:42
developing new features rapidly if you have a framework already in place
29:49
unless it's some sort of legacy project that develops CSS over time
29:54
and really just kind of works, and you don't want to mess with it.
29:59
If you're starting a new project, you should really try to seek out
30:03
a front-end framework that you think is going to work great
30:07
for that particular project and for your own personal preferences
30:10
or the preferences of your team.
30:14
In terms of Bootstrap and Foundation or any other, though,
30:18
you should try it out and see which one you like.
30:22
The next question is from Andy.
30:26
He asks what's the best approach for creating an app
30:28
that allows others to build their own custom mobile apps?
30:31
For example, a business that wants to be able to brand and customize an app
30:36
for each of their clients.
30:40
That's getting a little bit more specific
30:45
than I think I'm able to answer here.
30:49
I'd have to see the project and see the code and stuff.
30:54
But in general, I think you want to focus on the areas
30:58
that are going to be different for each client
31:04
and then try to standardize the parts that are going to be the same.
31:07
If you know that, for example, the logo is going to need to change for each client,
31:11
obviously that's something you're going to want to include
31:17
as maybe an image upload, so if you're building out, say, the customization for the app,
31:20
you really want to have it all in one nice, neat form
31:27
that shows what parts are going to be different.
31:32
They can upload their logo.
31:36
They can upload their tagline.
31:38
They can upload their bio, all that kind of stuff.
31:40
For building actual functionality into applications,
31:43
that differs from one app to another.
31:46
That's a pretty complex project,
31:49
and it's hard to make a recommendation without more specifics.
31:52
But hopefully that answers your question at least partially.
31:56
The next question is from Kay.
32:01
They ask what is your web design process
32:03
for a medium sized project?
32:06
That's interesting.
32:09
For a medium to large sized project
32:11
or I guess medium and up we'll say,
32:14
again, I'm always going to use a framework like Bootstrap or Foundation.
32:17
I personally like Bootstrap better.
32:23
It doesn't mean that it's better than Foundation or vice versa.
32:25
But yeah, I'm always going to use a framework every time,
32:29
and in terms of design process,
32:33
I usually will start with wire framing,
32:38
so I'll start some sort of paper mockup
32:42
or I'll do wireframes in a wireframing tool
32:45
like Balsamic Mockups, and from there I'll try to iterate on those a couple of times.
32:48
I'm really a big fan of iterating and not just going with the first idea that pops into my head.
32:54
When I'm designing a page, I'll list out all the things I know need to be somewhere on the page,
33:02
and then I'll start placing and laying out the elements
33:07
in terms of shapes.
33:10
I'll block out the different areas.
33:12
After that, it really depends,
33:14
but for a medium project I'll probably skip the Photoshop mockup,
33:18
and I'll even do this for larger projects.
33:24
I'll go straight into the HTML and CSS
33:28
unless there's really specific parts that I know need to be fleshed out
33:33
in more detail and are going to need some really fine-tuning, I guess you could say.
33:38
Then I'll go ahead and go into Photoshop,
33:45
but otherwise I'll try to skip Photoshop when I can.
33:48
For a medium project I'm probably not going to do any kind of mockup
33:51
in Photoshop or in Illustrator or some other tool.
33:55
For really small projects I will sometimes not use a framework
34:01
if I know it's going to be 1 page,
34:05
and it's going to be really simple.
34:08
I'll go with a simple CSS reset
34:10
and hand code it from there.
34:13
But for a medium project, yeah, I'm definitely going to use a framework,
34:16
and every time I'm going to use some sort of wireframing mockup tool.
34:19
I think that's really essential.
34:26
The next question says what kind of projects
34:29
would AngularJS be a good fit for?
34:33
That's a good question.
34:36
Let's go ahead and type in "angular JS" so that for those of you that aren't familiar
34:38
we can go ahead and take a look at this.
34:45
AngularJS is basically a front-end framework,
34:48
and it says "Why AngularJS?" or what is it?
34:52
HTML is great for declaring static documents,
34:57
but AngularJS allows you to create dynamic views
35:00
on top of that HTML.
35:06
It says AngularJS lets you extend HTML vocabulary
35:09
for your application.
35:12
Now, I have not used AngularJS extensively,
35:15
but basically it allows you to drop in
35:18
little things like this.
35:23
It says "Hello" and then "yourName"
35:25
with 2 curly braces surrounding either side.
35:28
And if you're familiar with PHP
35:33
or Ruby or Python, all of those languages do the same thing.
35:36
But they do it on the back end.
35:40
This is done on the front end,
35:43
so it's actually talking to the database
35:45
and then dropping in that information
35:48
after the HTML has loaded, so the HTML loads up,
35:50
talks to the database, drops in all the information,
35:54
and it's basically a way of creating dynamic view templates.
35:56
What kind of projects would it be a good fit for?
36:01
Any kind of web application where you need dynamic views,
36:04
which is pretty much almost every web application.
36:08
Internally, and our founder and CEO Ryan Carson has blogged about this,
36:10
we use a custom built app,
36:16
and we use AngularJS with it.
36:20
And it's basically like a clone of Reddit
36:23
where we can up vote and down vote different posts,
36:26
and we can have Reddit discussions,
36:30
and we use AngularJS to populate those views,
36:32
and it's worked out great for us.
36:35
It's kind of a medium sized project at this point.
36:37
But Angular has been great, so I guess that's at least 1 specific example.
36:43
The next question says do you have any advice
36:49
for someone looking for a web design job right out of college?
36:52
I'll be graduating in May with a marketing degree,
36:56
but I've been learning web design with Treehouse.
36:59
Well, that's awesome.
37:01
I'm so glad that you're learning with Treehouse.
37:03
I realized at the beginning I did not talk about Treehouse.
37:06
Treehouse, if you're not familiar, is a website where you can learn web design,
37:12
web development, business, mobile,
37:16
and so much other stuff.
37:19
It's really awesome.
37:21
You can check us out at teamtreehouse.com.
37:23
Here's our beautiful home page.
37:25
We recently redesigned the site.
37:27
It's really awesome.
37:29
You can go ahead and click the Get Started button.
37:31
You can drop into our library here
37:33
and get an idea of what the site is like.
37:36
There's a bunch of topics you can choose from here,
37:38
and it's really, really cool.
37:41
There's a ton of stuff to explore.
37:44
We have really awesome forums where people are very, very helpful.
37:46
It's great.
37:50
Anyway, that's the 5-second view of what Treehouse is.
37:52
I'm glad you're learning with us.
37:56
But to your question, do I have any advice for somebody right out of college
37:58
if you want to go into web design?
38:04
I think it's great that you studied marketing.
38:08
That's going to be a really big help
38:11
in any kind of web design career because a lot of web designers
38:13
just getting your voice heard, the Internet is really like a megaphone
38:19
for your ideas in a way,
38:24
and it's also a really great way to interact and communicate with people.
38:26
So it's this incredible mixed medium,
38:32
and it's very interdisciplinary,
38:37
so there's room for lots of other types of expertise besides just web design.
38:39
Marketing will definitely be applicable there,
38:45
because once you create the next great iPhone app
38:47
or web app or whatever it might be,
38:51
you're going to have to market it.
38:55
That's really important.
38:57
If you're just getting started, though,
38:59
and let's say you're trying to do freelance
39:02
and you're trying to build a portfolio
39:05
or even if you're trying to get a job you're still going to need a portfolio,
39:08
and a great way to build that up is to do really small projects
39:13
that maybe you get paid a small amount for.
39:18
Or you can do stuff for free.
39:22
So how do you find people that need websites?
39:24
Well, there's lots of ways.
39:27
Really the best way is to reach out to people in your community.
39:29
For example, if there's a farmers' market nearby where you live,
39:33
you might want to go there and talk to a couple of the small vendors
39:37
and ask them, "Hey, do you have a website?"
39:41
And maybe they do, maybe they don't.
39:44
If they do, maybe you can try to improve their website,
39:46
because a lot of small businesses
39:49
don't really have the resources
39:53
or the know-how to do really awesome websites.
39:55
If that's something you can contribute to them,
39:59
that's awesome, and it's a really fast way to build up your portfolio.
40:01
That's a good place to look.
40:05
But once you've built up your portfolio,
40:07
it's really not too dissimilar
40:09
from other industries, so you want to of course apply for jobs
40:15
in the same way you might apply for any other job.
40:18
You can search on job boards and stuff.
40:22
Treehouse has a job board, so you might want to look there.
40:25
But you also want to make sure that you're networking within the community.
40:27
You want to try to look for web design conferences
40:31
where you can go ahead and buy tickets and attend
40:36
and interact with other people that are there.
40:40
There's also lots of free stuff that you can do,
40:43
so locally you might find user groups for whatever
40:46
type of language or thing that you're interested in.
40:50
There might be a Ruby or PHP users group
40:53
or a JavaScript users group.
40:56
There could be a web design group that meets up
40:58
for coffee every Wednesday morning or something like that.
41:02
So try to look around in your local community and network,
41:05
because oftentimes that's also what leads to a job.
41:09
Somebody knows somebody else
41:12
that has an opening at their company,
41:14
and you can go ahead and network that way.
41:17
It's actually pretty low-fi
41:20
the way that you'd apply for a job in the web industry.
41:24
Just like a lot of other industries.
41:29
It just takes hustle.
41:31
Let's see.
41:34
I actually lost my place here.
41:36
The next question says
41:39
which do you prefer, responsive design
41:42
or a separate mobile site?
41:45
That's such a good question.
41:47
I am going to make a responsive site
41:49
99 times out of 100.
41:52
I find responsive sites to be so much easier to manage
41:54
because you're only dealing with 1 code base.
41:59
Granted, it is slightly more complicated.
42:01
It's still going to probably be easier
42:04
in the long run to maintain a single code base
42:08
rather than having to sync up a mobile site
42:12
with a desktop site
42:15
and have one-to-one feature parity
42:18
and design parity with both of them,
42:20
because that's difficult enough as it is
42:23
if, say, you have a native application and a web app.
42:28
You don't want to create additional headaches for yourself
42:31
by creating 2 different versions of your web app
42:34
when it can be the same.
42:37
The only instance in which you might want to create
42:39
a separate mobile site is—
42:42
it's hard to even think of one anymore but if you have a very specific
42:46
mobile experience that you want to target
42:50
or you have a very well established website
42:53
that's already built out, and it looks great.
42:57
It just needs a mobile experience.
43:00
Then you might want to go ahead and build a separate mobile web app,
43:03
but that kind of thing is becoming
43:08
more and more rare as time goes on.
43:12
It's really difficult to find a site
43:14
that has a great desktop site
43:18
and no mobile site whatsoever.
43:20
That's kind of a rarity.
43:22
But yeah, I recommend going with responsive.
43:25
I think it's going to be a lot easier in the long run
43:28
unless you have a really specific use case
43:31
for the mobile app.
43:34
The next question says what's your favorite source of inspiration as a web designer?
43:37
Gosh, it comes from all over really.
43:41
I know that's a very vague answer,
43:44
but I find inspiration in movies
43:47
and video games and by walking outside
43:50
in nature.
43:55
I love to look at fine art.
43:57
I find that a lot of fine art techniques
43:59
tend to get lost in the realm of web design
44:05
because it's so much more technically oriented
44:09
with computer code.
44:11
But there's a lot that we can learn from fine art and art history
44:13
that can be drawn upon as a great source of inspiration.
44:18
I do personally like to look there a lot.
44:22
There's plenty of other places to look.
44:26
I know I've been referring to my own blog posts a lot here,
44:30
but I did just recently blog about this
44:34
as well, and it's a blog post called "How to Break a Creative Block,"
44:38
and in there I talk about a couple of sources of inspiration.
44:44
You can look at Dribbble or Pinterest,
44:48
and there's lots of other sites like it.
44:51
Those are just 2 popular ones.
44:54
There's also Behance and Forrst
44:57
I mention later on there.
44:59
But one thing that I like to do on Dribbble
45:01
is go to an artist that I like.
45:04
I'm looking at the front page here, popular.
45:09
Let's say that I look at this, and I say, "Oh, wow,
45:12
that's really cool."
45:15
I'll go ahead and click on the artist's name,
45:17
and then I click on who they're following,
45:19
and from there I can go ahead and look and see where did the source
45:24
of their inspiration come from?
45:30
And usually you can trace things back
45:32
to something that looks similar
45:34
to the stuff you really like that they're producing.
45:36
And in that way, you can start to find I guess real sources
45:40
of creativity.
45:46
It's hard to have an original idea anymore,
45:49
but it's totally fine to be inspired by other stuff,
45:52
and that's where most artists go to.
45:56
They go to inspiration in other artists.
46:00
The next question—and I think we're starting to get close to the end here.
46:05
I'll do a couple more.
46:10
We usually run for about an hour here, and we're 47 minutes in.
46:12
The next question says with websites like Wix
46:15
that allow users to make websites with no coding,
46:21
do you feel that will lower the value
46:25
of designer jobs in the future?
46:28
Yes and no but mostly no.
46:31
So yes, there are lots of websites like that now
46:34
that can go ahead and help maybe those smaller businesses
46:39
I mentioned earlier create websites
46:44
without much programming knowledge at all.
46:46
However, there's always going to be a place
46:48
for customized web designs.
46:52
And maybe that will eat into the market a little bit.
46:55
Maybe a lot of people will see these sites
46:59
and think, "I don't really need to hire a web designer
47:01
"to create this whole website for me.
47:05
I can go ahead and do it myself."
47:08
But even if that does start to happen,
47:10
that's only going to make a web designer even more valuable,
47:13
because those skills are going to become a little bit more rare,
47:17
so it will always be a great profession to be in.
47:20
The other thing to keep in mind is that there is no shortage of websites to be designed.
47:24
There's always going to be more stuff,
47:30
and in fact, there's small businesses,
47:32
medium, large businesses,
47:36
and lots and lots of individuals
47:39
that all need websites.
47:41
So for the most part, no, I don't think
47:43
that's really ever going to be a serious problem
47:47
that web designers are going to face.
47:50
The next question says what's a good way to find a mentor
47:54
in the industry?
47:57
That's a difficult question to answer
48:01
because a lot of times people aren't necessarily
48:03
able to give their time to individuals
48:08
that really need to learn stuff, so they can't spend a couple hours
48:12
a day with somebody, but if you're looking for critique,
48:18
there's plenty of ways to get that.
48:23
You could post stuff on a site like Dribbble
48:25
or other critique sites.
48:31
Forrst is really good for getting critique as well.
48:34
And in that way,
48:36
you might not have a mentor that's going to teach you one on one,
48:38
but in a way you'll actually get something that's maybe a little bit better
48:44
because you'll get the hive mind and community feedback
48:48
from a lot of people, and in that way you can start to evolve
48:52
your own skills.
48:56
You may also want to check out the Treehouse forum
48:58
if you haven't done so already.
49:01
There's lots of students there that are totally willing to collaborate
49:03
on projects with one another, so if you're looking for maybe a project collaborator,
49:07
that might be a good way.
49:12
Another good way to learn new skills if you're still really new
49:15
is to try and find an internship
49:20
in the web design industry.
49:22
And those types of positions or junior developer positions
49:24
will be really good because you'll be in a real environment
49:30
where you have to do real stuff,
49:34
and that's a great trial by fire, if you will,
49:36
because you're going to learn so much more than you're going to learn
49:42
just by working on your own projects.
49:44
Hopefully that answers your question.
49:49
Let's see, the next question says is there a way to remove
49:53
unused CSS selectors
49:58
from a large front-end framework?
50:00
Oh, my gosh, yes, there is.
50:03
There's a couple of different ways that you can do this.
50:05
Let's see, I think it's called CSSCSS.
50:11
Yeah, here we go.
50:16
I found it on the first try. Awesome.
50:20
There is a CSS redundancy analyzer called CSSCSS,
50:22
and it says here it will parse any CSS files
50:27
you give it, and it will let you know
50:31
which rule sets have duplicated declarations.
50:33
That's pretty cool.
50:39
If we go on, say, another website here
50:41
and we open up the Chrome dev tools—
50:44
I did that by hitting Command Option I on Mac.
50:47
It's Control Shift I on a PC.
50:51
You can go ahead and click on the Audits panel,
50:54
and then hit run.
50:56
And it should tell you if there are redundant selectors here.
51:00
This is taking an awful long time to audit.
51:07
I'm not really sure why.
51:11
Maybe I can try it on another page here.
51:13
I apologize to Chris Coyier for running an audit here.
51:15
A-ha, okay.
51:19
You can run an audit using the Chrome dev tools,
51:22
and it will say, "Remove unused CSS rules."
51:24
And it will give you some classes
51:28
of CSS rules that are not being used by the current page.
51:32
So just to caveat that,
51:35
it's important that you don't meddle with a framework too much.
51:39
You don't want to remove stuff that you might really need.
51:45
But if you are looking to make a framework a little bit leaner,
51:50
most major frameworks have a customization tool.
51:55
If you go to Bootstrap here and click on Customize,
51:58
you can go ahead and check which parts of the framework
52:01
that you want to include, and you can uncheck parts
52:06
that you don't want to include.
52:11
That's one way to also remove CSS,
52:13
so hopefully that answers your question.
52:17
The next question says how do you find balance
52:20
in learning web design and development
52:23
when there's so much information out there?
52:25
Are there specific areas one should focus on?
52:27
Yes and no.
52:32
So it can be hard figuring out
52:34
what's new and what you should be paying attention to.
52:37
But really the answer is that nobody knows everything,
52:41
and it's really impossible to try and learn everything.
52:46
For example, like I said earlier,
52:50
I haven't really gotten into Python at all.
52:52
I just haven't had the time or been interested in other things.
52:54
It doesn't mean that Python isn't good
52:58
and that I should try to learn it.
53:00
I just haven't.
53:02
You just can't learn everything,
53:04
so always keep that in mind.
53:08
There's always going to be more stuff to learn
53:10
no matter how far you're able to advance your career
53:12
and your knowledge.
53:15
But I guess one thing you can do is watch the Treehouse show.
53:18
Not to self-promote anymore,
53:24
but we do a show every week at Treehouse.
53:27
It's called the Treehouse Show.
53:31
You can check it out on iTunes or on our YouTube channel
53:33
at youtube.com/gotreehouse.
53:35
And it's a roundup of links and other cool bits of information
53:38
about the web industry, and you can keep up that way.
53:43
But you're never going to learn everything,
53:48
so what should you do instead?
53:52
Well, you should try and focus.
53:54
A lot of developers will self-identify
53:56
as a PHP developer or a Ruby developer
54:00
or maybe a front-end developer
54:04
where they do a lot of JavaScript work, for example,
54:06
or a lot of CSS work.
54:08
So if you can try and pick a little bit more of a narrow focus,
54:11
maybe you start really getting into front end,
54:15
you might want to look at something like Angular
54:17
and say, "Okay, I'm really getting good at front-end development.
54:20
"I want to go ahead and specialize even further
54:24
"and learn things like Angular and other front-end frameworks
54:27
and become really awesome at that."
54:30
And that's a perfectly okay way to market yourself.
54:33
You don't have to be an all-around developer
54:35
that can do absolutely everything.
54:38
There are some really talented developers out there
54:40
than can definitely do both front end and back end coding.
54:44
You don't have to do that, though.
54:47
You can be a really awesome Ruby developer
54:49
and leave the design work and everything else to other people on a team,
54:51
so I hope that answers your question.
54:56
We've got about 5 more minutes here,
55:00
so I'm just going to do a couple more.
55:02
The next question says what's the best way to make images responsive?
55:05
I feel like we already talked about that.
55:08
The next question says can you explain Grunt
55:12
and how someone would integrate it into their workflow?
55:15
So CSSCSS
55:20
actually I think can be used
55:24
by Grunt or integrated to a Grunt workflow.
55:27
Yes.
55:31
Grunt CSS is a Grunt task
55:33
to automatically run CSS.
55:35
But what is Grunt?
55:38
Well, it is self-described as a JavaScript task runner,
55:40
and a task runner basically allows you to automate things
55:44
when you're building your website.
55:49
So if you have a lot of repetitive tasks
55:51
such as running testing
55:55
or you need to do minification on your CSS and JavaScript,
55:57
you can build out a tool chain
56:01
of tasks and run those tasks
56:06
when you're exporting your code for the web.
56:10
That's basically what Grunt is.
56:15
I don't have a whole lot of time here to go into it.
56:19
I want to wrap up a few more questions here,
56:21
but that's basically what it is in a nutshell,
56:24
and there's plenty of great documentation
56:27
you can check out on gruntjs.com.
56:29
The next question says what color scheme do you use in Sublime Text?
56:33
I'm not really sure.
56:38
Let's open up Sublime Text and see.
56:40
Preferences, color scheme.
56:43
It looks like I'm using Mac Classic right now.
56:45
I have been known to use Zenburnesque,
56:48
so I do use this quite a bit.
56:53
But I try to use Mac Classic
56:56
when screen casting because it's a little bit easier to see dark text
56:59
on a lighter background.
57:03
How different are web design and web development?
57:06
It's kind of like a Venn diagram.
57:10
There's areas that overlap.
57:12
There's areas that are definitely classified as development
57:14
and definitely classified as design.
57:18
For example, if you're making wireframes
57:21
or Photoshop and Illustrator mockups,
57:24
that's most definitely web design.
57:27
If you're writing back-end code that interacts with the database,
57:29
that's definitely web development.
57:33
I think the area where it gets fuzzy
57:35
is on the front end with HTML, CSS, and JavaScript.
57:38
What is design, and what is development?
57:42
It's kind of hard to say,
57:46
because a designer I would expect to code CSS
57:48
whereas it's perfectly okay for a developer to go ahead and write CSS code as well.
57:53
It varies depending on the particular intent,
57:58
so a designer might be writing CSS
58:03
to try and make the site look really great
58:07
and aesthetically pleasing
58:11
or more clear and create a great user experience.
58:13
A developer might be writing CSS code because they want to go ahead
58:16
and maybe optimize something,
58:19
or there's this new feature that they're building,
58:22
and it doesn't really require a lot of design work.
58:25
It just needs to show this new message on the page or something.
58:28
They might write a little bit of CSS
58:31
to include that.
58:34
JavaScript is another area where it gets a little bit funky.
58:37
It's hard to say whether a designer
58:42
or a developer should be doing that.
58:46
Yes, it is computer code,
58:49
so it seems like a developer should be doing that.
58:51
But a lot of the interactions
58:54
or animations and other things you might be creating
58:57
with JavaScript could be classified as design,
59:01
because it's affecting the overall user experience.
59:05
Now, the same could be said about the back end,
59:08
so for example, if the site is not performant
59:12
that's going to affect the user experience.
59:15
But JavaScript handles that a little bit more directly.
59:17
So to answer your question, it is different,
59:20
but there's areas where it does get fuzzy.
59:23
Our last question is how often do you find yourself referring to code documentation?
59:26
I have a hard time remembering all the CSS3 goodies.
59:32
I refer to documentation all the time.
59:36
If I had to write out a CSS3
59:38
radial gradient for WebKit right now I couldn't do it.
59:42
I'd need to look it up,
59:47
and that's perfectly okay.
59:49
There are so many HTML elements in CSS properties
59:51
you're never going to remember them all.
59:54
And even if you do, you're never going to remember
59:57
quite the right syntax for all of them,
1:00:01
and if you can, then good for you.
1:00:04
You're probably a super human.
1:00:06
But it's really, really hard to memorize all that stuff,
1:00:08
so don't feel bad if you feel like you need to look stuff up all the time,
1:00:13
because all the pros do it.
1:00:16
They always look up stuff.
1:00:18
They're always referring to documentation.
1:00:20
Even for functions they use all the time,
1:00:22
if they're programming they'll start to use a function,
1:00:25
and they'll say, "What's that 3rd argument
1:00:30
that this method is asking for?"
1:00:33
They'll go ahead and look it up in the documentation.
1:00:36
Don't feel bad about memorizing all the HTML elements and CSS properties.
1:00:38
It's really, really difficult to do.
1:00:44
That about wraps things up.
1:00:46
Thanks so much for sending me so many great questions.
1:00:49
Wow, I'm pretty blown away by the response to this.
1:00:52
I'm so glad so many people participated.
1:00:57
It's been really, really fun.
1:01:00
Again, I'm Nick Pettit.
1:01:02
I am @nickrp on Twitter.
1:01:04
If you'd like to learn more about us
1:01:07
and check out Treehouse you can check us out at teamtreehouse.com,
1:01:09
which of course is the best way to learn web design,
1:01:14
web development, business, mobile and so much more.
1:01:17
Thanks so much for watching.
1:01:21
We do these every Tuesday at 2 PM Eastern Time.
1:01:23
Hopefully I will see you next week.
1:01:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up