1. Unit 1: Web Fundamentals
Lesson 11: Utilities: Reusing Code
August 24, 2013
2. Lesson 11: Reusing Code
2
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
Lesson 8 Lesson 7 Lesson 6 Lesson 5
Lesson 9 Lesson 10 Lesson 11 Lesson 12
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,
3
Inline CSS has
highest priority
Embedded CSS has
second priority
Separate stylesheets
have lowest priority
4. 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
=
5. 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
6. 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)
7. 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
8. 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
10. 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…
11. 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!
12
Buttons Dropdown menus Navigation bars
13. Bootstrap can make a site go from this…
13
Notice the very simple links
And the plain text
And the little sign up link
14. …to this!
14
Links now look great in a navigation bar
Text now has
some pizzazz
And our sign up link has
become a button!
15. 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
16
=
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!
17
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
1. Take the follow-up quiz to test your understanding
18
