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
🔗 Full course: codewithania.com/
⭐️ 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
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@AniaKubow]

Thanks so much to everyone for your continuous support! If you want to check out the full course and continue learning with me please visit www.codewithania.com

[@goldenG978]

Now we have chatgpt , we can easily implement html code since it doesn't involve in too much logic , teach styling that would be better

[@BrainBuzzzz682]

hlw...when you are going to upload the css course....? i am really excited for css course....

[@AniaKubow]

@@BrainBuzzzz682 you can get it from the link above :)

[@Lessgooooooo]

thankyou so much for uploading such a life-saver and worthy course. it's much much better than wasting time and money on learning from professors at university

[@michaelentera5400]

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

[@peter-tm4ex]

Really. Computer science? Then your school can't make you understand basic mark up language. I'm curious what school you went to.

[@Adam-kk7nw]

Leave her alone

[@juser-abuser]

I'm a python. Me is african ooga booga.

[@smilingghost177]

@@peter-tm4ex honestly my school's the same, some teachers just suck.

[@APDesignFXP]

Smells like a liar

[@MaheshPamula1]

(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?

[@sussypusssy]

Bro the video dropped only 20 mins ago and you already done giving out timestamps for 2 hour video

[@cafefiftyfifty]

they wrote below

[@brandon_wallace]

@@cafefiftyfifty I think she copied and pasted. lol

[@Mr_Raixan]

@@cafefiftyfifty yeah

[@Mr_Raixan]

@@brandon_wallace leave her dear

[@ZeryuGames]

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

[@hdmaragh]

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

[@orianaevans6909]

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.

[@ahmedsuraj4619]

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.

[@mitchellbrown1634]

This was amazing. Thank you so much Ania.

[@mb-techmedia8494]

Wow, Ania thank you for this great tutorial.

[@yassineerraouch7429]

This was a great course. Thank you!

[@willisianturi1499]

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.

[@nyang438]

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 smmmmmm 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

[@eclecticshenanigans]

This is awesome...much appeciated.

[@Ilovepizza851]

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

[@agusfrangella8765]

You're amazing, Ania!

[@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).

[@jarekjaro7325]

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

[@AniaKubow]

You can get the CSS part and others from codewithania.com :)

[@madhusudan2715]

@@AniaKubow thanks for sharing

[@induminidilukshaWijesinghe]

Thanks a bunch ❤️

[@asadkhan-kk2ru]

EXCELLENT LECTURES.

[@fnfranco2641]

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

[@Ika14]

Thanks 🤩

[@Vishal_0841]

Thanks❤

[@Mr_Raixan]

Great one

[@bohanwang-nt7qz]

🎯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 -[01:15:42-01:16:13]Tournament 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. -[01:19:54-01:20:26]International 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. -[01:46:53-01:47:21]Javascript: 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. -[01:54:19-01:54:50]Introduction 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. -[01:59:22-01:59:56]Developers can benefit from annotating code with pseudocode, recommended for beginners. offered by Coursnap

[@rishiraj2548]

Thanks, Ania

[@dystopian_1]

Mother of Dragon, good to see you again!

[@techtalks003]

Great lesson

[@sriharisuresh]

It was very helpful

[@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?

[@swallowedinthesea11]

There are a lot of CSS tutorials here! Just look around. CSS may be difficult, but it's very rewarding in the end! I recommend to focus a lot on CSS Grid and responsive design.

[@pranavramesh2893]

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

[@learnwithnomii]

Thanks 😊

[@cloudwind23]

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.

[@he1senberg333]

or _blank

[@lionelfaith3646]

I didn't know about target ="outside" but I knew about target="_blank"

[@bestafokwalam7285]

I love it

[@BogiMan7]

Nice 👍

[@s_sgaming6184]

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

[@Mari_Selalu_Berbuat_Kebaikan]

Let's always do alot of good 🙏

[@nikhilkhetan9125]

Which extension are you using that is auto suggesting the code

[@rishiraj2548]

Thanks

[@nasiryusuf4218]

which app am I to download

[@rodrygo_es]

currently learning C# with VS code,which IDE is safe to use? i tried atom but after installation,my system began to crash.

[@amanyle5961]

Finally ❤

[@prAshAnth1283]

Please give a tutorial on tekla structures.

[@hichamoutagra4538]

Thanks ,this video is amazing ,can you also do a tutorial in IOT with packet tracer

[@mckloseokoye239]

Please do you have a course on CSS?

[@iliymans]

Can we use uppercase for font files ?

[@boby4751]

Why didn't you add a break element to create a space between the two paragraphs? Also, what did you do auto add the src and alt atribute after typing the img tag?

[@swallowedinthesea11]

Some editors automatically fill the image attributes. They could be plug-ins. The one I use, Brackets, offers prediction auto-fills.

[@boby4751]

@@swallowedinthesea11 is it called just brackets? I looked and there are a handful of bracket type extensions.

[@swallowedinthesea11]

@@boby4751 Sorry, I should have been more clear. The editor that I use is named Brackets.

[@MeBe35]

51:19 marking point

[@Vinsmokedz]

Muh Queen

[@photographedemode]

❤

[@TundeEszlari]

Nice video.

[@AntonTechDev]

Very nice👍👍👍👍🌷🌷🌷🌷🌷🌷🌺🌺🌺🌺

[@Vishal_0841]

Next css by you 😎

[@lokeshmannem9425]

hey freecodecamp why don't you start devops course ?

[@CharlesSmall]

Thank you for the video. My problem is I want to create a artist website, but all my images are not the same size. What is the right way to put it in place. I mean four in a row. And when you click on it , it will enlarge.

[@swallowedinthesea11]

The images that you want to all be the same size have to be resized by using a resizer tool. I have used Image Resizer for years. Look it up online. *To put all four in the same row, you could use float. To enlarge, use hover over the image* *to enlarge and the transform property:* *HTML:* 1 2 3 4 *CSS:* * { margin: 0; padding: 0; } body { background: olivedrab; } div.wrapper { width: 90%; height: 300px; margin: 0 auto; background: black; } div.wrapper div { width: 25%; height: 100px; float: left; } div.wrapper div:hover { transform: scale(1.3); } div.wrapper div.image1 { background: red; } div.wrapper div.image2 { background: rebeccapurple; } div.wrapper div.image3 { background: pink; } div.wrapper div.image4 { background: paleturquoise; }

[@CharlesSmall]

Thank you for the answer . It help me a lot and I learned so much in your video. God bless.

[@swallowedinthesea11]

@@CharlesSmall You're welcome!

[@ragsdgreat9969]

@@swallowedinthesea11 im sorry for some reason the answer is missing can you put it up again?

[@TannumAllred]

Love it

[@user-cb3jr4qr2j]

You are my favorite trainer, my name is Youssef (website development and management)🤜🤛👌👍

[@maximvolodkin6809]

👍

[@nireshigaamulbaby3100]

Hai this is nirshi ... AM 2020 MCA passed out due to personal problem I didn't go for work yet ..... am searching for job they are asking atlest 6months experience... I need work I have to work in IT ...PLS give u r sugesstion...FREE CODE CAMP

[@Lessgooooooo]

I'm unable to open the HTML project folder in vsc code since it is empty,, what should I do??

[@ragsdgreat9969]

Right click on the folder and click open with vs code

[@parathonNGUx]

can i get written notes of this video

[@sutofana]

🥰🥰🥰🥰

[@Shake0913]

Voice is so 👍 good easy

[@Jiaerc]

When will the next vedios be coming??

[@AniaKubow]

You can find the css part and others at codewtihania.com :)

[@gastondupertuis8009]

Games are played to 11 points in table tennis.

[@ouailch9313]

Is css course coming????

[@AniaKubow]

You can find the css part and others at codewtihania.com :)

[@souhardya1487]

pls do a css tutorial

[@AniaKubow]

You can find the css part and others at codewtihania.com :)

[@souhardya1487]

@@AniaKubow sure I will check that , thanks :)

[@wellsuckmesilly]

TADA!!!

[@priyadharshini6533]

Freecodecamp start full stack course please

[@lionelfaith3646]

Already done, just search it in the channel

[@ravikishore8703]

First comment

[@shakilkhan4306]

you got a oscar...!!

[@chrisclayton584]

She's smart & a hottie.

[@ptifans2082]

First

[@ihorstus1987]

Аня Ти Українка?

[@anshpradhan1954]

She looks like an AI bot --> meant as a compliment maam, u look amazing 😍

[@zeeshanirfan6444]

Can i use your video and edit this and can i upload this on my channel

[@zeeshanirfan6444]

@@sirmongoose will you not claim that this person is using ours video

[@Nikhil.Singh_]

You look like ungraduate gamer

[@talhakhan-nn1cw]

Can you please do a Css and Java script please

[@AniaKubow]

You can find the css part and others at codewtihania.com :)

[@salmanmehmood470]

U r cute 🥰

[@user-cb3jr4qr2j]

😘😘😘😍😍🥰🥰

[@peter-tm4ex]

So like we don't have enough HTML course yet

[@abdirashiidwiif]

🙄

[@xalgord]

she looks like a robot

[@athosgomesfonseca]

🫶🏼

[@surkewrasoul4711]

It's okey you won, Dont hang in to your losses this much old wounds hurt the most 😭😭, Besides according the infinite amounts if universes , there is a universe where you have basically managed to ummmmm...stand on one leg for 5 minutes or so ,,, See so yo uwin I won ...It's all really the same 😇

[@alessandrochiri6315]

She's too beautiful for this sector.

[@Memechunk]

women ☕

[@changenoways9555]

Bro this girl is white as hell. Nothing wrong with that its just crazy she looks so white, ghost gray eyes and everything. I feel like that kid in Africa seeing a white person for the first time lol (Im not black tho Im brown). Nothing wrong with being white tho. Shout out to white people

[@handendaer]

Ukranian? Hmm no, then she wouldve cried and told us about her brother and father is back home fighting.

[@PestisNonSapien_GMO_exHuman]

I hate how some people bring politics into tech. I have a few ublock origins rules to filter text like "support our political spam". A while back I think it was replit or something similar. They had the political spam take up so much realestate on the bottom of the screen that it made landscape mode unusable on mobile. Then you have the cancel culture BS infect tech a few years ago. It just needs to stop.

[@swallowedinthesea11]

@@PestisNonSapien_GMO_exHuman I believe it was Repl. I also went to another place where they had a lot of JS modules, but I was greeted with a statement about the war and in silent protest they made the modules were unavailable.

[@user-ok1xq5qm9t]

Your name is not Anya, your name is Beautiful.