Building Stronger Front-end Practices

Front-end trends come and go but at the core of all of these tools, they are still HTML, CSS and JavaScript. You'll take it back to the basics but also will dive in a little deeper to gain a better understanding of front-end languages.
Course info
Rating
(115)
Level
Intermediate
Updated
Aug 12, 2016
Duration
2h 2m
Table of contents
Description
Course info
Rating
(115)
Level
Intermediate
Updated
Aug 12, 2016
Duration
2h 2m
Description

At the core of developing the front end architecture of any website is a thorough knowledge of not only HTML and CSS but also how to use these languages effectively. In this course, Building Stronger Front-end Practices, you'll learn how to make your projects more maintainable, flexible and scalable. First, you'll learn HTML organization and semantics. Then, you'll learn how to write efficient CSS and create modular code structures. Lastly, you'll learn how to establish a style guide for your projects and code base. When you're finished with this course, you'll have a stronger foundational knowledge of front-end technologies that will help you as you move forward to build better projects and be able to apply best practices, no matter what front-end tools you choose.

About the author
About the author

Christina has a decade of experience in the tech industry as a front-end developer. She has worked with top digital agencies as well as headed up the front-end development for a software company.

Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Christina Truong, and welcome to my course, Building Stronger Front-End Practices. I've been a front-end developer for about 10 years, and an educator for about 4 years, and have seen a lot of change during that time. In this course we're going to take it back to the basics, but also dive a little deeper to gain a better understanding of front-end languages, specifically, HTML and CSS. Some of the major topics that we will cover include HTML5 semantics, best practices and optimization techniques, writing modular and efficient CSS, establishing a style guide for your projects and codebase. By the end of this course, you'll gain a more thoughtful approach to writing your code, planning and setting up your projects, and evaluating which tools, if any, need to be incorporated into your front-end architecture. Before beginning this course, you should be familiar with the basics of HTML and CSS. A bit of JavaScript might be useful, but not necessary. I hope you'll join me in this journey to learn more thoughtful approaches to writing front-end code with the Building Stronger Front-End Practices course at Pluralsight.

Writing Semantic & Accessible HTML5
Writing HTML is the first step when creating a website, but often, it seems that this step gets the least amount of attention. Whether you use a framework like Bootstrap or Ember, or just straight up HTML, understanding these best practices of the underlying language and the semantics of HTML elements will make your website or web app more accessible, and can help keep the code from getting unnecessarily bloated by knowing when and which HTML elements to use. In this module we'll start with going over the design and planning the project. Next I'll talk briefly about improving your workflow with plugins and keyboard shortcuts, then we'll dive into the semantics of HTML to assign meaning to the content to effectively communicate with the browser. The focus will mainly be about the elements used for page layouts, and how HTML5 sectioning elements have changed the document outline and the heading hierarchy.

Establishing a Style Guide
Working with CSS can feel a little bit like this, make one change and something else changes, or worse, it breaks, so you have to figure out how to put it back or increase specificity to override legacy styles, making new styles even less flexible. Even with the best of intentions it can easily get out of hand. But planning, establishing, and enforcing a style guide for the codebase may require more time at the beginning of the project to set up, but it will help in the long run. In this module we'll look at things to consider when creating a style guide for your code. Whether working on a team or independently, consistency will help your workflow, and aid in collaboration. Merge conflicts, compiler errors, and issues will always arise, but being organized and doing some planning at the beginning and establishing these rules and guidelines can help reduce technical debt later on, and create a consistent approach to developing your projects. When learning to code, or learning a new language or tool, the focus is on figuring how to make it work. To get better, and grow as a developer, the focus shifts to how to make it work better, and that often comes with planning for things like scalability, ease of use for new and existing team members, and writing code in a way that makes the most efficient use of the person's time and expertise, as well as knowing which tools or methodologies will work best for the project, and not just using the latest trends. This blog post does a really good job of articulating the stages of growth as a developer. In this module we'll go over different ideas for consideration when establishing a style guide for your code. We'll start out with using IDs vs classes for CSS. Next, establishing naming conventions, as well as using consistent formatting. We'll also talk about how to use comments to organize and document your code, and whether reset stylesheets should be included in your projects. I'll also apply these principles to the sample project, to see how these theories can be applied to an actual project, and the thought process behind it.

Writing Modular CSS
In the last module we talked about general project organization and creating a style guide for coding conventions. In the project exercise we started to apply some of those organizational principles into the CSS structure. In this module, we'll start out with defining patterns, categories, and guidelines for creating and maintaining a modular CSS codebase. Next we'll talk about how to maintain this type of codebase, and get a primer on CSS preprocessors, specifically Sass, to aid in setting up an efficient dev environment and workflow. Then, we'll jump into a project example and build out a module. Finally, we'll explore the how and the why for creating a style guide reference for your web components and modules, and we'll finish with breaking down a sample style guide based on the course project, and a little bit more about Sass.

CSS Fundamentals & Best Practices
In this module, we'll focus on various foundational CSS topics, and explore the why and the how. We'll start with looking at the navigation using links only, or with the list using the CSS display property. Next, we'll move on to floats, and how it stacks up to display, as well as their quirks for aligning and laying out elements. We'll also explore using Sass mixins, the concept of helper classes, and an intro to the flexbox layout. Then, we'll do an overview of different length units, advanced selectors, and making your base CSS fluid and flexible. We'll finish with some tips for optimizing your CSS and JavaScript selectors. Let's get started.