4. CSS Properties – Part 1 | Web Developer's Reference Guide

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Web Developer's Reference Guide

By : Joshua Johanan, Talha Khan, Ricardo Zea

4.7 (3)

Web Developer's Reference Guide

4.7 (3)

By: Joshua Johanan, Talha Khan, Ricardo Zea

Overview of this book

This comprehensive reference guide takes you through each topic in web development and highlights the most popular and important elements of each area. Starting with HTML, you will learn key elements and attributes and how they relate to each other. Next, you will explore CSS pseudo-classes and pseudo-elements, followed by CSS properties and functions. This will introduce you to many powerful and new selectors. You will then move on to JavaScript. This section will not just introduce functions, but will provide you with an entire reference for the language and paradigms. You will discover more about three of the most popular frameworks today—Bootstrap, which builds on CSS, jQuery which builds on JavaScript, and AngularJS, which also builds on JavaScript. Finally, you will take a walk-through Node.js, which is a server-side framework that allows you to write programs in JavaScript.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. HTML Elements

1. HTML Elements

DOCTYPE

html

Document metadata

Semantic content sections

Content sections

Inline elements

Embedded content

Tables

Forms

Drawing elements

2. HTML Attributes

2. HTML Attributes

Global attributes

Miscellaneous

3. CSS Concepts and Applications

3. CSS Concepts and Applications

Basic selectors

Combinators

Pseudo-classes

Validation

Pseudo-elements

Generated content

4. CSS Properties – Part 1

4. CSS Properties – Part 1

Animation

Background

Box model

Border radius

Unit

Flexible box (flexbox)

Summary

5. CSS Properties – Part 2

5. CSS Properties – Part 2

Fonts

Transform

Positioning

Text

Tables

Words and paragraphs

Paging

6. CSS Properties – Part 3

6. CSS Properties – Part 3

Page box

List

Counter

Drop shadows

Display and visibility

Masking and clipping

Image rendering and orientation

User interface

3-Dimensional

Summary

7. CSS Functions

7. CSS Functions

Filter

Colors

Gradients

Values

Miscellaneous

At-rules

Global CSS keyword values

Summary

8. JavaScript Implementations, Syntax Basics, and Variable Types

8. JavaScript Implementations, Syntax Basics, and Variable Types

History of JavaScript

JavaScript implementations

The language syntax

The character set

Data type

Variable, scope, and memory

9. JavaScript Expressions, Operators, Statements, and Arrays

9. JavaScript Expressions, Operators, Statements, and Arrays

Expressions

Operators

Statements

Arrays

10. JavaScript Object-Oriented Programming

10. JavaScript Object-Oriented Programming

Polymorphism

Objects

Functions and methods

Classes and modules

Inheritance

Built-in objects

11. Extending JavaScript and ECMAScript 6

11. Extending JavaScript and ECMAScript 6

Compatibility and goals

JavaScript subset and extensions

Scoped variables and constants

Shorthand functions

Multiple catch clauses

E4X – ECMAScript for XML

ECMAScript 6 features

12. Server-side JavaScript – NodeJS

12. Server-side JavaScript – NodeJS

File and process management

Utilities

The net module

The HTTP module

13. Bootstrap – The Stylish CSS Frontend Framework

13. Bootstrap – The Stylish CSS Frontend Framework

Introduction to Bootstrap foundations

Getting started

Layouts

The grid system

Typography

Tables

Lists

Forms in Bootstrap

Images

Navigation elements

The navigation bar

Panels

Breadcrumbs

Labels and badges

Pagination

Progress bars

Advanced Bootstrap/JavaScript plugins

Customizing Bootstrap

Websites built with Bootstrap

Bootstrap resources

14. jQuery – The Popular JavaScript Library

14. jQuery – The Popular JavaScript Library

The evolution of JQuery

Getting started

Using jQuery

Selectors

Events

Effects and animations

Callback

Chaining

jQuery and the document object model

jQuery traversing

Using AJAX in jQuery

Miscellaneous jQuery functions

jQuery plugins

jQuery resources

15. AngularJS – Google's In-Demand Framework

15. AngularJS – Google's In-Demand Framework

Modules (ngApp)

Routing (ngRoute)

Dependency injection

Controllers

Scope

Services

Promises

Expressions

Directives

Globals

Forms

Testing

Index

Index

Animation

Unlike the old days of Flash, where creating animations required third-party applications and plugins, today we can accomplish practically the same things with a lot less overhead, better performance, and greater scalability all through CSS only.

Forget plugins and third-party software! All we need is a text editor, some imagination, and a bit of patience to wrap our heads around some of the animation concepts CSS brings to our plate.

Base markup and CSS

Before we dive into all the animation properties, we will use the following markup and animation structure as our base:

HTML:

<div class="element"></div>

CSS:

.element {    
  width: 300px;
  height: 300px;
}
@keyframes fadingColors {
  0% {
    background: red;
  }
  100% {
    background: black;
  }
}

In the examples, we will only see the .element rule since the HTML and @keyframes fadingColors will remain the same.

Tip

The @keyframes declaration block is a custom animation that can be applied to any element. When applied...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Web Developer's Reference Guide

Search

Your notes and bookmarks