0:00
11:55:16
11:55:16

Free 12 hour YouTube Coding Bootcamp 2025!

Education

🚀 To take the full 470 video course visit here: https://www.codewithania.com. This 12hr video is free - and will always be free! 00:00 Introduction 02:06 What is a Code Editor? 03:41 Code editor options 04:29 Files files files 08:05 HTML Introduction 10:01 What exactly is it? 12:20 Syntax 17:42 Saving files 18:54 Anatomy https://bit.ly/html-anatomy 23:26 Headings 25:25 Paragraphs 26:40 Headings, paragraphs and emphasis https://bit.ly/headings-paragraphs 32:59 Indenting code 34:39 Lists https://bit.ly/htlm-list 39:30 Links https://bit.ly/html-lks 44:26 Navigating pages https://bit.ly/html-pages 51:56 Images https://bit.ly/html-imgs 55:50 Tables https://bit.ly/html-tb 1:04:00 Divs 1:05:40 Semantic sectioning 1:08:21 ⭐Project: Table Tennis Leaderboard https://bit.ly/leader-brd 1:26:04 Forms 1:27:32 Inputs 1:33:53 Exercise 1 https://bit.ly/input-ex 1:41:21 Exercise 2 https://bit.ly/input-ex-2 1:44:35 Exercise 3 https://bit.ly/input-ex-3 1:49:36 Select dropdown https://bit.ly/html-slc 1:51:11 using the select element https://bit.ly/html-slc-x 1:55:11 The inspect tool 1:57:22 Data attribute https://bit.ly/data-at 1:59:54 Commenting out code https://bit.ly/com-out 2:02:08 What’s next? 2:04:40 CSS Introduction 2:08:22 File setup https://bit.ly/file-set 2:12:52 Style text https://bit.ly/sty-tex 2:19:33 Class selectors https://bit.ly/class-s 2:24:13 ID selectors https://bit.ly/id-se 2:26:56 Commenting out https://bit.ly/com-ot 2:29:27 The box model https://bit.ly/box-mod 2:34:56 Styling a div https://bit.ly/sty-div 2:39:00 Solution: styling a div https://bit.ly/sty-div-s 2:42:36 Colors 2:44:22 RGB https://bit.ly/rgbx 2:48:31 HEX https://bit.ly/hexx 2:54:56 Opacity https://bit.ly/opa-x 2:58:04 Gradients https://bit.ly/grdx 3:03:12 Advanced gradients https://bit.ly/gradcs 3:06:14 Shadows https://bit.ly/shds 3:12:34 Style links https://bit.ly/sty-lnk 3:16:21 ⭐Project: Profile Badge https://bit.ly/prf-bd 3:40:00 Selectors https://bit.ly/slctx 3:47:50 Position 3:51:55 Positioning divs 3:56:37 Floating elements 3:59:05 Z-index https://bit.ly/zind 4:05:10 Exercise: Z-index https://bit.ly/zind-x 4:10:44 Extra fonts 4:14:51 ⭐Project: Burger Menu https://bit.ly/brgr-x 4:57:00 Flex box 4:58:37 Main Axis https://bit.ly/flx-x 5:02:25 Dynamic spacing 5:08:16 Exercise: Flexbox https://bit.ly/fl-box 5:14:24 Flex items https://bit.ly/fl-it 5:19:30 Styling buttons https://bit.ly/css-bt 5:24:06 :hover :active :disabled https://bit.ly/hvr-x 5:27:25 Controlling Scrolling https://bit.ly/scrl 5:30:48 ⭐Project: Photo Carousel https://bit.ly/crsl 5:49:05 Forms https://bit.ly/frm-x 5:54:45 Input types https://bit.ly/inpt 6:01:38 Focusing on inputs https://bit.ly/fc-inp 6:05:36 Nesting in CSS https://bit.ly/nst-x 6:08:47 ⭐Project: Signup Modal https://bit.ly/sg-md 6:37:20 Responsiveness 6:40:13 Break points https://bit.ly/br-pt 6:44:27 Viewport https://bit.ly/vw-pt 6:46:54 Transforming https://bit.ly/tr-fm 6:49:11 Keyframes https://bit.ly/ky-fr 6:52:31 ⭐Project: Developer Portfolio https://bit.ly/dev-p 8:49:46 What next? 8:51:21 JavaScript Intro 8:55:48 Client-side vs server-side 8:58:52 File setup 9:01:42 console.log() 9:07:46 Variables https://bit.ly/vr-x 9:14:12 Scope 9:16:54 var vs let https://bit.ly/vr-lt 9:23:39 const https://bit.ly/cntx 9:28:41 Booleans, strings, numbers 9:32:51 Exercise: Booleans, strings, numbers https://bit.ly/bsn-x 9:37:33 Other data types 9:41:44 Arithmetic operators https://bit.ly/art-x 9:45:29 Comparison operators https://bit.ly/cp-x 9:48:51 Assignment operators https://bit.ly/as-x 9:54:45 Equality operators https://bit.ly/eq-op 10:01:08 if statement https://bit.ly/if-x 10:06:01 Falsey + truthy https://bit.ly/f-trx 10:10:12 Logical operators 10:17:20 Nullish coalescence operator 10:20:26 Ternary operator 10:23:35 if/else 10:26:03 Exercise: if/else 10:29:05 Exercise: if exercise 10:34:20 Exercise: if/else 10:37:49 Loops 10:40:17 For statement 10:45:49 Do…while statement 10:50:11 …while statement 10:52:35 Exercise: Fizz buzz 10:57:27 Functions 11:03:49 Arguments + parameters 11:09:24 Exercise: Arguments + parameters 11:12:59 Exercise: functions progress https://bit.ly/fcpr 11:18:24 Function expressions 11:22:35 Exercise: Function expressions 11:24:45 Arrow function expressions 11:29:50 Exercise: Arrow function expressions 11:32:22 Methods and properties 11:35:19 The Math Object 11:41:23 Exercise: The Math Object https://bit.ly/mh-x 11:44:47 Web APIs 11:48:26 .addEventListener() 11:54:06 Where now

ADVERTISEMENT

Comments 100

Sign in to join the conversation

Sign in
J
jacquelinesanchez870 2 months, 2 weeks ago

Ania Kubow You are very Good Mentor In All Youtube Mentors🥰

pedrolucas.abreu
pedrolucas.abreu 2 months, 3 weeks ago

What is the meaning of the key on your necklace?

annshah455
annshah455 6 months ago

Ania been a while .......... I love this w all my heart

L
lauragallegos937 6 months, 1 week ago

You stole my heart ❤️ with your lessons 🎉❤❤❤

J
jenniferfoley328 6 months, 2 weeks ago

Great bootcamp ! 100% recommended !!!

J
john.jensen 7 months ago

Looking for to this. I have been running through a few of your other projects lately, but diving straight into this. I really do like VS Code myself, but for the sake of my educational purposes, as well as for the sake of nostalgia, I will be sticking with Notepad++ myself. Thanks for this series, Ania.

kristen_brooks
kristen_brooks 7 months, 1 week ago

sorry ania I was confused you for give

M
manyadaylight5 7 months, 3 weeks ago

Which editor u use for editing thr videos ar 16:09

D
dawn_horton 8 months, 1 week ago

Excellent content as always.

N
normamcconnell229 10 months, 4 weeks ago

I liked very much the developer portfolio project. It was very useful to create mine.

T
trinidad_apodaca 11 months, 1 week ago

How do I open the page on my laptop

olivierdrift98
olivierdrift98 1 year ago

why is the scroll-behavior: smooth; not working for me? still no smooth animation

H
hortensepoirier453 1 year ago

How to make the images pre squared

M
marguerite_robin 1 year ago

Im currently studying the freecodecamp cery helpful

kerry_nicholson
kerry_nicholson 1 year, 1 month ago

What made this so enjoyable to watch was definitely the TA DAA! 😂❤

B
bertrand_charpentier 1 year, 1 month ago

Went through your course with a fine-toothed comb to train my teams. Awesome work pretty lady! I'll miss you though now that it's over between us. Your little 'tadas' at the end of each lesson...(sigh)...the way you drop your 'R's once in a while in that classy english way. I feel like I should be asking for my records back!...LOLKeep up the great work! ->Ricky Canadian Group of Hackers for Ukraine

A
ann_lewis 1 year, 2 months ago

Can I use this to be a frontend developer.

C
christy_cooper 1 year, 2 months ago

Thanks so much Ania. 😍 You're a great tutor!

P
pietrawhisper21 1 year, 2 months ago

i will never get tired of watching your videos, in just a few period of time, i have learnt a lot from you than i did from others. Thanks for your contribution to our growth.

I
ianvoid39 1 year, 2 months ago

very helpful course, detailed and absolutely nothing left out, as a feedback kindly add in grid next time