Skip to content
Tech for Everyone

Introduction to Web Development

Read Aloud with Speechify Practice with Kahoot Open Journal with Inkblok Play Online Game

What is Web Development?

Web development is the process of creating websites that people can visit on the internet. Every time you search for something or visit a website like your favorite game or school page, someone built it through web development. Developers use special languages to write code that tells the website what to do. With EduBlocks, we can create websites using blocks, which makes it easier to understand the coding process!

What is a Web Browser?

A web browser is an app or program that lets you visit different websites. Some popular browsers include:

  • Google Chrome
  • Safari
  • Firefox

Browsers help you visit and interact with websites by showing you the information stored on the internet.

Key Concept: What is a Website?

A website is like a digital book or magazine that people can read on the internet. It can have different types of content like:

  • Text (words and paragraphs)
  • Images (pictures)
  • Videos (like YouTube videos)

Websites are built with different blocks or pieces of code that create all the things you see on the screen.

Exploring EduBlocks

What is EduBlocks?

EduBlocks is a tool that lets you build webpages by using colorful blocks instead of typing code. Each block represents a piece of a website. For example, one block might create a title, while another adds a picture.

Why Use EduBlocks?

  • Blocks are easier to use: Instead of typing everything, you can drag and drop blocks.
  • Fun and visual: Each block has a color and shape, helping you understand how websites are made.
  • Safe way to learn code: You can see how blocks translate to real code but without making mistakes!

Basic Parts of a Webpage

Webpages are built using three important parts:

  1. HTML – It’s like the skeleton of the website. It builds the structure.
  2. CSS – This makes the webpage look nice by changing colors, fonts, and layouts.
  3. JavaScript – This adds interactivity, making the website do cool things like responding when you click a button.

In this chapter, we will focus on HTML blocks to build the structure of a webpage.

Creating Your First Webpage with EduBlocks

Now, let’s create a simple webpage using EduBlocks! Follow these steps:

Step 1: Open EduBlocks

  1. Open EduBlocks on your computer or iPad.
  2. Choose the HTML mode from the block selection on the left.

Step 2: Add a Heading

  • Find the Heading Block in EduBlocks. Drag and drop it onto your workspace.
  • This block will create a big title for your webpage. You can type whatever you want in the block, such as “Welcome to My Website!”

Step 3: Add a Paragraph

  • Now, look for the Paragraph Block. This block adds a section of text to your webpage.
  • Drag it under the Heading Block and type a short description about your website like, “This is my first webpage made with EduBlocks!”

Step 4: Preview Your Work

  • At the top of EduBlocks, click the Preview button to see how your webpage looks in the browser.
  • You should see your heading and paragraph just like a real webpage!

The Role of the Internet

The internet connects millions of computers around the world. When you make a website, people can visit it through the internet using a browser. Every webpage you make can be viewed anywhere in the world, as long as it’s on the internet.

Recap: What Have We Learned?

  • Web development is how we create websites.
  • Browsers help us view websites, and websites can include things like text, images, and videos.
  • EduBlocks lets us build webpages using blocks without writing raw code.
  • The basic parts of a webpage are HTML, CSS, and JavaScript.

Activities

  1. Create Your Own Webpage:
    • Using EduBlocks, create a new webpage with a heading that introduces yourself and a paragraph that talks about your favorite hobby.
  2. Explore Browsers:
    • Open two different web browsers and see how the same website looks in each. Write down any differences you notice.

Conclusion

You have now created your first webpage using HTML blocks in EduBlocks! This is the foundation of web development. In the next chapter, you will learn how to add more content and structure your webpage even better.