Create a responsive Angular application for beginners


Create a responsive Angular application that works on all devices

What you will learn

Create a responsive Angular application that works on all devices

Create the header, the footer and the side menu

Use CSS Flexbox layout

Use Media Queries

Choose a color palette for the website

Description

This course is intended for beginners. I assume you have a basic understanding of HTML, CSS, JavaScript and Angular.

In this course, you’ll learn how to create a responsive Angular application that works well on different screen sizes and responds to screen size changes.

You’ll learn how to design your app so that it adapts its layout to changes in screen size. Either the user rotates their mobile device and switches from portrait to landscape mode.

Or your app runs on different devices like desktops, laptops, tablets, cell phones, and large screens like TVs.

You’ll get the basics that you can change according to your needs to create a wonderful responsive Angular app.

We’ll set theme colors for the app that we can easily update.


Get Instant Notification of New Courses on our Telegram channel.

Noteβž› Make sure your π”ππžπ¦π² cart has only this course you're going to enroll it now, Remove all other courses from the π”ππžπ¦π² cart before Enrolling!


We’ll use flexbox layouts to distribute the elements on the screen, and we’ll use media queries to respond to screen size changes.

By the end of this course, you’ll see how easy it’s to create a professional Angular application within minutes.

It’s very simple and straightforward.

We’ll create a new Angular application from scratch and gradually add pages, styles and logic.

We’ll create everything ourselves using HTML and CSS. You can also integrate other libraries like Angular Material and use the same rules and techniques you learned here.

Let’s get started and create wonderful responsive Angular applications.

English
language

Content

Introduction

Introduction

Create and run the application

Create and run the application

Reset styles

Reset styles
Add the font Roboto

Choose a color theme for your website

Choose a color theme for your website

Create the header and footer components

Create the header and footer components
The header component
The footer component

The side menu

Create the side menu component
Create the side menu service
Update the side menu component
Update the header component
Style the side menu
Create the menu items
Add menu items to the side menu

The main and books components

Create the main and the books components
The main component
The books component

Try with different colors

Try with different colors