Starting a new career in web design is an exciting (and, let’s be honest, highly lucrative) prospect, but the prospect of actually starting to learn web design in 2019 can be intimidating.
The amount of information and options for learning web design are overwhelming. It’s difficult to know whose knowledge you can trust. Add to that the fact that most information is geared towards more advanced designers and developers, so impostor syndrome and feeling like a fraud is a very real problem when you’re just starting out.
But you don’t need to learn every bleeding-edge technology or get a degree in computer science to kick-start your web design career in 2019. You can learn the skills and gain the experience you need in only a few short months, regardless of your background or budget.
This guide covers everything you need to know—the essential skills you should learn (in the correct order); the top tutorials, courses, and boot camps to learn quickly (as well as options for learning at your own pace); how to gain hands-on experience on real projects; how to use those projects to build a strong portfolio of work. We even offer suggestions on how to find your first web design client or job.
6 steps to learning web design in 2019
The guide is divided into six main sections:
- Getting Started: The basics of web design and development
- Learning Essential Skills: The design and programming concepts all new web designers should learn
- Using the Best Resources: A complete list of the best resources for learning web design
- Gaining Experience: How to gain hands-on web design experience and build your portfolio
- Choosing a Career Path: Decide whether freelancing or working in-house is right for you
- Finding Work: How to find your first web design position and kick-start your career
Click the section that’s most relevant to you to jump straight to that section. Or if you’re new to web design and you want to learn the basics, read on to find out how to get started as a web designer!
Getting started: The basics of web design and development
Web design in 2019 is a massive field—one that includes many different skills, disciplines, tools, and programs. But at its core, the fundamentals of web design remain the same for everyone.
What is web design?
Web design is the process of creating websites on the internet. Different areas of web design include graphic design, user experience design, scripting and coding, content writing, web server and network security configuration, information design, and search engine optimization.
Web design can range from creating a static website with plain text, images, and links all the way up to complex web applications, content management systems, application programming interfaces (or APIs), and social networking services.
The difference between a web designer and a web developer
You might have also noticed there are different roles in the world of web design—web designers, web developers, and full-stack developers. There’s a lot of overlap among them—it’s often confusing to understand who’s responsible for what.
Web designers manage the parts of websites you see and interact within your browser, usually called the front-end or client-side. They’re responsible for the appearance, layout, and often the content on a website—things like colors, fonts, images, navigation, and copy are all part of the web designer’s domain. Front-end designers working on interactive web applications also take care of presenting and updating data as it changes in real time.
In contrast, web developers deal with all the parts of a website “under the hood.” Web developers usually take care of the coding and business logic that makes up the back-end (or server-side) of a website—things like writing code to fetch and display data, write code to communicate with other web services or databases, or manage dynamic content within a site or web app.
Of course, some web designers are also web developers. They manage every aspect of a website and are referred to as “full-stack” developers. If you enjoy both front-end and back-end development, being a full-stack developer can make you more marketable. Stack Overflow’s 2019 Developer Survey reports that about 50% of respondents identify as full-stack developers.
Choosing the career path for you
As you progress throughout your own career, you’ll likely end up preferring either web design or development. Specializing in either front-end design or back-end development can make you more marketable to employers or clients—both options are equally in-demand, and both can make for an exciting and lucrative career.
Right now, though, don’t worry too much about choosing one over the other. In the real world, you’ll find both fields require you to have at least some functional knowledge of the other field. The most successful web designers understand how to make the most of the technical limitations of the back-end, and the best web developers keep an artistic vision in mind when designing data structures. You can always specialize in particular areas once you gain experience and skills.
Web design 101: The key skills you should learn first
When you’re just starting out, get comfortable with a few key skills for both front-end design and back-end development. A basic understanding of essential web design skills will serve you well in your web design career and make you more appealing to clients and employers.
Let’s take a look at the key skills you’ll need to master to become a web designer.
The basics: HTML, CSS , JavaScript, and version control
The first thing you should learn is how to code and style a basic website—and for this, you’ll need to get to know both HTML and CSS. HTML and CSS are markup languages that designers use to create the parts of a web page and their visual styles. They’re the basic building blocks behind every website—web browsers use the HTML and CSS code to determine what users see when they browse a website.
HTML stands for Hypertext Markup Language. It’s the coding language used to describe the content on a web page and how it’s structured—think headings, bullet points, and hyperlinks.
Walking hand-in-hand with HTML is CSS, or Cascading Style Sheets. CSS is the code that represents how the contents of a web page should be styled and laid out. By changing the CSS code for a web page, you can control which fonts are used, change colors and images, and lay out page content for maximum impact.
Finally, we have JavaScript—a programming language used to dynamically control the content on a web page. JavaScript lets you make sites interactive—web apps, interactive maps, scrolling images, and dynamic video are all powered by JavaScript. JavaScript is a massive programming language with near-limitless potential, but beginner developers should focus on learning the basics—things like syntax, how variables work, conditional statements, and functions.
Last but certainly not least, both front-end designers and back-end developers should get to know version control systems. Version control systems let you track changes to code, enabling multiple people to work on code at the same time without fear of messing up anyone else’s changes. The most popular version control system these days is Git—the vast majority of coding bootcamps and online courses use Git, so it’s the best place for new developers to start.
Front-end web design skills: Responsive design, frameworks, and libraries
Having a working grasp of HTML, CSS, and JavaScript is enough to get you started in the field of web design. Move beyond the basics, though, and you’ll have to choose to develop either front-end or back-end skills.
Mastering front-end web design requires a blend of coding skills and design-savvy. Most new front-end designers start by diving deep into CSS and learning more complex selectors and advanced layout techniques. You’ll also learn to love collaborative design tools like Figma for creating stunning designs.
One concept you’ll get to know quite well is responsive design, meaning dynamic layouts that adjust to look great on any screen size, from big-screen TVs to smartphones. Sites use media queries to control the “breakpoints”—the different screen resolutions at which the user’s browser should switch to a different layout and set of styles. With mobile devices accounting for nearly half of web traffic in 2019, responsive design is an essential skill for any web designer.
Another problem you’ll soon encounter is the sheer amount of time it takes to code all these styles by hand. The style sheets for any given website can often exceed the length of the website code itself. To speed things up, front-end designers use two techniques: they use pre-packaged frameworks to get a head start and CSS preprocessors to minimize the code they need to write.
Front-end frameworks such as Bootstrap come pre-packaged with styles and code examples for commonly used design elements like navbars, checkout flows, and pricing tables. Since the code is well-tested and documented, frameworks can make creating new designs much faster.
CSS preprocessors like Sass make writing style sheets much faster and more intuitive. Instead of copying and pasting similar code entries multiple times, Sass allows you to write one set of styles in a markup language similar to CSS called SCSS. Those styles can be reused as many times as you need. You can also nest styles inside one another, potentially eliminating hundreds of duplicated lines of code.
Since web browsers don’t understand SCSS code directly, though, you need to parse it into vanilla CSS using a build tool like Grunt or webpack. Build tools also come in handy for combining multiple CSS files into one (helping keep your code organized), compressing (or minifying) code to improve download speeds, and even automatically deploying code to a remote web server.
Finally, you’ll learn to love JavaScript frameworks and libraries. JavaScript frameworks are working structures of JavaScript code you can include in your own site to speed up development. Popular JavaScript frameworks in 2019 include Vue, React, and Angular. If you’re new to front-end design, Vue is a great place to start learning.
In contrast, a JavaScript library is a set of standalone components you can take and plug into your own designs, adding additional functionality to the code you already have. The most popular JavaScript library is jQuery, which includes over 300 functions you can use.
On top of all the coding, you’ll need to make sure your designs are beautiful and easy-to-use—and you’ll often find yourself working alongside other designers. While web designers in the past might have used Photoshop to design layouts, most designers these days use purpose-driven tools like Figma or InVision to create designs and mockups. Figma’s a great tool for new designers to start on since they offer a free account without many restrictions.
Back-end web development skills: Coding, content management, and databases
Back-end web development involves a lot of coding. Websites have used dozens of different programming languages, but a few of the most popular include Python, Java, PHP, and Ruby.
Each of these programming languages has its own pros and cons, but the best place to start is to pick one and begin learning it and experimenting with it. You don’t have to learn all of them—many fundamental programming concepts (like looping, for example) carry across almost every language. Choose a language that’s in-demand (if in doubt, start from the top of the chart above) and one that you enjoy learning.
Back-end developers also often set up content management systems, or CMS. WordPress, for example, has come a long way since its launch in 2003—it now powers 34% of all the websites on the internet. Learning WordPress is a great way to grasp the fundamentals of back-end development. You’ll learn about functions and variables, classes, code structure and scope, and much more. You’ll also gain valuable debugging skills and get comfortable with the command line, two essential skills for any back-end designer.
The best way to start learning WordPress is through hands-on experience. GoDaddy Pro can help get your first WordPress site up and running in only a few minutes.
As a back-end web developer, you’ll also work closely with databases that store all the information behind websites in neatly organized and labeled rows and columns, kind of like an Excel spreadsheet. Once you understand the basics, it’s easy to get started. The most popular database system is SQL, or Structured Query Language—most websites (including every WordPress site) use SQL through a software tool called MySQL. So start by learning the basics of SQL.
The best resources for beginners to learn web design
Now you have a handle on which skills you should focus on to become a web designer, it’s time to start learning those skills. Of course, you don’t have to go back to school (unless you want to, of course!)—there are plenty of options for learning at your own pace at a fraction of the cost of a college degree.
Online courses
Online courses are a great way for beginners to learn web design. While many of the best courses do cost money, they provide great value for what you pay, and you can learn from home at your own pace. The main downside of online courses? There’s nobody but you holding yourself accountable, and it’s difficult to ask questions of someone with experience. In workshops and boot camps (which we’ll explain in a minute), your instructors and colleagues will keep you motivated and moving forward.
Options for online courses on web design include the following:
Web design books
Even with all the other mediums you could use to learn web design, there’s still nothing quite like curling up with a book. Authors spend years refining their knowledge, collecting best practices, examples, and tutorials and distilling them into a format you can absorb in a short amount of time from the comfort of your own couch.
When you’re just starting out, you won’t know what interests you yet, so read everything you can. Get started with our list of recommended books for web designers and these free programming books on GitHub.
Blogs for web designers
Over the years, designers have published hundreds of great blog posts covering every web design topic imaginable. If you’re looking for information on a specific topic, Google is your friend—the best place to start is by searching for that topic and seeing what comes up.
The key is to search for the exact term you’re looking for and to know which of the hundreds of sources you can trust. Here are a few suggestions on the best web design blogs to help you cut through the noise.
College courses
College can be a great option for beginner web designers to learn the ropes. Having a degree and professional accreditation can help convince employers to hire you and increase your starting salary or freelance rate. The downside, though, is that college courses can cost a lot more than many of the other options for learning web design and take a lot more time.
Contact your local universities, colleges, and community colleges to learn which courses and degrees in web design they offer.
Workshops and boot camps
If you’re looking to get your web design career rolling fast, boot camps and live workshops are the best options. While many boot camps do cost a lot, they also provide a ton of value. In-person instruction means you’ll learn quickly—a complete course can take six months or less. You’ll also gain industry connections through your instructors to help you find a job and support from your peers as you learn.
The downside? Boot camps are challenging and are only valuable if you’re ready to commit. The only way to speed up the learning process is through hard work—but if you want to switch careers quickly, boot camps can be a great option.
Below are popular options for web design boot camps:
Do it yourself
Last but not least, you can always forge your own path and learn web design on your own. Going at your own pace has its benefits: You can learn from home while you continue working, and learning materials are cheap or often free. Of course, the lack of accountability can hold back some prospective web designers, and having to define your own learning structure can make progress difficult for some. If you go down this path, try to find a mentor: someone experienced in web design who can answer questions and help you stay accountable.
Here are some options for learning web design on your own:
- freeCodeCamp
- Codecademy
- OpenClassrooms
- Bento
- YouTube
- MarkSheet
- JavaScript For Cats
- A Byte of Python
- learnpython.org
- Rails for Zombies
How to gain hands-on web design experience and build your portfolio
No matter how you choose to learn web design, you’ll need to gain some hands-on experience before applying for jobs or pitching clients. While the process of finding projects and pitching your still-limited expertise might feel intimidating, it doesn’t have to be. Here are a few great options for beginner web designers to gain experience and build their portfolios.
Participate in online coding communities
Online coding communities are one of the best ways for budding web designers to contribute to projects and gain experience. You can use open platforms like GitHub to contribute to open-source projects or simply fork (or copy) existing projects on CodePen and mess with them on your own until you understand how they work.
Some platforms, like HackerRank, help you actively improve your coding skills and find a job. Others, like Stack Overflow, let you join a community of coders, answer (and find answers to) questions, and share knowledge. Finally, platforms like Codewars turn learning into a game, letting developers compete on real code challenges while having fun.
Redesign an existing site or web app
Improving an existing website or app and adding your own signature flair is a great way to build your portfolio and show off how you approach design work.
Start paying attention to websites you love and noting what makes them so appealing to you—look for elements like typography, layout, imagery, navigation, and color. How can you replicate those elements in your own design or riff off them to create entirely new designs? What would you improve and why?
Use the Web Inspector or Developer Tools (sometimes called DevTools) in your browser to look at the HTML and CSS code behind anything interesting you come across, and search Google for anything that doesn’t look familiar. You can also play with the HTML and CSS code in the Web Inspector to make quick changes to a website or use tools like Mod&Dot to save and share edits.
Put everything together in a case study showing the changes you’d make. Include a detailed case study explaining your design approach, why you made each decision, and what the outcome or improvement should be from your new design. Case studies like this will automatically put you ahead of 90% of other beginner web designers.
Accept small freelance projects
There’s nothing better than paying clients to motivate you to learn. Even as a beginner web designer, you should try taking on a handful of small freelance projects as side jobs to gain experience and learn if freelancing is right for you.
Tap your network and complete some small, paid jobs for friends and family, or take on unpaid work for non-profits or other clients to find clients. Just make sure you use the experience you gain to create case studies for future prospects and ask all clients for testimonials to include in your portfolio and referrals.
Build your own playground
Every new web designer should start a blog or website of their own to experiment and learn. Hosting platforms like GoDaddy Pro make it incredibly easy to get started with your own site, and it’s a great way to show off your experience (and have fun learning) without the pressure to perform.
David Kadavy, author of Design for Hackers, recommends starting your own blog. “Having a personal project, such as a blog, gives you a place where you can try new things, and your boss won’t fire you if you mess up.”
Reach out to your network for feedback on your design, and share them on social media and on portfolio sites like Dribbble or Behance. Don’t be afraid of looking like a beginner; everyone started at the same place! Listen to the feedback you collect, both positive and negative, and you’ll quickly learn how to improve your designs.
Consider whether freelance work or employment fits you
Now you have some experience and projects under your belt, it’s time to choose a path. New web designers have two main options: working for clients as a freelance web designer or working for an established company.
According to Stack Overflow’s 2019 Developer Survey, nearly three-quarters of respondents identify as being employed full-time, with around 10% listing themselves as freelancers or independent contractors. Both have their pros and cons, and you need to make your decision based on what you want to get out of your web design career.
Remember, too, there’s no fixed path. If you try freelancing and discover it isn’t for you, you can always find an in-house position with an established company. Web design skills are always in high demand!
Become an in-house web designer
The most common career option for new web designers is full-time employment. In-house web designers usually work as part of a design team, working either on marketing sites like landing pages and content management systems or designing web apps for startups.
Working for an established company brings a consistent and reliable income (most web designers and developers are paid quite well), as well as benefits like health insurance and paid time off. You’ll also be working alongside an experienced team of designers and developers with plenty of opportunities to learn.
If there’s one main downside to full-time employment, it’s that you’re working on someone else’s projects, so there won’t be as much variety in the work.
Become a freelance web designer
Instead of working for a single employer, freelance web designers work directly for clients. One week, you might be working on designing a new blog for a client, and the next, you might be helping another improve conversions on their ecommerce site.
Going out on your own as a full-time freelance web designer can be a highly lucrative path, but it’s also a path fraught with extra difficulties. Yes, you’ll find clients who pay more, and you’ll be able to work when and where you want. But you need to weigh how important flexibility is to you against the lack of a consistent income, benefits, and paid time off, not to mention all the extra work that comes with marketing your services.
Our recommendation: Start by experimenting with your own projects
Our recommendation? Start with your own project, where you are your first customer, and then consider moving in-house or going freelance.
Once you have some experience and some projects under your belt, it’ll be a lot easier to find employers or freelance clients willing to hire you—plus, you can always transition slowly from full-time to freelance without the financial pressure of making the leap before you’re ready.
Where to find web design jobs
Whether you’re going freelance or searching for an in-house position, you’ll eventually begin the search for your first job. Finding your first client or getting hired for that dream job might seem like a pipe dream right now, but once you have a grasp of the basics of web design and have a little experience under your belt, it won’t be difficult to find work and start growing your career.
There are many ways to find your first web design job—let’s look at a few of the most popular.
Search general job boards
Most general job board sites like Indeed, Monster, and LinkedIn will let you filter by “web design” to find relevant jobs. If you’re freelancing, you can also check freelancing sites like Upwork or Freelancer to find clients looking for web designers.
Start by looking for entry-level roles, but don’t be intimidated by jobs asking for a minimum of a few years’ experience. Use your portfolio to show your progress and skills, promote yourself as a proactive and fast learner, and you might find yourself with plenty of interviews, despite those experience requirements.
Search dedicated design and development job boards
In addition to general job boards, there are also plenty of popular job boards dedicated to design and development roles. Companies often avoid the more general job boards in favor of more technology-focused options, so these boards can be a great place to find jobs that might not be listed on the bigger sites.
Below are some of the best web design and development job boards:
Tap your network
Another great place to start your search is by tapping your existing network. Reach out to friends and family, current and past colleagues and workmates, and anyone else you can think of. Let them know you’re seeking out web design positions, and ask if they know anyone they could introduce you to.
You can also try expanding your network by visiting meetups and other local networking opportunities. Events aimed at other web designers and developers (for employees), as well as events aimed at prospective clients (for freelancers) can be great ways to build new connections and uncover job opportunities that might otherwise go unnoticed.
Check social media
Last but not least, don’t forget the power of social media. If you’ve been sharing updates on your projects and what you’re learning, you’re likely already catching the attention of prospective clients and employers. Don’t be afraid to mention that you’re looking for work, and ask for shares, retweets, or recommendations from others in your network. You can also use LinkedIn to search for jobs or Twitter to search for hashtags and posts advertising jobs that match your interests.
Start learning web design today
Starting a new career as a web designer in 2019 can be an exciting and intimidating prospect. After all, there are so many web designers already out there with more experience than you.
Don’t be afraid. Every single one of those designers and developers once stood exactly where you are right now. Yes, a career in web design takes hard work, perseverance, and maybe even a little bit of luck, but we know you can do it.
Now get out there, and start learning!
Header photo by Mia Baker on Unsplash
The post Learn web design in 2019: Everything you need to know appeared first on GoDaddy Blog.