Even before all the ubiquitous IoT tech we have today, websites needed to be able to adapt to various monitor sizes. Today, we have a wide range of devices that connect to the web — like smartphones, tablets, laptops, watches, and refrigerators. 

Luckily, web developers don’t need to build unique apps for every single device. (Can you imagine the cost? It’d be unsustainable.) Instead, they use responsive web design to provide their users with a consistent, seamless experience across all of their devices. 

We take a closer look at responsiveness in our free course Learn CSS: Responsive Design — but here’s a quick breakdown.

What is responsive design? 

Responsive design ensures a website can adapt to users whether they’re viewing content on a phone, tablet, laptop, or desktop, through Cascading Style Sheets or CSS. In CSS, you use various settings to serve different styles depending on the user’s device. 

Responsive design means the website is automatically configured for the device it’s being viewed on. The fonts, images, and other elements are scaled to make the best use of the screen. 

Why responsive design matters 

Responsive design matters for both users and web developers. For users, it ensures a smooth experience regardless of what device you use to view a website. For developers, it allows you to make one website that users can view on multiple devices rather than just a computer — which is crucial because most web traffic comes from mobile devices. 

Instead of building responsive web apps, some people use redirects to point users to the appropriate version of the website for their device. But this option is clunky and slow and can potentially impact the user experience. It’s also more work for the developers, so creating one well-designed website is a better experience for everyone. 

Why learn responsive design 

If you want to become a web developer, or even just build efficient websites, you’ll need to provide a smooth experience for every device. The design should translate across multiple screen sizes and continue to look visually appealing. 

How HTML and CSS are used in responsive design 

Responsive design uses HTML (HyperText Markup Language) and CSS. HTML determines the content and structure of a web page, while CSS controls how the HTML is designed and displayed. 

With responsive design, each device receives the same HTML. CSS is what alters the appearance of the page. It adjusts the page to conform to the screen in use. 

Responsive images 

One way to see how HTML and CSS work together for responsive website design is by looking at images. For example, you might add an image to a website with the following  HTML: 

You can also set a class that you can customize with CSS: 

You include CSS as a separate stylesheet file. You can use CSS to manage the width of all images using the following:

img { 

width: 100%; 

height: auto; 

}

This means that the image will scale down when necessary to fit onto the screen, but it won’t scale up to larger than its original size. 

You can also control a specific class using the following syntax: 

. full-width-img { 

width: 100%; 

height: auto; 

}

Background images should also be responsive. One way to do this is by setting the background-size property to contain, meaning the background image will scale to fit the content area, but it will also keep its aspect ratio (original proportions). Here’s what it would look like using an animated image, image.gif: 

div { 

width: 100%; 

height: 400px; 

background-image: url(‘image.gif’); 

background-repeat: no-repeat; 

background-size: contain; 

border: 1px solid blue; 

}

Another option is to set the background size to 100% 100%, which stretches the background image to cover the content area. It looks like this: 

div { 

width: 100%; 

height: 400px; 

background-image: url(‘image.gif’); 

background-size: 100% 100%; 

border: 1px solid blue; 

}

You can also change the background size to cover, which will scale and keep the aspect ratio, but it may clip the image. 

Setting the viewport 

The viewport is the visible area of a web page. It will be larger on computer screens than tablets and smartphones. Developers can control the viewport by using an HTML tag. 

The example above sets the width of the page to follow the width of the device’s screen. And the initial-scale attribute sets the zoom level when the page is first loaded. 

Responsive grids 

Websites are typically designed using a grid, which divides the page into columns. Grids make it easier to place elements on a page and see how they relate to each other. A responsive grid is fluid, which means the elements can change and move based on the user’s viewport. 

One popular grid option is the Flexbox grid. It uses a 12-column layout in which each column is 8.33% of the layout. You can also build a responsive grid using CSS. If you want to learn more about responsive grids, check out our free course Learn CSS: Flexbox and Grids. 

Media queries 

Media queries, changes to CSS properties if certain conditions are met, are another cornerstone of responsive design. They allow you to add a breakpoint or threshold at which parts of the design will behave differently. For example, you might have a three-column layout on desktops but a one-column layout on smartphones. 

It’s common practice to design for mobile first and then scale up. Here’s what a media query would look like in that case: 

/* For mobile phones: */ 

[class*=”col-”] { 

width: 100%; 

} 

@media only screen and (min-width: 768 px) { 

/* For desktop: */ 

.col-1 {width: 8.33%;} 

.col-2 {width: 16.66%;} 

.col-3 {width: 25%;} 

}

You can also use media queries to change the layout of the page based on its orientation, as well as change fonts or hide elements depending on the screen size. 

Bootstrap 

Another option for responsive web design is using a framework like Bootstrap. A framework provides a foundation that you can personalize and build on. Bootstrap is a free, open-source, front-end framework built on HTML, CSS, and JavaScript. It saves you the time of having to write all of the code yourself and includes a responsive grid, code for responsive images, and code for other elements like navigation bars. 

Bootstrap also has extensive documentation and an enthusiastic community. You can also find Bootstrap templates, which simplify the responsive design process even more. 

Getting started in responsive design 

To learn responsive design, you need a solid grounding in the basics. First, you’ll need to know HTML. Our Learn HTML course is a beginner-friendly course that introduces you to common HTML tags and how to create tables and forms. 

Once you’ve mastered HTML, it’s time to add in CSS. Our Learn CSS course teaches you visual CSS rules, the Box Model, CSS rules for display and positioning, and colors and fonts. 

After you’ve learned HTML and CSS, you have several options. One is to continue building your CSS knowledge. Our Learn Intermediate CSS course teaches you the skills you need for responsive design, including how to use Flexbox to create flexible page layouts. It also teaches you how to build accessible web pages. 

We have a course that focuses exclusively on responsive design. The Responsive Design course is for those who have taken the Learn HTML and Learn CSS courses or have the equivalent knowledge. It covers the elements discussed in this article, including media queries. 

Our Learn Bootstrap course teaches you Bootstrap’s grid system and how to style and populate your site. The Bootstrap course requires knowledge of HTML and some knowledge of CSS is helpful, but not required. 

We also have other web design courses and Skill Paths. Our Build a Website with HTML, CSS, and Github Pages skill path is beginner-friendly and teaches you HTML, CSS, responsive design, accessibility, and Flexbox. At the end of the path, you’ll have developed your own website from start to finish. 

Our How to Make a Website with NameCheap course teaches you HTML, CSS, and Bootstrap. By the end of the course, you’ll have built four simple websites, including a personal portfolio, which is a must-have for any job search. 

If you’re not sure about where to start, feel free to reach out in our Forums or Discord server. We’re happy to help you find the right courses to build your skills and develop the website of your dreams.

Every programming language has its own syntax and features, and many of them also use different paradigms or styles of writing and organizing code. 

The most common programming paradigms are procedural, functional, and object-oriented programming. Object-oriented is the most popular, and the one most often taught in programming courses.  

Object-oriented programming is a software development approach that focuses on defining and sculpting named classes as entities with attributes and behaviors. One key benefit of object-oriented programming? It makes reusing and maintaining code easier. Ahead, we’ll break down what you need to know about object-oriented programming and the courses to take if you want to get started.

The building blocks of object-oriented programming 

The object-oriented programming paradigm uses the following building blocks to structure an application: 

Classes 

Classes are user-defined data types used as a blueprint or template for the objects a software program will use in its operation. Classes define the methods and attributes that each object created from them has. Most object-oriented programming languages use classes, though some (like Go, for example) do not. 

Modern JavaScript has classes now, but it didn’t originally. It first used a similar concept called prototypes. 

Here’s an example class in JavaScript:

class Cat { 

    constructor(name, type) { 

        this.name = name; 

        this.type = type; 

    } 

    getTag() { 

        console.log(`Hi, my name is ${this.name} and I am a ${this.type}.`); 

    } 

    speak() { 

        console.log('meow'); 

     }  

}

Objects 

In an object-oriented language that uses classes, objects are instances of those classes created with specific data. To create an object with the Cat class above, we would use the following code:

const myCat = new Cat('Morris', 'Tabby');

When the myCat object is created, it calls the constructor method with the parameters we specify and sets the name and type attributes of the object. We get the following output when we call the methods we’ve defined above: 

​​​​​myCat.speak(); // Prints "meow" 

myCat.getTag(); // Prints "Hi, my name is Morris, and I am a Tabby."

Methods 

Methods are functions stated inside a class that define the behavior of the objects created from the class. They perform actions like returning information about the object or modifying the data contained in the object. The Cat class we created above has two methods: speak() and getTag(). 

Attributes 

Attributes are variables defined inside a class that describe what data the objects created from the class will contain. In our Cat class, we have two attributes: name and type. It’s common to set these attributes in the constructor of the class as we did above. 

The main principles of object-oriented programming 

There are four primary principles of object-oriented programming, including encapsulation, abstraction, inheritance, and polymorphism. 

Inheritance 

Inheritance allows a class to inherit the features of other classes. The original class is called the parent class, and the class inheriting the features is called the child class. Inheritance provides reusability. The child class can also add new attributes and methods. 

Inheritance is often used to create generic parent classes and child classes that have more specific functionality. Here’s an example using our Cat class as a parent class: 

class Tiger extends Cat { 

    huntGazelle() { 

        console.log('hunting');  

    }  

}

This new Tiger class has all the methods and attributes of the original Cat class but also has a huntGazelle() method.   

Encapsulation 

This principle means that all the important data and functionality of an object is contained within that object. Only select information that is needed outside of the object is exposed to the outside world. When an object is created from a class, the methods and attributes are encapsulated inside the object. Encapsulation also hides the implementation of this code inside the object. 

Encapsulation requires that you define some attributes and methods as public or private. “Public” dictates that the attributes and methods can be accessed, modified, or executed from the outside. “Private” limits access to use from inside the object. Attributes and methods can also be defined as protected. This means that classes that inherit from the parent class can also access these attributes and methods, just like the parent class. 

Encapsulation also adds a layer of security by preventing attributes from being changed or methods from being executed by the outside world, which can cause unintended data corruption. Here’s an example: 

​​​​​class Cat { 

        // This is a private attribute 

        const #sound = 'meow'; 

    constructor(name, type) { 

        this.name = name; 

        this.type = type;  

    } 

    getTag() { 

        console.log(`Hi, my name is ${this.name} and I am a ${this.type}.`)  

    } 

    speak() { 

        console.log(this.#sound); 

    }  

}

The sound attribute is hidden from the outside world in this class. This ensures that the class can’t be modified by other code, like code to make the cat bark.

Abstraction 

Abstraction is a means for providing a higher-level interface for interacting with objects. It extends the encapsulation principle by making only key attributes visible to a user and hiding the remaining complexity. This suggests that the complexity of the actual object can be represented by a simple class with a limited number of methods you can execute or attributes you can access. 

One way to imagine the concept of abstraction is to think about driving a car. To make the car turn right, you only have to turn the steering wheel right. The driver doesn’t have to know how the tires, rack and pinion, or power steering pump works — they just turn the wheel. Having to manage all of those other things while driving the car would cause chaos and a lot of accidents. 

Polymorphism 

Polymorphism means objects can share behaviors and can take on more than one form. So far, we have created two classes: Cat and Tiger. If another part of our program has a random list of objects created from these classes, we know we can loop through them and call the speak() method on any of them.​ ​Because of polymorphism, we know that any of these objects contain that method. 

With inheritance, a child object can also override the functionality of the parent object. Remember when we created the Tiger class, but the tiger still meowed like a cat? We can fix that by creating the class like this instead: 

class Tiger extends Cat { 

    huntGazelle() { 

        console.log('hunting');  

    } 

    speak() { 

        console.log('roar');  

    }  

}

Here we simply override the speak() method of the parent Cat class, and now our tiger will roar. Inheritance is what allows methods and attributes to carry over, but polymorphism allows those elements to take another form in a new class. 

The benefits of object-oriented programming 

There are many reasons the object-oriented paradigm is the most popular programming paradigm. Here are some of the main benefits: 

• You can represent complex objects with simple, reproducible classes. 
• The same object you create in one object-oriented program can be reused in other software. 
• You can use polymorphism to define class-specific behavior. 
• By encapsulating all the information about an object within the object, object-oriented software is easy to debug.
• Encapsulation protects data from being modified from unexpected events and actions. 

Which programming languages are object-oriented? 

Simula, which was developed in the 1960s, was the first object-oriented programming language and influenced many of the programming languages we have today. While some languages are either purely procedural or functional, most of the popular ones support the object-oriented programming style in some way. Here are some of those languages: 

• Java is a general-purpose programming language used widely in enterprise development and is object-oriented. 
• Python is a popular programming language used for a wide variety of tasks that supports object-oriented, procedural, and functional programming.

• Ruby is what is called a “pure” object-oriented language where everything in a program is an object. 
• JavaScript is an object-oriented language that used prototypes instead of classes in its earlier days. 
• C++ was created as an extension of the C programming language and is designed to be object-oriented. 
• C# is an object-oriented language developed by Microsoft to run either in the .NET framework or the cross-platform .NET Core framework. 
• Go is an object-oriented programming language that doesn’t have classes. Instead, you build up objects using composition. 

Learn more about object-oriented programming 

Learning object-oriented programming can change how you think about code and make you a better developer. By breaking up the requirements of a complex project into reusable classes, you can simplify the coding process, make your code more organized, and make it easier to debug.

You can learn the basics of object-oriented programming in any of the courses below: 

Each of these courses was created for beginners. So don’t worry if you know nothing about coding or very little about technology now. The course you choose will start by introducing you to the concepts of programming, teach you the fundamentals of the programming language itself, and leave you with multiple projects that will look great in your technical portfolio.