Explore
For Enterprise
Join for Free
Log In

Artes e Humanas
Negócios
Ciência da Computação
Ciência de Dados
Tecnologia da informação
da saúdesaúde
Matemática e Lógica
Desenvolvimento Pessoal
Ciência e Engenharia Física
Ciências Sociais
Línguas
Diplomas e certificados

Explore todo o Coursera

Navegar
Pesquisar
For Enterprise
Entrar
Inscreva-se gratuitamente

Icon Fonts

Loading...

Front-End Web UI Frameworks and Tools: Bootstrap 4

Universidade de Ciência e Tecnologia de Hong Kong

4.8 (1,696 classificações) | 40K alunos inscritos

Curso 1 de 4 no Full-Stack Web Development with React Programa de cursos integrados

Visualizar o programa do curso

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

Habilidades que você aprenderá

Bootstrap (Front-End Framework), Node.Js, Jquery, SASS (Stylesheet Language)

Avaliações

4.8 (1,696 classificações)

5 stars
1,411 ratings
4 stars
241 ratings
3 stars
31 ratings
2 stars
6 ratings
1 star
7 ratings

AA

Jul 12, 2018

One of the best courses I have ever taken. Everything is explained in the best way possible. The Instructor is also good. Must give this course a try. It enhanced my knowledge of the subject matter.

BB

Nov 07, 2018

The instructor knows his subject well. He uses real world examples that allow you to achieve something tangible. On a personal note I loved listening to his instruction. He is an enjoyable teacher.

Na lição

Bootstrap CSS Components

This module concentrates on Bootstrap's components that are designed using pure CSS classes. You will learn about Navigation and Navigation bar. Then, you will learn about buttons, forms, tables, cards, images and media, tags, alerts and progress bars. At the end of this module you need to complete your second assignment.

Navigation and Navigation Bar9:16

Exercise (Video): Navbar and Breadcrumbs30:47

Exercise (Video): Icon Fonts12:21

Ministrado por

Jogesh K. Muppala
Associate Professor

[MUSIC]

Let us now talk about icon fonts.

What are they?

How are they useful?

And how do we make use of them in designing our website?

Icon fonts provide a very flexible way of including tiny

images into our web pages that can be styled just like text.

So that is the reason icon fonts prove very,

very useful in designing websites.

Using icon fonts, you can take a web page like this and

quickly turn it into a web page like this.

Note the use of icons together with the text in the nav bar,

and then when you scroll down to the footer,

you can see more icons being used in the footer.

And also your social media links are now replaced by social media buttons here.

So these are the changes that icon fonts will enable you to do to your website.

So as I briefly mentioned earlier, icon fonts are a set of symbols or

glyphs that can be used in your website design.

These can be used just like regular fonts,

just like regular text fonts that you use in your website.

Their advantage is that you can style them and

then expand and contract them and use all typical

stylings that you use on your text, for your icons also.

They are seen as a popular lightweight replacement for

simple graphics that you can use in your web pages,

simply graphics or images that you can use in your web pages.

And they are very, very useful in designing your web pages.

There are many icon font packs that are available in the market.

One of the most popular ones is Font Awesome,

which I'm going to talk about next.

Font Awesome, as I say, is a very popular icon font.

It is available free for use in designing your page design.

It has been extensively used by many different websites.

We'll learn how to download Font Awesome and

then use it in web page in the exercise that follows this lecture.

Using Font Awesome in your webpage is as simple as

using some classes that are applied to an i,

or a span tag in your web page HTML code.

So once you include the CSS and

the font files that are available through Font Awesome,

then it is very straightforward to make use of Font Awesome in your pages.

Another common feature that you would see on web

pages is the use of social site buttons there like Facebook,

Twitter, Google+, and YouTube and many others.

Now fortunately for us, there is this other CSS

file called bootstrap-social that you can download and

make use of, including various social

media site buttons into your web page.

We will see the use of bootstrap-social in the exercise that follows.

Once you download the bootstrap-social css file, you include that in your web page.

And then together with the Font Awesome icons,

you can combine that with bootstrap social classes

to include various social media buttons on your web pages.

So without further ado, let's move to the next exercise where

we're going to use both Font Awesome and bootstrap-social,

a modified version of bootstrap-social.css file that I

provide on the exercise instructions that you should download and

include in your confusion project and make use of it in the exercise.

[MUSIC]

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play

Coursera
Sobre
Liderança
Carreiras
Lista de cursos
Certificados
Certificados MasterTrack™
Notas
For Enterprise
For Government

Comunidade
Learners
Partners
Developers
Beta Testers
Translators

Conectar
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Tech Blog

Mais
Termos
Privacidade
Ajuda
Acessibilidade
Imprensa
Contato
Diretório
Afiliados