Interactive Web Design 5 - Week 2 - Introduction
Le téléchargement de votre SlideShare est en cours.
×
Consultez-les par la suite
Suggestions
Plus De Contenu Connexe
Diaporamas pour vous (20)
Les utilisateurs ont également aimé (6)
Similaire à Lesson 111 24 aug13-1430-ay (20)
Plus par Codecademy Ren (19)
Plus récents (20)
Lesson 111 24 aug13-1430-ay
- 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
- 9. Wordpress has many templates to choose from 9
- 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
