Introduction to programming

4rmD...T1iW

19 Mar 2024

Computer programming encompasses the art of designing and composing computer programs. This multifaceted skill set involves a diverse array of tasks and techniques, ranging from problem-solving to code implementation. While our tutorials do not aim to cover every aspect of programming comprehensively, their primary goal is to furnish you with fundamental, applicable skills. These skills are tailored to enable you to comprehend and craft computer code that mirrors real-world phenomena and applications.

What You Need to Know:
Our computer programming tutorials are designed for individuals with no prior programming experience. However, a basic understanding of computer and web browser usage is required. This includes tasks such as downloading and opening files, as well as using text editing software. If you feel unsure about these skills, we recommend familiarizing yourself with the following tutorials first:

Computer Basics
Internet Basics

Once you feel comfortable with these fundamentals, you'll be ready to embark on your programming journey.
What These Tutorials Will Cover:
These tutorials are centered around a specific type of programming: web development. Every time you browse a website, whether on a laptop or smartphone, you're essentially viewing computer code written by a web developer. Your web browser interprets this code to display the content on your screen.
Our tutorials will guide you through the basics of three fundamental coding languages used in web development: HTML, CSS, and JavaScript.
Parts of a Website:
Think of every website you visit as a unique individual. Just as people vary in appearance, behavior, and speech, websites differ in their design and functionality. However, they all consist of the same basic components.
HTML:
If a website were a person, HTML would serve as its skeleton.

HTML serves as the backbone of nearly every element you encounter on the internet. Despite its unassuming appearance, HTML lays the groundwork upon which all other components are constructed. The HTML code for an exceptionally basic website might resemble the following:

<!DOCTYPE html>
<html><head><title>An Extremely Simple Website</title></head><body><p>This is an extremely simple website.</p></body>
</html>

Try it yourself!

You can test some HTML yourself. Use this as a starting example:

<button>This is a button</button>

Try entering that HTML in the input box below, then press the "View HTML" button. Make sure to type it in exactly as you see it.

CSS
You should observe a button displaying the text you inputted within the designated area above. At present, it appears rather plain and lacks functionality, but you'll delve into enhancing its features later on!
Congratulations! You've just authored HTML code.
CSS:
If HTML forms the skeleton, envision CSS as the component responsible for crafting the muscles, skin, and other elements that lend a person their distinct appearance.
CSS operates by transforming plain HTML into visually appealing content. It allows you to alter the appearance of elements in the browser, adjusting their size, layout, color, and more. Here's an example of CSS for an exceedingly basic website:

css

Copy code
body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } p { font-size: 16px; color: #333; line-height: 1.5; }

In this snippet:

The body selector styles the entire webpage, setting the font family, background color, and removing default margin and padding.
The p selector styles paragraph elements, specifying the font size, color, and line height.

By applying CSS rules like these to your HTML code, you can enhance the visual presentation of your website.

If you were to apply the above CSS to the same extremely simple website you saw before, it would look like this:

Try it yourself!

You can test that CSS yourself. Use this as a starting example:

font-style: italic;

Try entering that snippet of CSS in the input box below, then press the "Update CSS" button. Make sure to type it in exactly as you see it.

Update CSS
Clear CSS
p {
This is a very simple paragraph.
}
You should see words in the box to the right become italicized. If you do, then congratulations! You just wrote CSS!

JavaScript
JavaScript serves as the brain of a website, imbuing it with interactivity and dynamism. While HTML and CSS contribute to the appearance and structure of a webpage, JavaScript enables functionality and responsiveness. Without JavaScript, a webpage remains static, but with its inclusion, users can interact with elements, access dynamic content, and experience a more engaging browsing experience.

JavaScript possesses the capability to dynamically alter the HTML and CSS of a website in real-time, even after it has finished loading. It empowers developers to manipulate webpage elements, hide or reveal content, modify styles, and much more. Whenever you observe changes occurring on a webpage while viewing it, chances are JavaScript is behind those modifications.
Consider a scenario where you desire the browser to generate a pop-up greeting whenever someone accesses the aforementioned extremely simple website. One approach to achieving this would involve writing code resembling the following JavaScript snippet:

javascript

Copy code
alert("Welcome to the Extremely Simple Website!");

By incorporating such code into your webpage, users would encounter a pop-up greeting message upon loading the site. This exemplifies the interactive and dynamic nature of JavaScript in enhancing user experiences on the web.

alert("Oh, hi there.");

And when you loaded the website, you would see something like this:

Try it yourself!

You can test that JavaScript yourself. Use this code as an example:

alert("Hello, world!");

Try entering that snippet of code in the input box below, then press the "Run Code" button. Make sure to type it in exactly as you see it.
Run Code
You should see a pop-up just like in the example above, only with a different message. Congratulations, you just wrote JavaScript!