BUILD WEBSITE ONLY WITH JAVASCRIPT || MASTER JAVASCRIPT BASICS || WEB DEVELOPMENT || JAVASCRIPT | KISHORE RUDRARAJU | Skillshare

BUILD WEBSITE ONLY WITH JAVASCRIPT || MASTER JAVASCRIPT BASICS || WEB DEVELOPMENT || JAVASCRIPT

KISHORE RUDRARAJU, Full Stack Developer || Teacher

BUILD WEBSITE ONLY WITH JAVASCRIPT || MASTER JAVASCRIPT BASICS || WEB DEVELOPMENT || JAVASCRIPT

KISHORE RUDRARAJU, Full Stack Developer || Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (43m)
    • 1. IntroStore

      1:05
    • 2. Advantages/Disadvantages , tips , Best Practices , Personal Opinions on Javascript

      1:38
    • 3. Getting Started to Class

      1:32
    • 4. Name & Price of the products

      19:57
    • 5. Objects & arrays of products

      5:20
    • 6. Card to show product details

      9:31
    • 7. Function of the product card

      4:00
89 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

498

Students

--

Projects

About This Class

BUILD WEBSITE ONLY WITH JAVASCRIPT || MASTER JAVASCRIPT BASICS || WEB DEVELOPMENT || JAVASCRIPT

In this You are Going to learn About :

  1. Javascript Dom
  2. CSS & Media Queires
  3. CreateElement()
  4. Appendchild and Append()
  5. Objects and Arrays
  6. ForEach

At the End of the Class you are able to :

  1. You can work with javascript dom
  2. You can design website
  3. you can work on css and media queries
  4. able to work on objects and arrays

Mainly i have given advantages/Disadvantages , tips , best practices and my personal opinions on Javascript.

Why Choose This Class :

  1. You mainly learn about web development using javascript
  2. You will learn about objects and arrays
  3. You will learn about media queries and CSS
  4. You will learn about javascript methods and functions

Support :

email : [email protected]

Files :

Click Here To Download

Meet Your Teacher

Teacher Profile Image

KISHORE RUDRARAJU

Full Stack Developer || Teacher

Teacher

Hello, I'm KISHORE RUDRARAJU. Founder of SimulEduco Solutions.

I have +3 Years of Experience in web development and recently completed front end nano degree from Udacity by doing 6 real time projects.

I am very much interested in teaching , i love to share my knowledge with others .

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. IntroStore: In this class, you are going to let know what JavaScript, DOM and CSS and media queries to design responsive website. And you lower creative and how we can create HTML tags using JavaScript and the functions of append, Kayla and append. And I've just analyses to the data. And finally, you know what for each letter. At the end of the class will be able to work with. Delos, can go manipulations. And you are able to design a website using JavaScript and CSS. And you can work consists as and now media queries. And you are able to work on objects and that is to reduce the data. So let get started. See you in class. 2. Advantages/Disadvantages , tips , Best Practices , Personal Opinions on Javascript: So let me explain some tips, advantages and disadvantages and my personal opinions on JavaScript. So coming to the tapes and to lend rubbish of JavaScript, you want to grab the basics more thoroughly. And then you should keep in mind that the write the JavaScript code across all browser compatibility and should. And you should handle the errors. And you should understand that DOM manipulation, that is Document Object Model. And follow some developer communities such as StackOverflow and Cora. So coming to advantages of JavaScript, JavaScript is relatively simple to learn and implement. So JavaScript is usually everywhere on the websites, okay, in each and every website will find JavaScript. It use the ability to create a richness interfaces in the websites. Being client-side reduced that demand on the server side. Okay, coming to disadvantage is by writing some JavaScript code, it may be expertly some malicious purposes. You should want to write JavaScript in different roses. Coming to my personal opinions of JavaScript. It is a funny and easy to learn, okay? Because it's very foster interpreter, object oriented in the same time. So a lot of resources on documentations, IE's get inspired by you and you can easily learn. So let get started. See you in class. 3. Getting Started to Class: Yeah, in this class we are going to design a website totally by using CSS and JavaScript government relations. So this is a website read willing to build. We are not using any HTML tag Sartre elements to build this VIP said, the only JavaScript DOM manipulations. And I'll get rid of CSS to build this website. And we are adding some media queries to make it response you soil it gets started a whole. We can design this website. So I have a folder called store. Instead of it, I have a few images within images folder. And I have a text document with the information umbrella mobiles like image price, and a name on the list. And I have a link to the Font Awesome. You can find this linking directly by searching Font Awesome CDN in Google. Let me open this folder in Israeli Studio. Okay, and then we're going to create a index.html. Let me mod of this folder. Okay, move. And then create a new file called styles.css. So these two files are enough to create this website. Elect Moody style.css out of the mess for loading it is created inside. Let me move. That's fine. 4. Name & Price of the products: Okay, instead of HTML, we're going to write a basic while loop rate like HTML5. David, okay, then think that idolize store. I linked the style.css to Lingonier style lot Anna, referential style.css. So inside of the body we are not going to create any elements. Yes, we are creating a script tag. Handwriting will follow the containing it dish by using JavaScript script instead of script tag. So let us create a new element ladder heretical to document dot create element header. So here create element is, we are creating a new HTML element called header. So on are playing this whole continually header variable k. And that content equal to document dot create text node. And inside of the brain we can write any text we would like at the store. So this is a text we are creating by using a function called create. Great dictionary. Use it to append content to the header. So headed dot append content. So here, append to Charlie's. We're appending the content to the header. So document dot boy. So this is the whole body section. I am getting not document dot body and appending the header to it. So document dot body or the append header. So in this way we can append a header to the body. So let me open this file in like Guo Lai server. So now we can see Apple Store. So it has really created a header element. So no, let me create a image. I mean local to it. But imagine caldo document.write, create element image. So here create element, we can create a new type of element like paragraph tag, a heading tags are strong decks. Any span tags we can create any element by using guests, create element function. And here image dot set attribute. Here the syntax is nothing but were giving value to the attribute. Like for example here, source, source equal to MAS between a MIS. Let me see. Automates AIA, logo dot PNG, JPEG, and art. That art means we're not I may is not louder than that takes, which is returning the Altius shown up in sight. So and let me do the height and width also so that the image is up there. And would manner, let me read mythical too. Like with space-faring double-quotes like 40 pixel. And a height equal to same 40 weeks flirting with the appear in ships so that the image is one method of with the content. So let me append this image to the head. Otherwise it won't be appearing website. So here append, append, append. We are not going to see for header dot append image. So I mean he's not getting that texture you login is getting. So water may mistake. Yeah, here, lower dot PNG JPEG. So let me change the API due to PNG. Yeah, it's actually square. You are getting a login text2. Let me add a little bit of style squeak so that it really look good. So instead of style.css, So let me remove the tangent normal styles from the website like margin and padding 0, our header, the header. I'm going to be lifestyles like color ash at 0, 5F for 0. It is light orange color. And I'm back droning call to white-collar ash f, f, f, f, f, f means a white-collar. Otherwise you can mention White and padding and margin 1%. And bach shadow. It is buckshot efforts using horrific 2D header section. So 08 pixel and eight pixel minus eight pixel. I'm black color. And font size, nearly 40 pixel. And font weight. Let us out a font weight so that it will appear somewhat thicker. 60 units. Okay, like missing. Yeah, it's good. So let me I'll aim to center. It will be good. Etched align center. Yeah. Are actually fresh. You can show good. Now let us add some sections so that we can design a section. Instead of that, we can show you match ana needles on the phone to create a new element called section. That's section equal to document dot create element section. So we have read em, I'm using create elements so that you can know the importance of the create element. O Section dot class, lavished care class, list, class, which means we are adding some external class section. Suppose products. That means the section is hiring a className products. And let us append to the body and document dot, body dot append chain section. So append, jail and append. We can use whatever we want and there's no problem in it. And that item. Equal to document dot create element, deal. So instead of this section, we are creating a deal for the image of anything like details or other else. Item, dot class list, dot add item. So the new is having a class item. And let me append to the section, Section dot append item. Okay, fine. Let us inspect and see whether these elements are created or not. So instead of this section, and so your section, we have products. Instead of that we have item successfully created by using the JavaScript DOM manipulation. So document dot grid element image. So I need to show the image of the phone. Ladder, magical document or cleared element image. Or we can set some attributes to it. Image.all data attribute sorts of images. Let me take image D21 JPEG. So image data set attribute, Alt. Alternative text we held will show up all the COCl2 example like Apple phone or something else. An item dot append MH. So we are appending the image to the item and the item is appended to the section. So this is the image we are going to be see on the website. Yeah. Well retrieve images from D. It means full successfully, but we have to use some little bit of style. So that will take a margin from a left-hand right. We will let us add some styles to the products. So I am using flex on grid concepts. So display flex and flexor API call to wrap. So we are displaying flecks means it will make the response you automatically and flex it up means rep. That means if we help all elements, it will adjust themselves to occupy the V8 when we respond to the site, to the desktop on mobile or anything else. Inside of the item, we'll write some styles like flux. And the flux rapid, colder, wrapped and will tickle to 45 pixel or a part of a percent. So 45, but I am adding part of a person means it will take a greater amount. Basically the whole bodies containing of a 100%. So the item 45 minutes, person means and desktop it will occupy two courts for it. And margin 1%, padding 1% and the same thing on border. One pixel solid. Well, let me choose a color like cash C6. Cac are now whenever we run it, again shows I'm emails. So like item hood, bach shadow, 08 pixel, a pixel minus eight pixel. And relate the semicolon we held rare gift C6, CAC. So let, let us refresh the page. You can see here a beautiful card appearance with a horrific. So then we create another one. It will operate none space behind it. Because we are giving the veto 45%. In this group. It is very nice. So instead of the item, we'll create a new deal for the details of the fonts like price, title, etc. Creating new variable with the details. Okay, let me read this. That details equal to document dot create element. Do. We are creating a deal for the details so that we can enclose the whole details in this new details dot. Let us add a class list, class list dot add details. Here we are adding a class for the details with className details, item dot append, details where appending the details Due to the item. Okay. Now we can see in the elements section instead of item where created a image and but we are not getting the detail section where it is not getting Let me see. Ya inside of it. We made a mistake here. It is. Itn It is not ideal and changes me to IDM, this item. Oh, let me refresh and look and see how whether or not yeah, we IS exquisitely retrieval that details by using JavaScript DOM. So instead of let, let me create a title for the phone. Let ideally equal to document.write, create element, a paragraph tag like p. So whenever we want to create an element, just to use the function create element. So and then welcome Linda, equal to document dot a text node. So if we want to add some texture to the paragraph or any tags, we have two functions like create text node, or we can use dot inner HTML. We can use anything we want. We can set up the machine text2. Let me take the name of the phone so that we can save time and create external interrupt that took place this content on the phone like model of default. And then append this title. Happened, this content for the ID that is tidally locked up any content. Let me add a first-class wish to eat a lot class list dot add ID, so that we are adding a class for the title, that music for paragraph tag. We are adding coil, icky and append this title. And should've let first I've bene content for it. Title dot append child contained. So we're appending the content to the tight it. Let me not battery-operated. We are appending the Apple iPhone eight plus two GB to the egg and append this title. Louis, like leader, stood up, indicted less successfully. Paragraph element. With that content on, let us take some new variable, go up and the price. Len document.write cleared element B. And that content equal to same thing, Bookman doc XNOR. Great. So insert information or THC and copy a prize award, a prize of 55 nearly. And they should hear. And let us add a class Fisher Price dot class list.ai does same thing price, and allow the content to the price like price dot append content. And append the price to the item, like details dot append price. So we can see now price, the same section. Basically we have to follow a procedure because we are creating a element and then getting all feet and creating analytic element inside of it. A easier way to create an HTML element. Let me add some little bit of styles, like dot details. Details like how to align the text to the left so that it will be good. Text-align left and then display flex on the flexor. Let action and called a column and padding. 1%. Take padding anyone and you won't find what I personally believe me better. And margin 1%. So now you can see the section is, it would matter, but let us add some styles for the title as well as price. So it will be good like adding some colors and font size, etc. Dot title. Font weight equal to boil means we are getting the content in a much stronger. And the color, that same orange color like f 0540. On a font-size off. Going deep, Excel will let us see how it look likes. Nowadays. Idlis, very good appearance or low. Let us add a same style, so the black color for the price. So created that price and add some font-weight like more. And I let it go to black. We'd want to one day out of the color. It won't be a problem by default, it isn't black color and font size of 20 pixel. I'm padding top ten pixel. So getting some padding from the title of N percent. Now it is throughput. So no, let us add some details about default, like RDTs, GB RAM. And it's some specifications we are going to add in an unordered list. We are going to create this specifications of default. 5. Objects & arrays of products: So now the only thing is we don't want to show this single called How to show the whole content. Like we are here, we are having eight different fonts with a different images and different content. Now how we can show this whole content dash, we can use the object. That means objects is that Englert. We're having objects, RS, And instead of doing tele content, copied this content. And patient here. It is easy. Like created immortal, and sort of the model we are having the whole content. So let us clear the variable. We'll call it a pro prominence products. And instead of rule, we are getting the mortar instead of modeller. How will a phone for an object? So phones object and the silicon and assigning to the variable pro. So this object is having a index 0 and ending with a totally having made objects so that the index will be seven. So when we refresh this page, there is nothing condense showing. So we'll create a for loop. After the section where i equal to 0. I less than product land. Now products dot length. And i plus, plus. So close the breadth and place it, end up the button. So the whole content will be repeated for the ATMs because we are having eight different phones in that object. So copy that image. Image deck. So like we can assign it like pro dot. I means Pru, instead of that I dot image. So for example, if i equal to 0 prof 0 dot, that means flashed image selector for the for loop will again, again like 123. We can get different majors. And further Nim brew of id dot name here also, for ideal, we're going to add the nim blue item.name. And for the price, we can add Prof I dot price. So let me refresh. Y'know, we're getting different agents and different prizes. But the description, I mean the specifications are the same. So we can look this specification different manner. So the prices are entitled to different. It's working fine. So here a VAD names. Get rid of the whole content of the names. Here, changed that a names. Because we are having an object, insert object, we are having a list. So we can select by using Prof I dot published. Whole condense remained the same. So now you can see the lift is having an RNA instead of 30, we are having the different strings. So there isn't a thing we have to change all our good. So when we refresh the page, we are getting the different specifications are different mobiles. This is how we can create a total website just by using JavaScript DOM manipulations and a CSS on media queries. So let me open this. Now you can see whether we have any elements inside of the body. There is no elements we have created in several body gashed. We are using JavaScript document object model to create a whole HTML content. Yeah, thank you. All can add this project we regime to see you in the next class. 6. Card to show product details: So let us, let me copy this oil content. We choose wrapping the RA and me declaring name for this array a that nims that naming names equal to. Let me paste it here. So this is the array. Here we getting probably 1234, are getting four specifications. So the index starts with 0 and ends with three. So by using a for loop or a for dot H, we cannot retrieve that each specification are known. We can place in a list-item off our unordered list so that you are willing to document.write, create element, you will. So we are creating an unordered list under details dot append. So we are appending this university. Details. Use the names dot h. So for each specification inside the array of the names, where using a function with the parameter name will take the parameter name inside of that. We are creating. So whenever if 64 GB RAM is taken from the array and it is going to create the whole contained inside of this function, like LA, document dot create element LA. And so how to append this append chain? And that, Okay, let me read of this. We can adjust. I have to place this content inside of the LA, so allay dot inner HTML name. So it's very easy, just we are getting the information and placing here yeah, we have successfully during inflammation initialize manor. Yes, we did that. We are taking it at a and we are using for each loop. So let me add some Font Awesome icon like checkmark. That is where i equal to document dot create element. I we have far, far check. By using that we can place the content. And let me add a class called FA. In JavaScript DOM ambition, we cannot add phosphates for hyphen chicken because here thus base will not be created by using JavaScript dominant position. So we have to create a new class. I don't know how to add like FFA and the scope chain like that. So let me copy this font-awesome URN and place it in below the style.css link. So refresh the page. Now we can see what is not getting. Why probably I am not appended the thing to it. Yeah, I'm not appended the eye to the LA LA dot append i. By its cardinal. Refresh the page. We can see a dark sides, but let's check marks. By using styles. We can remove these dots by like, you know, this.title. None. Killed me. Add some styles to it, will make it better. Like you will feel list-style-type, none. And padding. Top ten pixel on font, weight 50. So far check, I mean, you know, for font-awesome chick icon, we are using a color of light orange. Yeah, it's no very good. Buddies appearing down. I have to make it side of the image are not getting o. Let me close this file and open the file in the folder. So instead of store, open the index.html. Yeah, it's good. No, it's, it's very nice. And we have to add a button for like a buy now, buy the product on by this phone, etc. So instead of that, below that, you will have to create a button. That button equal to document dot, create a payment button. So and then, but n dot inner HTML, we can use a gray text not alter, that is no problem. That is by know an append this button, do the detail section, data's dot append. Okay, let's us how it look likes refresh the page. It is not getting very much tick things. So what is that? Yeah. That isn't button not B tt wall. So change that too, but an undefended page again, you can see a button, but it is not that much off. Good appearance. Let some, add some status to it to make it better. For the users are question marks. So select the button. Sorry of it will add a margin. Top, quantify pixel, and a bag grown. Alpha light color. Let me add the code hexadecimal Kortrijk 6C 7570. And color, color of the text. I want to be in white colour and a border radius. You have to add a border radius, 20 pixel. Then it will take some communists in a township and padding ten pixels. And if I pick cell so that the button will be appear somewhat larger. And the border, two pixels solid. And color of the border is like color and font wake mode. And a cursory called pointer. So cursor point is whenever we go to the by number, then it will change in-group point at an effect. But an O1 add some water to it. Border two pixels solid of ash. C6, C7, C. No, it's fine. Let us see how it look likes. Yeah, boom, where getting a super button. So this is how we can create a chord using JavaScript DOM ambition without creating any elements. In body section. 7. Function of the product card: Now let us take a function and dropping a whole content to create another card like that item one equal to function. So enclose this breast or don't have the script tag. I mean a body below the button. So and then call this function for two times. I mean item one and item one, we are calling this function for two times and we have to show the image, the whole card. But two times. Yeah, now we can see there are two chords. And if I paste it for another two times, we can see on the two, I'm totally for coarser disappeared with same image content. It is good. No, let me show this in mobile view. In mobile view it is not that much of the old content is Mishra. So let me add some media queries. It is good in response, you do this. The only thing we have which changes the products section or the item section. The item section we have given the veto 45% so that by changing the width, we can get a good responsive design. So at direct meta screen only, okay, sorry, it is not screened only. Let me change that. These media only screen media when the screen and minimum width. Minimum we tough. Thrifty pixel. Iyengar. Maximum with tough for 3D pixel. So whenever the electronic device having the width tough, digital pixels and 40 pixel, we're copying this item. And pasting here. Here the width equal to 96% so that the only one chord is occupying whenever we are having the electronic device of that minimum width and size. Now we can see there is only one cut, but the image is Schwinger the left. Me, I read this center by using justify contents center. So the whole content will be open middle thirds looking too good. The responsiveness also is fine. For iPad. We cannot see the content. Let me add some media queries for the iPad, just copying the whole content and changing the minimum width and the maximum width. We have a minimum of 4481 and an eigenvector alpha 1025. So whenever the electronic devices having the width is going to occupy the styles, it is fine now. So the responsiveness is also, or we're not getting anywhere else.