lesson 111 24 aug13-1430-ay
Post on 13-May-2015
12.770 Views
Preview:
TRANSCRIPT
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
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,
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
top related