What Will You Learn?

This tutorial walks you through the process of downloading and using three essential coding tools for mobile developers:

• SPCK Editor: A powerful code editor for HTML, CSS, and JavaScript.
• Acode: A lightweight code editor for various web development languages.
• W3Schools Offline: A mobile version of the W3Schools website for offline coding tutorials and reference.

Why Are These Tools Important?

• Allows coding directly on your phone or tablet, no need for a computer.
• Perfect for on-the-go development or if you're just starting out.
• Access to a variety of languages and coding tutorials without the need for an internet connection.

How I Created This Tutorial:
In the video, I'll guide you through:

• Downloading the apps from the Google Play Store
• Setting up the apps for first-time use
• Basic usage for HTML, CSS, and JavaScript development

NB: While mobile coding is convenient, it can be limiting for more complex projects. For bigger tasks, consider using a desktop or laptop. However, these tools are great for learning, testing small projects, or coding on the go!

Quick Overview:

In this video, we guide you through learning HTML basics directly on your phone. You'll learn how to write simple HTML code, create a basic webpage, and see it come to life in real-time.

Key Steps:

• Install the recommended apps (SPCK, Acode, Webscool Offline) from the Play Store.
• Write your first HTML code in the app editor.
• Preview and test your webpage within the app.
• Learn about HTML tags, structure, and how to organize your code.

Why This Is Important: HTML is the first step toward building websites. It is easy to learn and perfect for mobile learning. Starting with the basics will set a solid foundation for more advanced web development skills.

About HTML:

• HTML stands for **HyperText Markup Language**.
• It is the standard language used to create web pages.
• HTML uses **tags** to define elements like headings, paragraphs, links, images, and more.
• HTML is essential for structuring content on the web. It provides the backbone for websites.
• Once you understand the basics of HTML, you can move on to CSS (for styling) and JavaScript (for interactivity).

Did You Know?
HTML was created in 1991 by **Tim Berners-Lee**, the founder of the World Wide Web. It has evolved over the years, but the core principles remain the same.

🔎 Overview:
This part continues teaching HTML by showing how to create content structure using tags like headings, paragraphs, and links. You’ll also learn how to view your code on your phone using simple tools.

✅ Key Topics:

• Using headers to structure your webpage
• Adding links with <a> and images with <img>
• Understanding HTML attributes like href and src
• Testing your webpage with mobile apps

🧠 Useful Tags:

• <h1> to <h6> – headings from most important to least
• <p> – for writing paragraphs
• <a href=""> – to create a link
• <img src=""> – to show an image

💡 Tip:
Always use <h1> only once per page for the main title!

📌 What You'll Learn:
This video focuses on formatting text using HTML tags. These tags help you style content for better readability and presentation.

📖 Key Formatting Tags:

• <b> – Bold text
• <i> – Italic text
• <u> – Underlined text
• <small> – Smaller font size
• <mark> – Highlight text
• <sub> / <sup> – Subscript / Superscript

✨ Tips:

• Use formatting to improve clarity and focus, not just for decoration.
• Combine tags for creative effects (e.g., <b><i> for bold + italic).

💬 Practice: Try creating a simple paragraph and format key phrases using these tags.

📌 What You'll Learn:
In this lesson, you’ll learn how to collect data using forms, and how to embed images and videos into your webpage.

🧾 Forms:

• <form> – Wraps all form elements.
• <input> – Accepts user input (text, email, etc.).
• <textarea> – Multiline input area.
• <button> or <input type="submit"> – Submit button.

🖼️ Images:
Use the <img> tag with the `src` attribute to display images.
🎬 Videos:
Embed videos using the <video> tag or use iframes (like YouTube embeds).

✅ Pro Tip:
Always add `alt` to images for accessibility, and test your forms in a browser (or on your phone using Acode).

This full course is perfect if you're:

• 📱 Learning HTML on your phone
• 👶 Starting from absolute beginner level
• 🌐 Wanting to build your first web page step by step

💡 What You’ll Learn:

• How to create structured HTML pages
• Use of headings, paragraphs, and line breaks
• Inserting links, images, videos, and lists
• Creating forms and collecting data
• Embedding content from YouTube and more

✨ Tip: Practice along using free mobile code editors like Acode or Dcoder.

This part introduces you to CSS, the language of design:

• 🎨 What is CSS and why we use it
• 🧾 How to add CSS to HTML (inline, internal, external)
• 🎯 Basic CSS syntax: selectors, properties, and values
• 💻 Styling text, fonts, and colors
• 📱 CSS for responsive design (intro)

💡 Pro Tip: Open two tabs — one with your editor and one with your video. Practice as you learn!

This lesson dives deeper into styling and layout:

• 🎯 CSS Classes and IDs
• 📦 Box Model (margin, border, padding, content)
• 🧱 Display properties: block, inline, inline-block
• 📐 Width, height, and max-width usage
• 🎨 More practice with colors and borders

🧪 Tip: Try experimenting with `border-radius` and `box-shadow` for creative card designs!

This course is ideal if you want to:

• ⚡ Build responsive websites fast
• 📱 Master mobile-first design
• 🎯 Use pre-built Bootstrap components

💡 What You’ll Learn:

• How to set up Bootstrap using CDN
• Working with rows and columns (Grid System)
• Creating navbars, buttons, cards, forms, and modals
• Using utility classes for spacing, text, colors, etc.
• Mobile-first responsive design techniques

💬 Pro Tip: Combine Bootstrap with custom CSS to create unique styles fast!