ByteWise Solutions

07/08/2025

🚀 I’m excited to share that my personal portfolio website is now live! 🎉

After weeks of design, code, and caffeine ☕️, it's finally ready. Feel free to check it out and explore my projects, skills, and experience.

💻 Visit here 👉 https://bytewisesolutions.kesug.com

Whether you're curious about my work, a potential collaborator, or just want to support, I’d love your feedback! 🙌

23/07/2025

Angular Js + Spring boot 🔥🔥
Angular Js + Python (flask) 🔥🔥

08/06/2025

📌 Post 7: HTML Buttons and User Interaction – Make Things Clickable!
🔹 Series: Learn Software Engineering from Scratch

Websites aren't just for reading — they’re for doing!
Today, let’s learn how to add buttons and respond when users click them using JavaScript.

🖱️ Step 1: Add a Button

Add this inside your tag:

Click Me

🧠 What does this mean?

creates a clickable button

onclick="sayHello()" tells it what to do when clicked

Now, we’ll create that sayHello() function in JavaScript.

🧠 Step 2: Add JavaScript to Respond

Below the button (but still inside ), add:


function sayHello() {
alert("Hello, Lebohang! You clicked the button!");
}


✅ Final Code Sample:




Button Example



Welcome to My Page
Click Me


function sayHello() {
alert("Hello, Lebohang! You clicked the button!");
}





✨ Now when someone clicks the button, they see a message pop up!

📚 Mini Task:
Change the message inside alert() to say your own name or a funny message.

Try this:
alert("🚀 I'm learning JavaScript and it's awesome!");

📍Next Post: Variables in JavaScript – Store and Use Information
We’ll learn how to store names, numbers, and more using variables!

💬 Comment “🔘” if you clicked the button and saw your custom message!

06/06/2025

📌 Post 6: Styling with CSS – Make Your Web Page Look Beautiful

🔹 Series: Learn Software Engineering from Scratch

Your HTML page works… but it’s boring. Let’s give it style, colour, and personality using CSS!

🎨 What is CSS?
CSS stands for Cascading Style Sheets.
It tells the browser how things should look — like:

Font size and colour

Background colours

Layouts and spacing

Animations and more

🛠️ Let’s Style Your Page

Open your .html file

Add a block inside your :


Styled Page

body {
background-color: ;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: ;
}
p {
color: #333;
}



Save and open the file in your browser

✨ Your page should now have:

A light grey background

A blue heading

Nicely styled text

🧠 What’s Going On?

body {} changes the page background and font

h1 {} styles the heading

p {} styles your paragraph

This is called internal CSS — because the styles are inside the HTML file.

📚 Mini Task:
Try changing the background-color to your favourite colour and the h1 text to say:

I Just Styled My First Page with CSS!

👀 Next Up: External CSS
Later, we’ll move to external CSS files, so your styles don’t clutter your HTML.

📍Next Post: HTML Buttons and User Interaction – Make Things Clickable!
Soon we’ll start interacting with users using buttons and JavaScript.

💬 Comment “🎨” if your web page now looks cooler!

05/06/2025

📌 Post 5: HTML Basics – The Building Blocks of Every Web Page
🔹 Series: Learn Software Engineering from Scratch

Before we build complex systems, we need to understand how websites are structured. And that’s where HTML comes in.

🧱 What is HTML?
HTML stands for HyperText Markup Language.
It’s the foundation of every web page. It tells the browser:

What content to display

Where to place it

How it’s organised

Think of HTML as the skeleton of a web page.

🔧 Basic HTML Structure:




My First HTML Page


Hello World!
This is my first web page.



🧠 What do the tags mean?

| Tag | Meaning |
| ----------------- | ----------------------------|
| `` | Declares this is an HTML5 page |
| `` | Wraps the entire page |
| `` | Contains page settings (not shown) |
| `` | Shows in the browser tab |
| `` | The visible part of your webpage |
| `` | A big headline |
| `` | A paragraph of text |

📚 Mini Task:
Try this! Change the to your name:
Hello, I’m Lebohang!

Save and reload your .html file.
🧠 Bonus Tip: You can add more tags like:

for images 🖼️

for links 🔗

and for lists ✅

📍Next Post: Styling with CSS – Make Your Web Page Look Beautiful
Now that we can structure our pages, we’ll learn how to make them look good with colours, fonts, and layout.

💬 Comment “📄” if you built your first HTML page today!

05/06/2025

Angular 🔥🔥

05/06/2025

JavaScript 🔥🔥

04/06/2025

📌 Post 4: How to Save and Run JavaScript in a Real Web Page
🔹 Series: Learn Software Engineering from Scratch

Now that you've written your first JavaScript code, it’s time to run it inside a real webpage — just like professional developers do!

🛠️ What You Need:

A text editor (like Notepad, VS Code, or Sublime Text)

A web browser (like Chrome or Firefox)

🧱 Let’s Build a Simple Web Page

Open your text editor

Copy and paste this code:



My First Web Page


Hello from HTML!


alert("Hello from JavaScript!");




Save the file as: my-first-page.html

Double-click the file to open it in your browser

🎉 You should see a web page and a pop-up message!

🧠 What’s Happening Here?

The HTML creates the structure of the page.

The tag runs your JavaScript code.

alert() shows the pop-up.

This is how websites combine HTML (structure) + JavaScript (logic) to make things interactive.

📚 Quick Tip:
If you're serious about coding, download VS Code (Visual Studio Code). It’s free, powerful, and what many real developers use:
👉 https://code.visualstudio.com

🎯 Mini Task:
Change the message inside the alert() to say your name.

alert("My name is Lebohang, and I’m learning JavaScript!");

Then save and open the file again.

📍Next Post: HTML Basics – The Building Blocks of Every Web Page
We'll break down how HTML works so you can control what appears on your site.

💬 Comment “💡” if you got your first web page running!

Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

03/06/2025

📌 Post 3: Learn Your First Programming Language – JavaScript
🔹 Series: Learn Software Engineering from Scratch

👨‍💻 Let’s Write Code for the First Time!

Now that you understand what a computer is and how programming works, it’s time to pick a language — and we’re starting with JavaScript.

🟨 Why JavaScript?

🌍 It runs in all web browsers — no installation needed.

🧠 Easy to learn for beginners.

⚡ Can be used for frontend (web design), backend (server-side), mobile apps, and even games.

💼 High demand in the job market.

🛠️ What is JavaScript?

JavaScript is a programming language used to add life to websites. Without it, websites would just be plain text and images. With JavaScript, you can:

Make things move ✨

Add buttons that do something when clicked ✅

Show pop-up messages 📢

💬 Your First JavaScript Code

Here’s your first ever line of code! Open your browser, right-click → Inspect → go to the Console tab, then type:

console.log("Hello, world!");

✅ You just told your computer to print a message.

🧠 What Did You Just Do?

console.log() is a command.

"Hello, world!" is a message (a string of text).

The semicolon ; ends the command.

📌 Mini Task:
Go to this free website: https://jsfiddle.net
Try this:

alert("Welcome to the Software Engineering Journey!");

It will pop up a message on your screen 🎉

📍Next Post: How to Save and Run JavaScript in a Real Web Page

This is where we’ll start building simple web pages with HTML + JavaScript!

💬 Comment “🚀” if you just ran your first line of code!

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

02/06/2025

📌 Post 2: Understanding Computers & Programming Basics
🔹 Series: Learn Software Engineering from Scratch

👩‍💻 Let’s Start with the Basics

Before you write any code, you must understand how computers work and how they "understand" instructions.

💡 What is a Computer?
A computer is a machine that processes data. It follows instructions (called programs) to perform tasks like calculations, displaying content, or running apps.

🧠 What is Programming?
Programming is the process of giving instructions to a computer so it can do what we want — like showing a website, running a game, or sending an email.

You write these instructions using programming languages such as:

🐍 Python

☕ Java

💻 JavaScript

📱 Dart (used in Flutter)

📄 How Does It Work?

1. You write code.

2. The computer reads it.

3. It does exactly what you say (nothing more, nothing less).

4. If something goes wrong, you debug (fix) it.

🧰 Key Concepts to Know First:

What is input and output?

What is memory (RAM)?

What is a CPU?

What is a file or folder?

Understanding these gives you confidence when coding later.

🎯 Mini Challenge
Find out what kind of processor (CPU) your phone or laptop has. You’ll start seeing your device with new eyes 👀

📍Next Post: Learning a Programming Language (we’ll use JavaScript)
Stay tuned!

💬 Drop a 💻 if you’re excited to write your first code soon.

02/06/2025

Continuation of Introduction to Software Engineering....

🔧 What Do Software Engineers Do?
They:

Analyse problems and design software to solve them

Write and test code

Work in teams to build large applications

Maintain and upgrade existing systems

Think logically and creatively

🚀 What You'll Learn in This Journey:
✅ Programming fundamentals
✅ Web & mobile development
✅ Databases and backend logic
✅ Software project planning & testing
✅ Building real apps step by step
✅ Final project

🗓️ Join this free learning journey now!
Every few days, we’ll unlock a new topic. If you stay consistent, you’ll build skills step-by-step — even if you’re starting from zero!

📍Next Post: Understanding Computers & Programming Basics

🔁 Tag a friend who wants to learn software engineering too!

31/05/2024

React