CSS, or Cascading Style Sheets, is responsible for the way a website looks. Colors, fonts, and even some animations are all controlled by CSS. Like HTML, CSS isn’t a programming language. It’s a text document that reads like an interior designer’s instructions for making a website look great.
- Syntax: The general rules defining how a language is typed
- Data types: The different types of variables the language supports (for example, strings and integers)
- Functions: A block of code designed to perform a particular task
- Design Patterns: A design pattern is a reusable solution to a commonly occurring problem
- AJAX: AJAX provides the ability to asynchronously request data from a web server without requiring a page reload
- j Query: jQuery is an extremely popular library that makes cross-browser DOM traversal and manipulation, event handling and AJAX much simpler
4. Responsive Web Design
Open a website and make your browser smaller. Did the page content change its layout to fit the new screen? That’s responsive design. People expect modern websites to look great on their phones, tablets and laptops. By diving into responsive design principles, you’ll learn how to make websites that scale and adjust themselves to offer amazing experiences regardless of the device.
- @ media queries: Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself
- Relative sizing units: CSS provides many other units of measurement than
just pixels (px), such as em, rem, vw, vh and vmin
5. CSS Frameworks
Bootstrap is a good example of a CSS framework. Frameworks make it easy to structure and build websites. They provide custom CSS classes that simplify laying out content and ensure that your content looks great no matter the device. Frameworks can help you follow industry best practices and modern design principles.
- Bootstrap: Bootstrap is a CSS framework, originally developed at Twitter, that makes creating responsive designs much simpler.
- Foundation: Foundation is another CSS framework, developed by Zurb, that
also makes creating responsive designs easier
- AngularJS: features two-way data binding and allows you to extend HTML
vocabulary to create front-end web applications
- EmberJS: removes the need for boilerplate code through the use of strict file and object naming conventions
- KnockoutJS: makes creating data-driven applications easier through its
declarative binding system
7. Version Control
With complex projects, how do you maintain your code? Version control software like Git helps software developers around the world save and maintain their code, even as projects grow to hundreds of developers and dozens of subprojects.
- Git: Git is a distributed version control system
- GitHub: GitHub is a web-based hosting service for Git repositories that offers a number of other features to support collaboration between developers forking pull requests
8. Web Performance
Once you’ve made your website, how will you ensure it’s fast? By understanding a few simple principles of browser rendering, you’ll be able to make sure that you deliver fast, efficient websites to your users.
- Image optimization: Image optimization is the process of using proper image types for the content of the image as well as removing the extra metadata within an image file
9. Browser Developer Tools
In building your web applications you are destined to experience bugs in your code, performance issues, or quirks in how your pages are rendered by the browser. The only way to fix these issues is to understand how the browser is actually interpreting your code. Browser developer tools provide all the nitty-gritty details and are your window “under the hood” to test, measure and iterate on your code.
- E lement inspecting: The elements panel lets you see everything in one DOM tree and allows inspection and on-the-fly editing of DOM elements
- Network: The network panel records information about each network operation in your application
- Timeline: The timeline panel lets you record and analyze all the activity in your application as it runs
- Application profiling: The profiling panel lets you observe the memory usage of your application as it runs
- Resources: The resources panel lets you inspect resources that are loaded into your application
10. Building and Automation Tools
There’s a lot more to building a web application than just writing code! You have to run test suites, optimize images, adhere to your organization’s code style guides and even prepare your code for deployment on a production server. That’s a lot of extra, repetitive, and often mundane work to be done. Building and Automation Tools like Grunt and Gulp can handle running all of these tasks for you in the background so you can focus on building a great web application.
- npm: npm is the default package manager for Node.js, which is the framework that most build and automation tools are written in
- Grunt: Grunt is a task-based command line build tool that interacts with files on your hard disk
- Gulp: Gulp is a program-based command line build tool reads files on your
hard disk, then interacts with those files as streams
- Yeoman: Yeoman is a scaffolding application that will automatically generate boilerplate code for a variety of applications based on the frameworks and libraries you define
As your application becomes more complex it become quite easy to introduce bugs or completely break existing functionality. Unit, integration and behavior testing are excellent ways to ensure that you don’t break your application when you are adding new features. Examples of excellent testing frameworks include Mocha and Jasmine.
- Jasmine: Jasmine is an open source, behavior-driven testing framework for