Explore
For Enterprise
Join for Free
Log In

Parcourir
Rechercher
For Enterprise
Connexion
Inscrivez-vous gratuitement

Install Bootstrap

Loading...

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

Université de Londres

4.5 (3,398 notes) | 96K étudiants inscrits

Cours 1 de 6 dans Développement et conception d'un site Web dynamique Spécialisation

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.

Visualiser le programme de cours

Compétences que vous apprendrez

Jquery, Html, JavaScript, Cascading Style Sheets (CCS)

Avis

4.5 (3,398 notes)

5 stars
2,268 ratings
4 stars
797 ratings
3 stars
229 ratings
2 stars
63 ratings
1 star
41 ratings

JF

Feb 14, 2016

Bright instructors delivering succinct and interesting content, with quick-paced videos and quizzes make a great learning experience. I am really impressed! Thank you, University of London people!

SS

Jan 03, 2016

It's very good for beginner who already have hands in programming. it gives very basic and important concepts about HTML, CSS and javascript. it also gives a brief history of internet and HTML.

À 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

Enseigné par

Dr Matthew Yee-King
Lecturer
Dr Marco Gillies
Senior Lecturer
Dr Kate Devlin
Senior Lecturer

Transcription

[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.

Disponible sur Google Play

Coursera
À propos
Direction
Carrières
Catalogue
Certificats
Certificats MasterTrack™
Diplômes
For Enterprise
For Government
Pour le campus

Communauté
Learners
Partners
Developers
Beta Testers
Translators

Se connecter
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Blog Tech

Plus
Conditions
Confidentialité
Aide
Accessibilité
Presse
Contact
Répertoire
Filiales