1 00:00:00,510 --> 00:00:01,110 ‫Hey, there. 2 00:00:01,260 --> 00:00:02,910 ‫Welcome back on the site. 3 00:00:03,360 --> 00:00:05,700 ‫Now let us start our journey with a new project. 4 00:00:06,140 --> 00:00:07,590 ‫Now this project is important. 5 00:00:08,130 --> 00:00:11,790 ‫As usual, I'm going to analyze this important word, but they are. 6 00:00:11,790 --> 00:00:17,100 ‫Definitely this is important because we are going to now revise everything that we have learned in now 7 00:00:17,280 --> 00:00:19,740 ‫and implement them on a single project. 8 00:00:20,100 --> 00:00:26,700 ‫That means we'll be covering about animations, transition, transform, maybe background hamburger, 9 00:00:26,700 --> 00:00:34,200 ‫manual assuages seasons, libraries, channel responsiveness, flex bogs, great display position, 10 00:00:34,560 --> 00:00:36,900 ‫every single concept that we have written now. 11 00:00:37,380 --> 00:00:43,050 ‫Not only this, we will also understand about a few new concepts like maybe understand about scrolling 12 00:00:43,320 --> 00:00:46,770 ‫on, maybe understand something related to before and after. 13 00:00:46,980 --> 00:00:50,700 ‫So we are going to work with multiple things throughout the whole project. 14 00:00:51,480 --> 00:00:57,090 ‫Now, if you observe this whole project looks like something related to education that is edtech. 15 00:00:57,660 --> 00:01:02,640 ‫So we are going to build a landing page or I should say, a complete website related to high school. 16 00:01:02,820 --> 00:01:09,180 ‫I have given up project name as high school and one more important thing throughout this whole project. 17 00:01:09,210 --> 00:01:15,000 ‫You will also understand about freelancing, how I started freelancing, how I build my projects as 18 00:01:15,000 --> 00:01:15,630 ‫a beginner. 19 00:01:15,870 --> 00:01:17,190 ‫So this will help you a lot. 20 00:01:17,220 --> 00:01:21,170 ‫You will also understand about folder structure and a few other concept. 21 00:01:21,870 --> 00:01:27,030 ‫So these information will help you to understand some basic concepts of freelancing as a beginner in 22 00:01:27,030 --> 00:01:28,920 ‫terms of HDMI conciousness. 23 00:01:29,970 --> 00:01:35,550 ‫So the first thing is, if you observe this whole Web application, you will see I have a quick menu 24 00:01:35,550 --> 00:01:41,490 ‫with some how what effect, then I have two buttons on my logo, some information on this side, as 25 00:01:41,490 --> 00:01:43,050 ‫well as images on this side. 26 00:01:43,770 --> 00:01:45,030 ‫You will see these objects. 27 00:01:45,030 --> 00:01:50,130 ‫I'm moving because of infinite animation, then how you will see some background. 28 00:01:50,880 --> 00:01:56,520 ‫This is because of before then you will also see some other objects floating here and there. 29 00:01:56,910 --> 00:02:00,420 ‫And if I refresh, you will see this button is moving. 30 00:02:01,740 --> 00:02:03,600 ‫So this is related to animation. 31 00:02:03,720 --> 00:02:08,280 ‫Also, you will see these these are moving from side. 32 00:02:08,730 --> 00:02:14,550 ‫So these are part of some animation, some related to transform something like a good transition. 33 00:02:14,910 --> 00:02:22,150 ‫If I scroll down, I bet you will see the section that contains several information, have some power 34 00:02:22,170 --> 00:02:23,430 ‫effect and few other things. 35 00:02:23,970 --> 00:02:30,780 ‫So this section guess is designed by CIUSSS Flexbox, and maybe this section is designed with the help 36 00:02:30,780 --> 00:02:32,100 ‫of CSIS, correct? 37 00:02:32,580 --> 00:02:39,060 ‫And if I scroll down a bit, you will see and get knowledge about this with some background and again, 38 00:02:39,060 --> 00:02:40,310 ‫see Flexbox. 39 00:02:41,080 --> 00:02:45,960 ‫Now, remember, this whole website is responsive, so by right click click on Inspect. 40 00:02:46,440 --> 00:02:50,970 ‫And if I go here, you will see a complete website design responsive. 41 00:02:50,970 --> 00:02:54,450 ‫And at this point of time, my menu is fixed. 42 00:02:55,350 --> 00:03:00,270 ‫I also had a little bit of JavaScript, so I can have this type of menu. 43 00:03:00,900 --> 00:03:07,620 ‫OK, now this is some additional content that will help you to understand how to do this as a beginner. 44 00:03:08,810 --> 00:03:11,180 ‫Cool, this looks fine, I hope you got the idea. 45 00:03:11,570 --> 00:03:17,210 ‫Now the aim of this project is to just realize we will try to be faster than our usual speed. 46 00:03:17,690 --> 00:03:19,320 ‫OK, I hope you got the idea. 47 00:03:19,340 --> 00:03:20,840 ‫You can also check out this demo. 48 00:03:21,200 --> 00:03:23,990 ‫This will help you to understand what we are going to be. 49 00:03:24,200 --> 00:03:26,450 ‫It's an educational website landing page. 50 00:03:27,050 --> 00:03:28,880 ‫OK, that's done for the project. 51 00:03:29,300 --> 00:03:32,240 ‫But I was saying something related to freelancing, right? 52 00:03:32,740 --> 00:03:33,900 ‫So, yep. 53 00:03:34,160 --> 00:03:40,580 ‫Let me explain things whenever I get a project I'm talking about as a big not now, as a beginner right 54 00:03:40,580 --> 00:03:46,360 ‫now, what I used to get a project that's starting off any type of freelancing project for HDMI as he 55 00:03:47,000 --> 00:03:48,740 ‫is not the direct website. 56 00:03:49,220 --> 00:03:54,690 ‫You folks create a wire frame or I should say we draw something and get approval from a client. 57 00:03:54,750 --> 00:03:58,940 ‫OK, this website looks good or not if this structure looks good or not. 58 00:03:59,300 --> 00:04:02,780 ‫Or you can utilize Figma, you can design your website on. 59 00:04:02,780 --> 00:04:09,530 ‫Figma might take you one hour to work and you create your best design about how your website should 60 00:04:09,530 --> 00:04:09,860 ‫look. 61 00:04:10,400 --> 00:04:14,900 ‫Once that was done, you create some elements, maybe this image, or maybe this image. 62 00:04:15,320 --> 00:04:20,390 ‫All of these images are designed by yourself when you are working as a freelancer. 63 00:04:20,840 --> 00:04:27,500 ‫So if you have some designer, you can do that or you can utilize easy tools like Canva or maybe Grillo. 64 00:04:27,770 --> 00:04:30,470 ‫If you have no knowledge about Photoshop, you can utilize them. 65 00:04:30,950 --> 00:04:34,070 ‫So as a beginner, I used to utilize this scan module. 66 00:04:34,820 --> 00:04:39,620 ‫As a beginner, I strongly recommend to utilize this tool even for self projects. 67 00:04:40,040 --> 00:04:45,530 ‫If you have knowledge about Photoshop or you can utilize the school as Photoshop, yeah, it's a great 68 00:04:45,530 --> 00:04:50,360 ‫tool and can help you to design or do all the tasks related to Photoshop. 69 00:04:51,020 --> 00:04:57,530 ‫If you observe, I have designed everything on Canva for this whole project, so maybe you are working 70 00:04:57,530 --> 00:04:58,760 ‫on yourself project. 71 00:04:58,760 --> 00:05:02,000 ‫Maybe you are working on some school projects on college project. 72 00:05:02,300 --> 00:05:03,710 ‫You can do that yourself. 73 00:05:04,160 --> 00:05:05,090 ‫And that's the image. 74 00:05:05,090 --> 00:05:06,290 ‫I'm showing you everything. 75 00:05:06,590 --> 00:05:10,910 ‫If I just jump onto this whole subject thing, I have designed every single thing. 76 00:05:12,010 --> 00:05:17,940 ‫Maybe there's a banner you can see every single element is designed on Canada, and I'm not using Canada 77 00:05:17,950 --> 00:05:20,320 ‫Pro cannot give a lot of other feature. 78 00:05:20,320 --> 00:05:27,520 ‫I'm just using the basic camera version and I'm just demonstrating this so you can create your own ideas, 79 00:05:27,520 --> 00:05:32,260 ‫your own images for free on a software as a beginner. 80 00:05:32,560 --> 00:05:33,630 ‫You don't have to pay. 81 00:05:33,640 --> 00:05:38,470 ‫You can either use this Columbia or you can use these tools like an marcano. 82 00:05:39,220 --> 00:05:45,970 ‫If I jump on to another image, every single element is designed by me on this whole thing, this whole 83 00:05:45,970 --> 00:05:52,900 ‫app, and it's for free, and I strongly recommend to build at least one project by yourself where you 84 00:05:52,900 --> 00:05:55,390 ‫have your own image, your own imagination. 85 00:05:55,780 --> 00:06:02,260 ‫So if you see every image here is designed by myself, if you see background colours or any type of 86 00:06:02,260 --> 00:06:06,400 ‫everything is a part of imagination, so you need to spend some time. 87 00:06:06,400 --> 00:06:07,240 ‫It's a good habit. 88 00:06:07,240 --> 00:06:12,610 ‫As a friend, then developer, as a designer, as someone who is currently interested to jump on to 89 00:06:12,610 --> 00:06:16,120 ‫you or you as a PR mcnab, this habit will help you. 90 00:06:16,720 --> 00:06:18,730 ‫Now, one other thing one other tool. 91 00:06:18,850 --> 00:06:20,860 ‫I hope you remember this about rebel. 92 00:06:24,690 --> 00:06:30,840 ‫Now, this tool is pretty important to get design ideas, so maybe you are creating a tech startup, 93 00:06:30,840 --> 00:06:34,500 ‫maybe you are creating something related to YouTube or anything else. 94 00:06:34,920 --> 00:06:37,680 ‫You can search on dribble and get some idea. 95 00:06:37,710 --> 00:06:41,140 ‫Maybe I'm working on form so I can just ride from here. 96 00:06:42,150 --> 00:06:48,450 ‫Search and you will see different ideas, what type of form you can create or what type of color combination 97 00:06:48,450 --> 00:06:49,650 ‫that will work for you. 98 00:06:49,680 --> 00:06:55,650 ‫So you get the idea if you observe this, OK, you can utilize this light background and then there 99 00:06:55,650 --> 00:06:57,240 ‫will be a darker border. 100 00:06:57,540 --> 00:06:59,160 ‫I can use something like this on. 101 00:06:59,160 --> 00:07:01,800 ‫Maybe if I scroll up, I will have different ideas. 102 00:07:02,400 --> 00:07:03,300 ‫This looks good. 103 00:07:03,690 --> 00:07:06,390 ‫Dark blue, as well as black as well as white. 104 00:07:07,080 --> 00:07:13,940 ‫So you get ideas of different types of forms, different types of phones, as well as design with this. 105 00:07:14,130 --> 00:07:21,090 ‫But OK, that said, I hope you got the idea how to design your own content as a big no. 106 00:07:22,470 --> 00:07:29,370 ‫Now, this whole section or section of the designing thing was not required, but I think a big section 107 00:07:29,370 --> 00:07:35,550 ‫of you are going to work as a freelancer on its end done or maybe you are going to create your own projects. 108 00:07:35,550 --> 00:07:37,470 ‫You need this type of information. 109 00:07:38,070 --> 00:07:41,610 ‫And I hope this lecture give you some, some basic idea. 110 00:07:42,220 --> 00:07:49,170 ‫OK, now as you grow as a freelancer, as Einstein or as a developer in real life, you hired, maybe 111 00:07:49,170 --> 00:07:54,480 ‫you have your own designer, maybe in your team, you have designers, so you don't do this yourself. 112 00:07:54,480 --> 00:08:00,330 ‫Every time you will use professional tools as you move towards industry, maybe you are working as a 113 00:08:00,330 --> 00:08:03,810 ‫freelancer now you have some experience of basic project. 114 00:08:04,050 --> 00:08:07,240 ‫You are going to work with Photoshop because you need profiles. 115 00:08:07,590 --> 00:08:12,120 ‫You are going to work with Figma because you need beams to work together. 116 00:08:12,240 --> 00:08:16,320 ‫So Canva is good for a beginner, but then you move towards professionals. 117 00:08:17,580 --> 00:08:17,940 ‫OK. 118 00:08:18,030 --> 00:08:19,260 ‫I hope you got the idea. 119 00:08:19,950 --> 00:08:22,570 ‫Now let me jump back from the next lecture. 120 00:08:22,590 --> 00:08:27,140 ‫Let us start his journey with this new project and understand everything. 121 00:08:27,150 --> 00:08:31,890 ‫Or I should say the why is everything implement and build this website quickly? 122 00:08:32,580 --> 00:08:33,530 ‫Thank you for joining. 123 00:08:33,540 --> 00:08:39,840 ‫I hope you got the basic idea about how designing work for art freelancing project and I see you guys 124 00:08:39,840 --> 00:08:40,560 ‫in the next one.