Lecture7 web design and development
Download as PPTX, PDF1 like84 views
This document summarizes Day Seven of a Web Design and Development course. It discusses responsive web design, which makes web pages look good on all devices. It describes how to create a responsive design using meta viewport tags and CSS media queries or frameworks like Bootstrap. The document also covers HTML entities, forms, and form elements like input, select, and buttons. It concludes with review questions about these topics.
![[Day Seven]
Responsive Web Design
Course: Web Design and Develop
Date: 2017/05/20
Lecturer: Mohammad Rafi Haidari](https://image.slidesharecdn.com/lecture7webdesignanddevelopment-170523092222/85/Lecture7-web-design-and-development-1-320.jpg)
Lecture7 web design and development
- 1. [Day Seven] Responsive Web Design Course: Web Design and Develop Date: 2017/05/20 Lecturer: Mohammad Rafi Haidari
- 2. Last Lesson Conclusion! • Name two metadata? • What come in your mind by the word Layouts? • What is the purpose of <header> and <nav> ? • What is the purpose of <article> and <section> ? • What is the purpose of <aside> and <footer> ?
- 3. What is Responsive Web Design? Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:
- 4. Create Your Own Responsive Design One way to create a responsive design, is to create it yourself: <meta name="viewport" content="width=device-width, initial-scale=1.0"> And using media queries of CSS.
- 5. Using CSS Libraries Another way to create a responsive design, is to use a responsive style sheet libraries, like Bootstrap. Bootstrap makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phone: Link for CDN here: http://getbootstrap.com/getting-started/
- 6. HTML Entities Reserved characters in HTML must be replaced with character entities. Characters that are not present on your keyboard can also be replaced by entities. &entity_name; OR &#entity_number;
- 7. Some of Useful HTML Character Entities Result Description Entity Name Entity Number non-breaking space   < less than < < > greater than > > & ampersand & & " double quotation mark " " ' single quotation mark (apostrophe) ' ' ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € © copyright © © ® registered trademark ® ®
- 8. HTML Forms The HTML <form> element defines a form that is used to collect user input: <form> . form elements . </form>
- 9. HTML Forms Elements The most important form element is the <input> element. The <input> element can be displayed in several ways, depending on the type attribute. Check all elements here: http://nativeformelements.com/
- 10. Lesson Conclusion Game! • What is responsive design in web development? • How many ways are there to create a responsive website? • Bootstrap is a php framework that we can use in web project? • What are HTML entities? • What is the purpose of using HTML forms in the web? • How can you create textbox to ask for Name of the person? • What is tag for dropdown list? • How can you create multiple choices questions? • How can you create a single choice options? • How you can create a button in html?
- 11. Question?
- 12. Thank you!