1. The Complete Web Developer in 2021: Zero to Mastery

다시 오신 것을 환영합니다.이 비디오에서는 지식을 확장하고 몇 가지 HTML 태그와이 웹 사이트를 "Hellooooooooo there"보다 조금 더 예쁘게 보이게합니다.시작하려면 더 잘 볼 수 있도록 화면을 이동하겠습니다.괜찮아.그래서 우리는 모든 것이 작동하는지 확

<커서바꾸기>https://css-tricks.com/almanac/properties/c/cursor/<글자 배치하기>< 웹사이트 for picking colors>paletton.com<opacity setting설정> rgb fou

https://css-tricks.com/almanac/ style.css dashed 대신 solid 입력

**.class ** #id **배경 불투명하게 ** *' ': ** So the star, it's not used very often, but it symbolize

font-family: "Times New Roman", Georgia;}if that computer doesn't have "Times New Roman", then print the text in Georgia.Q1. What if I have this super

를 h2+p==> p로 변경if I set float as right:footer{ clear: both; text-align: center;}

padding: 5px 20px 5px 20px;margin allows us to create space outside of the border.margin: 0px 20px 0px 20px;In short type,margin: 0px 20px;first one

https://www.w3schools.com/quiztest/result.asp

"Minify" removes the all the whitespace.So everything is on one line, just really tiny together. Eventhough it's the same css, it technically makes th

https://css-tricks.com/snippets/css/a-guide-to-flexbox/h1에서 추가 text-align: center;h1에서 center이지만 페이지에서 center는 아님.h1에서 추가 border-right: 2px solid

Ready to become a flexbox master? Play the Flexbox froggy and you will have no problem with CSS layout any more. Although there are many tools like Bo

CSS 3 is the latest evolution of CSS, where we've added new properties and new features so that we can make our design even better.Images are now movi

The website looks good no matter what the size, and users can enjoy the experience and not be turned.You can see the website is responsive whatever th

로봇이 너무 귀엽다... when I hover the mouse on robot it moves or grow big... So cute.. it seems like a jellyfish. challenge! 로봇 조립하기 로봇이 조각나 있다. 이를 위처럼 조합

bootstraphttps://getbootstrap.com/bootstrap expohttps://expo.getbootstrap.com/

This is bootstrap 4.0. 5.0 is different with this. download first. CDN: content delivery network Boostrap has this link and they're hosting the boo

https://getbootstrap.com/docs/4.0/layout/grid/So it's saying that I want this column to have six spaces out of that 12.If you set extra as col-sm

수정 후 ctrl+RResponsive meta tag allows us to add new information to our HTML page and there's different things that we can provide.메타태그를 사용하면 HTML페이지에

How grid works with bootstrapusing div class="container"we have everything in a container.We want to ideally all of these things to be in a row.We wan

Mailchimp is email marketing service. There's other tools like MailerLite and a ton of others. That allow you to have this exact functionality. http:

Make a project in github^click code tabclick set up in Desktop(we need to download GitHub desktop client.)^click download for windows^click clone a re

In the next video, we talk about a little tool called Animate.css! They recently updated the website to https://animate.style/. It may look a li

https://animate.style/ using this code, download css. ^open cmd and type. I don't know that error but keep going. And if you fine and open the file

http://www.mashup-template.com/templates.html I can download the files here as HTML. I just downloaded a file and there's a lot of files that we stil

Wow, you've learned a lot up to this point. Now with your new found knowledge you can build so many different websites! To help you with the process,

Want to see what other students have done for their startup landing pages? Don't get intimidated! Most of them used the free resources and templates t

How do I create a layout of website?With tools like CSS grid and flexbox you now have the ability to really build beautiful responsive layouts really

Heads up! In the next video we dive into the exciting world of CSS Grid! As you know, the web development world is fast changing so one quick update t

\*files.zipIf I change display from inline-block to block at '.zone' class, it changes like below.If I make this larger or smaller it's always going t

^let's make them as the default, 1fr^it means 3times repeat '1fr' repeat 3timesAnd because this entire layout is on a grid system it will make sure th

justify-items Default is stretch. ^ it aligns the contents in a grid item along what we call the row axes.

Fox grid starts from 1 and ends at 3.if grid-column-end:4; then fox ends 4.If we make it smaller, this is not that responsive because we said one to f

^left:Explorer, right:Chrome In Explorer, there's a problem of the view getting a little bit ugly with our navigation as we became smaller and smalle

See that all right the view is not responsive when I go up because it's always 500px. Use vh. vh viewport height a percentage of that viewport dedi

file: project-prettify.zip Let's take just five minutes to quickly make this website a little bit prettier, just to show you how easy it is to custom

https://web.dev/learn/css/

the size of these circles represent how important they are to your career.

3 things. Why you want to be a web developer? Which tools you should learn to be a sucessful developrer? What career options there are out there curre

-free templates https://www.creative-tim.com/ -job board https://zero-to-mastery.github.io/ZtM-Job-Board/ -1~2 Big project :You don't need to prepar

In javascript you should use apostrophe in string with backslash .number 10 + sting of 34 is 1034"hello"-"bye" => NaN'NaN' means 'Not a Number'Blue hi

file: exercise15 + "34" // "534"5 - "4" // 110 % 5 // 05 % 10 // 5"Java" + "Script" // "JavaScript"" " + " " // " "" " + 0 // " 0"true + true // 2t

Should we have to retype same strings?Using variables(var), we can save strings here.(You don't need to care about undefined. We can see that Google C

file: exercise2.zip

file: exercise3.zip

Nothing happened.This code doesn't make sense.We should define firstName and lastName.!(name === "Bob") means name isn't Bob.

file:exercise4.zip// Make a keyless car!// This car will only let you drive if you are over 18. Make it do the following://using prompt() and alert(),

If you want, you can make multilple script tags like below.What about location of script?It waits for us to click 'OK', so the browser can't display w

alert() prompt()() means to execute function.So, this bracket mean 'calling a function', so I can call aa function.() must be included to use function

file: exercise5.zip

We can also make arrays with function.We can also make arrays within an array..What about delete that '0' in code?.If you want to get bear, type like

file: exercise6// using this array,// var array = "Banana", "Apples", "Oranges", "Blueberries";// 1. Remove the Banana from the array.// 2. Sort the a

Array : shopping list or to do list.Object : user information. In game, you're controlling wizards.Object:Wizard's tall, power, experience point.array

file: exercise7// Create an object and an array which we will use in our facebook exercise. // 1. Create an object that has properties "username" and

And then refreshand then I can see newsFeed

If you want to change from to Let's use 'loop'! i stands for an index todos.length = 5 in here for(var i=0; i < todos.length; i++){ console.log(i

and then If I type ingrid,777 as username,password,it says "Sorry, wrong username and password!".Because it's only checking database0.but this is wron

JAVASCRIPT KEYWORDSbreakcasecatchclassconstcontinuedebuggerdefaultdeletedoelseexportextendsfinallyforfunctionifimportininstanceofnewreturnsuperswitcht

file: sectionoutline.zipJAVASCRIPT TYPESNumber StringBooleanUndefinedNullObjectJAVASCRIPT COMPARISONS!===&lt;=&lt;JAVASCRIPT VARIABLESvarJAVASCRIPT CO

link: https://www.w3schools.com/js/js_htmldom.asp Until now we spoke how HTML gets requested then CSS, then the browser does something special. It cr

Document doesn't look like object. It seems like HTML. Because Web browsers just hide the fact that it's an object. Here is code below. getElements

DOM SelectorsgetElementsByTagNamegetElementsByClassNamegetElementByIdquerySelectorquerySelectorAllgetAttributesetAttributestyle.{property} //okclassNa

Events Events are things like clicking, mouse entering or hovering over something or user trying something in a search bar. Let's add a button,"Click

file: backgroundgenerator.zip (144.)input type colorhttps&#x3A;//developer.mozilla.org/en-US/docs/Web/HTML/Element/input/colorlinear gradienthttps&#x3

When the DOM object is ready to run this function, you can write all this jQuery.jQuery was popular because it was finally easty to make interactive w

we want to minimize the amount of DOM manipulation and events.That is why REACT was created.

Look at this.If we run funestFunction,\-console.log(fun): Do you know what fun is?\-child scope: sorry, I don't really know fun but ask my parent.So n

Javascript Conditionalsifelseelse ifternary operatorswitchIf condition is true, provide value(expr1)If condition is false, provide value(expr2)Swith s

//function experiencePoints() { if (winBattle()) { return 10; } else { return 1; }}//Using this function, answer the questions

A constant not to reassign to the variable, so it cannot be updated.A function could be a constant.An Object could be a constant.If you try to reassig

We're going to convert this to advanced functions. closures Will first function have access to bobby? No. Children always have access to their pare

we should use push to make it new. map, filter, reduce forEach vs map Map have a return element. ^'map'

object1 and object2 references the same address. object3 doesn't reference the same address. Context vs Scope ^This is scope. ^This is window obje

clone: 복제: only clone the first layerthat is the memory adress in this object but within this object there was another adress to anothercf. JSON is ou

Type coercion [ koʊˈɜːrʒn ] '==' : converting a certain type to another type. All languages have type coercion. In javascript, : coercion : compar

includes exponential operator > >

padStart get 'Turtle' with 10 spaces in front of itpadEnd get 'Turtle' with 10 spaces after itEverytime you add a new parameter, it's a lot easier.'Ob

With the new ES10 feature, ^there's no blank spaces in them.It transforms a list of key value pairs into an object.Imagine we had some user profiles t

'for of' loop only works with iterableIterable: Javascript provides you can iterate over arrays and strings.Instead of basket, put 'basket' ^ iterati

ECMA script 2020 BigInt Nullish Coalescing Operator Optional Chaining Operator Promise.allSettled globalThis BigInt BigInt: big integer Javascript h

Nullish Coalescing Operator ?? ?? can be used instead of OR operator,||. Let's add a new property, power. pikachu have the 'lightning'.

replace 'best' of 'worst'.we didn't really assign this to anything.the original string remains.I could have assigned it....it only changed the first i

Debugging a is accumulator b is array [[0, 1], [2, 3], [4, 5]] here. the 'accumulator' start off with empty array. The 'accumulator' is going to be

Imagine getting this question during an interview.Explain the difference between asynchronous and synchronous in Javascript.Answer> Javascript as a si

Help somebody. It makes you grow up

Windows ONLY: How to open -a “Sublime Text” in windows?Assuming your Sublime Text was located in the "C:\\Program Files\\Sublime Text 4" directoryIn

ls: list cd: change directory . : current directory ..: parent directory mkdir: make directory touch: create a file cf. OSX - open is a universal op

https&#x3A;//github.com/equinusocio/material-theme 1\. ctrl+shift+p 2\. search package install 3\. search material themeand then Look at the left do

Here are my recommended resources to get your Sublime Text personalized: Material ThemeOceanic Next Colour Scheme Package ControlMy recommended packag

Visual studio code : code autocomplete, Sublime Text: nice, simple, clean

Ever wished there was a list of the greatest plugins and extensions for VS Code in one location so that you have all the tools needed to be a full sta

How to set up our terminal to look nice along our newly set up Sublime Text. ^ This file gets read everytime we open up the terminal. In here we can

Here are my recommended resources to get your Terminal personalized:Option 1: TerminalCustomizing TerminalOption 2: iTerm2Customizing iTerm2Option 3:

If you are on Windows, you can use this great resource to customize your Bash Profile to your liking:https&#x3A;//gist.github.com/RalucaNicola/e9a8746

In this section you will need to have Git installed. But there is some good news!If you are a Mac users, you already have git installed!If you are a W

Heads up! In the next video we are going to be speaking about Github and branching. Recently Github has decided to rename the original branch from mas

opensource projects: Anybody can see, inspect, modify and enhance. https://github.com/zero-to-mastery/start-here-guidelines click "fork" we can clo

file: git-started-guide.pdf

https://github.com/zero-to-mastery/Animation-Nation ^Fork this website. and then clone https://github.com/HaileyByun/Animation-Nation.git and look a

Once you are in your forked project directory in your command prompt....Type "git remote -v and press Enter. You'll see the current configured remote

First, we have created a group for students of this course to network on LinkedIn with each other and endorse each other's skills so recruiters can fi

One of the open source projects started by students is: https://zero-to-mastery.github.io/resources/ It is a list of great resources as you go throug

-

Here is my morning routine in order to stay up to date with the industry and make sure that I am on top of the game. I highly recommend doing somethin

React is actually a package created by Facebook that we're going to be using in the next section.https&#x3A;//nodejs.org/en/download/If you install np

IMPORTANT: In this course, we need to be using Node version 8.9.1 or higher, and NPM version 5.5.1 or higher!!!!To check if you have Node.js installed

Using package.json file and the newly found NPM command, we can grab react and have it as part of our project. Packages: live-server, loadash live-se

s

To figure out the error, I found this link And then I checked the one below. And there's no problem. next day I got an new error...TT ![](https://v

We're going to build our own portfolio page. We're going to use this project as our base for our portfolio. This project is M.I.T. licensed which me

React React was created at Facebook. React can be used with mobile devices to build native apps. You can build desktop apps with react Anywhere that h

Instead of this code, install React App.By doing it, we don't need to sending up our developer environment and setting up our first page.https&#x3A;//

Go to the robofriends\package.json react-scripts: means create react app robofriends\node_modules\react-scripts\scripts package-lock.json package-l

\\robofriends\\src\\index.jsIf I correct the code like this, is it going to work?It's working.Set the sublime Text as JSX.Click as followopen all with

\\robofriends\\src\\App.jsI want to change this to 'class App extends React.Component()'Make return in a render methodand then I got this. 'React' is

Hook: use this anywhere elseClasses: part of JavascriptPeople are shying away from Hooks because of the added complexity.We're going to start with Cla

In the next video, we will start building our very first React Component. Hooray!However, remember what I said in the previous videos when I introduce