Day 1 - Web Development (HTML intro).pptx

Introduction to Web development - HTML basics

1. Web Development HTML, CSS, Javascript, Wordpress Day 01 [02-09-2024]

2. Introduction to the Course Welcome to Web Development / Wordpress Course by UNDP. Purpose of the program is to give young students like you a practical experience on digital skills. This will provide you a means to earn a living and will also uplift economy of the country. In this course we will cover front-end web development technologies like HTML, CSS and Javascript. Here we will also learn wordpress (an open source CMS for creating websites easily).

3. What is the internet? The Internet is a vast network that connects computers all over the world. Through the Internet, people can share information and communicate from anywhere with an Internet connection. Through the internet people can access information available on different websites.

4. Web Browser A web browser is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Examples are: Google Chrome, Opera, Safari, Microsoft Edge etc.

5. What makes up a website: A website typically contains one or more of the following elements: Text (Headings, paragraphs etc.) Images (JPG, PNG, Gif etc.) Videos (MP4, MPEG, AVI etc.) Animations (Transitions, effects etc.) Containers (Cards, Tiles, Sections, white spaces)

6. What is Web Development? Web development is the process of developing websites that run on the Internet. There are three main types of web development: Front-End Back-End Full-Stack

7. Front-End vs. Back-End vs. Full-stack Front-End refers to how a web page looks, while back-end refers to how it works. You can think of Front-End as client-side and Back-End as server-side. The basic languages for Front-End Development are HTML, CSS, and JavaScript. The main languages for Back-End Development are PHP / JSP / ASP / Node.js / Python et. Full-Stack refers to the combination of front-end and back-end.

8. Stages of web development Planning Design Development Testing Deployment Maintenance

9. Website? A website is a collection of webpages that are accessed with a single domain name or URL. It includes all the individual pages, multimedia details and files stored on a web server. Websites are built using languages like HTML, CSS and JavaScript to make visually appealing layouts and functionality.

10. Webpages? Webpages, also known as individual documents within a website, present information to users. Each webpage should serve a specific purpose and contribute to the overall user experience by providing valuable material, images and interactive elements. Some websites may be concise and focused, with only a few pages, while others offer an array of information and services to cater to diverse user needs.

11. Web host This is the service that stores your website's files and makes them accessible to users on the internet. By choosing the appropriate plan for hosting a website , you can optimize performance, enhance security and provide an exceptional usability to your visitors.  Hostinger.com Wordpress.com TezHost.com

12. Domain name? To reach your site, individuals type in a unique web address that typically reflects your business or brand name and ends with a domain extension like .com, .org, or .net . Registering your website name with a domain registration company, also known as a domain registrar, is necessary to secure this distinctive internet address.

13. URL address The address of a website is also known as the Universal Resource Locator (URL). When a user wants to open a website then they need to put the URL of the website into a web browser and the requested website is delivered by the web server. For example: Google.com, Gmail.com, or https://drive.google.com/drive/folders/1sUeRZtoNMoLfYUv_caIW2i7jRMKO2d4U

14. Static vs dynamic websites Static websites A static website is a collection of pre-written webpages that are displayed as published. These sites aren't interactive, meaning the material on each page remains the same until manually updated. The information and appearance of static websites remain consistent for all viewers, regardless of their browsers, locations or devices.

15. Static vs dynamic websites Dynamic websites Dynamic websites are more flexible and user-friendly. They can change information and appearance based on several factors, including the time of the day, visitor’s location, language preferences, past interactions with the site or device type. With these sites, the web server processes data in real-time to generate customized pages for each visitor.

16. Types of websites Blogs eCommerce Portfolio Websites for professional services Landing page or single page sites News Portal (LMS) Forums (social networking sites) Etc.

17. Why you need a website Increase competitiveness Reach a wider audience Cost-effective marketing Sell products and services online

18. Thank You! Questions are welcomed.

19. Exercise and Home work Create a list of at least 5 websites that you frequently use What are some of the most famous web browsers? Which one do you use frequently? Define and difference between URL and Domain Name. Draw a sketch to show the communication process between a browser and a website. Enlist at least 10 types of website.