HTML Learning Part-01

HTML Learning Part-01

     HTML Learning Part-01

    https://vscode.dev/

    https://github.com/shovoalways

    https://github.com/hkhasib24

    https://github.com/anisul-Islam

    https://github.com/gitdagray/html_course

    https://validator.w3.org/


    https://www.youtube.com/watch?v=kUMe1FH4CHE&t=2393s


    ⭐️ Course Contents ⭐️

    (00:00:00) Intro 

    (00:00:55) Chapter 1 - Getting Started

    (00:20:13) Chapter 2 - Head Element

    (00:29:02) Chapter 3 - Text Basics 

    (00:49:45) Chapter 4 - List Types

    (00:59:55) Chapter 5 - Add Links 

    (01:30:38) Chapter 6 - Add Images

    (02:00:58) Chapter 7 - Semantic Tags 

    (02:24:53) Chapter 8 - Create Tables 

    (02:40:42) Chapter 9 - Forms & Inputs 

    (03:25:16) Chapter 10 - HTML Project


    (00:00:55) Chapter 1 - Getting Started


    Vs code Setup

    Extension Setup

    W3c Code Validation

    H1, H2, H3 <P>Tag Descuss

    https://validator.w3.org/


    (00:20:13) Chapter 2 - Head Element


    Head Element Using 

    Meta name

    Link rel

    Style.css

    Internal & External Css use in Meta Tag

    Doucument Type Logo Change.


    (00:29:02) Chapter 3 - Text Basics 


    Use Tag

    <H1>

    <H2>

    <H3>

    <P>

    <hr>

    <br>

    <em>

    <strong>

    &nbsp;&nbsp;&nbsp;

    &lt;&lt; &lt; &copy; Hasib &gt;&gt;&gt;


    <abbr>

    <address>

    <!--Comment-->


    (00:49:45) Chapter 4 - List Types


    <li>

    <ol>

    <ul>

    <dl>

    <dt>

    <dd>


    (00:59:55) Chapter 5 - Add Links 


    <a href="https://www.google.com"> Google </a>


    <a href="https://www.google.com"terget="_blank"> Google </a>


    Create About Me Link


    <Section> </Section>


    <nav> </nav>


    link highlight

     using #


    <a href="#"> Back to top </a>


    link email

    link Phone No.


    <a href="/" > Back to Home </a>


    (01:30:38) Chapter 6 - Add Images








    Visual Studio Code Customization

    🛠 VS Code Settings


    ⚙️ VS Code Extension

    • HTML CSS Support (ecmel)

    • Live Server (Ritwick Dey)

    • Prettier - Code formatted (Prettier)

    • Code Runner

    • Vscode-icons

    • Material Icon Theme (Philipp Kief)

    • Auto Rename Tag


    🎨 VS Code Themes

    • Andromeda 

    • Dracula Official 👈



    🔑 VS Code Keyboard Shortcuts

    Keyboard Shortcuts

    Windows / Linux

    Mac

    HTML boilerplate

    ! + TAB

    ! + TAB

    Open the palette to search for a file

    Ctrl + P

    cmd + P

    Add cursors to all matching selections

    Ctrl + Shift + L

    cmd + Shift + L

    Undo

    Ctrl + U

    cmd + U

    Select Current Line

    Ctrl + L

    cmd + L

    Zen Mode

    Ctrl + K Z

    cmd + K Z

    Toggle Sidebar

    Ctrl + B

    cmd + B

    Search Global Files

    Ctrl + Shift + F

    Ctrl + Shift + F

    Search on file

    Ctrl + F

    cmd + F

    Find and Replace

    Ctrl + H

    cmd + H

    Delete the previous Word

    Ctrl + Backspace

    cmd + Backspace

    Move line up/Down

    Alt + up/down arrow

    option + up/down arrow

    Add multiple cursors

    Ctrl + Alt +up/down arrow

    cmd + option + up/down arrow

    Comment Line

    Ctrl + /

    cmd + /

    Comment Line

    Ctrl + K + Ctrl + C

    cmd + K + cmd + C

    Split View

    Ctrl + \

    cmd + \

    Switch Between views

    Ctrl +1, Ctrl + 2 ..

    cmd + 1, cmd + 2

    Duplicate Line

    Alt + Shift + up/down

    option + Shift + up/down

    Navigate to a specific line

    Ctrl + g

    cmd + G

    Open Terminal

    Ctrl + `

    cmd + `

    To Show suggestion

    Ctrl + Space

    cmd + space

    To Close a TAB

    Ctrl + W

    cmd + W

    To Close all TAB

    Ctrl + Shift + W

    cmd + Shift + W


    ✒ Font Info

    Keyboard Shortcut:

    ! পর Enter Key চাপলে DocType আসবে।

    অথবা

    html: তারপর Enter Key চাপলে DocType আসবে।

    h1 লেখে Tab এ ক্লিক করলে <h1> </h1> আসবে।

    Shift+Alt+ Down Arrow তে ক্লিক করলে Text Dublicate হবে।

    Leave a Comment