Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Professional CSS3

You're reading from   Professional CSS3 Harness the power of CSS3 to design stunning, modern websites

Arrow left icon
Product type Paperback
Published in May 2016
Publisher Packt
ISBN-13 9781785880940
Length 362 pages
Edition 1st Edition
Languages
Concepts
Arrow right icon
Author (1):
Arrow left icon
Piotr Sikora Piotr Sikora
Author Profile Icon Piotr Sikora
Piotr Sikora
Arrow right icon
View More author details
Toc

Table of Contents (16) Chapters Close

Preface 1. Foundations and Tools FREE CHAPTER 2. Mastering of Fundamentals 3. Mastering of Pseudoelements and Pseudoclasses 4. Responsive Websites – Prepare Your Code for Specific Devices 5. Using Background Images in CSS 6. Styling Forms 7. Resolving Classic Problems 8. Usage of Flexbox Transform 9. Calc, Gradients, and Shadows 10. Don't Repeat Yourself – Let's Create a Simple CSS Framework 11. Mailers Fundamentals 12. Scalability and Modularity 13. Code Optimization 14. Final Automatization and Processes Optimization Index

Choosing the right IDE

Building CSS code is pretty simple. If you want to start, you just need a simple text editor and start writing your code. If you want to speed up the process, you will need to choose the right text editor or integrated development environment (IDE). Currently the most popular editors/IDEs for frontend developers are as follows:

  • Sublime Text
  • Atom
  • WebStorm/PHPStorm
  • Eclipse/Aptana
  • Brackets

Your choice will be based on price and quality. You should use the editor that you feel most comfortable with.

Speeding up the programming process with snippets/Emmet

When you are creating a code, you have parts of codes that you repeat in all projects/files. You will need to create snippets that will help you to speed up the process of writing code. As a frontend developer, I recommend you to get a basic knowledge about Emmet (previously Zen Coding). This is a collection of HTML/CSS snippets, which will help you build code faster. How to use it? It is basically included in modern frontend editors (Sublime Text, Atom, Brackets, WebStorm, and so on). If you want to check how Emmet works in CSS you need to start a declaration of some class for example .className, open the brackets ({}) and write for example:

pl

Then press the Tab button, which will trigger the Emmet snippet. As a result, you will get the following:

padding-left

Following are examples of the most used properties and values:

Emmet form

Result

bg

Background

bgc

Background color

m

Margin

ml, mr, mt, mb

Margin-left, margin-right, margin-top, margin-bottom

ml20px

Margin-left: 20px

c

Color

fl

Float: left

p20px20p

Padding: 20px 20%

tac

Text-align: center

tdn

Text-decoration: none

ttu

Text-transform: uppercase

dib

Display: inline-block

!

!important

For a better understanding of Emmet and to get a full list of features, it is recommended to check the official website of the project at: http://emmet.io/.

Keyboard shortcuts

Do you remember when you learned the most impressive keyboard shortcuts Ctrl + C ,Ctrl + V? It helped you to save about 2 seconds each time you wanted to make an operation of copying and pasting some text or any other element. But what about automizing some processes in building code? Yeah, it's going to be helpful and you can do it with keyboard shortcuts.

Shortcuts that you should know in your IDE are as follows:

  • Duplicating line
  • Deleting line
  • Moving line
  • Formatting code
You have been reading a chapter from
Professional CSS3
Published in: May 2016
Publisher: Packt
ISBN-13: 9781785880940
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime