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
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.