Install Bootstrap

Loading...

En provenance du cours de University of London

Responsive Website Basics: Code with HTML, CSS, and JavaScript

3133 notes

University of London

Responsive Website Basics: Code with HTML, CSS, and JavaScript

3133 notes

Cours 1 sur 6 dans Specialization Responsive Website Development and Design

In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity. At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.

À partir de la leçon

CSS

Welcome to the second module of 'Responsive website basics'. <p>In this section of the course we will have a look at linking external CSS files to your HTML documents, controlling fonts with CSS and using CSS to customise hyperlink formatting and to control text layout. We will also install the bootstrap library and implement a responsive grid layout- Enjoy! <p> - Matthew, Marco and Kate

Install Bootstrap4:28

Rencontrer les enseignants

Dr Matthew Yee-King
Lecturer
Computing Department, Goldsmiths, University of London
Dr Marco Gillies
Senior Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate Devlin
Senior Lecturer
Department of Computing, Goldsmiths

[MUSIC]

So you can see, that we can go through and use CSS to control how

the browser displays all these different elements on our page.

So we've changed the way the heading is displayed,

we've played around with different fonts.

We've even made sort of interactive elements where,

when you mouse over a link, it kind of highlights it,

to make it really clear to the user that that link is going to go somewhere.

The problem is, though, there's so many different HTML tags that we could use, and

the browser has a whole bunch of default settings for all of those HTML tags.

And if we really want to escape from the default look, that looks a bit like

the world's first Web page that we saw previously, if you want to escape from

that, and really get towards this more modern look, then we're gonna

have to do a lot of work in the style sheets to really style everything up.

So as you might imagine, there's an easy way to do it, because obviously, everybody

who's made a professional website has pretty much had to do this process.

So there's a whole bunch of libraries out there, which basically give you ready made

sets of CSS Customizations on the default way the browser displays it.

And one of the more popular ones is called bootstrap, and we're gonna be using

bootstrap in the rest of this course, and going into the specialization.

Bootstrap's really nice because it doesn't just sort of customize the fonts and so

on, it also gives you loads of ready made, kind of navigation components, and

different widgets that you can embed on your site, and again,

we'll dig much more into those in a following course.

But for now, we're just gonna find out how we can install bootstrap, and

then what it does to the look and feel of our site.

So, I'm looking at the folder containing my web files here,

and the first thing I want to do is, essentially,

get that bootstrap file in there, so let's go.

I've grabbed the bootstrap file here, and you can access the bootstrap.css file

online, or you can get it from our course resources, and so bootstrap.css,

there it is, well let's have a quick look at it.

So here it is, and you can see it's quite a big file,

and you know, 6,800 lines, and why is it so big?

As I said earlier, actually, there are so many HTML tags, and so many things that

you can reconfigure to really get a more modern look to your site, and

as Bootstrap, we've kind of done it all for you.

And not only that, they've added extra new things,

which allow you to choose different ways of formatting things.

So let's get this style sheet installed on our pages.

So we go in, load up the pages, index.html, and instead of styles,

I'm just gonna load the bootstrap file, like that, okay?

And then let's load up the other ones, and contact, right.

And that one is bootstrap,

save over here, bootstrap.

And let's then reload the page and see what happens.

Okay, that's kind of a transformation, right?

So, without the CSS, if I just remove all CSS,

so basically get rid of that, it looks like this.

So we've got these Serif fonts which we found out about earlier,

and then we got that kinda default link display.

If I put that back in, let's just reload and see what happens.

Okay, so you can see it's kind of taken, things jumped around a bit and it's

changed the padding, and neutralizes the display, so you've kind of got the minimum

set of styles, and it neutralizes it to quite a sort of a modern look.

You can see it's taken the Serif font and replaced it with a Sans Serif,

there's no wiggly bits on the end of the s, and again for the links as well.

And the links, they've got a default sort of dynamic behavior, so instead of having

the underline there all the time, it just pops up when you mouse over them.

Okay, so that's the simplest thing that bootstrap can do for us, and

that's how to install the bootstrap library.

So, in the next lesson,

we're gonna see one of the extra things that bootstrap gives us which is the grid.

And this is where the website starts becoming really responsive, so

I'll see you in the next lesson.

[MUSIC]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play