Home
Videos uploaded by user “Arcode code”
Hamburger Type Responsive Menu Navigation Only HTML and CSS Tutorial
 
24:36
In this video we will learn how to create Hamburger type responsive navigation, i am using button button instead of hamburger icon, and i i will only use html and css for the project You can download the code from the link below https://codepen.io/ArCodee/pen/qXvMQa
Views: 8394 Arcode code
Flexbox - flex basis , flex basis vs min width , flex basis vs width
 
05:27
people are confusing flex basis to width, in this video i explain flex basis can we width or it can be height, depending on the flex direction.
Views: 614 Arcode code
Flexbox - justify-content Vs align-items and why people are confuse about it
 
05:43
justify-content will justify the content on the main axis align-items will align your items on the main axis, than where is the confusion, the problem is people miss this point that axis in the flexbox are not fix, you can change them with flex direction. and they are in the impresssion that main axis is horizontal axis and cross axis is vertical axis. and that's not true, if you think about them like, they vertical or horizontal axis you will also type justify-content vs align-items, so i created this video to clear the confusion for people who are typing justify-content vs align-items, and try to explain these topic more clearly
Views: 599 Arcode code
Responsive Multi Level Two Level Drop Down Menu Navigation only html and css
 
25:21
In this video we are going to create responsive multilevel dropdown menu or navigation using only html and css If you want to download the code used in this tutorial visit this link https://codepen.io/ArCodee/pen/LjvNQO
Views: 2989 Arcode code
Flexbox - align content Vs align Items
 
02:56
In this video, we are going to learn, how directly flex-wrap effect align content and align items behaviour and what is the difference between two
Views: 2524 Arcode code
SQL Injection - Testing a website for vulnerability
 
08:15
in this video I will tell you, how to test weather given website is vulnerable to sql injection or not. And I will also tell you why sending a single qoute will you why website is vulnerable to sql injection for the vedio I am using php and sql database make sure you watch the full video, and after that if you have any question let me know. For the source code please visit this link
Views: 13834 Arcode code
SQL injection explained
 
07:11
In this video I am going to explained how SQL injection basically. In a normal website, you have one form one database and some code and in this code you have some query, which your code supposed to sent to database, when user provide information, SQL command are hand type, so you can not change them, but user input is dynamic, and SQL have internal mechanism through which it determine what is SQL command and what is user input. So what the attacker can do is type user input like that, your SQL run command, which is not supposed to run, to do that, we exploit comment command in SQL, so the whole SQL injection is based on how you exploit the vulnerability in code, by giving the input in the form or through get command.
Views: 741 Arcode code
SQL injection - Getting the table name  ,  column name  and database name from the database
 
12:25
in this video I will tell you how can get the table name and column and database name from the unknown database. As database connection is written in the server language so we need to run some code before we get to that stage of getting the table name, column name and database from the website To run our sql injection we are going to use, UNION query Step – 1 – In the step one we will try to get the number of column, to do that I will type the user which exist in the database Step – 2 – After knowing the number of column, we will try to get the table name and column name from the database, to do that I will use union query, and I will give below value in the form. Step – 3 – After knowing the table name and database name, we will try to get the table name, in the userprivateinfo table, to do that again I will use union query, and I will give below value in the form. Step – 3 – After knowing the table name and database name and column name, we will run one example to do that again I will use union query, and I will give below value in the form. Note – Although I keep on using Tom, as starting value, for every step, but you can use any value, as it does not matter, weather that value exist in the database or not. For the full source code – click on this link
Views: 12457 Arcode code
SQL injection PHP - part 3 - Deleting data from database
 
05:22
In this vedio I am going to explain how you can delete all the data from the database, by running SQL injection. To do this we are using one form, one database and some PHP code, our code is vulnerability to sql to sql injection because we are using same name for database column and same name for input, in the form we using user input directly into our query and we are running multi query into our database.
Views: 1710 Arcode code
Responsive Hamburger Type Navigation Menu using only html and css -- Part1
 
05:59
In this video we will learn how to create Hamburger type responsive navigation, i am using button button instead of hamburger icon, and i i will only use html and css for the project You can download the code from the link below https://codepen.io/ArCodee/pen/qXvMQa
Views: 566 Arcode code
Responsive drop down Multi Level Navigation Menu with Animation using only HTML and CSS
 
27:08
In this video we are going to create resposive drop down multi level navigation menu with animation using only html and css, You can down load the code from the link below https://codepen.io/ArCodee/pen/PKgNvv
Views: 716 Arcode code
Responsive Hamburger Type Navigation Menu using only html and css -- Part3
 
04:30
In this video we will learn how to create Hamburger type responsive navigation, i am using button button instead of hamburger icon, and i i will only use html and css for the project You can download the code from the link below https://codepen.io/ArCodee/pen/qXvMQa
Views: 121 Arcode code
1 ReactJs - JSX INTRODUCTION
 
04:26
1. How to type HTML code in JSX syntax, 2. you simply type HTML code in JSX as you type HTML code in HTML, just one thing to remember, JSX uses camelCase naming convention, that's why class will be className and tabindex will be tabIndex 3. JSX is JavaScript expression not the HTML code 4. how you type JavaScript code in JSX 5. you type JavaScript code in JSX as you type JavaScript code in JavaScript, just simple wrap them in two curly braces { } 6. in JSX what you type in two curly braces { }, JSX is going to evaluate that code 7. How JSX help against the XSS attack 8. before rendering anything onto the webpage, JSX turn user input into a literal string, that's how JSX help you against the XSS attack
Views: 126 Arcode code
Responsive Drop Down Multi Level Mega Menu Only HTML and CSS
 
25:00
In this video we are going to create responsive drop down multilevel Mega menu using only html and css, You can download the code from the link below https://codepen.io/ArCodee/pen/LjvNqd
Views: 897 Arcode code
Flexbox - Property - flex shrink , flex flow , flex
 
02:57
in this video i will explain how flex shrink, flex flow and flex property work
Views: 41 Arcode code
Responsive Hamburger Type Navigation Menu using only html and css -- Part2
 
07:12
In this video we will learn how to create Hamburger type responsive navigation, i am using button button instead of hamburger icon, and i i will only use html and css for the project You can download the code from the link below https://codepen.io/ArCodee/pen/qXvMQa
Views: 126 Arcode code
Responsive Horizantal Menu Navigation with Opacity only with HTML and CSS
 
12:22
in this vedio we are going to create responsive horizantal menu navigation using only html and css You can download the code from the link below https://codepen.io/ArCodee/pen/ayMvGX You have to wait for the picture as i am waiting for written response from the owner, Thank just check the link you will know weather i got the response or not.
Views: 73 Arcode code
Flexbox - How exactly flex-grow work
 
07:14
The misconception about flex-grow is they determine the proportion between flex items if we have extra space. For example if flex item has flex-grow value one, and flex items two has flex-grow value two, than you might think flex item two will be twice as big as flex item one, but flex-grow does not work this way. So exactly flex grow work? flex-grow determine, how much extra space each flex items going to get to grow, proportions to their flex value
Views: 72 Arcode code
Responsive Drop Down Multi Level Mega Menu Only HTML and CSS -- 1
 
07:10
In this video we are going to create responsive drop down multilevel Mega menu using only html and css, You can download the code from the link below https://codepen.io/ArCodee/pen/LjvNqd
Views: 74 Arcode code
PHP 7 with test C3 return Type Declration
 
02:23
This course will help you avoid some comman mistake which people make while they learn coding online, like avoiding syntax error, in my this course teaches the best practice to learn code online This is fifth chapter for the course PHP7 with test, and in this video we are going to cover, space ship operator space ship operator return three value one, zero and minus one, with help of space ship operator, you can type clean usort function code For the test click on this link
Views: 4 Arcode code
Flexbox - Property - flex-wrap
 
03:14
If your flex container size is smaller than your flex items size, they start to shrink, this is default behaviour, but if you want them to shift onto new line instead of shrinking you can this property flex-wrap. wrap-reverse can have
Views: 69 Arcode code
3 ReactJs – First Practical example  and how react update the DOM tree
 
10:55
First practical example 1. import React 2. import render 3. create constant app, which is equal to hello world in the h1 tag 4. use the render function to display it onto the webpage (in render first argument will be what you want to render and second argument will be what you want to render) how react update the DOM tree as I told you ReactJs create react element and only update the part which is necessary, to demonstrate that, I created a function, and wrap the code from the first example inside the function, name for the function is tick 1. create function tick 2. put the code from the first example inside the function tick 3. add h3 tag and add a literal string the time is, and than to display the time use date function from JavaScript with toLocalString 4. now call our function with setInterval, give time 2000 mini second, 5. and than inspect the DOM tree, with paint flashing
Views: 203 Arcode code
Multi Level Vertical Responsive Navigation menu with html and css
 
32:19
In this video we are going to create Multi Level Vertical Responsive Navigation menu with only html and css You can download the code from the link below https://codepen.io/ArCodee/pen/yorJLV
Views: 471 Arcode code
8 ReactJs  - Event Handeling
 
16:35
7. Event Handling in ReactJs Why we use bind(this) 1. We use bind(this) for form function in reactJs, and reason is, because that's what the documentation is saying, in the example which you saw in the video, I am using two files, but even if I am using one file, I still have to use bind(this) as per the documentation if I dont use bind(this), this key word will be undefined, and our code will not work, 2. basically bind(this) give function context (component), so even though you call the function from another component, it still going to call the function in the given context(component), and if you dont use bind(this), there will not be any context, hence our function code will fail. Why we use onChange event handle with form input And the reason we use onChange – As soon as you add value tag in the form, react will render read only field, so if you want to change it, you have to use bind this function. Few notes before running the exercise 1. We are going to use two file for the example, layout.js and header.js, in both file, basic shell for component is ready, but in the header.js file we are also returning one extra h1 tag. 2. Import the header.js into the layout and return the Header component as well. First Exercise – 1. Create a state name, name and give it value, William, and inject this individual state name into Header component 2. Return the props name, in h1 tag in header, check the out put 3. Now add a form in the Header component with one input field a) Type for our input field is text and value is equal to the this.props.name 4. As you can see we can not change the value in the input, so add a onChange event handle, with the input field, and name for that event handle is nameChange, a) this event handle nameChange, basically going to change the value of input box, when ever user press any key on the key board. b) And that value will be equal too what ever user is typing in the input box, at the moment input value is equal to this.props.name 5. Given the above point, where you are going to create event handle, in the Layout Component or in Header Component? a) If you dont know the answer to this question, leave a comment and we will discuss it in the comment section. 6. After creating this nameChange function in the Layout component, inject this as a props, into the header component. a) Make sure you understand why we are using e.target.value in this function. b) And you should also understand why we use bind(this) when we injected this function into Header component 7. Now check your out put, and change the input value to see weather our code is working fine or not.
Views: 207 Arcode code
Responsive Navigation Menu without unordered list or list items with HTML and CSS only tutorial
 
25:49
In this video we will learn how to create Hamburger type responsive navigation, i am using button button instead of hamburger icon, and i i will only use html and css for the project You can download the code from the link below https://codepen.io/ArCodee/pen/oeVavW
Views: 141 Arcode code
Flat Responsive Form Introduction and HTML structure using only CSS Part1
 
03:30
In this video i will give introduction to the project, and i will also explain the html structure, Like as i said in the introduction video, we will be using font awsome icon offline I am using direct link to use font icon at this link, as i am not allowed to import local resource, so just remove the import link and your code will work just fine. https://codepen.io/ArCodee/pen/VMGEqx html css tutorial for flat responsive form, using font awesome icon off line dowload the code
Views: 56 Arcode code
Responsive  Two Level Drop Down Menu Navigation only html and css Part1
 
06:31
In this video we are going to create responsive multilevel dropdown menu or navigation using only html and css If you want to download the code used in this tutorial visit this link https://codepen.io/ArCodee/pen/LjvNQO
Views: 41 Arcode code
5  ReactJs - Component  Part2 - How to use function in component
 
06:33
First the part of the component – component have three part, 1. First part – Part from component till return, this part belongs the component. So what ever you create here, if you want to return it, and display it to the webpage, you need to use this keyword. Note – you can not use function key word, when you create function, in this part 2. Second Part – the part from render till return, what ever you create here, you can access that directly into the return 3. Third Part – In here you code what you want to display to the end user Reminder – If you want to run JavaScript here, you need to wrap your code in the two curly braces {// Java script code here} Note – For all example use the layout.js file, and we are going to return every thing in h1 tag First Exercise – 1. Create anonymous function and return 4. 1. Notes 1 – Why we created this function in the render part, if we create this function in the component, our code will not work. (Read the part of the component again Second Exercise – 1. Create const a in the render. This const a is equal to 5 2. Give argument a to our anonymous function, and this time instead of returning a number this function should return a Third Exercise – 1. Give our anonymous function name, and name will be name, for the function 2. and cut and paste this function into render part 3. and now call our function in the return 1. Notes – after giving name why we copy and pasted it in the render part. Forth Exercise – 1. Create another function name in the component part, (make sure you don’t use function keyword, when you are creating this function, as I already told you that you can not use function keyword with function in the component part – Read the part of the component again if you are confuse) 2. and this function should return a string – belongs the component 3. first check what this function will return with the key word this 4. and than check what it going to return with the this key word 5. make sure you understand both the out, so it become clear to you when and when not to use this keyword when you call the function 1. Notes – in most cases you will be using this key word when you call the function
Views: 61 Arcode code
4 ReactJs - Component  Part1 - Component in Detail
 
33:50
1. With component you divide any ReactJs app into small pieces, and than you join them together. 2. Component return single root element. 3. First html tag will be the root element for that component. 4. To render your component in the ReactJs, you just type the component name in the smaller and greater than sign, and than you close this with slash. a) for example name for our component is layout, so render will be Layout Some Common notes before the first example 1. 2. To import a file, you use import command, than component name and than file path. 3. With file path you don’t have to type dot js, as ReactJs assume you are importing JavaScript file, but if you do that's fine as well. 4. To start the component you can use class or function, in my example I used class, and you also have to extends the React.Component with this new class, lets say for example you want to create component name Layout so basic syntax will be export default class Layout extends React.Component { render ( ){ return ( //return any html tag );}} 5. Every component should render some than and should return one html tag. ( For every example makes sure you are rendering Layout component in the index.js file, and you are importing the layout file in the index.js as well) First example steps-- creating our first component Layout 1. Import react 2. Create a class name Layout, – see the general syntax in the some common notes above 3. Return First component in h1 tag Second example steps – importing one component into another component Notes – to return a component into another component, first you have to import that file and than you can return than component as many times you like 1. Create Header component file in header.js file 2. Return the same element like you return int the first example 3. And than return this Header component in the Layout component 4. Return the Header component again, and wrap them in div (If you don’t wrap them in div our code will produce an error message.) Third example – return the element with using opening and closing brackets with return 1. Create Layout component which will return string First component, in h1 tag 2. But this time don’t use opening and closing bracket with return What you should learn in the second part of this vedio 1. In the second part you should be able to grasp, what is the meaning of root element, how we can return multiple element with out using div, 2. What is the meaning of adjacent JSX element must be wrapped in the single root element. 3. You should also learn that you can return multiple element without using opening and closing brackets with return if you are returning them in single line 4. If you are using returning multiple line than you have to use opening and closing brackets with return.
Views: 179 Arcode code
Flat Responsive Form Using font awesome icon offline  using only css Part2
 
06:53
From this vidoe will start styling our document, using font awesome icon off line, flat responsive form using only css or pure css I am using direct link to use font icon at this link, as i am not allowed to import local resource, so just remove the import link and your code will work just fine. https://codepen.io/ArCodee/pen/VMGEqx html css tutorial for flat responsive form, using font awesome icon off line
Views: 50 Arcode code
7 React Js - Props
 
21:07
Important Notes – 1. You use props, to pass data from one component into another component, 2. To inject the props into the component you simply type props name, equal to and than value a) if the value is JavaScript, you wrap them in opening and closing curly braces, otherwise you don’t have to use curly braces 3. If you are passing multiple props, in single component, just pass them with out separating, like using coma or some thing, but if you give one space it will be better, as you will be able read them easily. 4. You access all the props in the component by typing this.props 5. And you access individual state by this.props followed by dot and the props name in the child component, let's say you want to access job props you just simple going to type this.props.job Note before the Exercise– 1. For every example we are going to use layout.js file and header.js file, basic shell is ready for component, and in the header.js we have extra h1 tag after div 2. Import Header component into Layout component First exercise – 1. Return Header component in Layout, two times. 2. Create two state, name and job and value for name is will and value for job is publisher 3. Inject the whole this.state as props into one Header , and name for our props is name 4. use the console.log to see weather the props is in the console or not 5. for the first Header it will be there and for the second it will say undefined, as we did not inject any thing into the second Header Note – It is very important that you understand this tree, to understand how react is passing our props. 6. Change the name of the props to X and see what changed in the console 7. Change the props name back to name 8. If you understand that tree, instead of accessing all the props, just access single props name 9. Now access the individual value name, with in this props Note – Try to understand why it showing will and why it showing us error message.
Views: 68 Arcode code
Responsive Slide in and out Form only using css Form2 Part8
 
05:34
in this video are going to make sure that user can not click on registration pre untill he or she clicked the next button. In html css project responsive slider form tutorial we are going to create form slider, using only css. In html css project responsive slider form tutorial we are going to create form slider only with pure css. In html css project responsive slider form tutorial also include betuafull footer and beautiful footer and as I told we are going use font awesome icon off line In html css project responsive slider form tutorial I am also going to show practical use of order property In html css project responsive slider form tutorial we also going to use translate property to position our form instead of position down load the code from the link below
Views: 14 Arcode code
6  ReactJs  - State
 
18:39
Important Notes – 1. We use state in ReactJs, so we can keep track of the user activity, 2. State value change according to the user action, and we keep this state as props to the child component 3. And if we use state, we basically making sure that we are using React Element, for DOM manipulation. How to initiate the state in ReactJs 1. You initiate your state in the component, in constructor function, and before initiating your state you call the function super, and than you use key word, this.state, and you give state and their value separated by colon, 2. If you you want to give multiple state you just separate the state and value pair with the coma. Note – state is like an array so you don’t use quotes around the state name, but you do use quotes around the value if its a string. Basic syntax for state Component Class Name { constructor(){ super(); this.state = { state1:'Value1', state2:'Value2',} } } You change your state with setState function, like this setState({stateName1:'new value',stateName1:'new value'}) Note for exercise – 1. you access your state with this.state key word followed by dot and state name, like say for example name for your state is job, and you want to access it, so you will type this.state than dot and job, like this this.state.job 2. we are going to use layout.js file for every example, and we will returning our output in the h1 tag First Exercise – 1. Create a state name, name with the value William 2. And display it onto the webpage. Second Exercise – 1. Add another state job with the value publisher 2. Display this state also Third Exercise – 1. Delete the job state from the render and from this.state 2. Create a setTimeOut function to change the state value from William to Hill, after three second Important note – 1. Although state are mutable, but you should never change them, always use setState function to change the state value. 2. State belong to the component in which you create them, so if you want to change the state value, you can only change it, in that component, 3. You should try to initiate all of your state in parent component, and than change them in the parent component as well, and than pass that state as a props, into child component, so if the state value is changing because of the user action, the props value will change accordingly,
Views: 56 Arcode code
SQL injection part 2 - PHP - By passing the logging system
 
07:50
In this vedio I will show you how you can by pass the log in system with SQL injection. I am using some common mistakes which people make when they type PHP code To achieve our goal, we have one form, one database and some PHP code. Our PHP code is badly written and full of security whole. we are not using place holder for our query, we are using user input directly into our query, we are checking every input into our query,
Views: 376 Arcode code
Flexbox - align self with align items and how exactly align self work
 
03:10
official description for align self might confuse, so use the description in this video to understand align self,you will understand it better.
Views: 28 Arcode code
Responsive Drop Down  Menu  with animation no java-script Only HTML and CSS --4
 
11:04
In this video we are going to create resposive drop down multi level navigation menu with animation using only html and css, You can down load the code from the link below https://codepen.io/ArCodee/pen/PKgNvv
Views: 31 Arcode code
Responsive Drop Down  Menu  with animation no java-script Only HTML and CSS --2
 
05:41
In this video we are going to create resposive drop down multi level navigation menu with animation using only html and css, You can down load the code from the link below https://codepen.io/ArCodee/pen/PKgNvv
Views: 38 Arcode code
CSS Advanced Selector - Pseudo Class - nth-child
 
03:27
With nth child selector, we can give alternative color to our element, it's specially handy if we are dealing with the database, and want to give alternative color to database result. For example we can use nth-child(odd) or nth-child(even) If we only want to select single child, just type that child number in the brackets, lets say we want to select 2nd child – nth-child(2) we can also type expression in nth-child selector, so lets say if we want to give style after each and every third child, we simply give expression 3n. → nth-child(3n) And lets say if want to give starting point to our expression, and lets say starting point is, start from the fourth child, we can type→ nth-child(3n+4)
Views: 33 Arcode code
Mini project with ReactJs JSX - test and exercise included
 
01:49:19
I am note able to add in line link for the vedio sorry. You have to use youtube time line for that, Link for the empty source code, again you dont have to download node or webpack dev server, every thing is included in this folder after downloading this file, run your webpack dev server and start coding Link for full vedio source code https://www.4shared.com/folder/dz33K2lf/_online.html Link for upated source code – coming soon(with in two or three days, will start doing it after the updated source code) https://www.4shared.com/folder/dz33K2lf/_online.html Link for website – coming soon Link for the pdf – coming soon (will be done in two or three days) Link for the expanded project – will start working after finish the website, will update you in the comment section You tube numbo jumbo – you dont have to read after that, as you are not going learn, this is mini project for reactjs plus jsx, even if you are comlete noob in reactjs you still will be finish this project, This mini reactjs project include test exercise and expanded project, this project is build in a way that you avoid common mistake, and improve your coding ability.
Views: 224 Arcode code
Flat Responsive Form Using font awesome icon offline  using only css Part4
 
06:33
IN this vidoe we will create our footer flat responsive form using only css or pure css I am using direct link to use font icon at this link, as i am not allowed to import local resource, so just remove the import link and your code will work just fine. https://codepen.io/ArCodee/pen/VMGEqx html css tutorial for flat responsive form, using font awesome icon off line
Views: 114 Arcode code
CSS Advanced Selector -  Pseudo Class - target AND nagetion
 
04:28
:target – target pseudo class means, apply the style to element, if element id, matches ending part of url, and you got hash key before that part. Let's say for example, element id is #bitMe, and url is html/target.html#bitMe, as you can see url ending part is #bitMe and element id is #bitMe as well, so target pseudo class will apply the style to this element. :not(selector) -- not pseudo class basically means, for example apply the style to all of these h1 elements, but not the h1 which has class What_I_Did_Wrong, so for example h1:not(.What_I_Did_Wrong ) { //style} this line means apply style to the h1, but not to the h1 which has this class What_I_Did_Wrong. Some point to note about not selector – 1. To use not pseudo class, first you have to type colon followed by not than opening and closing brackets and in these opening and closing brackets you type your selector. So basic syntax for not selector look like this. :not(selector) 2. We can only use single selector in not pseudo class, for example :not(h1, a) is wrong. As we are trying to give multiple selector in one not selector. 3. We can not give child selector, for example :not(h1 a) will not work, as our selector is h1 a, which basically means anchor tag which is child of h1, so we can not give child selector. Download file – watch the video how to create link for specific section on the webpage.
Views: 28 Arcode code
Flexbox - Property - Order
 
02:52
In this video i will explain how order property work in flexbox, and i will also explain the common mistake beginner make when it comes to understanding order property, they think order property define the order, in reality it does not.
Views: 31 Arcode code
Responsive Drop Down  Menu  with animation no java-script Only HTML and CSS --1
 
08:28
In this video we are going to create resposive drop down multi level navigation menu with animation using only html and css, You can down load the code from the link below https://codepen.io/ArCodee/pen/PKgNvv
Views: 60 Arcode code
Introduction to Second series Multi Level Drop Down
 
03:15
In this series i explain what you are going to learn, in this series, we are basically going to create four multi level drop down mnu and in each new video we are going to learn some thing different.
Views: 91 Arcode code

Here!
Here!
Here!
Dizionario non online dating
Instapak quick video chat