Lesson 111 24 aug13-1430-ay

Unit 1: Web FundamentalsLesson 11: Utilities: Reusing Code

August 24, 2013

2

Lesson 11: Reusing Code

Introduction to HTML

Learning to Use HTML

HTML and Email

History and Future of the

Web

HTML and Forms

Search Engine

Optimization

Learning to Use CSS

Introduction to CSS

Reusing Code

3 Ways to Use CSS

Separation of Concerns

Launching Your Own Website

Lesson 1 Lesson 2 Lesson 3 Lesson 4



Build understanding Develop skills

3

Recap from last time

• There are three ways to work with CSS: – In a separate stylesheet (we want to do this)– Inline with HTML tags– Embedded in the <head> of the HTML file

• When conflicts occur,

Inline CSS has highest priority

Embedded CSS has second priority

Separate stylesheets have lowest priority

Learning to read code is important

• Websites take a long time to build, but you DON’T have to start from scratch

• Reading code helps us understand other people’s work so we can use it in our own websites

• Learning to read code is like learning to read a book. Reading helps us improve our writing, vocabulary, and grammar skills.

4

=

The DRY Principle saves us time

• The DRY Principle: Don’t Repeat Yourself

• You can reuse other people’s code so we are not rewriting the same things over and over

5

Complicated code you DON’T have to write because you can copy and paste

Using open source code

• Using publicly shared code is NOT cheating (yay!)

• Sharing our code helps everyone learn from each other so we can build things faster and better

• Since we can read other people’s code publicly, it’s an open source of knowledge

6

(kind of like an encyclopedia)

Many websites use prewritten templates of code

7

No need to write CSS – Wordpress has already done it for you!

A sample website you can build on the Wordpress platform

Knowing CSS lets you customize the templates

8

You can now customize the CSS

It’s much faster than building the website

from scratch!

“Behind-the-scenes” code for the Wordpress sample page

Wordpress has many templates to choose from

9

You can also take code and incorporate it into your own website (I)

10

• Let’s say you want to incorporate this datepicker into your website…

You can also take code and incorporate it into your own website (II)

11

It’s as easy as copy and paste!

12

Twitter Bootstrap is a framework that creates code for you

• Twitter Bootstrap is a framework (a toolkit of all kinds of buttons, tables, and typography) to help people build their websites faster

• It was designed by Twitter employees and released to the public for free!

Buttons Dropdown menus Navigation bars

13

Bootstrap can make a site go from this…

Notice the very simple links

And the plain text

And the little sign up link

14

…to this!

Links now look great in a navigation bar

Text now has some pizzazz

And our sign up link has become a button!

Bootstrap is no more than a bunch of files

15

• Bootstrap is just a set of CSS and other files that contain the styling features we want

• It’s easy to download and use right away

16

Summary (I)

• Learning to read code well is important – we will spend more time reading other people’s code than writing code ourselves

• Remember the DRY Principle: Don’t Repeat Yourself. Reuse code whenever possible!

• Using open source code that has been shared on the internet can help us save a lot of time

=

17

Summary (II)

• Websites such as Wordpress provide many prewritten templates of code to choose from

• Twitter Bootstrap is an example of a free framework that gives us a helpful toolkit for styling our website

• Frameworks like Bootstrap can transform our website without us writing a single line of code!

18

What to do on your own

1. Go to URL to complete the Codecademy course online

2. Do the practice set on the material learned

3. Take the follow-up quiz to test your understanding

Lesson 111 24 aug13-1430-ay

Technology

Transcript of Lesson 111 24 aug13-1430-ay