Two days after hiring its first chief marketing officer

Uber has done away with thelogo it unveiled two years agoin favor of a new wordmark version that simply uses the company’s name. Uber has also redesigned its mobile app, andhas changed its mission statementfrom “Make transportation as reliable as running water, everywhere, for everyone” to “We ignite opportunity by setting the world in motion.”

The previous logo is being abandoned because consumers weren’t regularly connecting it with Uber, the company toldAdWeek. Uber says it even found that some drivers turned the company-supplied decal inside out (since the name was on the flip side).

The wordmark in Uber’s new logo uses a custom typeface called “Uber Move.” It’s supposed to echo similar sans serif fonts used for transportation signage around the world, according toAdWeek, and also saves the company from paying licensing fees. Custom typefaces have become popularat top Silicon Valley companies— Apple, Google, and Netflix, for example, have all adopted special-made fonts in recent years.

“We’re excited to unveil a new, simplified logo for the Uber app that brings back the U, is easily recognizable, and is scalable across the 660 plus cities we serve,” a spokesperson for Uber said in a statement. The company’s new logo will hit the Uber and Uber Eats apps today, and other changes to Uber’s design language will roll out over the next few months.

Earlier this week, Uber also appointed itsfirst chief marketing officer: former Coca-Cola executive Rebecca Messina. The company also recently announceda new suite of safety features. All these moves show that, even after a year under new CEO Dara Khosrowshahi, the company is still plugging along at the task of reassembling the pieces of its reputation, which had been left in tatters by founder Travis Kalanick.

1: Creating an Angular project with Angular CLI

2: Installing Bootstrap from NPM

Next, we need to install Bootstrap. Change the directory to the project we created (cd angular-bootstrap-example) and execute the following command:

For Bootstrap 3:

npm install bootstrap@3.3.7

For Bootstrap 4:

npm install bootstrap

2.1: Alternative: Local Bootstrap CSS

As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I donwloaded Bootstrap from the website and created a folder styles (same level as styles.css):

Don’t place your local CSS files under assets folder. When we do the production build with Angular CLI, the CSS files declared in the angular.json will be minified and all styles will be bundled into a single styles.css. The assets folder is copied to the dist folder during the build process (the CSS code will be duplicated). Only place your local CSS files under assets in case you are importing them directly in the index.html.

3: Importing the CSS

We have two options to import the CSS from Bootstrap that was installed from NPM:

With this setup we are able to start using the Bootstrap CSS classes in our project.

4: Bootstrap JavaScript Components with ngx-bootstrap (Option 1)

In case you don’t need to use Bootstrap JavaScript components (that require JQuery), this is all the setup you need. But if you need to use modals, accordion, datepicker, tooltips or any other component, how can we use these components without installing jQuery?

There is an Angular wrapper library for Bootstrap called ngx-bootstrap that we can also install from NPM:

npm install ngx-bootstrap --save

ng2-bootstrap and ngx-bootstrap are the same package. ng2-bootstrap was renamed to ngx-bootstrap after #itsJustAngular.

In case you want to install Bootstrap and ngx-bootstrap at the same time when you create your Angular CLI project:

npm install bootstrap ngx-bootstrap --save

4.1: Adding the required Bootstrap modules in app.module.ts

Go through the ngx-bootstrap and add the modules needed in your app.module.ts. For example, suppose we want to use the Dropdown, Tooltip and Modal components:

Because we call the .forRoot() method for each module (due the ngx-bootstrap module providers), the functionalities will be available in all components and modules of your project (global scope).

As an alternative, if you would like to organize the ngx-bootstrap in a different module (just for organization purposes in case you need to import many bs modules and don’t want to clutter your app.module), you can create a module app-bootstrap.module.ts, import the Bootstrap modules (using forRoot()) and also declare them in the exports section (so they become available to other modules as well).

Happy Coding!

Here is basic structure of HTML which will help you kick-start your development.

Checkout the video below:

HTML is the standard markup language for creating Web pages.

HTML stands for Hyper Text Markup Language

HTML describes the structure of Web pages using markup

HTML elements are the building blocks of HTML pages

HTML elements are represented by tags

HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on

Browsers do not display the HTML tags, but use them to render the content of the page

An HTML document has two* main parts:

head. The head element contains title and meta data of a web document.

body. The body element contains the information that you want to display on a web page.

In a web page, the first tag (specifically, <html>) indicates the markup language that is being used for the document. The <head> tag contains information about the web page. Lastly, the content appears in the <body> tag.