Intro_2_Web Development_17_01_2025_Webinar
0 likes20 views
Welcome to our interactive webinar on web development! This session is designed to introduce you to the fundamentals of HTML, CSS, and JavaScript, equipping you with the skills to build your own website. What You'll Learn: Introduction to Web Development – Understanding the building blocks of the web. HTML Basics – Structuring content effectively. CSS Styling – Designing visually appealing web pages. JavaScript Essentials – Adding interactivity to your site. AI-Powered Development – Leveraging AI tools to streamline coding.
Intro_2_Web Development_17_01_2025_Webinar
- 1. Creating Your Own Business / Personal Website 28 January 2024 By Sem Gebresilassie
- 2. If you’re unsure at any point, please ask questions! I don’t understand the last section, could you review the slide about …? What does … mean?
- 3. ● Goal > getting a sense of web development + latest tools ● Workshop ○ Exploration ○ Know the basic building blocks of website ○ No prior experience needed ● Project: Make a real website from scratch! ○ To be shared later Mission
- 5. What happens when someone type a URL and press enter? www.ethiopianairlines.com
- 6. client I’d like to see this website please!
- 7. Let’s say you made your website today and you want to share with the world
- 8. server To: 177.12.117.224 From: 193.45.12.4 aka akukulu.com Ya sure ችግር የለም, here it is...
- 9. You put your code of the website on a computer that’s always running. This computer serves your page whenever a client computer requests it. All computers have an address called an IP address. Think of it as a mailing address for computers. address: 193.45.12.4 address: 177.12.117.224
- 10. So when you type in a domain name from your computer, you are making a request to a server with that corresponding address. Clients server akukulu.com
- 11. After all of this, the client computer is then able to view the web page!
- 13. Developers What is shown in the browser What should be sent to the browser (and more) “Front-end” or “Client-side” development “back-end” or “server-side” development
- 14. In this session, we’re going to be focusing on the basics of front-end
- 15. Checkpoint Let’s take a break
- 16. The foundations of front-end development are... JS stands for JavaScript
- 17. What is HTML? wiring piping frame kitchen cabinets invisible more obvious walls Furnitures pictures web infrastructure server operating system Windows structure of our website floor plan third layer “content” of our website personality
- 19. Hyper Text LinkedIn Github! links everywhere! where does this link lead o my akukulu.com
- 20. Markup “ Can be called “markup” Word to be emphasized...
- 21. Tags describe the structure and the content of the page <p>Hello World!</p> <header>This is emphasized text</header> <button>Submit</button> HTML is just text with some extra tags
- 22. What do these tags do? <p>I am a paragraph</p> <input type="text" placeholder="input stuff here”/> <ol> <li>First ordered list item</li> <li>Second ordered list item</li> </ol> There are many more here: HTML Element Reference <button>Click me</button> <a href=“http://akukulu.com">My website!</a>
- 23. Let’s learn about classes and IDs
- 24. • IDs are unique identi fi ers for a single HTML element. • Each ID can be used only once per page. • Classes are used to group multiple HTML elements together. • A single element can have multiple classes.
- 25. Checkpoint Let’s take a break
- 26. HTML should only represent the content
- 27. A different language called CSS is used to create rules about style
- 28. What is CSS?
- 30. Create rules like... This text should be red. There should be 20 pixels between these two elements. This navigation bar should stick to the top of the screen.
- 31. Syntax looks like this body { color: red; }
- 32. Link your CSS file to your HTML file In your HTML file after your <title> tag in your <head>, add the following line: <head> <title>Hello</title> <link rel="stylesheet" href="style.css"> </head>
- 34. Button clicked!
- 35. This is what JavaScript is used for
- 38. Let’s write some JavaScript! document.getElementById('last').onclick = () => { document.getElementById('last').innerHTML = 'Secret message'; };
- 39. And that’s it! Let’s see what we can do with what we just learned!
- 41. Thanks for coming! Have feedback me? https://fi.linkedin.com/in/semgebresilassie