AI Tutors for Beginner Web Developers

Peta Stewart — Tue, 26 Mar 2024 23:06:44 +0000

In our new age of AI it, new tools are becoming available every day. So let us make the most of them!

Embracing AI for Learning
Troubleshooting with AI
Cons of AI Tutors
Conclusion

Embracing AI for Learning

In our new age of AI it, new tools are becoming available every day. And for beginners following a “Web Dev Pathway” “Web Dev Pathway”, these tools are perfect for free lessons.

By using given challenge topics as AI chat prompts, you can fast track your learning progress. This will save you many hours sifting through irrelevant links and sites. If anything is unclear to you, simply ask the AI to explain it and your questions will be answered.

Troubleshooting with AI

In addition to learning new topics, AI can also help you to find solutions for any problems you come across in your coding. Ai will quickly provide you with a checklist of possible causes and how to address them.

Cons of AI Tutors

Where data is limited on a topic, AI is liable to make some mistakes. However, resources for HTML, CSS and Javascript are abundant, making the perfect choice when learning the fundamentals of web development.

Conclusion

AI is outperforming all beginners’ courses for teaching to code. Not only are they free but they also respond to your queries immediately. So get ahead and start learning with your AI tutor today.

Happy Coding : )

HTML Shortcuts in VS Code

Peta Stewart — Thu, 21 Mar 2024 11:28:48 +0000

Speed Coding

Becoming an efficient developer sometimes requires us to spend a little time to learn a few shortcuts. And here Emmet is helping us. Emmet is a plug-in which ships with VS Code and provides shorthand notations for HTML when writing code in .html files.

Shortcut Features Include:

HTML Page Template
Elements
Sibling Elements
Child Elements
Grouping
Climb Up
Multiple Elements
Class & ID's
Adding Text
Custom Attributes
Numbering
Tag Attributes
Place Holder Text

Note: To accept the emmet shortcut, press "Tab" or "Enter. And to skip all the suggestions, press "Esc" or adding a space will remove the list.

HTML Page Template

To add the new page boilerplate code, insert:

And then enter to get:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Elements

Type any element tag name

h1

To get the closing and opening tags

<h1></h1>

Sibling Elements

Use +

header+footer

To add element on the same level

<header></header>
<footer></footer>

Child Elements

Use >

    header>nav

To add a nested element

    <header>
        <nav></nav>
    </header>

Grouping

Use ()

    header+(main>section)+footer

To group elements

    <header></header>
    <main>
        <section></section>
    </main>
    <footer></footer>

Climb Up

Use ^ to escape a level of nesting

    header+main>section^footer

To escape a level of nesting

    <header></header>
    <main>
        <section></section>
    </main>
    <footer></footer>

Multiple Elements

Use *

    ul>li*4

To multiply the number of elements

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

Class & ID's

Use .

    nav.my-nav

To add a class

<nav class="my-nav"></nav>

And #

nav#my-id

To add an ID

<nav id="my-id"></nav>

Adding Text

Use {}

button{Click Me}

To add text between the tags

<button>Click Me</button>

Custom Attributes

Use []

button[data-id=btn-id]

To add a custom attribute inside the tag

<button data-id="btn-id"></button>

Numbering

Use $

ul>li*3#my-item${I'm number $}

To add numbering for the element

<ul>
    <li id="my-item1">I'm number 1</li>
    <li id="my-item2">I'm number 2</li>
    <li id="my-item3">I'm number 3</li>
</ul>

Tag Attributes

Use :

script:src

To add attributes

<script src=""></script>

Place Holder Text