My Little Website

My languages on Mimo

My paths on Mimo

My progress on W3schools

Python

28%

Java

7%

C

3%

This website is a small project from me. Its all coded by me except fot the cool background - thats made with AI. I made it without any Frameworks.
The main part only is one HTML file. If you press on the Buttons one section gets shown, while the other ones get hidden. My code for this is in the sections.js file.
The progress bars get their values from the JSON file progress.json, that has the information for the courses. You can see it there: progress.js

What is a tag?

HTML is based on so called tags. These can be opening (<p>) and closing (</p>) tags. Tags are used to define elements in HTML. The p tag for example is used to define a paragraph.

Basic structure of an HTML document

An HTML document starts with <!DOCTYPE html> followed by the <html> tag. Inside this tag are two main parts: The <head> and the <body> tag. The head contains meta information about the document, like the title, author, character set and links to stylesheets. The body contains the actual content of the webpage.

Common HTML tags

Here are some common HTML tags:

<h1> to <h6>: Headings
<p>: Paragraphs
<a>: Links
<img>: Images
<div>: Division or section
<span>: Inline container
<ul> and <ol>: Unordered and ordered lists
<li>: List items

Attributes

HTML tags can have attributes that provide additional information about the element. Attributes are included in the opening tag and consist of a name and a value. For example, the href attribute in the <a> tag specifies the URL of the link:
<p class=center">this is centered</a>

Links

You can create links in HTML with the a tag, href="example.com" in the opened tag and and some text. For example: 'click here'

click here

Images

If you want to add a image to your Website, you can use the img tag. You can add src="example.com" to the img tag like this:

Source: istockphoto.com

Bold and italic text

With the b or the strong tag you can make text bold and if you want italic text, you use the i or the em tag. Bold text is slightly brighter than normal text.

Lists

There are two types of lists in HTML: ordered lists and unordered lists. Ordered lists use the ol tag and display items in a numbered format. Unordered lists use the ul tag and display items with bullet points. Each item in the list is defined using the li tag.
Example of an unordered list:


                    <ul>

                     <li>Item 1</li>

                     <li>Item 2</li>

                     <li>Item 3</li>

                    </ul>

Div and span

The div tag is a block-level container used to group elements together, while the span tag is an inline container used to style a specific part of text within a larger element. Both tags can be styled using CSS and are commonly used for layout and design purposes.

Details and summary

The details tag is used to create a collapsible section in HTML. It contains a summary tag that acts as a clickable heading for the section. When the user clicks on the summary, the details section expands to reveal additional content.
Example:

click to expand

This is the hidden content that is revealed when the summary is clicked.

how it looks in code


                        <details>

                         <summary>click to expand</summary>

                         This is the hidden content that is revealed when the summary is clicked.

                        </details>

Select

The select tag is used to create a drop-down list in HTML. It contains multiple option tags, each representing a choice in the list. Users can select one or more options from the drop-down menu.
Example:

how it looks in code


                        <select>

                         <option value="option1">Option 1</option>

                         <option value="option2">Option 2</option>

                         <option value="option3">Option 3</option>

                        </select>

Progress

The progress tag is used to create a progress bar in HTML. It represents the completion status of a task or process. The value attribute indicates the current progress, while the max attribute defines the maximum value of the progress bar.
Example:
50%

Its CSS


                        progress.bar{

                         border:solid #FFF;

                         width:95%;

                         height:20px;

                         accent-color:#0F0;

                         background-color:#000;

                         text-align:center;

                        }

                        progress.bar::-webkit-progress-bar{

                         background-color:#000;

                        }

                        progress.bar::-webkit-progress-value{

                         background-color:#0F0;

                        }

                        progress.bar::-moz-progress-bar{

                         background-color:#0F0;

                        }

Hr

I found the hr tag in a Book and tried it:

It's a line that separates parts of the website.
Note: You can't change its color.

What is CSS?

CSS stands for Cascading Style Sheets. It is used to style HTML elements and can be included in HTML documents in three ways:

inline styles
internal stylesheets
external stylesheets

CSS uses selectors to target HTML elements and apply styles to them. Styles are defined using properties and values like color:green;

Basic structure of a CSS rule

At first stands the selector. This can be the tag name, a class or and id. After that comes the declaration block, which is enclosed in curly braces ({ }). Inside the declaration block are declarations, each consisting of a property and a value, separated by a colon and ending with a semicolon.


                    p {

                     color:blue;

                     font-size:16px;

                    }

Inline styling

To style one specific HTML element you can use inline styling. For that you use the style attribut inside the opening tag of the element you want to style. For example:
<p style="color:red;">This text is red.</p>

Frames

To add a Frame around something on your website, you have to apply border:solid; to the it.

example

You can also change its color by using border-color:#F00; and round the corners with border-radius:5px;.

Aligning text

If you want to align inside a line, you need text-align.
This is an example. You can use left, center and right as values. My personal favorite is justify, because it adjusts the space between words, so the paragraph looks more like one block.

What is JavaScript?

JavaScript is a programming language that is commonly used to create interactive effects within web browsers. It allows you to manipulate HTML and CSS, handle events, and create dynamic content on webpages.

Including JavaScript in HTML

You can include JavaScript in an HTML document in three ways:

Inline JavaScript using the onclick attribute or similar event attributes.
Internal JavaScript within a <script> tag in the HTML document.
External JavaScript by linking to a separate .js file using the <script src="file.js"></script> tag.

Basic JavaScript syntax

JavaScript uses variables, functions, and control structures to create logic. Here is a simple example of a function that changes the text of an HTML element when a button is clicked:


                    function changeText() {

                     document.getElementById("myText").innerHTML = "Hello, World!";

                    }

Buttons with actions

You can create buttons in HTML that trigger JavaScript functions when clicked. For example:


                    <button onclick="changeText()">Click me</button>

                    <span id="myText">Original Text</span

It uses the onclick attribute to call the changeText() function when the button is clicked.

how it changeText() could look like


                        function changeText() {

                         document.getElementById("myText").innerHTML = "Hello, World!";

                        }

Changing CSS classes using JavaScript

You can change the classes of an HTML object with JavaScript by modifying the classList from an element that you get by using selectors like getElementByClass() with things like add(), remove() or toggle().

This text switches to bold if you press the button.