WEB DESIGNER CAREER BLUEPRINT

Size: px

Start display at page:

Download "WEB DESIGNER CAREER BLUEPRINT"

Lorena Brown
5 years ago
Views:

WEB DESIGNER CAREER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help.

Join your Skillcrush classmates in the student community!

START YOUR ORIENTATION: Welcome to Skillcrush!

Learn how to plan a web design project from start to finish.

2 WEB DESIGNER CAREER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help. CONFUSION IS GOOD :) Seriously, it s scientific fact. Read all about it! REMEMBER, YOU ARE NOT ALONE! Join your Skillcrush classmates in the student community! GET THE SUPPORT YOU NEED Find out all the ways you can get help here! BEFORE YOU BEGIN! START YOUR ORIENTATION: Welcome to Skillcrush! GENERAL OBJECTIVES CLASS GOALS Design a responsive website ready to be launched on the web. Learn how to plan a web design project from start to finish. Prioritize changes and make site revisions based upon client needs and feedback. CONSTRUCT WIREFRAMES AND USER-FRIENDLY DESIGN COMPS USING ADOBE XD WEB DESIGN SOFTWARE. DESIGN, CODE, AND LAUNCH RESPONSIVE WEBSITES USING INDUSTRY BEST PRACTICES. LEARN HOW TO GATHER, PRIORITIZE, AND IMPLEMENT USER FEEDBACK ON WEBSITE DESIGNS. PLAN AND COMPLETE A ONE-PAGE WEB DESIGN PROJECT FROM START TO FINISH.

3 SKILLCRUSH 100: WEB DESIGN FUNDAMENTALS In this class, you ll learn the vital skills all web designers need, including how to plan a web design project from start to finish, build a user-friendly site structure, and create a gorgeous web design everyone will love! By the end of this class, you ll be able to wireframe and design a portfolio-worthy, one-page responsive website using Adobe XD and your brand new web design skills. PROJECTS: Digital wireframe, custom style tile (including custom color scheme and typescale), and a final packaged web design comp. GET STARTED WITH WEB DESIGN SKILL LESSONS 1-5 Intro to Web Design Web Design Workflow Structure, Navigation, and Layout Mobile First Design Web Design Software Adobe XD LEARN THE FUNDAMENTALS OF DESIGN SKILL LESSONS 6-10 How to Build a Wireframe All About Grid Systems Design Elements Principles of Design Color Theory Typography & Type Scales PUT IT ALL TOGETHER SKILL LESSONS Creating a Cohesive Design Design Patterns & Trends Web Graphics, Images, & Icons Feedback & Revisions Polishing Your Final Project

4 SKILLCRUSH 101: HTML & CSS In this class, you will learn how to code in HTML and CSS, and then build and launch your online portfolio! PROJECT: A striking portfolio website built by you! Your portfolio website will include a stylish design and you ll have the option of building a single-page or multiple page site. ALL THINGS HTML SKILL LESSONS 1-8 Intro to HTML All About HTML Tags Making Ordered and Unordered Lists Images, Attributes, and Links Organizing HTML with Divs & HTML5 Embedding Objects with iframes Head, Body, and Meta Tags HTML Best Practices MAKE YOUR PAGE LOOK PRETTY WITH CSS SKILL LESSONS 9-16 Intro to CSS Styling Text Font Files & Web Fonts Backgrounds, Colors, and Borders, Oh My! Height, Width, and the Box Model Differentiating Between Elements: Classes & IDs! Layouts & Floating LAUNCH YOUR WEBSITE SKILL LESSONS Coding & Launching a Site Setting Up Your HTML Structure Checking Your Code Styling Your Layout with CSS All About Domains & Hosting Customizing Your Website

5 SKILLCRUSH 105: GIT, GITHUB, & THE COMMAND LINE Learn the basics of the most popular version control system that all the pros use. This class will teach you how to use the command line, Git, and GitHub. PROJECT: Collaborate and add to a group project using a a proper Git workflow. HOW TO USE VERSION CONTROL SKILL LESSONS 1-12 Intro to the Command Line Intro to Git & How to Install Git Your First Repository & Git Commands Branches, Merging, and Errors Getting Started with GitHub & GitHub Basics BONUS Working with Teams on GitHub

6 SKILLCRUSH 206: RESPONSIVE WEB DEVELOPMENT In this class, you ll learn fundamentals of responsive web design, including how to set up your code according to industry standards, use media queries to set breakpoints in your code for different screen sizes, make responsive typography and images, and how to code responsive layouts using Flexbox. PROJECTS: 2 responsive websites + 3 Flexbox websites. STRUCTURE YOUR RESPONSIVE WEBSITES SKILL LESSONS 1-5 Intro to Mobile First Structuring Your Files (& File Naming Cheatsheet) Working with Browser Inspectors Adding Media Queries to Your Project Setting Up Breakpoints Responsive Typography & Google Web Fonts TAKE THINGS TO THE NEXT LEVEL WITH FLEXBOX SKILL LESSONS 6-10 Intro to Flexbox Using Flexbox Grids Using Flexbox Layouts Getting Started with a Boilerplate Making Your Project Fluid Responsive Grids in Action PUTTING ON THE FINAL TOUCHES SKILL LESSONS Coding Your Styles Adding Responsive Images Responsive IFrames Intro to Icon Fonts & Font Awesome Finishing Your Project Testing Your Website

FRONT END DEVELOPER CAREER BLUEPRINT

FRONT END DEVELOPER CAREER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help. CONFUSION IS GOOD :) Seriously, it s scientific fact. Read all about it! REMEMBER, YOU ARE NOT ALONE!