Download to read offline
Tech Winter Break : Basics of Web Development
- 1. BASICS OF WEB DEVELOPMENT BajajInstitute of TEchnology Vaishnavi Dhole GDGoC Organizer
- 2. What is WebDevelopment? Web development is the process of building and maintaining websites. Types of Web Development: 1. Frontend (Visible part of the website users interact with): HTML, CSS, JavaScript 2. Backend (Behind-the-scenes functionality): Servers, databases, server-side programming Why learn web development? Build personal or business websites Develop valuable tech skills
- 3. What is HTML? HTMLstands for HyperText Markup Language Purpose: Provides the structure of a web page. Key Concepts: HTML tags: Basic building blocks like <h1>, <p>, <a>, <img> Attributes: Provide additional information about elements (e.g., href for links, src for images)
- 4. <!DOCTYPE html> <html> <head> <title>My FirstWeb Page</title> </head> <body> <h1>Hello, World!</h1> <p>This is a paragraph of text.</p> </body> </html>
- 5. Basic HTML Structure ●Essential Tags: ○ <!DOCTYPE html>: Declares the document type ○ <html>: Root element ○ <head>: Contains metadata (e.g., title, styles) ○ <body>: Visible content of the page
- 6. <!DOCTYPE html> <html> <head> <title>Basic Structure</title> </head> <body> <h1>MainTitle</h1> <p>This is a simple web page.</p> </body> </html>
- 7. What is CSS? CSSstands for Cascading Style Sheets. Purpose: Controls the look and feel of a web page. Key Features: Selectors: Target HTML elements to apply styles (e.g., p, .className, #id) Properties and Values: Specify styles like color, size, and layout (e.g., color: red;)
- 8. What is CSS? CSSstands for Cascading Style Sheets. Purpose: Controls the look and feel of a web page. Key Features: Selectors: Target HTML elements to apply styles (e.g., p, .className, #id) Properties and Values: Specify styles like color, size, and layout (e.g., color: red;)
- 9. HTML + CSS:How They Work Together ● CSS enhances HTML by styling the content. ● Ways to include CSS in HTML: 1. Inline CSS: Directly in an HTML tag (e.g., <p style="color: red;">) 2. Internal CSS: Within a <style> block in the <head> 3. External CSS: In a separate file linked via <link rel="stylesheet" href="styles.css">
- 10. Tools for WebDevelopment ● Text Editors: ○ Visual Studio Code (VS Code) ○ Sublime Text ○ Atom ● Browsers for Testing: ○ Google Chrome ○ Mozilla Firefox ○ Microsoft Edge ● Online Resources: ○ W3Schools: Interactive learning platform ○ MDN Web Docs: Comprehensive documentation ○ CodePen: Real-time code experimentation
- 11. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Welcometo My Website</h1> <p>Styled with CSS!</p> </body> </html>
- 12. Best Practices forBeginners 1. Write clean, well-indented code. 2. Use meaningful HTML tags (e.g., <header>, <footer>). 3. Keep CSS in an external stylesheet for reusability. 4. Test your website on different browsers. 5. Start with mobile-friendly designs (responsive design).
- 13. Summary and YourNext Steps HTML structures your content, and CSS styles it. Start with small projects like: 1. A personal bio page 2. A simple blog layout 3. A basic portfolio Learn more advanced topics: 4. JavaScript for interactivity 5. Responsive design techniques 6. Web development frameworks
- 14.