🚀 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
Ania Kubow You are very Good Mentor In All Youtube Mentors🥰
What is the meaning of the key on your necklace?
Ania been a while .......... I love this w all my heart
You stole my heart ❤️ with your lessons 🎉❤❤❤
Great bootcamp ! 100% recommended !!!
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.
sorry ania I was confused you for give
Which editor u use for editing thr videos ar 16:09
Excellent content as always.
I liked very much the developer portfolio project. It was very useful to create mine.
How do I open the page on my laptop
why is the scroll-behavior: smooth; not working for me? still no smooth animation
How to make the images pre squared
Im currently studying the freecodecamp cery helpful
What made this so enjoyable to watch was definitely the TA DAA! 😂❤
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
Can I use this to be a frontend developer.
Thanks so much Ania. 😍 You're a great tutor!
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.
very helpful course, detailed and absolutely nothing left out, as a feedback kindly add in grid next time