IT TUTORIAL
In this project, I developed a Tutorial: How to Use HTML in Visual Studio Code application using Flutter. The main purpose of this app is to help beginners understand how to start coding HTML using one of the most popular and beginner-friendly code editors: Visual Studio Code (VS Code). This tutorial app is designed to guide users step-by-step, starting from installation all the way to writing their first HTML webpage.
The home screen presents a clean, minimalistic interface that organizes the lessons into several key sections: Introduction to HTML, Installing VS Code, Setting Up HTML Extensions, Creating Your First HTML File, Writing Basic Tags, and Previewing Your HTML Page. The interface uses Flutter widgets such as ListView, Card, and Container to maintain a simple and responsive layout that looks good on both small and large screens.
One important section of the app teaches users how to install Visual Studio Code on Windows, macOS, or Linux. Each platform has its own step-by-step guide complete with screenshots, explanations, and tips. The tutorial also covers how to install useful VS Code extensions like Live Server, which allows users to preview their web pages instantly and see HTML changes in real time.
Another major part of the app focuses on teaching users how to create their first HTML file inside VS Code. The lesson walks through the folder setup process, creating a file named index.html, and typing the standard HTML boilerplate using the VS Code shortcut ! + Tab to automatically generate the basic HTML structure. This helps beginners understand how a webpage is constructed, including the <html>, <head>, and <body> tags.
To make learning more interactive, I added a code example section, where users can see sample HTML code and learn about basic elements such as headings (<h1>), paragraphs (<p>), images (<img>), and hyperlinks (<a>). These examples are explained in simple language to ensure beginners can follow comfortably.
In addition, the app includes a Live Preview Tutorial that shows users how to use the Live Server extension. This guide teaches how to launch a local development server and preview HTML pages directly in the browser, making the learning experience more practical and hands-on.
Technically, the app is built using Flutter and Provider for state management. The UI supports both light and dark modes to make reading comfortable at any time. The design focuses on clarity, with large icons, readable fonts, and structured lesson flow to help new learners understand HTML quickly and confidently.
Creating this tutorial app allowed me to combine my knowledge in web development and Flutter mobile development to deliver a learning tool that is practical, accessible, and beginner-friendly. My goal is to help students and aspiring developers learn HTML easily using Visual Studio Code—the same tool used by millions of professional developers around the world.