Skip to main content

HTML : Intro to web design and coding

 HTML  : My Journey 👀


Embarking on the interesting journey of net development, I observed the magic of HTML (Hypertext Markup Language), a language that forms the spine of the ever-increasing digital universe. As I delved into the realms of coding and layout, HTML emerged as my depended on companion, empowering me to form ideas into tangible, interactive internet reviews.

This article unfolds my private exploration of HTML, the language that transformed my aspirations into functional web sites. .

There are several user friendly coding apps and online platforms that  cater specifically to beginners learning HTML. 

 (a) Code academy:

Platform: Web-based
Features: Interactive coding lessons, real-time feedback, and projects.

(b) free Code Camp:

Platform: Web-based
Features: Hands-on coding challenges, projects, and a supportive community.

(c) Solo Learn:

Platform: Mobile app (iOS, Android), Web-based
Features: Bite-sized lessons, quizzes, and a community for learning and sharing.

(d) W3Schools:

Platform: Web-based
Features: Extensive documentation, live examples, and interactive coding exercises.

(e) Mozilla Developer Network (MDN) Web Docs:

Platform: Web-based
Features: Comprehensive HTML documentation, tutorials, and guides.

(f) Visual Studio Code (VS Code) with Live Server Extension:

Platform: Desktop application (Windows, macOS, Linux)
Features: A lightweight code editor with a Live Server extension for instant HTML preview.

(g) Atom with Atom Live Server:

Platform: Desktop application (Windows, macOS, Linux)
Features: A customizable text editor with Atom Live Server for real-time HTML previews.

In here I'll show you HTML coding with vs code. Embarking on web development, HTML became my foundation, meticulously crafted in Visual Studio Code. This article unveils the symbiosis of coding and sophistication, showcasing snippets of HTML within the dynamic realm of VS Code.
"Getting Started with HTML Using Visual Studio Code"

 


 1.   Setting Up Your Development Environment

Before diving into HTML coding, it's important to have the right tools for the job. One popular and powerful code editor for web development is Visual Studio Code.

(a) Installing Visual Studio Code
Download VS Code:
Visit the Visual Studio Code website and download the installer for your operating system.





(b) Install VS Code:
Run the installer and follow the on-screen instructions to install Visual Studio Code on your machine.



(c) Extensions:
VS Code has a rich ecosystem of extensions. You can enhance your development experience by installing extensions for HTML, CSS, and JavaScript support.

2. Creating Your First HTML File

Now that you have VS Code installed, let's create a simple HTML     file.

(a) Open VS Code:

Launch Visual Studio Code.

(b) Create a New File:

Click on "File" in the top-left corner, select "New File," and save it with an .html extension, for example ,  "index.html."

(c) HTML Structure:

I mentioned here some HTML tags👇

(1) Document Structure:

  • <!DOCTYPE html>:  Declaration of the HTML version.
  • <html>:   Root element.
  • <head>:   Contains meta-information about the HTML document.
  • <title>:    Sets the title of the HTML document.
  • <body>:   Contains the content of the HTML document.
(2) Text Formatting:

  • <h1> to <h6>: Heading tags (1 being the largest, 6 being the smallest).
  • <p>:  Paragraph.
  • <br>: Line break.
  • <hr>: Horizontal rule.
(3) Lists:
  • <ul>:  Unordered list.
  • <li>:   List item.
  • <ol>:  Ordered list.
  • <li>:   List item.
  • <dl>:  Definition list.
  • <dt>:  Term in a definition list.
  • <dd>:  Definition in a definition list.

(4) Links:
  • <a>:  Anchor (used for hyperlinks).
  • href: Attribute specifying the URL.

(5) Images:

<img>   :       Image.
  src       :      Attribute specifying the image source.
  alt        :      Attribute specifying alternative text for accessibility.

(6) Forms:

<form>   : Form.
 action     : Attribute specifying the form submission URL.
method   : Attribute specifying the HTTP method (e.g., "GET" or "POST").
<input>  : Input field.
  type      : Attribute specifying the input type (e.g., "text", "password", "checkbox").
  name    : Attribute specifying the input name.
<textarea> : Multiline text input.
<select> : Dropdown list.
<option> : Option within a dropdown list.

7. Tables:

<table>: Table.
<tr>: Table row.
<td>: Table data (cell).
<th>: Table header cell.

8. Semantic HTML:

<article>  : Represents a self-contained piece of content.
<section> : Represents a section within a document.
<header> : Represents a header section.
<footer>   : Represents a footer section.
<nav>       : Represents navigation links.
<aside>    : Represents content tangentially related to the content around it.

9. Metadata:

<meta> : Metadata about the HTML document.
charset  : Attribute specifying the character encoding.

10. Miscellaneous:

<div>    : Generic container.
<span> : Generic inline container.
<blockquote>  : Block-level quotation.
<cite>  : Citation.


Basic HTML structure




  • This structure includes the essential HTML tags like <!DOCTYPE html> , <html>, <head> , <meta>  and <body> . The  <title>  tag  is where you specify the title of your webpage.

(d) Adding content

inside the <body> tag, you can add various HTML elements to create your content. 

Live Preview in Visual Studio Code

 VS Code provides a useful extension called "Live Server" that allows you to see a live preview of your HTML pages.

1. Install Live Server:
       -     Open the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window. Search for "Live Server" and install it.

2. Open with Live Server:
     -    Right-click on your HTML file and select "Open with Live Server." This will open your HTML file in a new browser window, and any changes you make in the HTML file will automatically trigger a refresh in the browser.


Conclusion
 
Getting started with HTML using Visual Studio Code is a straightforward process. With a basic understanding of HTML and the right tools, you can start creating web pages and exploring the world of web development. As you progress, you can delve deeper into CSS for styling and JavaScript for interactivity, turning your static pages into dynamic and engaging web experiences. Happy coding!😎





Labels:

Comments

Post a Comment

Popular posts from this blog

Achieving Success : Simple stragedies for the journey

 U nlocking the path to success  Success is a journey not a destination. 1.Define your vision "Where there is no vision, there is no hope" - George Washington Carver 2.Set smart goals "Setting goals is the first step in turning the invisible into the visible "   -    Tony Robbins 3.Embrace continuous learning "Continuous learning is the minimum requirement for success in any field" - Brian Tracy 4.Cultivate a growth mindset A growth mindset sees challenges as opportunities for growth  5.Develop strong work ethics "The best way to learn is by doing. The only wat to build a strong work ethic is getting your hands dirty" - Alex Spanos 6.Build a supportive network "Networking is an essential part of building wealth" - Armstrong Williams 7.Embrace  resilience "Resilience is knowing that you are the only one who has the power and the responsibility to pick yourself up." - Mary Holloway 8.Practice mindfulness "Mindfulness mea...
Post a Comment
Read more

Artificial Intelligence (AI): Transforming the Landscape of Innovation

Artificial Intelligence (AI): " Transforming the Landscape of Innovation". In the unexpectedly evolving world of generation, Artificial Intelligence (AI) stands as a beacon of transformative power. From revolutionizing industries to reshaping every day life, AI is at the leading edge of innovation. This article delves into the important thing sides of AI, exploring its contemporary nation, ability applications, moral issues, and the consequences for the future. Understanding AI: At its middle, AI refers back to the improvement of computer structures which can perform duties that normally require human intelligence. This contains a extensive variety of capabilities, from hassle-solving and studying to herbal language processing and belief. Machine Learning (ML), a subset of AI, permits structures to enhance overall performance primarily based on enjoy, similarly amplifying their adaptability. Current Applications: AI has already woven itself into the material of diverse...
Post a Comment
Read more

Hey, Let Me Tell You About This Awesome Day I Had!

You know those days where everything just clicks, and you're like, "Wow, life is pretty amazing"? Well, I recently had one of those days, and I've gotta spill the beans about it! So, picture this: I woke up feeling all refreshed and ready to tackle the world. The sun was peeking through my curtains, and I could already tell it was gonna be a good one. No Monday blues in sight! I decided to kick things off with a little nature therapy, so I headed to this nearby park. Let me tell you, it was like stepping into a scene from a fairytale. The birds were singing, the trees were swaying, and I just strolled around, soaking it all in. It was the perfect start to the day Рpeaceful and rejuvenating. After my park adventure, I found myself drawn to this adorable caf̩ I'd been meaning to check out. I swear, it was straight out of a Pinterest board. The vibe was cozy, the coffee was top-notch, and I had the place practically to myself. I grabbed a seat by the window, cracked...
Post a Comment
Read more