12HR+ YouTube Coding Bootcamp!
Sign up for my Full Stack Developer Course: https://www.codewithania.com
Hello everyone and welcome to this online Coding Bootcamp. This Bootcamp has been designed specifically to make your coding journey easier by utilising all of @YouTube functionalities such as the Timestamps and Cards.
We will be using the Timestamps to break up our Bootcamp into sections, so that you can easily navigate to and from each one using the description below. I will also be using Cards in order to direct you to an external project you can try, based on where we are in our Coding Journey.
I have also provided Code Sandboxes at the bottom for those stuck on code setup for the learning sections. I would advise to always type out the code to each exercise yourself, but as a safety net, they are provided as well.
This 12hr+ Bootcamp is unsponsored and free and will always be free, so if you enjoy it please do give a big thumbs up and Subscribe!
If you liked this course, and would like to buy me a coffee: https://www.buymeacoffee.com/aniakubow
Weekly coding tips from my newsletter partnership: http://bit.ly/JS-tips
Content:
00:00 Introduction
03:34 Code Editors
-- HTML --
06:05 HTML Introduction
08:22 HTML Boilerplate setup
10:55 HTML Elements
17:53 Online Portfolio Project
-- CSS --
20:05 Check-in
21:02 CSS Introduction
23:37 File set up
27:42 Class names and Id's
30:48 Pop Quiz
37:52 Box Model
39:56 Colours
44:12 Unordered and Ordered Lists
49:33 Images
54:22 Styling classes as id's
57:07 The Data property
59:00 Flexbox
01:01:45 Pop Quiz
01:03:41 Flexbox website layout
01:09:43 Commenting out Code
01:13:37 Gradients in CSS
01:15:53 Box Shadows in CSS
01:17:18 Button Styling in CSS
01:25:51 Fonts
01:29:25 Generic Website Layout
01:34:28 making a NavBar
01:46:54 Anchor Links
01:50:17 Creating Sections
02:13:50 Forms in CSS and HTML
02:26:55 Font Awesome
02:32:12 Break points
02:38:35 Z-index
-- JAVASCRIPT --
02:49:24 Check-in
02:51:07 Introduction to JavaScript
02:52:12 JavaScript file setup
02:58:39 Variables
03:16:15 Control Flow
03:16:40 If Statements
03:26:09 Operators
03:55:39 Fizz Buzz Exercise
04:00:59 for loops
04:07:58 Arrays
04:14:42 Objects
04:24:50 Functions
04:37:51 A Progress Exercise
04:48:20 Arrow Functions
04:52:21 While loop
04:55:23 Built-in-Objects Introduction
04:56:02 .length()
05:01:29 .concat()
05:06:41 .join()
05:12:06 .pop()
05:18:46 .shift()
05:22:13 .unshift()
05:25:32 .push()
05:35:51 .splice()
05:41:47 .forEach()
05:50:25 .some()
05:59:49 .map()
06:07:19 .filter()
06:17:06 .reduce()
06:22:27 .every()
06:28:25 .split()
06:34:25 Array work - Exercises to practise
07:18:06 .addEventListener()
07:26:09 .removeEventListener()
07:33:57 querySelector()
07:39:59 Check-in and Project suggestion
07:40:51 Math.random()
07:53:08 Let's make a Responsive Burger NavBar
08:10:12 Date
08:19:29 setTimeout()
08:29:00 setInterval()
08:44:11 Classes in JavaScript
08:52:16 Check-in and Project suggestion
08:52:58 Keys
09:01:46 switch case
09:22:51 .sort()
09:24:52 Introduction to Algorithms
09:25:16 .includes()
09:27:34 .contains()
09:29:52 .createElement()
09:38:22 Check-in and Project Introduction
10:27:07 Check-in and Project suggestions
10:28:16 Introduction to HTTP
10:36:55 fetch(). GET POST PUT DELETE
11:07:24 Check-in and video suggestion
11:07:53 Storing Projects on GitHub
11:15:58 Where to go next
Code Sandboxes:
at 04:05: To get started: https://codesandbox.io/s/tender-tdd-nwg7v
at 02:53:49: JavaScript set up: https://codesandbox.io/s/distracted-field-vcliy
at 04:40:24: Functions Exercise : https://codesandbox.io/s/eager-tu-t2691
at 04:50:00: .length() https://codesandbox.io/s/xenodochial-einstein-ot5rr
at 05:06:34: .join() .https://codesandbox.io/s/infallible-jones-idvfn
at 05:13:33: .pop() .shift() .push() https://codesandbox.io/s/optimistic-albattani-cf1ky
at 05:41:50: .forEach() https://codesandbox.io/s/sharp-ellis-xeh2o
at 05:55:12: .some() https://codesandbox.io/s/admiring-lamport-nlfzb
at 06:07:19: .filter() https://codesandbox.io/s/unruffled-wave-sg8v6
at 06:17:06: .reduce() https://codesandbox.io/s/hopeful-shadow-f5pvv
at 07:18:06: .addEventListener() https://codesandbox.io/s/kind-torvalds-evigr
at 07:26:09: .removeEventListener() https://codesandbox.io/s/ecstatic-rhodes-hqonq
at 07:33:57: querySelector() https://codesandbox.io/s/ecstatic-lovelace-6u6ht
at 08:10:12: Date https://codesandbox.io/s/great-framework-5206x
at 08:19:29: setTimeout() https://codesandbox.io/s/clever-chandrasekhar-u7fyw
at 08:29:00: setInterval() https://codesandbox.io/s/cool-franklin-fdvk4
at 08:52:58: keys: https://codesandbox.io/s/lively-river-7xptl
Generic Sandbox Setup: https://codesandbox.io/s/hopeful-shadow-f5pvv
Portfolio final code (edited): https://codesandbox.io/s/html-lesson-1-terminology-and-syntax-yjrsc
Memory Game final code: https://github.com/kubowania/memory-game
Instagram: https://instagram.com/aniakubow
#codingbootcamp #coding
Тэги:
#coding_bootcamp #web_developer #coding_bootcamp_review #coding_for_beginners #coding #web_development_course #web_development_2021 #web_development_tutorial #software_developer_course_online #online_coding_bootcamp #javascript_bootcamp #web_development #software_engineering_course #learn_to_code #coding_tutorials #javascript_for_beginners #javascript_tutorial_for_beginners #javascript_tutorial #css_tutorial #css_tutorial_for_beginners #html_tutorial #software_engineeringКомментарии:
Thank you so much for creating this Ania. I have just finished the whole bootcamp - I have to say you did so well explaining all the terms and I feel so much more equipped now on my developer journey. Wishing you all the best for 2021!
Ответить
Bootcamp finished! Thanks a lot Ania, it has been an amazing journey!
Ответить
If I had to imagine an AI, I would say it would be you,a great design!
Ответить
Finally completed the bootcamp! Thanks Anya!
Ответить
Hello, Ania Mam. I have this preconceived notion that one must first learn a statically typed language like Java or C++ and take enough time with it to reinforce and strengthen programming basics and also complete CS50 tutorials first make projects with Java, as it is still used at the backend of big tech companies.
And then learn Html, Css and Javascript which will eventually make it easier to grasp the basics easily and one can easily sail through web development path without hindrance. Am i right on this?
Great video.. i got a lot of knowledge 💯
Ответить
Looking at the bob exercise...can see the count increase in the console, but bob doesn't move : ( not sure what's wrong. Anyone run into this?
Ответить
Thank you for this Ania, this is very helpful
Ответить
Amazing content. Just finished the Bootcamp, thank you :)
Ответить
deneris targeriyan❤
Ответить
I can type 69 WPM with my tongue 😛
Ответить
i only got 6 images in the console instead of 12 any help ?
Ответить
Thank you so much Ania.May God really bless you!. I would like to ask, how can someone create the content worda to use in HTML in a specific type of company you are developing for. Weather its a food company or any other type
Ответитьthank you ania <3
Ответитьthis is so amazing <3
Ответить
One of the best videos, thank you very much ❤
Ответить
I wish I knew about this video before, I would have been much easier for me to pick everything up.
Ответить
Oh, Targaryens are taking over the IT industry now!
Ответить
You tube is amazing ! And you as well...thank you so much for this!!!!
Ответить
Awwww Wow what a great teacher you are. I am happy I found your video and am a new subscriber. Thanks for all the time and hard work you have done here and do to make this so good!! My best always!!
Ответить
its very smart of Ania to not enable CC, as its forcing me to focus on each word she is saying..:D
Ответить
Thank you teacher
Ответить
please give me a translation. i really can't speak english
Ответить
Thank you , learning coding through bootcamp for software engineer.❤
Ответить
Thank you so much
Ответить
Thankyouuuuu women in tech 👩💻🫶🫶🫶🫶🫶🫶🫶
Ответить
thank you Anya Iearned a lot...and I will keep learning web development
Ответить
Making a 12-hour video is not easy, and she explains the content really well. I just started to watch her videos but I'm happy with what I'm learning. great job!
Ответить
Thanks so much for putting the video together . Pls I am having issues with the memory game not displaying inside the div box, though I am using my own images which might be quite bigger.
Ответить
Learning to code with the Khaleesi, lovely ;)
Ответить
I have humbly contributed #37 burger.
Ответить
It is so long ....................................
Ответить
This is really good content! I already knew Python and having something like this just accelerated learning HTML CSS and JS in one video.
Thank you Ania! <3 uwu
Naprawdę, szacunek za 12h treściwego materiału.
Ответить
a bit late but thanks so much. Subscribed.
Ответить
I skimmed thru the 12 hour video in about 12 seconds!
Ответить
Hi , appreciate for you making this coding so helpfull for me, and i wonder what laptop do you use? Cause the typing sound is so 'crunchy'
Ответить
lmao
Ответить
So beautiful girl 🥰
Ответить
видимо она хороший программист, раз у ее ролик озвучивает картинка сгенерированного нейросетью под человека. похожа кончено на настоящую, но ненастоящие не похожие на нормальные глаза, странное угловатое лицо, странные тени на лице и странный цвет лица - все выдают что это не человек на видео. доработайте картинку лица кто ее рисовал. а так неплохо. ах да - брови тоже не очень похожи на настоящие. и акцент у голоса странноватый - русский?
Ответить
I don't like the way you chop and change the code for the pop quiz
Ответить
Ania ! ! ! i honestly love all your works and effort you put for your tutorials. thank you
Ответить
wow u are gorgeous 😫😫
Ответить
No offence but for 300k channel the sound quality is pretty low...
Ответить
