DEV Community: Matheus Fernandes

Code Craft #8 - Mastering CSS: From Basics to Intermediate

Matheus Fernandes — Wed, 02 Apr 2025 10:30:12 +0000

(A Complete Beginner’s Guide)

1. Why CSS Matters

CSS isn’t just about “pretty” websites—it impacts user experience, accessibility, and performance. Did you know?

94% of first impressions are design-related (Adobe)
Well-styled pages increase content credibility by 75% (Stanford)

Try This:

View the same HTML with and without CSS:

<!-- Without CSS -->
<h1>Hello World</h1>

<!-- With CSS -->
<h1 style="font-family: 'Arial'; color: #2ecc71;">Hello World</h1>

2. CSS Syntax: Beyond the Basics

2.1 Structure Deep Dive

selector {
  property: value; /* Comments like this */
  margin: 0 auto; /* Shorthand property */
}

Key Concepts:

Shorthand Properties:

  /* Equivalent to setting margin-top, margin-right separately */
  margin: 10px 20px 15px 5px;

CSS Variables:

  :root {
    --primary-color: #3498db;
  }
  button {
    background: var(--primary-color);
  }

3. Selectors: Precision Targeting

3.1 Advanced Selectors

Selector	Example	Use Case
`:hover`	`a:hover`	Style on mouse hover
`::before`	`.card::before`	Insert content before element
`[attribute]`	`input[type="email"]`	Target by HTML attribute

Real-World Example:

/* Style unvisited links */
a:link {
  color: #27ae60;
}

4. Modern Layouts with Flexbox

4.1 Quick Guide

.container {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
  gap: 20px; /* Space between items */
}

5-Minute Exercise:

Build a responsive navbar:

<nav class="flex-nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

.flex-nav {
  display: flex;
  background: #2c3e50;
}
.flex-nav a {
  color: white;
  padding: 15px;
}

5. Responsive Design with Media Queries

Mobile-First Approach:

/* Base (Mobile) */
body { font-size: 14px; }

/* Tablet */
@media (min-width: 768px) {
  body { font-size: 16px; }
}

/* Desktop */
@media (min-width: 1024px) {
  body { font-size: 18px; }
}

Pro Tip:

Use rem units for scalable, accessible typography:

html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */

6. CSS Animations (Bonus)

Pulse Button Effect:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.cta-button {
  animation: pulse 2s infinite;
}

7. Essential Tools

Debugging: Chrome DevTools (F12)
Preprocessors: Sass/SCSS
Frameworks: Bootstrap, Tailwind CSS

8. Next Steps

Now that you’ve mastered:

✅ CSS syntax

✅ Advanced selectors

✅ Flexbox basics

✅ Responsive design

Challenge: Recreate Netflix’s navbar using pure CSS. Share your CodePen link!

“CSS is like magic—until you understand the mechanics. Then it’s pure power.”

— Adapted from Chris Coyier (CSS-Tricks)

Computing architecture # 3 - Exploring Binary Expressions and Logical Operators: Fundamentals and Practical Applications

Matheus Fernandes — Tue, 01 Apr 2025 17:17:45 +0000

Introduction

In the digital age, binary expressions are the invisible building blocks behind all computing. From data processing to decision-making in complex algorithms, Boolean logic is the universal language of computers.

In this article, you will:

Master the basic logical operators (AND, OR, NOT, XOR) and their truth tables.
Discover how computers "think" using Boolean algebra.
Apply these concepts in real-world programming and digital electronics.

What Are Binary Expressions?

Binary (or Boolean) expressions are operations that manipulate 0 (false) and 1 (true), based on the algebra developed by George Boole in 1854.

Why does this matter?

Every computational operation, no matter how complex, boils down to combinations of these expressions.
Digital systems (like CPUs and memory) use physical logic gates that implement these concepts.

Operands vs. Operators: The Anatomy of Binary Logic

Component	Definition	Example
Operand	Binary input value (0 or 1)	`A = 1`, `B = 0`
Operator	Function that relates operands	`AND`, `OR`, `XOR`

The 4 Fundamental Logical Operators

1. AND Operator (`∧` or `·`)

Rule: Outputs 1 only if all operands are 1.

Analogy: A security system that only disarms with two keys turned simultaneously.

A	B	A AND B
0	0	0
0	1	0
1	0	0
1	1	1

Application: Checking multiple mandatory conditions (e.g., "Access granted if password is correct AND card is valid").

2. OR Operator (`∨` or `+`)

Rule: Outputs 1 if at least one operand is 1.

Analogy: An alarm that triggers when any sensor is activated.

A	B	A OR B
0	0	0
0	1	1
1	0	1
1	1	1

Application: Evaluating alternative conditions (e.g., "Discount for students OR seniors").

3. NOT Operator (`¬` or `~`)

Rule: Inverts the operand’s value (0 → 1, 1 → 0).

Analogy: A simple on/off switch.

A	NOT A
0	1
1	0

Application: Negating conditions (e.g., "If NOT raining, turn on the sprinkler").

4. XOR Operator (`⊕`)

Rule: Outputs 1 if operands are different.

Analogy: A light that turns on when only one switch is active.

A	B	A XOR B
0	0	0
0	1	1
1	0	1
1	1	0

Application: Detecting inequalities (e.g., Comparing bits in cryptography).

Truth Tables: The Map of Logic

A truth table lists all possible combinations of operands and their results.

Formula: Number of rows = 2ⁿ (where n = number of variables).

Example for 3 variables (A, B, C):

| A | B | C | A OR B | (A OR B) AND C |

|---|---|---|--------|----------------|

| 0 | 0 | 0 | 0 | 0 |

| 0 | 0 | 1 | 0 | 0 |

|...|...|...| ... | ... |

When to Use Each Operator?

Operator	Typical Use Case
AND	Multiple validations (e.g., login + password).
OR	Alternative options (e.g., payment via PIX OR credit card).
NOT	State inversion (e.g., "while NOT end_of_file").
XOR	Parity checks or toggling (e.g., switching an LED).

Conclusion: The Logic Behind Digital Magic

Binary expressions are the basic grammar computers use to process information. Mastering these concepts is essential for:

Efficient programming (conditionals, loops).
Digital circuit design (logic gates, ALUs).
Algorithm optimization (searches, filters).

"Boolean logic is to computing what the alphabet is to literature."

Further Learning Resources

Book: "Code: The Hidden Language of Computer Hardware and Software" (Charles Petzold).
Interactive Tool: Logic.ly (logic gate simulator).
Course: "Boolean Algebra and Logic Gates" (Coursera).

Here’s a set of exercises (with solutions at the end) to reinforce the concepts covered in your article.

Practice Exercises: Binary Expressions and Logical Operators

Exercise 1: Truth Tables

Fill in the missing outputs for the following truth tables.

NAND Operator (NOT AND)

| A | B | A NAND B |

|---|---|----------|

| 0 | 0 | ? |

| 0 | 1 | ? |

| 1 | 0 | ? |

| 1 | 1 | ? |
Half-Adder Logic

(S = A XOR B, C = A AND B)

| A | B | S (Sum) | C (Carry) |

|---|---|---------|-----------|

| 0 | 0 | ? | ? |

| 0 | 1 | ? | ? |

| 1 | 0 | ? | ? |

| 1 | 1 | ? | ? |

Exercise 2: Logical Expressions

Simplify or evaluate the following expressions (assume A=1, B=0, C=1):

(A AND B) OR (NOT C)
NOT (A XOR B)
(A OR B) AND (B OR C)

Exercise 3: Real-World Scenarios

Write the logical expression for each situation:

A smart thermostat turns on the AC if:
- Temperature > 25°C AND (Humidity > 60% OR UserOverride = 1).
A parking lot gate opens if:
- (PaymentValid = 1 AND CarDetected = 1) OR (EmergencyOverride = 1).

Exercise 4: Circuit Design

Draw the logic gate diagram for:

(A AND B) OR (NOT C)
A 3-input XOR gate (Hint: Chain two 2-input XORs).

Challenge Problem

Prove De Morgan’s Laws using truth tables:

NOT (A AND B) = (NOT A) OR (NOT B)
NOT (A OR B) = (NOT A) AND (NOT B)

Solutions

Exercise 1 Answers:

NAND Truth Table

| A | B | A NAND B |

|---|---|----------|

| 0 | 0 | 1 |

| 0 | 1 | 1 |

| 1 | 0 | 1 |

| 1 | 1 | 0 |
Half-Adder Truth Table

| A | B | S | C |

|---|---|-----|---|

| 0 | 0 | 0 | 0 |

| 0 | 1 | 1 | 0 |

| 1 | 0 | 1 | 0 |

| 1 | 1 | 0 | 1 |

Exercise 2 Answers:

(1 AND 0) OR (NOT 1) = 0 OR 0 = 0
NOT (1 XOR 0) = NOT 1 = 0
(1 OR 0) AND (0 OR 1) = 1 AND 1 = 1

Exercise 3 Answers:

AC_ON = (Temp > 25) AND ((Humidity > 60) OR UserOverride)
GateOpen = (PaymentValid AND CarDetected) OR EmergencyOverride

Exercise 4 Hints:

Use AND → NOT → OR gates in sequence.
A XOR B XOR C = (A XOR B) XOR C.

Challenge Proof:

Construct truth tables for both sides of each law to show identical outputs.

Vanilla HTML, CSS, and JavaScript vs. Frameworks: A Simple Website Development Debate

Matheus Fernandes — Mon, 24 Mar 2025 14:27:37 +0000

In today's world of web development, there are countless ways to approach building websites. One of the most common debates centers around whether to use plain, vanilla HTML, CSS, and JavaScript or to rely on frameworks like React, Angular, or Vue.js. Both approaches have their merits, but which one is the best choice for building simple websites that don’t require heavy maintenance?

In this article, we'll explore the pros and cons of both methods and, ultimately, conclude that vanilla HTML, CSS, and JavaScript might be the better option for straightforward websites that don’t need complex features or frequent updates.

1. Vanilla HTML, CSS, and JavaScript: The Basics

Before diving into the comparison, let's define what we mean by vanilla HTML, CSS, and JavaScript.

HTML (Hypertext Markup Language): The foundational language for structuring content on the web.
CSS (Cascading Style Sheets): A language for styling the appearance of HTML elements.
JavaScript: A programming language that adds interactivity to the web pages.

This trio forms the backbone of most simple websites. It’s lightweight, fast, and doesn’t require any additional libraries or frameworks to work.

Pros of Vanilla HTML, CSS, and JavaScript

Simplicity and Speed: With vanilla code, the website is essentially just a combination of static files. There’s no need to load large libraries or deal with the complexity that frameworks introduce. This results in faster page load times and a more responsive user experience.
Easy to Learn and Debug: For beginners or those just starting out, writing plain HTML, CSS, and JavaScript is straightforward. You don’t need to understand complex configurations or tooling—just basic file management and writing code. Additionally, when bugs arise, they tend to be easier to identify because everything is happening in a single layer.
Fewer Dependencies: By not relying on external libraries or frameworks, you avoid worrying about dependency management, versioning issues, or library-specific updates. This can be a significant advantage for small projects where dependencies may be overkill.
Better SEO: Plain HTML pages tend to be more SEO-friendly right out of the box. There’s no need for special configurations or server-side rendering to ensure that search engines can crawl the content. Everything is loaded immediately when the page is served.
Long-Term Maintainability: For simple websites that won’t need frequent updates or heavy feature additions, vanilla HTML, CSS, and JavaScript offer minimal overhead. As long as the website is kept up to date with basic security patches, it’s easy to maintain without worrying about new framework versions or complex updates.

Cons of Vanilla HTML, CSS, and JavaScript

Limited Scalability: For large or dynamic websites, vanilla code can become cumbersome. As your project grows, managing multiple files and handling complex interactions without a framework can get messy. For larger projects, frameworks offer structure and tools that help maintain consistency.
Manual Optimization: When working with vanilla JavaScript, you often need to manually handle optimizations like lazy loading, code splitting, and performance tuning, which frameworks usually automate for you.

2. Using Frameworks (React, Angular, Vue.js): The Modern Approach

Frameworks like React, Angular, and Vue.js have gained popularity because they offer a more sophisticated, component-based approach to building websites and applications. These frameworks come with a set of tools, libraries, and structure that enable developers to build complex applications quickly.

Pros of Frameworks

Componentization and Reusability: Frameworks allow for the creation of reusable components, making it easier to maintain large applications. For complex websites that require dynamic content or interactivity, this is a huge advantage. You can break down your website into manageable parts and reuse them throughout your site.
Built-in Functionality: Frameworks often come with a host of built-in features, such as routing, state management, and form handling. This can save a lot of time compared to writing your own custom solutions from scratch.
SEO and Performance Optimization: Many modern frameworks, like Next.js (for React) or Nuxt.js (for Vue), offer server-side rendering (SSR) and static site generation (SSG) capabilities, which help optimize the SEO and performance of your website. These frameworks allow your content to be visible to search engines right away, even if the website relies heavily on JavaScript.
Faster Development: With frameworks, you don’t need to reinvent the wheel. Common functionality, like managing state or handling complex user interactions, is already handled by the framework. This accelerates development time and allows developers to focus on features rather than basic functionality.
Scalability and Maintainability: As your project grows, frameworks provide a structure that helps keep your codebase organized. They’re especially helpful for large, dynamic websites that require frequent updates or complex user interactions.

Cons of Frameworks

Steeper Learning Curve: Frameworks come with a lot of built-in concepts and patterns that developers need to understand. From state management to routing, developers have to learn how to work within the framework’s ecosystem, which can take time.
Performance Overhead: Frameworks often require additional JavaScript to run, which can lead to slower page load times, especially if the website is small and doesn’t need all the features that a framework provides. This can negatively impact SEO and user experience.
Dependency Management: Frameworks rely heavily on external libraries and tools, which can create dependency issues. Keeping track of updates, managing compatibility between different versions, and dealing with deprecated libraries can be a hassle for developers.
Overkill for Simple Websites: For websites that don’t require dynamic features, complex interactions, or frequent updates, using a framework can be overkill. The complexity and extra overhead might not be worth it if your website is just a static landing page or a simple blog.

3. When Is Vanilla HTML, CSS, and JavaScript Better?

After considering the advantages and disadvantages of both approaches, it's clear that vanilla HTML, CSS, and JavaScript is the better choice for websites that are:

Simple: If your website doesn't require complex features like user authentication, state management, or dynamic content rendering, vanilla code is more than enough. For instance, a small business website, portfolio, or informational page can be built entirely with vanilla HTML, CSS, and JavaScript.
Low Maintenance: If you're building a site that won't need frequent updates or complex interactions, the simplicity of vanilla HTML, CSS, and JavaScript makes it easier to maintain in the long run. You don’t have to worry about library or framework updates, compatibility issues, or managing dependencies.
SEO-Focused: For SEO optimization, vanilla HTML is a clear winner for static websites. Search engines will easily crawl your content since it’s already present in the HTML and doesn’t rely on JavaScript for rendering.
Performance-Critical: When every millisecond counts, especially on mobile devices or in regions with slower internet speeds, a lightweight vanilla site ensures minimal loading times, which is important for retaining users and improving your SEO rankings.

Conclusion: Vanilla is the Way to Go for Simple Websites

While frameworks like React, Angular, and Vue are powerful tools that are great for building complex, dynamic web applications, they can be overkill for simple websites that don’t require frequent updates or complex interactions.

For those projects, vanilla HTML, CSS, and JavaScript offer a simpler, faster, and more maintainable solution. These technologies allow developers to focus on content, styling, and basic interactivity without the overhead of learning and managing a framework.

Ultimately, if you’re building a small, static website or a simple landing page, stick with the basics—vanilla HTML, CSS, and JavaScript. You'll save time, reduce complexity, and have a website that's fast, SEO-friendly, and easy to maintain.

Computing architecture - Binary mathematic

Matheus Fernandes — Fri, 21 Mar 2025 19:31:33 +0000

Introduction to the Binary System

What is the Binary System?

The binary system is a base-2 numeral system. Instead of using the 10 digits of the decimal system (0 to 9), the binary system uses only two digits: 0 and 1. These two digits are called bits (short for "binary digits").

In the context of computing, the binary system is fundamental. This is because the electronic circuits in computers operate in a simplified manner with two possible states: on (represented by 1) and off (represented by 0). These two states correspond to the two digits of the binary system.

Practical Example:

1 can be interpreted as "on" or "true."
0 can be interpreted as "off" or "false."

Why is the Binary System Important?

The importance of the binary system lies in the fact that computers operate electrically, and computer circuits require two distinct states to represent information. These states are physically realized as high voltage (1) and low voltage (0), making the binary system perfect for this type of operation.

When you see a number like 1011 on your computer, it represents a binary number, which will be converted into a decimal number or used for computational operations.

Comparison with the Decimal System

The decimal system is the numeral system we use in everyday life, with a base of 10. It uses digits from 0 to 9. The base 10 means that in each position, the value is multiplied by powers of 10. For example:

The number 235 in the decimal system is interpreted as: [ 2 \times 10^2 + 3 \times 10^1 + 5 \times 10^0 ] Which results in: [ 2 \times 100 + 3 \times 10 + 5 \times 1 = 200 + 30 + 5 = 235 ]

In the binary system, the positions also have powers, but with a base of 2. Instead of multiplying by 10, each position in a binary number is multiplied by powers of 2.

Quick Comparison Between the Decimal and Binary Systems:

Decimal System (Base 10): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
Binary System (Base 2): 0, 1.

The decimal system is more familiar, as it is what we use in daily life, while the binary system is used internally by computers to store and process data.

How to Represent Decimal Numbers in the Binary System?

To convert a decimal number to binary, the most common method is successive division by 2, where the remainder of each division becomes the corresponding binary digit (0 or 1). The process continues until the quotient is 0.

Example of Decimal to Binary Conversion:
Let’s convert the number 13 (decimal) to binary.

Divide 13 by 2: quotient = 6, remainder = 1.
Divide 6 by 2: quotient = 3, remainder = 0.
Divide 3 by 2: quotient = 1, remainder = 1.
Divide 1 by 2: quotient = 0, remainder = 1.

Now, read the remainders from bottom to top: 1101.
Therefore, 13 (decimal) is equal to 1101 (binary).

Decimal to Binary Conversion Table (for small numbers):
| Decimal | Binary |
|---------|--------|
| 0 | 0 |
| 1 | 1 |
| 2 | 10 |
| 3 | 11 |
| 4 | 100 |
| 5 | 101 |
| 6 | 110 |
| 7 | 111 |
| 8 | 1000 |
| 9 | 1001 |
| 10 | 1010 |
| 11 | 1011 |
| 12 | 1100 |
| 13 | 1101 |

This conversion process is important when working with computers or electronic systems that directly handle binary information.

Conclusion of the Introduction to the Binary System

The binary system is essential for the functioning of modern computers, as it reflects the nature of electronic circuits that have two states. Compared to the decimal system, which we use in our daily lives, the binary system operates with only two digits: 0 and 1. The conversion between the decimal and binary systems is a simple process of successive divisions and is the foundation of all digital computing.

Conversions Between Binary and Decimal

In this module, we will learn the two fundamental processes for converting between the binary and decimal numeral systems:

Conversion from Binary to Decimal
Conversion from Decimal to Binary

These processes are essential for understanding how computers interpret and manipulate data.

Conversion from Binary to Decimal

When you have a binary number and need to convert it to decimal, the main idea is to use powers of 2. The position of each bit (binary digit) in the binary number represents a power of 2. The conversion follows the principle that each binary digit multiplied by its corresponding position (power of 2) results in a value that, when added to the others, forms the decimal number.

Steps to Convert Binary to Decimal:

Write down the binary number.
Identify the position of each binary digit, starting from the right (the first position is 0).
Multiply each binary digit by the corresponding power of 2.
Add up the results obtained for each binary digit.
The final result will be the equivalent decimal value.

Practical Example: Convert the binary number 1011 to decimal

The binary number is 1011.

Starting from the right to the left, the positions are:

The first 1 is in position 3 (2³).
The 0 is in position 2 (2²).
The 1 is in position 1 (2¹).
The last 1 is in position 0 (2⁰).

Now, multiply each binary digit by the corresponding power of 2:

( 1 \times 2^3 = 1 \times 8 = 8 )
( 0 \times 2^2 = 0 \times 4 = 0 )
( 1 \times 2^1 = 1 \times 2 = 2 )
( 1 \times 2^0 = 1 \times 1 = 1 )

Add the results:
[
8 + 0 + 2 + 1 = 11
]

Therefore, 1011 (binary) is equal to 11 (decimal).

Conversion from Decimal to Binary

To convert a decimal number to binary, the process is the reverse: we use the successive division by 2 method. The decimal number is repeatedly divided by 2, and the remainders from each division form the binary number from bottom to top.

Steps to Convert Decimal to Binary:

Divide the decimal number by 2.
Write down the remainder of the division.
Use the quotient from the division to divide again by 2.
Repeat the process until the quotient is 0.
The binary number is the sequence of remainders read from bottom to top.

Practical Example: Convert the decimal number 13 to binary

Divide 13 by 2: [ 13 \div 2 = 6 \quad \text{(remainder 1)} ]
Divide 6 by 2: [ 6 \div 2 = 3 \quad \text{(remainder 0)} ]
Divide 3 by 2: [ 3 \div 2 = 1 \quad \text{(remainder 1)} ]
Divide 1 by 2: [ 1 \div 2 = 0 \quad \text{(remainder 1)} ]

Now, reading the remainders from bottom to top, we get 1101.

Therefore, 13 (decimal) is equal to 1101 (binary).

Summary of Methods

Conversion	Method	Example
Binary to Decimal	Use powers of 2, multiply each binary digit by the corresponding power, and add the results.	( 1011_2 = 8 + 0 + 2 + 1 = 11_{10} )
Decimal to Binary	Divide the decimal number successively by 2, note the remainders, and read them from bottom to top.	( 13_{10} = 1101_2 )

Exercises to Practice

Convert the binary number 11010 to decimal.
Convert the decimal number 25 to binary.
Convert the binary number 111111 to decimal.
Convert the decimal number 7 to binary.

Arithmetic Operations in the Binary System

In this module, we will learn how to perform the main arithmetic operations with binary numbers. Binary operations follow principles similar to those in the decimal system, but with specific rules for dealing with only two digits: 0 and 1. We will explore addition, subtraction, multiplication, and division in the binary system.

Binary Addition

Binary addition is quite simple, but we need to pay attention to the carry (or "transport") when the sum of two binary digits results in 10. Below are the basic rules for binary addition:

( 0 + 0 = 0 )
( 1 + 0 = 1 )
( 0 + 1 = 1 )
( 1 + 1 = 10 ) (Here, the 1 is carried over to the next column.)

Practical Example: Add 1011 + 1101

Let’s add the binary numbers 1011 and 1101 step by step:

Align the numbers vertically:

    1011
   + 1101
   ------

Start adding from right to left:
- ( 1 + 1 = 10 ): Write down 0 and carry over 1.
- ( 1 + 0 + 1 ) (carry) = 10: Write down 0 and carry over 1.
- ( 0 + 1 + 1 ) (carry) = 10: Write down 0 and carry over 1.
- ( 1 + 1 + 1 ) (carry) = 11: Write down 1 and carry over 1.
Since there is a remaining carry, place the 1 to the left:

Therefore, 1011 + 1101 = 11000.

Binary Subtraction

Binary subtraction is a bit more complex because when the top digit is smaller than the bottom digit, we need to borrow from the next column, just like in decimal subtraction.

Rules for Binary Subtraction:

( 0 - 0 = 0 )
( 1 - 0 = 1 )
( 1 - 1 = 0 )
( 0 - 1 = 1 ) (with borrowing: subtract 1 from the next column, and the number becomes 10).

Practical Example: Subtract 1011 - 110

Let’s subtract 110 from 1011:

Align the numbers:

    1011
   -  110
   ------

Start subtracting from right to left:
- ( 1 - 0 = 1 )
- ( 1 - 1 = 0 )
- ( 0 - 1 = 1 ) (borrow 1 from the next column, turning the 1 into 0).
- ( 1 ) (now 0 after borrowing) - ( 1 = 1 ).

Therefore, 1011 - 110 = 1001.

Binary Multiplication

Binary multiplication follows a process similar to decimal multiplication, but since we are dealing with only two digits, the rules are simpler. When multiplying by 0, the result is 0; when multiplying by 1, the result is the original number.

Rules for Binary Multiplication:

( 0 \times 0 = 0 )
( 0 \times 1 = 0 )
( 1 \times 0 = 0 )
( 1 \times 1 = 1 )

Practical Example: Multiply 101 × 11

Align the numbers:

     101
   ×   11
   ------

Multiply 101 by 1 (the unit digit of the second number):

Multiply 101 by 1 (the tens digit of the second number), but shift the result to the left (equivalent to multiplying by 10 in decimal):

Add the two results:

Therefore, 101 × 11 = 1111.

Binary Division

Binary division follows a process similar to the long division we use in the decimal system. Here, we repeatedly divide the binary number, subtracting multiples of the divisor until the quotient is 0.

Practical Example: Divide 1101 by 10

Align the numbers:

    1101 ÷ 10

Start dividing from left to right:
- 10 fits into 11 once, so we place 1 in the quotient and subtract 10 from 11 (leaving 1).
- Bring down the next digit (0), resulting in 10.
- 10 fits into 10 once, so we place 1 in the quotient and subtract 10 from 10 (leaving 0).
- Bring down the next digit (1), resulting in 1. Since 10 does not fit into 1, we place 0 in the quotient.
The quotient is 110, and the remainder is 1.

Therefore, 1101 ÷ 10 = 110 with a remainder of 1.

Summary of Arithmetic Operations in the Binary System

Operation	Method	Example
Binary Addition	Add the binary digits, considering the carry (if the sum is 10).	( 1011 + 1101 = 11000 )
Binary Subtraction	Subtract the digits, borrowing when necessary.	( 1011 - 110 = 1001 )
Binary Multiplication	Multiply each digit by 0 or 1, shifting to the left.	( 101 \times 11 = 1111 )
Binary Division	Divide the number, subtracting multiples of the divisor until the quotient is 0.	( 1101 \div 10 = 110 )

Exercises to Practice

Binary Addition: Add 11001 and 1011.
Binary Subtraction: Subtract 10010 from 11011.
Binary Multiplication: Multiply 110 by 101.
Binary Division: Divide 10110 by 11.

Applications of Binary Mathematics in Computer Architecture

In this module, we will explore the applications of binary mathematics in computer architecture, covering digital logic, logic circuits, and how binary is essential for data storage and processing. Additionally, we will discuss the importance of binary in communication and data transfer between devices.

Digital Logic

Digital logic is the foundation of computer architecture and digital systems. It involves the application of logical operations, such as AND, OR, NOT, and XOR, using binary numbers (0 and 1). These operations are implemented in electronic circuits, enabling computers to perform a wide variety of complex functions.

Binary Logical Operations

Logical operations are performed by logic gates, which are the basic building blocks of digital logic. Each gate performs a specific logical operation.

AND Gate:
- Operation: Returns 1 if both operands are 1; otherwise, returns 0.
- Truth Table: | A | B | A AND B | |---|---|---------| | 0 | 0 | 0 | | 0 | 1 | 0 | | 1 | 0 | 0 | | 1 | 1 | 1 |
OR Gate:
- Operation: Returns 1 if at least one of the operands is 1.
- Truth Table: | A | B | A OR B | |---|---|--------| | 0 | 0 | 0 | | 0 | 1 | 1 | | 1 | 0 | 1 | | 1 | 1 | 1 |
NOT Gate (Inversion):
- Operation: Inverts the value of the operand.
- Truth Table: | A | NOT A | |---|-------| | 0 | 1 | | 1 | 0 |
XOR Gate (Exclusive OR):
- Operation: Returns 1 if the operands are different; otherwise, returns 0.
- Truth Table: | A | B | A XOR B | |---|---|---------| | 0 | 0 | 0 | | 0 | 1 | 1 | | 1 | 0 | 1 | | 1 | 1 | 0 |

Example of a Logic Circuit Performing Binary Operations

Consider the following simple logic circuit:

Inputs: A = 1, B = 0
Operation: ( A \text{ AND } (B \text{ OR } A) )

First, calculate the OR operation: [ B \text{ OR } A = 0 \text{ OR } 1 = 1 ]
Then, apply the AND operation: [ A \text{ AND } 1 = 1 \text{ AND } 1 = 1 ]
Therefore, the final result of the operation is 1.

These logical operations are fundamental for building processors and digital circuits in computers, enabling the control and manipulation of binary data.

Data Storage and Processing

Computers use binary mathematics to store and process data efficiently. Let’s understand how this happens.

Data Storage

At the hardware level, data is stored in memory (RAM, hard drives, etc.), and each stored value is represented by binary numbers. The process of storing and retrieving data is done by storage units that use binary cells.

Bit: The smallest unit of storage in a computer. It can store only two values: 0 or 1.
Byte: A group of 8 bits, which can represent 256 different values (from 0 to 255).

These bits are organized into blocks called words (with 16, 32, or 64 bits), allowing integers, characters, and even images to be represented in the binary system.

Data Processing

When the processor (CPU) performs operations, it uses binary numbers. Arithmetic and logical operations are carried out through arithmetic and logic circuits.

For example, the binary addition of two binary numbers is performed using an adder circuit, which can be a full adder or a half adder.
These operations of addition, subtraction, multiplication, and division allow the processor to manipulate data efficiently. The CPU converts mathematical operations into binary commands, directly manipulating binary data.

Use of Binary in Communication Between Devices

Communication between devices in a computer or network also relies on the binary system. Data is transmitted as streams of bits between devices, such as memory, the processor, and peripherals (e.g., hard drives and monitors).

Example: Ethernet Communication

In data communication over networks, such as Ethernet, bits are transmitted through cables or radio waves, depending on the technology. The sequence of 0s and 1s is converted into electrical or optical signals, allowing devices to communicate. Each device interprets these binary signals to reconstruct the sent information.

Data Transfer in File Systems

When a file is saved on a computer, it is converted into a binary sequence and stored on the hard drive. When the file is accessed or transferred to another device, it is read as a sequence of bits and converted back to its original format (whether text, image, audio, etc.).

Summary of Concepts

Digital Logic: The foundation for building digital circuits in computers, using binary logical operations like AND, OR, NOT, and XOR.
Data Storage: Data is stored as sequences of bits and bytes in memory devices.
Data Processing: The processor manipulates binary data through arithmetic and logical operations.
Data Communication: Communication between devices is achieved through sequences of bits transmitted over networks and cables.

Exercises to Practice

Digital Logic:
- Solve the expression ( A \text{ AND } (B \text{ OR } C) ) for ( A = 1 ), ( B = 0 ), and ( C = 1 ).
Data Storage:
- Convert the decimal number 85 to its 8-bit binary representation.
Data Processing:
- Perform the binary addition of 1101 and 1011.
Data Communication:
- How would data be represented for transmission over Ethernet? What would the bit sequence be for the number 23?

Practical Exercises

In this module, we will practice the main operations in the binary system. The exercises cover conversions between binary and decimal, performing arithmetic operations (addition, subtraction, multiplication, and division), and examples of representing negative numbers in the binary system. These exercises will help solidify your understanding of how to work with binary numbers and how these operations are applied in practice.

1. Conversions Between Binary and Decimal

Exercise 1: Convert the binary number 101110 to decimal.

Steps:

Write the binary number: ( 101110_2 ).
Decompose it into powers of 2:
- ( 1 \times 2^5 = 32 )
- ( 0 \times 2^4 = 0 )
- ( 1 \times 2^3 = 8 )
- ( 1 \times 2^2 = 4 )
- ( 1 \times 2^1 = 2 )
- ( 0 \times 2^0 = 0 )
Add the values: ( 32 + 0 + 8 + 4 + 2 + 0 = 46 ).
Therefore, ( 101110_2 = 46_{10} ).

Exercise 2: Convert the decimal number 65 to binary.

Steps:

Divide 65 by 2, noting the quotient and remainder:
- ( 65 \div 2 = 32 ) with remainder 1.
- ( 32 \div 2 = 16 ) with remainder 0.
- ( 16 \div 2 = 8 ) with remainder 0.
- ( 8 \div 2 = 4 ) with remainder 0.
- ( 4 \div 2 = 2 ) with remainder 0.
- ( 2 \div 2 = 1 ) with remainder 0.
- ( 1 \div 2 = 0 ) with remainder 1.
The binary number is obtained by reading the remainders from bottom to top: ( 1000001_2 ).
Therefore, ( 65_{10} = 1000001_2 ).

2. Arithmetic Operations with Binary Numbers

Binary Addition

Exercise 3: Add 1101 and 1011 in binary.
Steps:

Align the numbers:

     1101
   + 1011
   --------

Start from the right:
- ( 1 + 1 = 10 ) (write 0, carry 1).
- ( 0 + 1 + 1 = 10 ) (write 0, carry 1).
- ( 1 + 0 + 1 = 10 ) (write 0, carry 1).
- ( 1 + 1 + 1 = 11 ) (write 1, carry 1).
Result: ( 1101_2 + 1011_2 = 11000_2 ).
Therefore, ( 1101_2 + 1011_2 = 11000_2 ).

Binary Subtraction

Exercise 4: Subtract 1101 from 10110 in binary.
Steps:

Align the numbers:

     10110
   -  1101
   --------

Subtract from the right:
- ( 0 - 1 ) requires borrowing. After borrowing, it becomes ( 10 - 1 = 1 ).
- ( 1 - 0 = 1 ).
- ( 1 - 1 = 0 ).
- ( 0 - 1 ) requires borrowing. After borrowing, it becomes ( 10 - 1 = 1 ).
- ( 1 - 1 = 0 ).
Result: ( 10110_2 - 1101_2 = 10001_2 ).
Therefore, ( 10110_2 - 1101_2 = 10001_2 ).

Binary Multiplication

Exercise 5: Multiply 101 by 11 in binary.
Steps:

Perform simple binary multiplication:

      101
   ×    11
   --------
      101    (101 × 1)
   + 1010    (101 × 1, shifted one position to the left)
   --------
    1111

Result: ( 101_2 \times 11_2 = 1111_2 ).
Therefore, ( 101_2 \times 11_2 = 1111_2 ).

Binary Division

Exercise 6: Divide 1101 by 10 in binary.
Steps:

Divide 1101 by 10:
- 10 fits into 11 once. Subtract 10 from 11, leaving 1. Place 1 in the result.
- Bring down the next bit (0). Now, we have 10. 10 fits once, subtract 10 from 10, leaving 0. Place 1 in the result.
The final result is 11, and the remainder is 0.
Result: ( 1101_2 \div 10_2 = 11_2 ) (remainder 0).
Therefore, ( 1101_2 \div 10_2 = 11_2 ).

3. Representation of Negative Numbers in the Binary System (Two's Complement)

Exercise 7: Represent -6 in binary using two's complement (with 8 bits).

Steps:

Write 6 in binary (with 8 bits): ( 00000110_2 ).
Invert all the bits (one's complement): ( 11111001_2 ).
Add 1 to the result (two's complement): [ 11111001_2 + 1 = 11111010_2 ]
Therefore, -6 in two's complement (8 bits) is ( 11111010_2 ).

Exercise 8: Represent -13 in binary using two's complement (with 8 bits).

Steps:

Write 13 in binary (with 8 bits): ( 00001101_2 ).
Invert all the bits (one's complement): ( 11110010_2 ).
Add 1 to the result (two's complement): [ 11110010_2 + 1 = 11110011_2 ]
Therefore, -13 in two's complement (8 bits) is ( 11110011_2 ).

Summary

Binary-Decimal Conversions: Use powers of 2 to convert binary numbers to decimal and divide by 2 repeatedly to convert decimal numbers to binary.
Binary Operations: Learn how to perform addition, subtraction, multiplication, and division using binary rules.
Two's Complement: The method for representing negative numbers in the binary system, essential for arithmetic operations with negative numbers.

Code Craft #7 - Working with Text and Formatting Elements in HTML

Matheus Fernandes — Fri, 21 Mar 2025 12:15:02 +0000

Course Objectives

In this module, you will learn how to use the main text tags in HTML, such as:

Headings (<h1> to <h6>)
Paragraphs (<p>)
Line breaks (<br>)
Text styles: bold (<b>), italic (<i>), underline (<u>)
Unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>)
Links (<a>)

1. Headings in HTML

Headings in HTML are used to define titles and subtitles. There are six levels of headings, ranging from <h1> (the most important) to <h6> (the least important).

Example:

<h1>This is the main title of the page</h1>
<h2>This is a subtitle (level 2)</h2>
<h3>This is a subtitle (level 3)</h3>
<h4>This is a subtitle (level 4)</h4>
<h5>This is a subtitle (level 5)</h5>
<h6>This is a subtitle (level 6)</h6>

Explanation:

<h1> is used for the main title, usually found at the top of the page.
<h2> to <h6> are used for subtitles, with <h2> being the most important after <h1>.

Importance:

Headings are important for structuring content and also help with search engine optimization (SEO), as they indicate the hierarchy of information.

2. Paragraphs (`<p>`)

The <p> tag is used to define a paragraph of text. All content that forms a paragraph should be wrapped in the <p> tag.

Example:

<p>This is a paragraph of text. The content inside the <code>&lt;p&gt;</code> tag will be displayed as a paragraph.</p>
<p>Paragraphs help organize text, making it more readable and structured.</p>

Explanation:

Whenever you use the <p> tag, the browser will display space before and after the paragraph, making the text more organized.

Importance:

The <p> tag makes it easier to organize textual content on the page.

3. Line Breaks (`<br>`)

The <br> tag is used to insert a line break within text. It does not have a closing tag, as it is a self-closing tag.

Example:

<p>This is a paragraph with a line break.<br>Now, the line has been broken, and the text continues below.</p>

Explanation:

The <br> tag does not create a new paragraph but simply breaks the line at the point where it is inserted.

Importance:

Use <br> when you need to divide text without creating a new paragraph.

4. Text Styles

You can style text in various ways with HTML, such as bold, italic, and underline. For this, we use the following tags:

Bold (`<b>`)

The <b> tag is used to make text bold without assigning semantic importance.

Example:

<p>This is a text with <b>bold</b>.</p>

Italic (`<i>`)

The <i> tag is used to make text italic, typically used for emphasis.

Example:

<p>This is a text with <i>italic</i>.</p>

Underline (`<u>`)

The <u> tag is used to underline text.

Example:

<p>This is a text with <u>underline</u>.</p>

Importance:

These tags are useful for emphasizing content. Although the <b> tag is commonly used, it is worth noting that in some situations, it is more semantic to use <strong> for bold and <em> for italic, as they carry semantic meaning related to importance or emphasis.

5. Lists in HTML

HTML allows you to create ordered and unordered lists. Lists help organize content in a clear and readable way.

Unordered Lists (`<ul>`)

The <ul> tag defines an unordered list, where each item is marked with a bullet point.

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Explanation:

Each list item is defined by the <li> tag.

Ordered Lists (`<ol>`)

The <ol> tag defines an ordered list, where items are numbered.

Example:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Explanation:

Just like in unordered lists, each item is defined by the <li> tag, but the browser automatically numbers the items.

Definition Lists (`<dl>`)

The <dl> tag is used for definition lists, where we have a term and its description.

Example:

<dl>
  <dt>HTML</dt>
  <dd>A markup language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>A language used to style web page content.</dd>
</dl>

Explanation:

<dt> defines the term, and <dd> defines the description.

6. Links (`<a>`)

The <a> tag is used to create links (anchors), allowing you to navigate between pages or external sites.

Example:

<a href="https://www.google.com">Visit Google</a>

Explanation:

The href attribute defines the destination of the link. When the user clicks on the text "Visit Google," they will be redirected to Google's website.
Links can be used to navigate between internal or external pages.

Conclusion

Now you have learned how to work with the most common tags for text formatting in HTML. Knowing how to properly use headings, paragraphs, line breaks, lists, and links helps organize and make the content of your web pages clearer and easier to understand. Remember to use these tags semantically to ensure that the page content is well-structured, accessible, and understandable for both users and search engines.

Code Craft #6 - Basic Structure of an HTML Document

Matheus Fernandes — Fri, 21 Mar 2025 12:08:49 +0000

Course Objectives

In this module, you will learn about the basic structure of an HTML document, including:

The doctype declaration (<!DOCTYPE html>)
The main elements (<html>, <head>, <body>)
Important elements within the <head>: <title>, <meta>, and <link>
How opening and closing tags work.

1. What is HTML?

Just a remind, HTML (HyperText Markup Language) is the language used to create web pages. It provides the structure of the page and defines the content that will be displayed in the browser. Each HTML page is composed of a set of "tags" that organize and structure the content.

2. Doctype Declaration

The first line of an HTML document should always be the document type declaration, known as DOCTYPE. It tells the browser which version of HTML is being used. For HTML5, the correct declaration is:

<!DOCTYPE html>

The <!DOCTYPE html> declaration indicates that the document is using HTML5, which is the latest and most widely used version. This line is not a traditional HTML tag but an instruction that helps the browser render the content correctly.

Why is it important?

Ensures the browser follows the HTML5 standard.
Avoids compatibility issues between different browsers.

3. Basic Structure of an HTML Document

A basic HTML document follows a simple structure, composed of opening and closing tags. Below is the minimal structure of an HTML document:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Welcome to my page!</h1>
    <p>This is a simple HTML example.</p>
  </body>
</html>

4. Main Elements of an HTML Document

The <html> tag is the root element of an HTML document. Everything on the page, including visible content and header information, must be placed inside this tag.
- Opening: <html>
- Closing: </html>
- The <html> tag can also include the lang attribute to specify the language of the page content:
```
<html lang="pt-br">
```
The <head> element contains information about the document, such as metadata, links to external files (CSS, fonts, etc.), and the page title. This data is not displayed directly on the page.
- Opening: <head>
- Closing: </head>
- Inside the <head>, we usually include:
- <meta charset="UTF-8">: Defines the character encoding used in the document, ensuring special characters (like accents) are displayed correctly.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive, adjusting the layout for different screen sizes.
- <title>: Defines the page title, which appears in the browser tab.
- <link>: Used to link external files, such as CSS stylesheets.

Example of a complete <head>:

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
  </head>

The <body> tag contains the visible content of the page, such as text, images, videos, links, tables, etc. Everything the user sees on the page must be inside this tag.
- Opening: <body>
- Closing: </body> Example of content inside the <body>:

  <body>
    <h1>Welcome to my page!</h1>
    <p>This is a simple HTML example.</p>
  </body>

5. Elements Inside the `<head>`

The <title> element defines the page title, which appears in the browser tab or title bar. The title is crucial for SEO (Search Engine Optimization) and accessibility. Example:

  <title>My Page</title>

The <meta> tag provides metadata about the page, such as character encoding, descriptions, keywords, etc. In the example above, we used two important <meta> tags:
- charset: Defines the character encoding of the document (usually UTF-8).
```
<meta charset="UTF-8">
```
- viewport: Essential for responsive design, adjusting the page scale on mobile devices.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
The <link> tag is used to link external files, such as stylesheets (CSS), icons, fonts, etc. The most common use is to include a stylesheet:

  <link rel="stylesheet" href="style.css">

6. Opening and Closing Tags

In HTML, most elements require an opening tag and a closing tag. The opening tag defines the start of the element, and the closing tag marks its end.

Opening Tag: Starts the element and can contain attributes. Example: <h1>, <p>, <a href="url">.
Closing Tag: Ends the element. Example: </h1>, </p>, </a>.

Some tags, like <img> and <br>, are self-closing and do not require a closing tag, but it is still important to know them.
Example of opening and closing tags:

<p>This is a paragraph.</p>
<img src="image.jpg" alt="Example image">

Conclusion

Now that you know the basic structure of an HTML document, you can start creating your own pages. Remember that while HTML is the foundation, it works in conjunction with other technologies like CSS and JavaScript to create interactive and styled pages.

In the next module, we will explore how to add more complex content to your HTML page. Until then!

Code Craft # 5 - Introduction to HTML, CSS, and JavaScript

Matheus Fernandes — Thu, 20 Mar 2025 16:35:11 +0000

Building websites involves several steps and tools, and three core programming languages that form the foundation of any website are HTML, CSS, and JavaScript. Together, these languages are the backbone of modern web development. Let’s break down what each one does and how they work together to create functional and visually appealing websites.

HTML: Content and Layout

HTML, or HyperText Markup Language, is the language that defines the structure and content of a webpage. In other words, HTML creates the "building blocks" of any website, such as paragraphs, images, links, and headings. It determines what is displayed on the page but not how the content appears visually.
HTML Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Page Example</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is an example paragraph.</p>
    <a href="https://www.example.com">Click here to visit the site.</a>
</body>
</html>

What does HTML do? HTML provides the basic structure of a webpage. With it, you can add text, images, videos, and links, organizing content in a logical manner. Without HTML, there would be no content displayed on a webpage.

CSS: Styling and Visual Appearance

CSS, or Cascading Style Sheets, is a language used to style the content created with HTML. CSS is responsible for the visual appearance of your website, allowing you to define colors, fonts, spacing, and layout. Without CSS, HTML pages would look basic and unappealing, lacking any design or style.

CSS Example:

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    font-size: 16px;
    color: #555;
}

What does CSS do? CSS controls the appearance of HTML elements. It can change the background color, font style, element spacing, and even create simple animation effects.

What can you do with CSS?

Modify the layout and visual formatting of a website.
Change colors, fonts, and the overall design of content.
Create simple animations and transitions.

JavaScript: Interactivity and Dynamic Features

JavaScript is a programming language that enables you to add interactivity to a webpage. While HTML is used to structure the content and CSS is used to style it, JavaScript allows you to dynamically alter the content after the page has loaded. With JavaScript, you can create animations, modify content, validate forms, and much more.

JavaScript Example:

document.getElementById("myButton").onclick = function() {
    alert("You clicked the button!");
}

What does JavaScript do?
JavaScript allows you to create dynamic features such as interactive menus, real-time content changes, form validation, and animations. It adds life to a webpage, making it more engaging for users.

What can you do with JavaScript?

Create dynamic features, such as interactive menus and animations.
Modify content on a page after it has loaded.
Add interactivity and customization to your website’s behavior.

Comparison Between HTML, CSS, and JavaScript

HTML is responsible for the structure and content of a webpage.
CSS is used to define the visual appearance and layout of the elements.
JavaScript allows for interactivity and dynamic functionality, changing the page based on user behavior. These three languages work together to form the foundation of almost any website. HTML provides the content, CSS handles the appearance, and JavaScript adds interactivity.

What Can You Do with Each Programming Language?

HTML: With HTML, you create the basic structure of your website, including titles, paragraphs, links, and the general layout.
CSS: CSS allows you to make the website visually appealing. Through styling rules, you change the colors, fonts, sizes, and layout.
JavaScript: JavaScript makes your website interactive, enabling features like animations, interactive menus, and form validation.

Conclusion

While it is possible to create and maintain a website without much coding knowledge using a content management system, understanding the basics of HTML, CSS, and JavaScript gives you more control over your website's design and functionality. These languages are fundamental for creating modern, dynamic websites, and with a basic understanding, you can start modifying your site or even building one from scratch.

If you’re just starting with web development, it’s essential to learn HTML, CSS, and JavaScript to understand how they interact and how each one contributes to creating dynamic and visually attractive websites.

Learn More About HTML, CSS, and JavaScript

If you're eager to dive deeper into HTML, CSS, and JavaScript, there are plenty of great resources available online. Whether you're a beginner or looking to enhance your skills, the following platforms offer structured courses, tutorials, and hands-on coding exercises. In this series of posts, I'll lead you to the knowledge you need to get started or practice what you've already learned.

Learn HTML
To get started with HTML and master the basics of building websites, check out this free course on W3 HTML Tutorial. It covers everything from the structure of an HTML document to creating links, images, and lists.

Learn CSS
Once you have a handle on HTML, it’s time to learn CSS to make your sites visually appealing. W3 CSS Course will walk you through how to style your web pages, including managing colors, fonts, and layouts.

Learn JavaScript
For those who want to add interactivity and dynamic elements to their websites, JavaScript is a must. Freecodecamp JavaScript Course offers a comprehensive guide to understanding the core concepts of JavaScript and how to manipulate HTML and CSS to create engaging experiences.

By taking these courses and practicing what you learn, you’ll be well on your way to becoming proficient in web development and able to create your own interactive and visually stunning websites.

#Computing architecture - Basic architecture of a computer

Matheus Fernandes — Tue, 18 Mar 2025 20:18:38 +0000

What does computer architecture mean?

Computer architecture is the term used to describe the design and organization of a computer system. It refers to the structure and essential components that make up a computer, such as the central processing unit (CPU), memory, input and output devices, and the communication channels between these components.

Architecture: relates to the design of the total set of instructions that the computer will be able to execute.
Organization: is the definition and physical and logical implementation of the computer. The organization makes the specifications defined by computer architecture feasible.

What you will learn by the end of this "course"

Ao final deste curso, você será capaz de:
By the end of this course, you will be able to:

Understand the basic components of computer architecture, their relationships, and functions;
Understand binary mathematics and its application in the formation of logical (digital) circuits;
Understand the main logic gates and how digital circuits are formed;
Understand the main components of the processor and its internal architecture;
Understand the types of memory and their characteristics;
Understand the main components of the motherboard and their functions;
Understand the main internal and external buses of the motherboard;
Understand storage devices and their functionalities;
Understand RAID (Redundant Array of Independent Disks) techniques for disks (Don’t worry, you’ll know what RAID is soon);

Why study Computer Architecture?

Studying computer architecture is essential for several reasons, whether you're interested in technology or want to work in areas such as systems development, software engineering, hardware design, or related fields. Here are some of the main reasons:

Deep understanding of how a computer works: Knowing how the CPU processes instructions, how memory is managed, and how data circulates within the system is crucial.
Performance optimization: Understanding architecture helps write more efficient code and optimize system performance, whether regarding memory usage, parallel processing, storage access, or designing faster systems.
Hardware and software development: For hardware engineers, understanding computer architecture is vital for designing chips, circuits, and integrated systems. Software developers who understand computer architecture can write more effective programs tailored to the hardware and optimize CPU and memory usage.
Enables solving low-level problems: Computer architecture teaches how to deal with low-level issues, such as memory management, interrupt handling, code optimization, and hardware-software interfacing.
Preparation for technological innovations: The field of computer architecture is always evolving with emerging technologies, such as quantum computing, neuromorphic processors, and parallel computing. Having a solid foundation in computer architecture allows you to stay updated and ready to work with these new technologies.
Foundation for operating systems and networks: Operating systems rely on a deep understanding of computer architecture to efficiently manage resources like processing, memory, and input/output.
Solving complex problems: Many problems in computing systems cannot be solved without a profound understanding of computer architecture.

Basic elements of computer architecture

Von Neumann architecture describes the basic components of a computer, which are still used in modern systems despite many technological advancements. Its key elements are:

Fonte da imagem: https://pt.wikipedia.org/wiki/Arquitetura_de_von_Neumann#/media/Ficheiro:Von_Neumann_architecture.svg

CPU (Central Processing Unit): Responsible for processing information stored in memory, including programs and data.
Memory: Stores both the data and the programs needed for the computer's operation.
Input/Output Devices (I/O): Allow interaction between the computer and the user or external environment. Examples include keyboard, mouse, monitor, and printers.
Buses: Communication channels that connect all components, enabling data, commands, and address traffic between them. They are divided into data, control, and address buses.

The basic operation described follows this flow: data is input through I/O devices (such as the keyboard), the CPU processes it, accesses memory for information, and then sends results back to output devices (such as the monitor). All components exchange information via the buses. This simple architecture still applies to both modern computers and the first systems developed by Von Neumann in the 1940s.

CPU (Central Processing Unit) - The Processor

The Central Processing Unit is the primary component of computer architecture. It is an integrated circuit that executes all user programs and controls all other computer devices.
Its main function is to fetch data stored in the computer's memory, determine what procedure should be performed with that data, execute the procedure, and return the results to the user.

Memory

Every computer has a certain amount of memory (which can vary from computer to computer), which consists of a set of circuits capable of storing the data and programs executed by the computer itself. Memories are classified into different categories.
Note: The amount of memory is given by the number of bits that a processor can manage.

Main Memory: In simple terms, the main memory is seen as a set of chips that are inserted into the computer’s motherboard.
Secondary Memory: Secondary memory is not made up of chips, but instead consists of devices that use other storage technologies. Some examples of secondary memory: hard drive, SSD, DVD.

Buses

The bus, also called BUS, is simply a common pathway through which data travels inside the computer. These are conducting lines that allow information to move from the CPU to peripherals and vice versa. This pathway is used for communication and can be established between two or more computer elements.

Code Craft # 4 - Into the github basics

Matheus Fernandes — Mon, 17 Mar 2025 14:24:42 +0000

Before You Start!

Before we begin exploring the basics of Git and GitHub, it’s essential to ensure that you have your environment set up correctly. Git is a powerful version control tool widely used by developers to manage code and track changes over time. GitHub, on the other hand, is an online platform that integrates with Git, allowing you to store, share, and collaborate on projects in the cloud.

If you haven’t set up Git on your machine or don’t have a GitHub account yet, don’t worry! In this complete guide, you will be walked through the steps to install Git, create your GitHub account, configure your SSH keys, and much more. This will ensure that you're ready to follow the rest of the content securely and effectively.

What You Should Know:
Install Git on your operating system
Configure your GitHub account and link it to Git
Manage your SSH keys for more secure authentication
Verify your setup to ensure everything is working properly

To get started, follow the step-by-step instructions in our complete guide to setting up Git and GitHub for beginners. This guide will provide detailed instructions to ensure your development environment is ready for using Git and GitHub.

Into the basics

Create the Repository

Now that you have your Git and GitHub set up, it's time to create your first repository! A repository is where all your project files, code, and version history will be stored. This step-by-step guide will show you how to create a repository on GitHub.

Sign in to GitHub
Open your web browser and go to GitHub.
If you already have an account, click on Sign in at the top-right corner and enter your credentials.
If you don’t have an account yet, click on Sign up to create a new account.
Create a New Repository
Once you’re signed in, click on the + sign in the top-right corner of the screen.
From the drop-down menu, select New repository
Set Repository Details
Repository name: Choose a unique name for your repository. For example, if you're working on a project called "MyApp", you can name the repository MyApp.
Description (optional): Write a brief description of your project. For example, "This is a simple web application built with HTML, CSS, and JavaScript."
Public or Private: Decide whether you want your repository to be public or private: Public: Anyone can see and contribute to your repository; Private: Only you and collaborators can access the repository.
Initialize the Repository
Initialize this repository with a README: It's recommended to check this box, as a README file is essential for providing an introduction to your project.
Add .gitignore: A .gitignore file tells Git which files or directories to ignore (for example, system files or IDE configurations).
You can choose a template based on your project type (e.g., Node, Java, Python).
Choose a license (optional): If you want to specify the terms under which others can use your code, you can add a license. GitHub provides a variety of open-source licenses to choose from.
Create the Repository Once you've filled out the necessary details, click on the Create repository button.
Clone the Repository to Your Local Machine (Optional) To start working with the repository on your local machine, you can clone it using Git:
Go to the repository page on GitHub.
Click on the Code button and copy the URL under Clone with HTTPS.
Open your terminal and run the following command:

git clone git@github.com:USERNAME/REPOSITORY-NAME.git

This will create a local copy of the repository on your computer where you can start adding files and making changes.
To test this, cd int othe new folder that was downloaded and the enter git remote -v on you command line: You should see and output similar that:

origin  git@github.com:USERNAME:git_test.git (fetch)
origin  git@github.com:USERNAME:git_test.git (push)

Add Files to Your Repository
Create or copy the project files you want to add to the repository into the cloned folder on your local machine.
Use the following Git commands to add, commit, and push changes:

git add .
git commit -m "Initial commit"
git push origin main

Use the Git Workflow

The Git workflow is a standard process used to manage and track changes in your project using Git. It helps developers maintain organized, consistent, and collaborative development environments. Understanding and following the Git workflow is crucial for effective version control, especially as you start working with teams and collaborating on code.

Git Workflow Steps

Let’s break down the typical Git workflow into simple, digestible steps:

Clone the Repository (for the first time)

When starting a project, you need to create a local copy of the repository from GitHub (or any other remote service). This is done using git clone.

git clone https://github.com/your-username/your-repository.git

This command will download the entire repository to your local machine.

Create a New Branch (Optional but recommended)
When working on a feature or fix, it’s a good practice to create a new branch. This keeps your main branch clean and allows you to experiment without affecting the main project. The main branch (commonly named main or master) should always contain stable, production-ready code.

git checkout -b feature-name

This creates and switches to a new branch called feature-name. You can replace feature-name with a descriptive name for your task.

Make Changes and Modify Files
Now that you’re working on your feature branch, make your changes to the codebase. This could be adding new files, editing existing ones, or fixing bugs.
Stage Changes
Git doesn't automatically track changes in your files. After you make modifications, you need to "stage" the changes, which tells Git which files you want to include in your next commit.
To stage files, use:

git add <file-name>  # Add a specific file
git add .            # Add all modified files

Commit Changes
After staging your files, the next step is to commit the changes. A commit is like a snapshot of your code at a particular point in time.
When committing, always provide a meaningful commit message that explains what changes were made. This helps you and others understand the history of the project.

git commit -m "Add new feature to index page"

Push Changes to GitHub
After committing, it’s time to push your changes to the remote repository (GitHub). This uploads your changes and makes them accessible to others.
If you’re working on a branch (like feature-name), push the branch to GitHub:

git push origin feature-name

If you're working on the main branch (or whatever the default branch is named), use:

git push origin main

Create a Pull Request (for Collaboration)
If you're working in a team or collaborating on a project, after pushing your branch, you’ll typically open a Pull Request (PR) on GitHub. A PR lets others review and discuss your changes before they are merged into the main branch.
On GitHub, navigate to your repository, click on the Pull Request tab, and create a new PR from your feature branch to the main branch.
Merge Changes
Once the pull request is reviewed and approved, it will be merged into the main branch. If you’re working solo and confident in your changes, you can merge it directly through the command line:

git checkout main       # Switch back to the main branch
git merge feature-name  # Merge changes from your feature branch
git push origin main     # Push merged changes to GitHub

Pull the Latest Changes (before working again)
Before starting work the next day (or anytime you want to sync with the latest code), always make sure to pull the latest changes from the remote repository. This is particularly important if you are collaborating with others.
Example:

git pull origin main

Why This Workflow Matters

Keeps Your Code Organized: By following a clear workflow, you avoid conflicts and ensure that each change is logically grouped and tracked.
Prevents Conflicts: Working on branches means you can develop independently without affecting the main project. It also makes it easier to merge changes later.
Encourages Collaboration: Using pull requests and branching allows multiple developers to work on different features simultaneously and merge their work without disrupting the main codebase.
Improves Version Control: Committing often with meaningful messages helps you track every change and revert to previous versions if necessary.

Modify Files

Now let’s say you’re working on a project and want to modify files. For this example, we’ll create a new HTML file, modify it, and then commit those changes using the Git workflow.

Scenario: Create and Modify index.html Clone the repository (if you haven’t already): If you haven’t cloned the repository to your local machine yet, do so by running this command in your terminal:

git clone https://github.com/your-username/your-repository.git
cd your-repository

This will create a local copy of your GitHub repository.

Create a new file (index.html): Now, let’s say you want to create a new HTML file called index.html:

Create a new file using a text editor or the command line.

touch index.html

Open index.html in your editor (e.g., Visual Studio Code, Sublime, or even a simple text editor) and add some basic HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
</head>
<body>
  <h1>Welcome to My Web Page!</h1>
  <p>This is a simple page created for the example.</p>
</body>
</html>

Modify an existing file: Let’s say you already have a file, style.css, and you want to modify it to add some styles for the index.html file.

Open style.css and add some CSS styles:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}
h1 {
  color: #333;
}

Push Your Work to GitHub

Once you’ve created and modified your files, you need to follow these steps to push your changes to GitHub.

Stage your changes: After creating and modifying your files, you need to tell Git which changes you want to include in your next commit. To stage the changes, use:

git add index.html style.css

If you modified several files and want to stage everything, you can use:

git add .

Commit your changes: After staging the files, you need to commit them with a message that explains what you’ve done. For example:

git commit -m "Add index.html and modify style.css"

Push the changes to GitHub: Now that your changes are committed locally, it’s time to push them to GitHub so they are saved remotely. To push the changes, use:

git push origin main

This will push your changes to the main branch of your GitHub repository.

Summary of the Example Workflow:

Clone the repository (if not done already).
Create and modify files:
Created index.html and added basic HTML structure.
Modified style.css to add custom styles.
Stage changes:
Used git add to stage the files you modified.
Commit changes:
Committed your changes with a clear message using git commit -m.
Push changes:
Pushed the commit to GitHub with git push origin main.

By following this Git workflow, you can effectively track your changes and collaborate with others on your project. Whether you're adding new files or modifying existing ones, this process ensures your work is always saved and shared on GitHub.

Code Craft #3 - A Complete Guide to Setting Up Git and GitHub for Beginners

Matheus Fernandes — Fri, 14 Mar 2025 19:14:15 +0000

Introduction

Git is an essential tool for any developer, providing powerful version control for your projects. Throughout your journey in software development, you'll work with Git extensively. Although the ins and outs of Git will become clearer as you progress, understanding the basics now will set you up for success.

GitHub and GitLab, on the other hand, are platforms that integrates with Git, enabling you to upload, host, and manage your code in the cloud. It provides a web interface to interact with Git repositories, making collaboration easier. While Git and GitHub/GitLab are often used together, it's important to note that they are separate entities, developed by different companies.

This guide will walk you through the steps to install and configure Git, create a GitHub account, set up your SSH keys, and more.

Install Git

Before we dive into configuration, we first need to install Git. Here are the installation steps for different operating systems:

Linux: You can typically install Git through your distribution's package manager. For Ubuntu-based systems:

sudo apt update
sudo apt install git

MacOS: You can install Git using Homebrew:

brew install git

Configure Git and GitHub

Create a GitHub Account Head over to GitHub and sign up for an account. During the signup process, you will be prompted to provide an email address. This email will be tied to your contributions and will be visible in your Git history.

If you’re concerned about privacy, you can choose to keep your email address private. To do this:

Sign in to GitHub
Go to Settings → Emails
Enable the option "Keep my email addresses private."

GitHub will then provide you with a private email address that you can use for your commits. You’ll need this when configuring Git in the next step.

Setup Git Now that you have a GitHub account, it's time to link Git to your GitHub profile. This is important for associating commits with your identity.

Open your terminal and run the following commands:

git config --global user.name "Jhon Doe"
git config --global user.email "jhondoe@provider.com"

Additionally, GitHub recently switched the default branch name from master to main. Set your default branch to main with this command:

git config --global init.defaultBranch main

We also recommend configuring Git to use merge behavior for pull requests:

git config --global pull.rebase false

To verify that everything is set up correctly, run these commands:

git config --get user.name
git config --get user.email

This will display your name and email address, confirming the configuration was successful.

For macOS Users macOS users may also want to configure Git to ignore .DS_Store files, which are created by the Finder application. To do this, run:

echo .DS_Store >> ~/.gitignore_global
git config --global core.excludesfile ~/.gitignore_global

Create and Link an SSH Key

Using SSH keys allows you to authenticate with GitHub securely without having to enter your password every time you push code. Let's set this up!

Check if You Have an Existing SSH Key:
First, check if you already have an SSH key by running:

ls ~/.ssh/id_ed25519.pub

If you see a message like "No such file or directory," it means you don’t have an existing SSH key, and you'll need to create one.

Generate a New SSH Key: To generate a new SSH key, run:

ssh-keygen -t ed25519

When prompted, hit Enter to save the key in the default location. You can optionally add a passphrase for extra security.

Link Your SSH Key to GitHub: Once your SSH key is generated, it’s time to link it to GitHub. First, you need to copy your SSH key to your clipboard:

cat ~/.ssh/id_ed25519.pub

Copy the entire output, which starts with ssh-ed25519 and ends with your username and hostname.

Next, go to GitHub, navigate to Settings → SSH and GPG keys, and click on New SSH Key. Paste your SSH key into the provided field, name it, and click Add SSH key.

Test Your SSH Connection:
To verify that everything is set up correctly, run the following command:

ssh -T git@github.com

You should see a message that says, "Hi username! You’ve successfully authenticated, but GitHub does not provide shell access." This means you’ve successfully connected your SSH key to GitHub!

Conclusion

Congrats on setting up Git and GitHub! This is an important first step in your development journey. Even if you didn’t understand every detail, that’s perfectly normal—this is just the beginning.

Code Craft #2 - How the Web Works

Matheus Fernandes — Thu, 13 Mar 2025 23:25:04 +0000

The internet is a global network of connected computers that enables the exchange of information and access to services. This exchange happens efficiently thanks to a well-structured and interdependent system. Let’s understand how each part of this network interacts.

How does information travel across the internet? When you access a website on your web browser, what happens behind the scenes is communication between clients and servers. The client, in this case, the browser, requests information from the server, which stores the data of the requested page. To understand how the request reaches the server and how the data returns to the client, it's important to understand the role of packets. The data of a webpage (such as text, images, and videos) is divided into packets to be sent more efficiently across the network. Each packet contains a portion of the data, as well as information about the source and destination of the message. These packets travel across the internet until they reach the correct server, where they are reassembled and sent back to the client.
The role of servers and DNS When you type an address, such as "www.google.com", the browser needs to know which server to access. This is where the DNS (Domain Name System) comes in, translating the website name into an IP address. The DNS server acts like a list of addresses: it locates the server hosting the site and provides the necessary IP address for communication.
How packets connect to communication with the server The web server is where the content of web pages is stored. Once the DNS resolves the IP address, the browser, acting as a client, sends a request to the server, which then sends the data packets back to the client. When these packets reach the browser, they are reassembled, and the webpage appears on the user's screen.
The difference between a client, server, and how communication occurs A client is any device that requests data from a server. This includes not just web browsers, but also applications like an email client or a messaging app. The server, on the other hand, stores data and resources and responds to the requests made by clients. The browser, therefore, is a client that requests and displays content stored on web servers.

Each device and server’s IP address is essential for communication to occur. The web server has a unique IP address that allows the client (browser) to locate it. This process is completely transparent to the user but is crucial to ensure that the data reaches its destination.

To summarize, lets chop the concepts in little parts

What is a web server? A web server is a software or hardware system that stores and serves web pages to users' devices over the internet. When you type in a website's address (like google.com), the web server sends the necessary files (HTML, images, etc.) to your device for you to view the website.

What is a network? A network is a collection of devices (like computers, phones, or printers) that are connected to one another to share resources and data. This can happen either over local area networks (LAN) or larger networks like the internet.

What is the internet? The internet is a global network of interconnected computers and devices that communicate with each other to share information. It’s essentially a vast system that enables access to websites, email, streaming, and many other services.

What is an IP address? An IP (Internet Protocol) address is a unique identifier assigned to each device connected to a network. It’s like the address of your device on the internet, allowing other devices to locate and communicate with it.

What is a router? A router is a device that connects multiple networks, typically your local network (like your home Wi-Fi) to the internet. It directs data packets between devices within your network and the wider internet.

What is an ISP? An ISP (Internet Service Provider) is a company that provides you with access to the internet. Examples include Comcast, AT&T, or Verizon.

What are packets and how are they used to transfer data? Packets are small chunks of data that are sent over the internet. Large files or messages are broken down into packets, which are transmitted separately across the network and reassembled at the destination.

What is a client? A client is any device or program that makes a request to a server. For example, when you use a web browser, your browser is acting as a client, requesting web pages from a server.

What is a server? A server is a computer or system that provides resources, services, or data to other computers (clients) over a network. For instance, a web server hosts websites that clients can request and view.

What is a web page? A web page is a document or content on the World Wide Web, typically made up of text, images, videos, or other multimedia that is displayed in a browser when you visit a website.

What is a web browser? A web browser is a software application (like Chrome, Firefox, or Safari) that allows you to view and interact with web pages on the internet.

What is a search engine? A search engine (like Google or Bing) is a tool that helps users find information on the internet by searching through indexed websites and displaying relevant results.

What is a DNS request? DNS (Domain Name System) is like the internet’s phonebook. A DNS request is made when you type a website address (like google.com) into your browser. It translates that human-readable domain name into an IP address that computers use to find the server hosting the website.

Code Craft #1 - A quick introduction about Web Development

Matheus Fernandes — Thu, 13 Mar 2025 17:29:34 +0000

Introduction: what you need to know to start

Web development is one of the most dynamic fields in the technology market. With the rise of digital solutions, professionals working in web development and web applications play a crucial role. If you're just starting out or planning to, here's an initial guide to help you begin your journey.

Types of Web Developers

Before diving into careers, it's important to understand the three main specializations within web development:

Front-End Developer: Works with everything the user sees and interacts with directly on a website or application. This includes the structure, layout, and functionality of a page. The main technologies here are HTML, CSS, and JavaScript.

Back-End Developer: Focuses on server-side aspects, databases, and application logic. The back-end ensures that information is processed and delivered correctly to the front-end. Technologies like Node.js, Ruby on Rails, Django, Java, and others are common in this area.

Full-Stack Developer: Combines both front-end and back-end skills. This professional has the ability to build a complete web application, from design to server infrastructure.

Type of Careers

The job market offers different career options for web developers. Each has its particularities, advantages, and challenges:

Large Companies: Working at a large company can provide stability, benefits, and the opportunity to work on large-scale projects. However, the work can often be more segmented, with well-defined specializations.

Startups: If you're looking for a more dynamic and challenging environment, working at a startup may be ideal. In these places, you'll likely use a variety of skills, solve complex problems, and grow quickly. The downside may be a lack of stability and a more intense workload.

Freelancer: Working independently offers flexibility and autonomy. You can choose the projects you want to work on and set your own hours. However, it’s also necessary to have management skills, as you'll be responsible both for development and for acquiring clients and managing your time.

Consultants: If you have solid experience, you can work as a consultant for companies, helping them define the best technical solutions for their projects. Here, you can make a significant impact on companies of different sizes.

How to Choose Your Learning Path?

Before following any learning roadmap, it's important to have clarity about the type of developer you want to become and the type of career you want to pursue. The website roadmap.sh provides an excellent visual guide to show the learning steps for front-end, back-end, and full-stack developers.

But before looking at the roadmap, here are a few considerations:

What are your interests? If you enjoy visual interactions and design, front-end might be the best choice for you. If you prefer working with logic and servers, back-end could be a good fit.

What type of work do you want to do? If you want to work at large companies or startups, your choice of technology might influence your decision.

Conclusion

Web development is an exciting journey full of possibilities. Whether in large companies, startups, as a freelancer, or a consultant, there are many opportunities for those who are willing to learn and adapt. With the right tools and the motivation to evolve, you can follow the path that best matches your skills and interests.

Remember: the key is to get started! Choose the path that resonates most with your profile and keep exploring. And don’t forget, practice is essential to becoming a successful web developer.

DEV Community: Matheus Fernandes

Code Craft #8 - Mastering CSS: From Basics to Intermediate

1. Why CSS Matters

2. CSS Syntax: Beyond the Basics

2.1 Structure Deep Dive

3. Selectors: Precision Targeting

3.1 Advanced Selectors

4. Modern Layouts with Flexbox

4.1 Quick Guide

5. Responsive Design with Media Queries

6. CSS Animations (Bonus)

7. Essential Tools

8. Next Steps

Computing architecture # 3 - Exploring Binary Expressions and Logical Operators: Fundamentals and Practical Applications

Introduction

What Are Binary Expressions?

Operands vs. Operators: The Anatomy of Binary Logic

The 4 Fundamental Logical Operators

1. AND Operator (∧ or ·)

2. OR Operator (∨ or +)

3. NOT Operator (¬ or ~)

4. XOR Operator (⊕)

Truth Tables: The Map of Logic

When to Use Each Operator?

Conclusion: The Logic Behind Digital Magic

Further Learning Resources

Practice Exercises: Binary Expressions and Logical Operators

Exercise 1: Truth Tables

Exercise 2: Logical Expressions

Exercise 3: Real-World Scenarios

Exercise 4: Circuit Design

Challenge Problem

Solutions

Exercise 1 Answers:

Exercise 2 Answers:

Exercise 3 Answers:

Exercise 4 Hints:

Challenge Proof:

Vanilla HTML, CSS, and JavaScript vs. Frameworks: A Simple Website Development Debate

1. Vanilla HTML, CSS, and JavaScript: The Basics

Pros of Vanilla HTML, CSS, and JavaScript

Cons of Vanilla HTML, CSS, and JavaScript

2. Using Frameworks (React, Angular, Vue.js): The Modern Approach

Pros of Frameworks

Cons of Frameworks

3. When Is Vanilla HTML, CSS, and JavaScript Better?

Conclusion: Vanilla is the Way to Go for Simple Websites

Computing architecture - Binary mathematic

Introduction to the Binary System

What is the Binary System?

Why is the Binary System Important?

Comparison with the Decimal System

How to Represent Decimal Numbers in the Binary System?

Conclusion of the Introduction to the Binary System

Conversions Between Binary and Decimal

Conversion from Binary to Decimal

Steps to Convert Binary to Decimal:

Practical Example: Convert the binary number 1011 to decimal

Conversion from Decimal to Binary

Steps to Convert Decimal to Binary:

Practical Example: Convert the decimal number 13 to binary

Summary of Methods

Exercises to Practice

Arithmetic Operations in the Binary System

Binary Addition

Practical Example: Add 1011 + 1101

Binary Subtraction

Rules for Binary Subtraction:

Practical Example: Subtract 1011 - 110

Binary Multiplication

Rules for Binary Multiplication:

Practical Example: Multiply 101 × 11

Binary Division

Practical Example: Divide 1101 by 10

Summary of Arithmetic Operations in the Binary System

Exercises to Practice

Applications of Binary Mathematics in Computer Architecture

Digital Logic

Binary Logical Operations

Example of a Logic Circuit Performing Binary Operations

1. AND Operator (`∧` or `·`)

2. OR Operator (`∨` or `+`)

3. NOT Operator (`¬` or `~`)

4. XOR Operator (`⊕`)

2. Paragraphs (`<p>`)

3. Line Breaks (`<br>`)

Bold (`<b>`)

Italic (`<i>`)

Underline (`<u>`)

Unordered Lists (`<ul>`)

Ordered Lists (`<ol>`)

Definition Lists (`<dl>`)

6. Links (`<a>`)

5. Elements Inside the `<head>`