Week 1 Training: Introduction to Visual Studio Code and HTML
As a former 3D Animator with more than 12 years of experience, I have always been fascinated by the intersection of technology and creativity. That's why I recently shifted my career towards MERN stack development and software engineering, where I have been serving since 2021.
With my background in 3D animation, I bring a unique perspective to software development, combining creativity and technical expertise to build innovative and visually engaging applications. I have a passion for learning and staying up-to-date with the latest technologies and best practices, and I enjoy collaborating with cross-functional teams to solve complex problems and create seamless user experiences.
In my current role as a MERN stack developer, I have been responsible for developing and implementing web applications using MongoDB, Express, React, and Node.js. I have also gained experience in Agile development methodologies, version control with Git, and cloud-based deployment using platforms like Heroku and AWS.
I am committed to delivering high-quality work that meets the needs of both clients and end-users, and I am always seeking new challenges and opportunities to grow both personally and professionally.
Overview
In the first week of training, we covered how to install and use Visual Studio Code (VS Code), a popular code editor for web development. We also introduced the basics of HTML, using the first two chapters of John Duckett's "HTML and CSS: Design and Build Websites" as a reference. This documentation provides detailed information and examples to help you understand these topics better.
HTML Book
https://github.com/InnoSufiyan/SMIT-B11/blob/main/00.%20Web%20development%20book%20(jon%20ducket)%20%20(1).pdf
Visual Studio Code (VS Code)
Installation
1.Download VS Code:
Go to the VS Code website.
Click on the download link for your operating system (Windows, macOS, or Linux).
2.Install VS Code:
Run the downloaded installer and follow the on-screen instructions.
Once installed, launch VS Code.
Benefits
Lightweight and Fast: VS Code is lightweight and starts up quickly.
Extensions: Supports a wide range of extensions for additional functionality.
Integrated Terminal: Allows you to run command-line tasks within the editor.
Git Integration: Built-in support for Git version control.
Debugging: Powerful debugging capabilities.
Short Keys
Command Palette:
Ctrl+Shift+P(Windows/Linux) orCmd+Shift+P(macOS)Open File:
Ctrl+P(Windows/Linux) orCmd+P(macOS)Save File:
Ctrl+S(Windows/Linux) orCmd+S(macOS)Cut Line:
Ctrl+X(Windows/Linux) orCmd+X(macOS)Copy Line:
Ctrl+C(Windows/Linux) orCmd+C(macOS)Paste Line:
Ctrl+V(Windows/Linux) orCmd+V(macOS)Toggle Terminal:
Ctrl+(Windows/Linux) orCmd+(macOS)
Introduction to HTML
HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using markup. HTML elements are represented by tags.
Basic Structure of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Markup
Tags and Elements
HTML tags are enclosed in angle brackets. Most tags come in pairs: an opening tag and a closing tag.
Example:
<p>This is a paragraph.</p>
The <p> tag defines a paragraph.
Headings
HTML provides six levels of headings, from <h1> to <h6>.
Example:
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>
Text Formatting
Bold Text: <b> or <strong>
<b>This text is bold</b>
<strong>This text is also bold</strong>
Italic Text: <i> or <em>
<i>This text is italic</i>
<em>This text is also italic</em>
Subscript and Superscript:
<sub>2</sub>O (Water)
x<sup>2</sup> (x squared)
Additional Content from Chapters 1 and 2
John Duckett’s "HTML and CSS" book is a great resource for learning web development. The first two chapters introduce the following concepts:
Basic HTML Tags:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a paragraph.</p>
<a href="https://example.com">This is a link</a>
</body>
</html>
Block-level and Inline Elements:
Block-level elements start on a new line (e.g., <div>, <h1>, <p>).
Inline elements do not start on a new line (e.g., <span>, <a>, <img>).
Example Code from First Two Chapters
Here’s a practical example combining various tags and elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample HTML Document</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML document.</p>
</header>
<section>
<h2>About Me</h2>
<p>My name is <strong>Muhammad Sufiyan</strong>, and I have 12 years of experience in design and animation and 3 years of Experience in Web Development</p>
<p>I love teaching and sharing my knowledge with others.</p>
</section>
<section>
<h2>Contact Information</h2>
<p>You can reach me at: <a href="tel:+03422318760">0342-2318760</a></p>
</section>
<footer>
<p>© 2024 Muhammad Sufiyan. All rights reserved.</p>
</footer>
</body>
</html>
Conclusion
This documentation serves as an introductory guide to Visual Studio Code and the basics of HTML. Keep practicing and experimenting with different tags and elements to enhance your web development skills. If you have any questions or need further assistance, feel free to reach out during our sessions. Happy coding!
Instructor: Muhammad Sufiyan
Linkedin: https://www.linkedin.com/in/innosufiyan/