HTML & Coding Introduction – Course for Beginners

Learn the basics of HTML and how to begin coding in this course for beginners.

Are you interested in coding but have never tried it before? Are you curious about how to create your own website or app? If so, then this video course is for you!

✏️ Course developed by @aniakubow

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:34) What is a code editor?
⌨️ (0:03:08) Code editor options
⌨️ (0:03:52) Files files files
⌨️ (0:07:27) HTML Introduction
⌨️ (0:09:27) HTML - what is it exactly?
⌨️ (0:11:53) HTML Syntax
⌨️ (0:17:08) Saving files in your code editor
⌨️ (0:18:19) HTML Anatomy
⌨️ (0:22:50) Headings
⌨️ (0:24:49) Paragraphs
⌨️ (0:26:04) HTML headings, paragraphs and emphasis
⌨️ (0:32:20) Indenting code in HTML
⌨️ (0:34:03) HTML lists
⌨️ (0:38:54) HTML links
⌨️ (0:43:49) Navigating Pages
⌨️ (0:51:20) Images in HTML
⌨️ (0:55:15) Creating tables using HTML
⌨️ (1:03:27) Introducing the Div
⌨️ (1:05:09) Semantic sectioning
⌨️ (1:07:39) Table Tennis Leaderboard: Project prep
⌨️ (1:09:30) Table Tennis Leaderboard: Starting out our project
⌨️ (1:12:44) Table Tennis Leaderboard: table rows and lists
⌨️ (1:16:44) Table Tennis Leaderboard: Sectioning and the figure element
⌨️ (1:25:27) HTML forms
⌨️ (1:26:52) The various input element types in HTML
⌨️ (1:33:17) HTML Inputs exercise 1
⌨️ (1:40:40) HTML Inputs exercise 2
⌨️ (1:43:55) HTML Inputs exercise 3
⌨️ (1:48:57) The select dropdown in HTML
⌨️ (1:54:38) The Inspect tool
⌨️ (1:56:51) Using the data attribute in HTML
⌨️ (1:59:15) Commenting out code
⌨️ (2:01:29) What’s next?

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

[michaelentera]

I'm a computer science I spend over 4-5 years in Crazy university and your tutorial way better than our professor !

[MaheshPamula]

(0:00:00) Introduction
(0:01:34) What is a code editor?
(0:03:08) Code editor options
(0:03:52) Files files files
(0:07:27) HTML Introduction
(0:09:27) HTML - what is it exactly?
(0:11:53) HTML Syntax
(0:22:50) Headings
(0:24:49) Paragraphs
(0:26:04) HTML headings, paragraphs and emphasis
(0:51:20) Images in HTML
(0:17:08) Saving files in your code editor (0:18:19) HTML Anatomy
(0:32:20) Indenting code in HTML
(0:34:03) HTML lists
(0:38:54) HTML links
(0:43:49) Navigating Pages
(0:55:15) Creating tables using HTML
(1:03:27) Introducing the Div
(1:05:09) Semantic sectioning
(1:07:39) Table Tennis Leaderboard: Project prep
(1:09:30) Table Tennis Leaderboard: Starting out our project
(1:12:44) Table Tennis Leaderboard: table rows and lists
(1:16:44) Table Tennis Leaderboard: Sectioning and the figure element
(1:25:27) HTML forms
(1:26:52) The various input element types in HTML (1:33:17) HTML Inputs exercise 1
(1:40:40) HTML Inputs exercise 2
(1:43:55) HTML Inputs exercise 3
(1:48:57) The select dropdown in HTML (1:54:38) The Inspect tool
(1:56:51) Using the data attribute in HTML
(1:59:15) Commenting out code
(2:01:29) What's next?

[hdmaragh]

These 2 hours are worth and entire semester long course of most university course in this subject… very well done

[ZeryuGames]

This is awesome! Each item is crystal clear. Thanks a lot for all your effort doing this course.

[ahmedsuraj]

I always hear the acronym HTML so I thought it's a thing for the gurus and not for everyone. Your course changed my thoughts. Thank you for a well explained tutorial.

[orianaevans]

This is very informative. I’ve taken a course on web page development in high school and haven’t picked it back up since then but, this tutorial is very helpful and useful.

[fnfranco]

I watxh it 9 times better then 4 years of highschool coding

[PeterPasschier]

For html5, the head and the body tags are not mandatory, but if you do use them, they do not need to be closed (neither do p tags).

[nyang]

im so grateful for this course. i have a uni project abt building a website due in 4 days and ive been so lost but this is extremely informative i love this bcs it's so simple - idk why my uni overcomplicated it by teaching this to us in two semesters 😭 what a scam. ty ty ty

[jarekjaro]

Well done ! Good introduction to HTML, now I'm waiting for CSS, Sass etc. Dziękuję 😉

[willisianturi]

Good evening Mrs. Ania, I am Willi Chrisdeardo Sianturi, from Indonesia. First, I want to thank you for the video content. Previously, I had learned HTML, CSS, JavaScript from self study or from online training. But that's ok, I followed this tutorial. Hope it is useful.

[mb-techmedia]

Wow, Ania thank you for this great tutorial.

[dystopian_]

Mother of Dragon, good to see you again!

[bohaning]

🎯Course outline for quick navigation:

[00:00-06:14]1. Coding fundamentals and ides
-[00:00-00:48]Anu kubo guides beginners in html basics and setting up for web development.
-[01:36-02:01]Developers benefit from code editors with auto-indenting and color-coded helpers.
-[02:25-02:53]Ide is more advanced than a code editor, acting as a compiler and offers additional functionalities.
-[03:46-04:12]Decide on a code editor, vs code preferred, and choose project location.

[06:15-31:45]2. Best practices for file and folder naming
-[06:15-06:46]Using lowercase for file names and avoiding spaces is crucial for compatibility with case-sensitive web servers and browsers.
-[07:03-07:36]Use hyphens, not spaces, for file and folder names. starting html coding section.
-[07:57-08:19]Overview of html's role in web pages, tutorial with interactive questions and code examples, comprising majority of course
-[26:53-27:22]Create an html project 1 folder on the desktop and an index html file with the correct boilerplate.

[31:46-54:52]3. Html coding best practices, lists, link elements, and adding images in html
-[32:15-32:52]Html code should have consistent indentation and spacing, using either four or two spaces.
-[33:31-34:19]Recommend formatting lines and indenting text for better debugging and learning how to create a list in html.
-[35:09-35:35]The transcript discusses changing list types to be numbered or lettered and the syntax for a list item.
-[39:55-40:20]Define the link destination using the href attribute in html.
-[40:57-43:26]Demonstrates adding hyperlinks for calling and linking to specific places on a web page, with an example of scrolling to another main header.
-[44:07-44:35]Learn to navigate project structure and access html pages using file paths.
-[44:40-47:18]Demonstrating file navigation and linking in web development.
-[52:29-52:54]Using alt attribute helps users when image link is broken or image won't load, and benefits visually impaired users with screen readers.
-[53:12-53:37]Create an 'images' directory at the root level to store image files.

[54:52-01:15:42]4. Working with html elements
-[58:53-59:23]Creating t head and t body elements, followed by table row and its tags.
-[01:05:01-01:05:30]Semantic web elements aid accessibility and seo, e.g., header holds logo and search bar.
-[01:10:17-01:10:44]Creating an index html page, giving it an html extension, and adding boilerplate code.
-[01:12:33-01:12:58]Creating semantic sectioning with h1, h2, and a table element.

[01:15:42-01:25:05]5. Creating tournament leaderboard & html layout
leaderboard: young at position 5, li at 1-4, astrid at 0-5.
-[01:16:55-01:17:21]Use h3 for title, ol for ordered list, and list elements for rules of table tennis.
table tennis website linked, with italic text and correct spelling.
-[01:23:50-01:24:41]Added h3 and p elements, created section element for game setup.

[01:25:06-01:40:42]6. Creating forms and input practice
-[01:26:18-01:26:43]The input type submit triggers form submission without a label.
-[01:30:15-01:30:39]Setting default value, min and max date, and time selection in input types.
-[01:31:31-01:32:05]Radio buttons allow only one selection in a group. unlike checkboxes, which allow multiple selections.
-[01:33:59-01:34:26]Create index.html file with html extension and add boilerplate code.
-[01:36:58-01:37:28]Link email input and label using ids, add text 'please use a udemy.com email'.
-[01:38:01-01:39:41]Adding a submit button and pattern attribute to validate udemy email addresses in a form.

[01:40:42-02:04:00]7. Html form inputs
-[01:40:42-01:41:59]Build a range input with min 0, max 100, increment of 20, and start at default value.
-[01:45:14-01:45:40]Using radio input type with label 'bad' linked to id attribute for single option selection.
use name and value attributes for radio inputs.
-[01:48:22-01:48:48]Adding an input with type submit to allow form submission, potentially for future javascript integration.
-[01:49:34-01:50:00]Use label element with for and id attributes to accompany select element for better functionality and user experience.
-[01:51:11-01:51:38]Creating a select tag for an ecommerce site to pick garment sizes.
to using google chrome's inspect tool for javascript development.
-[01:56:43-01:57:15]Html5's data attribute allows custom attributes for flexibility.
can benefit from annotating code with pseudocode, recommended for beginners.

offered by Coursnap

[cloudwind]

I saved the file of the Tennis game. With inserting the image I also made sure I set width="600px" to get the same result. For the links I added a target="outside" to make sure the link opens in a new browser tab.

[Ilovepizza]

I guess Im finally getting pass the beginner stage love a follow up video

[mitchellbrown]

This was amazing. Thank you so much Ania.

[s_sgaming]

A good video for one those who want to work in web development

[CforChillandCheese]

So nice of having this tutorial. I learned it in few weeks on self-taught by reading and debugging. It was tiring to debug and good to know what mistakes I did. I am now still struggling on CSS part to style my page. Any new video on CSS?

[pranavramesh]

Hi could you do latex coding, even though it is easy. Do some interesting codes that will make PDF amazing.