How To Get Started in Web Design

CSS-Tricks

How To Get Started in Web Design

Here's an answer to how to get started building websites that I fully endorse and isn't vague. This is going to cost a little money, just like learning to play the guitar requires buying a guitar and some accessories. This is also going to require a little time and mostly isn't directly about the coding itself. It's about getting you to a place where you're doing web design for real and you can't help but learn!

I'm going to mention specific company names without linking to them, just to be clear this article isn't an affiliate marketing thing. Googling them should bring them right up.

1. Buy a domain name

Buy a domain name from Hover. Buy something useful, like your-name.com or buisness-idea.com. Or buy something silly that you will actually do something with.

2. Buy some web hosting

Buy the cheapest hosting plan at Media Temple. Tell them you already have a domain. I think it's preferable to separate your domain buying company and your hosting company¹.

Once it goes through, you'll get a service activation email.

3. Point the nameservers of your new domain to your new hosting

The link in that service activation email will take you to Media Temple's guide with all kinds of information in it you need to finish setting this up. Under the DNS section, you'll see Media Temples nameservers. We need to change the nameservers for our domain over on Hover so that the domain properly points over to Media Temple.

When we're changing these nameservers, we're changing DNS information. Whenever you change DNS information there might be some time involved. This information needs to propagate it's way to routers all around the world that power the internet. That's how the internet works!

Just know that it might take a little time for this to start working (for your website we're about to put up to actually show up).

4. Get some FTP Software

FTP is for transferring files. We're going to use it to transfer files from your computer to the web hosting server computer. We'll talk about those files in a minute, but for now we're just setting it up.

If you're on a Mac, get Coda. Coda is an FTP client, but it's also a code editor, and when you're just starting out as you are, that's mighty convenient.

I'm not as familiar with PC software, but googling "FTP client for PC" brings up plenty of stuff. I'm sure there are some nice ones.

5. FTP into your Web Hosting

That Media Temple guide area will also include FTP information, meaning a:

1. hostname


2. username


3. password

Enter the FTP credentials from the email into the FTP client (create a new Site).

Connect to the server.

6. Add the Domain to the Hosting

When we bought the hosting, we told them we had our own domain. So let's set that up in there. This will certainly vary from hosting company to hosting company. Here's how it worked on Media Temple:

7. Find the web root through FTP on your server

There is always a particular folder on your server that is the "web root". For example, if you put an index.html file there, that is what displays when you go to your-name.com, or if you make a folder there called "cool" and put an index.html file in that folder, that is what displays when you go to your-name.com/cool/

8. FEEL THE POWER COURSE THROUGH YOUR VEINS

Whatever you put in that web root is live on the internet!

If you put an index.html file there, that's what shows when you go to your domain in a web browser.

9. Go find a nice template to download, and upload it to your server

Go download a template. Google something like "Free HTML templates", or even find a paid one you like and buy that. There is nothing wrong with templates. Eventually you'll be good enough to not need one or make educated choices about when to use one, but for now, it's best to kick things off with a nice looking site that you can tweak and make yours. Kinda like how it's more fun (and easier to get better) learning an instrument by playing a song you like rather than learning scales.

10. Congrats

You've now built a website. You absolutely have the ability to edit those files and make things happen. Without any further training at all, you are smart enough to find words that you want to change and change them in HTML and see the results. You are smart enough to find color values in CSS and change them to see the results. You are smart enough to figure out the connections between HTML elements and CSS selectors.

That's how the vast majority of web designers started out. I know I did.

Now, everything else you learn you can learn in context of a actual site you're working on. You can imagine how the things you learn might apply to your real website. And the more you do it, the better you get. Wanna get better? Just build websites!

Alternatives

I wanted to be very specific in this article. Nothing vauge. But that doesn't mean this is the only path. Let's similar but alternative paths in the comments.

Leveling Up

After feeling pretty comfortable with this process, there are lots of ways to level up. Some of those might include

• Install a CMS like WordPress (video series), Kirby, Perch, Ghost, or the like.


• Working on your design skills in general, by designing more.


• Learning some jQuery (video series) to add advanced functionality and interaction.


• Learning about a version control system like Git.


• Learn about running a web design business effectively.

There are a million ways to get better. You'll likely discover most of them organically.

---

¹ - For example, if you buy your domain from your hosting company, and then decide to change hosting companies, the hosting company is disincentivized to help you with your domain.

---

How To Get Started in Web Design is a post from CSS-Tricks

more info...

Sponsor: Creative Market – October Big Bundle

CSS-Tricks

Sponsor: Creative Market – October Big Bundle

It's always great to have a personal collection of design resources you know that you can use for whatever you like at your fingertips. Vectors flourishes and illustrations, photos, textures, patterns, fonts, layouts, all that good stuff.

No better place to stock up than Creative Market. This week, they have put together a Big Bundle of their best products. From graphics and fonts to photos and Photoshop actions. For only $39, you can fill up your designer's toolkit with 105 resources. This will only be available until October 21st, so be sure to grab it before it's too late.

Direct Link to Article — Permalink

---

Sponsor: Creative Market – October Big Bundle is a post from CSS-Tricks

more info...

Sponsored: Stack – Task Management for Dev Teams

CSS-Tricks

Sponsored: Stack – Task Management for Dev Teams

Stack is a powerful new task management system for Devs and Designers. A simple and fully customizable tool that fits your workflow. Manage projects and communicate with your team hassle free and in real time.

I really like how Stack approaches this. It's exactly how I would have done it. There are projects - big buckets that tasks go into. Then each project has these columns that you can organize however you want. Each task is actually in a column. Could be different types of tasks or the state the task is in, whatever works. Then each task has it's own little world of people and conversation and todo's and stuff, if needed. So I might have a CSS-Tricks account, with a project for The Lodge, that has a column for Videos To Shoot, and each video is a task, and in the task I leave notes on what the plan is. Beautiful.

Free for 30 days, no credit card required to get started. Super simple pricing model after that ($5/month per user).

Direct Link to Article — Permalink

---

Sponsored: Stack – Task Management for Dev Teams is a post from CSS-Tricks

more info...

Intermediary Pages in a Site Hierarchy

CSS-Tricks

Intermediary Pages in a Site Hierarchy

I had a reader write in with an interesting question:

When one has multi-level navigation, do you think it crucial to have an actual page for the top-level item? For instance, About > Company, Founder, History.

There isn't really anything worth putting on the About page that wouldn't be on the three sub-pages. In the nav, should About just redirect to Company? Should there not be a Company page and its content be moved to About?

Any best practices you've found over the years?

I'm picturing this kind of thing:

And the issue is that "About" by itself isn't particularly useful. But it is useful as a grouping for the sub pages.

I would think the "About" link should be functional no matter what. It's just a matter of what to do with it.

Just make an intermediary page

Have the parent link:

http://website.com/about/

And the subpages:

http://website.com/about/company/

http://website.com/about/founder/


http://website.com/about/history/

They said there isn't anything "worth" putting on the About page, but that's just a matter of content wrangling. You could write some new content introducing the other content there. Or show some elaborate breadcrumbs encouraging them to go deeper. Or show some images or snippets from the sub pages. I'm sure you can think of something.

Redirect the intermediary page

Have:

http://website.com/about/

Redirect to:

http://website.com/about/company/

That way the URL stays nice and hierarchical and gives you the opportunity to create an About page alone in the future.

It might feel a little unexpected though, so it might be nice to offer some kind of sideways navigation. Seems like the kind of thing that could be tabbed:

Skip the hierarchy

If there is really no point to having a parent page, maybe the URL's should be clear that there isn't one.

http://website.com/about-company/

http://website.com/about-founder/


http://website.com/about-history/

And then use the redirect for the top-level navigation option.

Put them all on one page

Is there any value in separating them? You could go with a tabs design pattern with all on-page content. Or just make a long page, the web can handle it =).

The URL's could use hashes to go to the relevant place (or tab):

http://website.com/about/#company

http://website.com/about/#founder


http://website.com/about/#history

Best Practices

I'm not sure any one of these is any better than the other. I think the best practices here come in the form of don'ts:

• Don't do it one way then change it to another next month. Cool URL's don't change.


• Don't make your dropdown 100% reliant on JavaScript.


• Don't make the About link not-actually-a-link just because you don't have this figure out yet. Link it to something or redirect it.

---

Have you all gone through this kind of thing before?

---

Intermediary Pages in a Site Hierarchy is a post from CSS-Tricks

more info...

Intermediary Pages in a Site Heirarchy

CSS-Tricks

Intermediary Pages in a Site Heirarchy

I had a reader write in with an interesting question:

When one has multi-level navigation, do you think it crucial to have an actual page for the top-level item? For instance, About > Company, Founder, History.

There isn't really anything worth putting on the About page that wouldn't be on the three sub-pages. In the nav, should About just redirect to Company? Should there not be a Company page and its content be moved to About?

Any best practices you've found over the years?

I'm picturing this kind of thing:

And the issue is that "About" by itself isn't particularly useful. But it is useful as a grouping for the sub pages.

I would think the "About" link should be functional no matter what. It's just a matter of what to do with it.

Just make an intermediary page

Have the parent link:

http://website.com/about/

And the subpages:

http://website.com/about/company/

http://website.com/about/founder/


http://website.com/about/history/

They said there isn't anything "worth" putting on the About page, but that's just a matter of content wrangling. You could write some new content introducing the other content there. Or show some elaborate breadcrumbs encouraging them to go deeper. Or show some images or snippets from the sub pages. I'm sure you can think of something.

Redirect the intermediary page

Have:

http://website.com/about/

Redirect to:

http://website.com/about/company/

That way the URL stays nice and hierarchical and gives you the opportunity to create an About page alone in the future.

It might feel a little unexpected though, so it might be nice to offer some kind of sideways navigation. Seems like the kind of thing that could be tabbed:

Skip the hierarchy

If there is really no point to having a parent page, maybe the URL's should be clear that there isn't one.

http://website.com/about-company/

http://website.com/about-founder/


http://website.com/about-history/

And then use the redirect for the top-level navigation option.

Put them all on one page

Is there any value in separating them? You could go with a tabs design pattern with all on-page content. Or just make a long page, the web can handle it =).

The URL's could use hashes to go to the relevant place (or tab):

http://website.com/about/#company

http://website.com/about/#founder


http://website.com/about/#history

Best Practices

I'm not sure any one of these is any better than the other. I think the best practices here come in the form of don'ts:

• Don't do it one way then change it to another next month. Cool URL's don't change.


• Don't make your dropdown 100% reliant on JavaScript.


• Don't make the About link not-actually-a-link just because you don't have this figure out yet. Link it to something or redirect it.

---

Have you all gone through this kind of thing before?

---

Intermediary Pages in a Site Heirarchy is a post from CSS-Tricks

more info...

When users leave the search box empty…

CSS-Tricks

When users leave the search box empty…

The following is a guest post by Brin Wilson of WinningWP. Brin wrote to me wanting to do a little advertising for his site. I of course would happily accept that, but even better, since Brin is a tech writer anyway, why not write a guest post. That's always a win-win, and since he had a good idea anyway... take it away Brin!

If you're reading this, my guess is you're someone who cares about user experience. Like me, I'll bet you've probably spent countless hours trying to perfect every last detail of your site: from ensuring everything looks as it should on numerous different devices to creating either an entertaining and/or a helpful 404 page! But have you ever considered what happens when people search your site using the search functionality you've provided (i.e. usually a simple search box located somewhere near top of the page) but inadvertently hit enter without having actually typed anything?

Looking around the web, there appears to be no real consensus on what should happen in this particular edge-case scenario. Indeed, even the vast majority of industry-leading web design blogs seem to give no real consensus on what should or shouldn't happen!

Some Examples of Empty Searches

Reload / Redirect to Homepage

Familiar examples include: Web Designer Wall and the Team Treehouse Blog.

In these cases it's likely a WordPress theme that is 1) using default WordPress search and 2) missing a search.php template file (or the template is essentially the same as the homepage). So, the default homepage will be loaded with no search filter, meaning no filter is applied and you'll see whatever is normally on that page. It's not very clear what is going on.

Do Nothing

Familiar examples include: Codrops and Sitepoint.

The search box simply does nothing and/or closes itself.

Nothing Searched For / Nothing Found

Familiar examples include this very site, i.e. CSS-Tricks and, in fact, currently my own site WinningWP.

A default result appears quoting whatever the user has searched for (in this case nothing), and no results are shown. Kind of the opposite of the first examples where because there is no search filter, everything is found. But you're also on a clear search page so some action has happened.

Nothing Search For / Everything Found

Familiar examples include WebDesignerDepot and Code Tuts+.

A list of the most recent posts appears.

Completely Blank

Familiar examples include Smashing Magazine and Designmodo.

A completely blank list of search results appears.

Borked

Familiar examples include TheNextWeb and 1stWebdesigner.

The page just looks (or says) it's broken.

A better result

So what should be made to happen? Well, using the attribute 'required' would arguably go along way towards improving the user-experience in browsers that support this part of HTML5.

<input required type="search" name="q" id="q">

Thereby simply stopping the users with more-modern browsers from even being able to perform a blank search in the first place (as exemplified by the empty-search-box-behavior over on Speckboy Design Magazine). Here's a complete form example:

<form id="search-form" action="/search-results/">
  <div>
    <label for="q" id="search-label">
      Search
    </label>
    <input required aria-labelledby="search-label" id="q" type="search" name="q" class="search-field" value="">
    <input type="submit" value="Search" class="screen-reader">
  </div>
</form>

Editors note: I updated the search form here to use required because it seems like an easy/obvious improvement.

But what about non-supporting browsers? Is this good enough? And more to the point: can we do better?

Personally, I'm of the opinion that these types of empty search-box searches could perhaps best serve the user by being made to return a result that tells the user they've conducted a search but somehow or other managed to leave the search box empty. Perhaps in a kind of humorous-404-page style. Although, that said, I realize this might be going overboard – and would probably be a bit inappropriate for some websites.

Perhaps one of the nicest user-experiences (suggested by Chris after seeing the first draft of this post) could be provided by taking the user to a really well-designed full-page search experience: perhaps with the addition of some suggested popular search terms.

Or maybe the blank search is just too much of an edge case to worry about – especially on sites with relatively low traffic.

Any other suggestions for what best to return when a user leaves the search box empty? Is there some chance the user just clicked search on accident or had another assumption about what it would do? Thoughts?

---

When users leave the search box empty… is a post from CSS-Tricks

more info...

The Most Common Questions Asked on ShopTalk

CSS-Tricks

The Most Common Questions Asked on ShopTalk

As I type this, Dave Rupert and I have recorded 137 episodes of ShopTalk. ShopTalk is primarily a question-and-answer style show. Dave's early idea was to have it be loosely modeled after the most popular NPR show of all time, Car Talk, which is mostly Q&A. We have guests, and we talk a bit about the guest so people have a sense of who they are, but it's not exactly an interview show.

We solicit people's questions on ShopTalk. Again as I type this, we're closing in on 2,000 questions people have sent in. I've read every single one of them and there are definitely some repeating themes. I think it's an interesting look at the vibe of the industry.

The "Should I go to college?" Question

Sometimes this comes from high school age people who are curious if it's "worth it" to go to college, or that worry that college won't teach them current technology. Like this one from Ledian Morales:

I work as web developer at a well known web company. I have learned a lot from the people here. They hired me straight out of high school, so I was never able to go to a college or a university. They taught me everything I know. I make good money. But I want to go bigger. I want to learn more.

Should I go to a university?

Based on the research I have been doing, a lot of people are saying it is not worth it. The information they teach is outdated. You can learn more with Google Search. Is it worth it?

Or from people already in the workforce interested in a career shift. Like this one from Marc Levine:

I am 39 years old. My wife and I have two young children. I am a corporate trainer. I want to change my career and become a web developer. On nights and weekends for the last 6+ months, I have been learning HTML, CSS, JavaScript, jQuery and Ruby through Codeacademy, CSS-Tricks, Lynda.com, and other sites. I have learned a lot, but I still feel like a beginner.

I have been accepted to a graduate certificate program in Web Design & Development at a local university. It is the only program in the area that caters to working adults. After learning more about the program, I am skeptical, because it seems like it is going to be covering somewhat older content, maybe not as much hands on, paper writing, traditional academia, etc.

Is it feasible that I can learn everything on my own, basically through internet resources? If yes, how would I do that? What are some specific things that you all would recommend? I need to position myself so that I am a viable and hirable job applicant. Time is of the essence - I'm not getting any younger.

I think this is such a common question because it's a huge life decision (lots of time, lots of money) and the results are unclear. College isn't a car wash. When you go through a car wash, your car is clean at the end. When you go through college, you are ???? at the end. Smarter? More employable? Maybe. Broke? Probably. Because so many people do it and the results are all over the place, it's a tough call.

Based on my personal experience: go. Learning what a for-loop is isn't what you get out of college. Hopefully, a huge well-rounded chunk of knowledge and experience is what you get that benefits you forever is what you get out of college.

Andy Budd wrote my favorite article on this subject.

Should they continue their studies or jump straight into the labour market? I usually tell them that ability trumps education and I don’t put much faith on the current raft of tech degrees. So I'd prefer to see three years of experience than three years of study.

That being said, I'll also point out that University is about much more than just acquiring a skill. It's a formative experience that will shape your attitudes for the rest of your life. It's also a huge amount of fun, or at least it was in my day.

The "fun" thing might not be an important factor when you're decided to go back later in life with more at stake. Not to be overlooked is the rise of the "Code School" - shorter, more focused, but also expensive and often un-accredited schools that offer to blast you with knowledge and get you changing careers in a hurry. I've seen success happen through them, but surely the results vary.

We've talked about this subject on the show several times. To hear more, check these TimeJump links:

• 121: with Sam Kapila


• 111: with Dee Gill


• 104: with Leslie Jensen Inman


• 092: with Dudley Storey


• 076: with Tim Sabat and Alex Vazquez


• 016: with Ian Stewart

The "WordPress Local and Live Databases" Question

The tide of front end development moved lots and lots of front end developers toward developing locally over the last several years. Technologies like preprocessors and version control require that, and front end developers are firmly on-board with that. But WordPress is huge, and WordPress is a back-end technology that requires back-end things to work. MySQL, PHP, Apache, a local domain. All the sudden tooling is a big part of the front end developer job, and the shoe fits.

But the tooling for MySQL hasn't quite caught up. It still hasn't, if you ask me. It's reasonable to want to work on near-exact replica of a live site on local, then push up changes. And so much of what WordPress does and shows is in that database.

Version control doesn't help with the database. Connecting a local site to a live database is risky. Exporting/importing tools directly in WordPress aren't great. Manually dumping the database from the command line, downloading it, and running the SQL locally is tedious and inefficient. No wonder it was such a hot topic.

The answer is essentially, use WP Migrate DB Pro. Full disclosure: they have sponsored the show. But it's the only option out there that I've found that actually does the job. It costs money (good, because that means they run a business on keeping it working well).

I think enough people are becoming aware of this that we don't get the question nearly as much as we have in the past.

The "How do you make a podcast" Question

We have a podcast. Lots of people want to start a podcast, like Nick Santini:

I was wondering if you could tell us a little bit about how you about the recording process for your podcasts and how you incorporate it into the site?

Dave and I aren't in the same room (or even state) usually, so we need to talk to each other. Plus the guest could be anywhere in the world. Even though neither of us, nor our typical guest, is a big Skype user, everyone tends to have an account, know how to use it, and it generally works. We start up a call there, get everyone on the same call, and chat for a while as we set up.

Skype can be choppy sometimes though, so even if everyone follows all our advice the call might have some rough spots that wouldn't make for a good recorded podcast. For that reason, we have each guest record their audio locally. It's really easy (on a Mac, at least, which is all I know), because you can do it directly through Quicktime Player. Everybody records their own audio locally, which will be of good quality without rough spots.

We have a podcast editor, Aaron Dowd, who stitches them all together and makes the final MP3 file that goes out.

On the ShopTalk website, we use the podPress plugin to generate the iTunes compatible feed and all that. For CodePen radio, I use the Blubrry one. On CSS-Tricks, I hand-created (and later used WordPress templating) to generate the RSS feed that iTunes uses. It's just a special format.

You'll need to host the MP3 file somewhere. I use Amazon S3 on CSS-Tricks and CodePen, which can be fine for that. Using your own web hosting probably isn't a great idea as it isn't really priced for media hosting bandwidth. On ShopTalk we use BuzzSprout, which gives us analytics, which is great.

For the LIVE part of ShopTalk, I'm afraid I'm not the expert. Maybe someday Dave will post a thing on how he manages it all. I know that he brings in a second computer ("The Intern") into the Skype call. Then somehow that computer passes the audio from the combined call over to (Wavestreaming? SHOUTcast?) which then (I think?) gives us a URL that Dave plugins into an MP3 player baked into our Live page. Somehow an iPad is plugged into the call too, which pipes in the sound effects.

Loading

View on Instagram

It's a fairly complicated little setup over in Dave's shed!

The "What should I learn next?" Question

This is always the classic case for our ShopTalk Mantra!

Here's an example from Derrick Showers:

As a developer, what on earth do I learn next?

There is literally so much 'stuff' to learn in this industry, it's often overwhelming! Do I push my knowledge of JavaScript and learn the ins-and-outs of different design patterns? Do I learn something new like Swift? Do I learn how to animate element on a page with canvas and CSS3 animations? Do I go learn Node.js and its associated frameworks?

When we're feeling in a direct-answer mood, the answer is usually: learn JavaScript. It really seems like that's a solid bet for a good long-lasting career right now. Not to mention the programming fundamentals that will stay with you forever.

But really: just build websites. There is nothing more motivational, practical, and applicable to real work than actually building actual websites. The the site you are working on guide what you learn next. Because you need it. Because it will enable the site to do something, or do it faster, or better. Learning from a book or course or classroom is great, but no substitute for the real thing, and they don't have to be mutually exclusive.

The "Should I change jobs?" Question

This is a little bit like the university question in that it involves a huge life choice where the outcome is uncertain. Will you make more money? How much does that money matter? Isn't happiness more important? How do you even know if you'll be happy at a new job? How does your family life factor in? Thats just the tip of the iceberg.

Here's an example from Daniel Grigorov:

I recently started working in a small web design company. I am doing the websites design and the coding as well. I really like doing both these things, but maybe after a couple of years I would like to move out and find a job at a bigger company.

Is it possible to find job into a big web design company and do both the web designer's and web front end's jobs simultaneously or should I pick one of those jobs only and put all my efforts into mastering it?

There is always stuff written between the lines. "A bigger company" I feel likely implies that he wants to make more money. Rarely do people say "I wish I worked in a cubicle with more middle management where I had less influence on the company!"

Or perhaps he is thinking of a higher level of prestige at some "tech giant" and worries that the jack-of-all-trades situation he has going on now will limit his ability to land a job like that. It might, sadly. If you put in all your time into design, you'd certainly be a better (and more impressive) designer. Likewise if you spent all your time in JavaScript, you'd be able to ace technical interviews easier. I don't hear about companies hiring generalists very often (which I personally think is sad).

But most importantly, it's clear Daniel is passionate about this work and does the work. That alone makes me pretty darn sure he'll do great.

---

We'll have to do this again sometime when new questions emerge that signal a tide shift in the front end world. I hope to someday be pondering "Should I go to Mars to learn SpaceNode? Or should should I stay here on Earth and focus on my CSS6 skills?"

---

The Most Common Questions Asked on ShopTalk is a post from CSS-Tricks

more info...