Kotlin is a programming language that was released in 2011 by JetBrains, a company that sells integrated development environments (IDEs) for programming languages. Since then, it’s become a favorite language for developers and replaced Java in many software projects.

In this article, we’ll look at why Kotlin became popular, its advantages, and what it’s used for.

What are the advantages of Kotlin?

Kotlin’s creation arose after Lead Developer Dmitry Jemerov sought features he couldn’t find in Java. Scala, another language that runs on the Java Virtual Machine (JVM), was close to what he wanted, but it took too long to compile.

Jemerov wanted a language that had all the features of more modern programming languages, would run on the JVM, and would compile as fast as Java. So he created his own language, Kotlin.

Kotlin was designed as a replacement for Java on the Android operating system. Eight years after it was released, in 2019, Google finally agreed with Jemerov and most Android developers and announced that Kotlin was the preferred language for Android app development.

Here are some reasons developers prefer Kotlin to Java:

• Kotlin is concise, saving time that you’d otherwise spend writing boilerplate code in Java.
• You can convert a Java file into a Kotlin file with just a script.
• Kotlin has no runtime overhead. Sometimes, adding features to a language means it has more overhead, which lowers its performance. Not so with Kotlin.
• Kotlin has a large community. If you ever get stuck, you can easily find other developers to help you on coding forums and social networks.
• Kotlin streamlines asynchronous programming. Making network and database calls asynchronously in Java is clumsy and painful. Kotlin has coroutines that make asynchronous programming simple and efficient.
• Kotlin handles nulls. A null in Java can crash a program if you haven’t prepared for it. In Kotlin, you can add a simple operator to variables that may be null to prevent these crashes.
• Kotlin can run on multiple platforms. Kotlin can run anywhere Java runs, so you can use it to build cross-platform apps.
• It’s easy to switch to Kotlin. Kotlin is fully compatible with Java, so you don’t have to change all your code at once. You can slowly migrate an application to use Kotlin.

What is Kotlin used for?

Kotlin is designed to run on a Java Virtual Machine and can run side by side with Java. Although Kotlin first started as a language for Android development specifically, it quickly spread through the Java community because of its features and has since been used for many types of applications.

Android development

As we mentioned, Kotlin is the preferred language for Android development as it allows developers to write more concise, expressive, and safer code. The official IDE for Android development, Android Studio, supports it completely, so you can get the same type of code completion and type checking to help you write Kotlin code as you do with Java.

Having a mobile presence is a requirement for most businesses since most people access the internet now through mobile phones. Android accounts for over 70% of the market share of mobile phones, so even if Kotlin was only for Android development, Kotlin developers would be in high demand. Still, it can be used for so much more.

Back-end web development

A lot of back-end web development is done in Java, using frameworks like Spring. But, Kotlin made inroads into server-side web development since it was so much easier for developers to work with.

The modern features of the language make it possible for Web Developers to build applications that can scale quickly on commodity hardware. Since Kotlin is interoperable with Java, you can slowly migrate an application to use Kotlin one file at a time while the rest of the application still uses Java.

Kotlin also works with Spring and other frameworks, so switching to Kotlin doesn’t mean you have to change everything you’re used to. Google, Amazon, and many other companies have already replaced Java with Kotlin in some of their server-side code.

Full-stack web development

It makes sense to use Kotlin for server-side web development. After all, Java has been used since its inception. Still, you can also use Kotlin for front-end development using Kotlin/JS.

Kotlin/JS allows developers to access powerful browser and web APIs in a type-safe fashion. Full-Stack Developers only need to know Kotlin. They can write front-end code in the same language that they used for back-end code, and it’ll be compiled to JavaScript to run in the browser.

Data science

Data Scientists have always used Java to crunch numbers, detect trends, and make predictions — so it only makes sense that Kotlin would find a home in data science as well.

Data Scientists can use all the standard Java libraries that they used for Java projects but write their own code in Kotlin. Jupyter and Zeppelin, two tools used daily by many Data Scientists for data visualization and exploratory research, also support Kotlin.

Multi-platform mobile development

Kotlin Multi-platform Mobile is intended to be a software development kit for creating cross-platform mobile applications. This means that from one Kotlin code base, you’ll be able to compile apps that run on not just Android phones but also iPhones and the Apple Watch. This project is currently in the alpha stage but has a lot of promise.

Learn more about Kotlin

Kotlin is a modern programming language that can run side by side with Java while being easier to write. If you want to develop Android apps or multi-platform applications with the JVM, you can do it quicker and simpler with Kotlin than with Java.

Ready to learn more? Our Learn Kotlin course is perfect if you’re a new developer or new to the Kotlin language. It’ll introduce you to fundamental programming concepts and teach you how to write Kotlin code.

Kotlin Courses & Tutorials | Codecademy

Kotlin is a modern, general-purpose programming language developed by JetBrains. Its full compatibility with Java and concise syntax makes it an appealing language for web development, Android development, and more.

Mobile Development Courses & Tutorials | Codecademy

Every year more and more people rely on mobile devices to meet their needs. Where websites used to be the gold-standard, people now rely on mobile apps. The technologies used to create these apps are expanding and improving quickly, so it’s an exciting time to start learning Mobile Development!

Code snippets are blocks of code that are usually:

• Shared between developers.
• Added to articles and blog posts, like this one.
• Posted on cheat sheets.

Code snippets save a lot of development time. With them, you don’t need to reinvent the wheel or delve into a language’s documentation. In other words, they’re great if you just need a solution to finish up a project.

If you’re a Front-End Developer who’s been working in JavaScript all day, writing good CSS can be frustrating. Or, if you’re a Full-Stack Developer, you must do this as well as work on the back-end code of an application.

To make this process a little smoother, we’ve collected 30 useful CSS snippets that’ll help you style your app.

3 CSS snippets for shadows and gradients

The snippets below will help you get shadows just right.

1. Add a shadow to borders or images

This will make your borders and images stand out on your page.

.shadow {
  box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
}

2. Add a shadow to text

You can even add a shadow to your text if you want the text to be more visible.

.text-with-shadow { text-shadow: 4px 4px 8px #000; }

3. Add a linear gradient

You don’t need an image to create a gradient — you can do it with pure CSS. Play around with the to and from values below and see what you get.

.gradient { background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff)); background: -moz-linear-gradient(top, #000000, #ffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); }

6 CSS snippets for images

Make your images do what you want them to using the CSS snippets below.

4. Use an image as a border

You don’t have to settle for the default borders. You can set your own using an image.

/* You have 3 options for the type of border (repeat / round / stretch) */
bordered-image { border-width: 20px; -moz-border-image: url(border.png) 30 30 stretch ; -webkit-border-image: url(border.png) 30 30 stretch; }

5. Add a loading image for images

If you have large images on your page that take time to load, you can use the following CSS snippet to load a smaller loading graphic until the full-size pictures appear.

img { background: url(loader.gif) no−repeat 50% 50%; }

6. Create a button rollover sprite

The CSS code below will create a hover effect for a button. When it’s hovered, the image will move down.

a.button { display: block; background: url(button.png) no-repeat; height: 50px; width: 150px; } a.button:hover { background-position: 0 -50px; }

7. Flip an image

If you need to add a caret image to an accordion, you don’t need a separate image for both the up and down carets. Just flip one of the images using CSS like this:

img.flipped { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }

8. Rotate an image

The CSS code below will rotate an image. Adjust the degrees to fine-tune it to what you need.

/ for Firefox, Safari, and Chrome /
img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);
/ for IE /
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
/ for Opera /
-o-transform: rotate(90deg); }

9. Create a full-screen background

The CSS below will cover your HTML page with the background image.

html { background: url('background-image.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

6 CSS snippets for text and fonts

Below are some style snippets that’ll help you with the fonts and text on your page.

10. Create a drop cap title

This CSS will make the first letter in each paragraph a larger font than the rest.

p:first-letter { display:block; margin:5px 0 0 5px; float:left; color:#000; font-size:60px; }

If you want to show your company’s logo instead of header text but keep the text for SEO purposes, here’s how you would do that.

h1 { text-indent:-9999px; margin:0 auto; width:300px; height:200px; background:transparent url("logo.jpg") no-repeat scroll; }

12. Resize a background image

You don’t have to make the background image the same size as an element to fit it. You can adjust the size with CSS.

resize-image { background:url(image_1.png) top left no-repeat; -moz-background-size: 200px 300px; -o-background-size: 200px 300px; -webkit-background-size: 200px 300px; }

13. How to use @font-face

If you use the CSS @font-face rule, you don’t have to use web-safe fonts. You can define a name for the font you can use throughout your CSS file.

@font-face { font-family: 'NameYourRont'; src: url('font-webfont.eot?') format('eot'), url('font-webfont.woff') format('woff'), url('font-webfont.ttf') format('truetype'), url('font-webfont.svg#svgFontName') format('svg'); }

14. How to use Google fonts

Using Google fonts means you don’t have to mess with font files. Here’s how to add a Google font to your CSS.

Add this to the head of your html file:

Add this to your CSS file:

body { font-family: 'Droid Serif', serif; }

15. Add a custom background color to selected text

Using the CSS below, you can make the background of text selected by a user blue (#0000ff).

p { ::selection { background: #0000ff; } ::-moz-selection { background: #0000ff; } ::-webkit-selection { background: #0000ff; } }

2 CSS snippets for reset

CSS resets will return your styles to a consistent baseline. Here are some snippets for resetting your styles.

16. Reset backgrounds

This CSS will reset the background of your web page to the default styles.

{ color: black !important; background-color: white !important; background-image: none !important; }

17. Reset links

This CSS will reset the links on your web page to the default styles.

a:link { font-weight: bold; text-decoration: underline; color: #06c; }

2 CSS snippets for corners

These CSS snippets will add something extra to corners in your page.

18. Make every corner rounded

The border-radius CSS property is used to make rounded corners. Here’s an example that’ll round all the corners of an element. You can adjust the radius by adjusting the pixel size.

.round{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -khtml-border-radius: 5px; }

19. Make some corners rounded

You don’t have to apply rounded corners to the whole element. You can also do this selectively.

.top-right { height: 50px; width: 100px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; } .top-left { height: 50px; width: 100px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; } .bottom-right { height: 50px; width: 100px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; } .bottom-left { height: 50px; width: 100px; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; }

11 CSS snippets for other page features

20. Create a pull quote

Many articles and blog posts use pull quotes to emphasize some text in the content. Here’s a simple way to do that. Adjust if necessary.

.quote { width: 300px; float: right; margin: 10px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #777777 ; }

21. Center a page horizontally

In today’s world, you can never count on what resolution people will view your site at. An easy way to not worry about this is centering the page with the CSS below.

.wrapper { width: 1024px; margin: auto; }

22. Add page breaks for printing

When you print a web page, sometimes it doesn’t turn out the way you expect. The code below will break the page at a specific CSS selector when printed.

.new-page { page-break-before:always; }

23. Center content vertically

This is probably one of the most common search queries for Google when it comes to CSS. Here’s one way you can do it.

.content { min-height: 10px; display: table-cell; vertical-align: middle; }

24. Make something transparent

Opacity is the CSS property you want to use to make something partially transparent. The CSS below will make an element 50% transparent.

.transparent { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; }

This CSS will make your footer stay at the bottom of the screen.

.footer { position:fixed; left:0px; bottom:0px; height:32px; width:100%; }

26. Create columns for your content automatically

Creating columns out of your content with CSS is easy. The code below with turn your content into three columns with a gap of 15px and a black rule between them.

.columns-three { text-align: justify; -moz-column-count: 3; -moz-column-gap: 15px; -moz-column-rule: 1px solid #ffffff; -webkit-column-count: 3; -webkit-column-gap: 15px; -webkit-column-rule: 1px solid #ffffff; }

27. Force vertical scrollbars

If your content is shorter than the browser height, you can use this CSS to force them to appear.

html { height: 101% }

28. Add zebra stripes to a table

Zebra stripes make HTML tables easier to read. You can create them easily with the CSS code below.

body tr:nth-child(odd) { background-color: #d3d3d3; }

29. Add triangular list bullets

The CSS code below will replace the standard dots for unordered lists with triangles.

ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative; }

30. Force a pointer over clickable items

The pointer cursor tells users that they can click an item. This CSS will force that to happen.

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; }

Brush up on your CSS skills

Hopefully, the snippets above will help you style the website or app you’re building. Just remember to learn from the snippet. Figure out how it does what it does. Then, you’ll be able to use that knowledge for other CSS styling tasks.

If you’re depending on snippets too often, maybe you need to brush up on your CSS skills. We have a wide range of coding courses on HTML and CSS that’ll teach you what you need to know to become a skilled Web Designer or Developer.

To learn the basics of CSS, check out our Learn CSS course. If you already know CSS but want to build even more skills, then Learn Intermediate CSS is the course for you.

HTML & CSS Courses & Tutorials | Codecademy

HTML is the foundation of all web pages. It defines the structure of a page, while CSS defines its style. HTML and CSS are the beginning of everything you need to know to make your first web page! Learn both and start creating amazing websites.