1
00:00:09,470 --> 00:00:15,230
Hey, everyone, I'm super excited to be starting this section because now we are going to work in our

2
00:00:15,230 --> 00:00:16,700
first project.

3
00:00:16,910 --> 00:00:22,730
So far we've been interacting with the course material, which is very good for learning.

4
00:00:22,730 --> 00:00:29,680
But now we will have a chance to apply some of the things we've learned in a real website or at least

5
00:00:29,690 --> 00:00:31,250
a simulated one.

6
00:00:31,730 --> 00:00:37,850
So this is the website we are going to be working and I'm going to show you what we need to do here.

7
00:00:37,880 --> 00:00:40,070
So the first thing is the mobile menu.

8
00:00:40,250 --> 00:00:42,290
So we have this menu here.

9
00:00:42,440 --> 00:00:50,120
And if we go to the inspector to make the screen a bit smaller, you will see that when we reach this

10
00:00:50,120 --> 00:00:52,250
point, we don't have the menu anymore.

11
00:00:52,250 --> 00:00:54,250
We just have this hamburger icon.

12
00:00:54,470 --> 00:01:01,360
So when we click it, we need to be able to see this menu and we also need to be able to close it.

13
00:01:01,520 --> 00:01:03,810
So that's the first thing we are going to do.

14
00:01:04,250 --> 00:01:08,960
So going down, we have this element which is very common in Web design.

15
00:01:08,990 --> 00:01:10,730
This is called an accordion.

16
00:01:11,120 --> 00:01:14,870
So maybe we don't want to show all the information at once.

17
00:01:15,050 --> 00:01:16,970
So we are just showing mission.

18
00:01:17,240 --> 00:01:24,800
And if we click on the other option, so vision, we need to show that this has been selected by using

19
00:01:24,800 --> 00:01:29,450
a different background and we should also change the content down here.

20
00:01:29,460 --> 00:01:37,280
So if we click values, you can see that we are changing the content of this element going down.

21
00:01:37,310 --> 00:01:40,280
We also have this services slider.

22
00:01:40,280 --> 00:01:45,560
So here we have a service and a short description of the service.

23
00:01:45,800 --> 00:01:50,600
If we click this arrow, we are just going to the next one.

24
00:01:50,810 --> 00:01:57,950
Next one when we reach the last one, which is this, if we click here again, it's just going back

25
00:01:57,950 --> 00:01:58,820
to the first one.

26
00:01:59,030 --> 00:02:01,580
We can also do the same thing, going backwards.

27
00:02:02,210 --> 00:02:04,730
It's just going to be looping forever.

28
00:02:04,740 --> 00:02:08,620
So this is what we need to do in the services section.

29
00:02:09,110 --> 00:02:13,210
Then going down here, we have this contact form.

30
00:02:13,700 --> 00:02:20,930
I haven't talked about this during the course and actually we are not going to use JavaScript for this.

31
00:02:21,230 --> 00:02:27,770
But I wanted to include this in this project because this is something that many students asked me how

32
00:02:27,770 --> 00:02:28,490
to do this.

33
00:02:28,820 --> 00:02:33,890
So I just wanted to show you a very simple way of implementing this.

34
00:02:34,070 --> 00:02:39,680
You probably want to implement this on your own website or for a customer.

35
00:02:39,860 --> 00:02:42,970
So I thought it would be interesting to include it here.

36
00:02:43,850 --> 00:02:48,230
So going down this year in this message is now dynamic.

37
00:02:48,230 --> 00:02:55,400
But if you go to the original project, the one I'm including in this lesson, so you download if you

38
00:02:55,400 --> 00:03:00,200
go to the original one and you go down, you can see that this was actually outdated.

39
00:03:00,380 --> 00:03:04,990
We had to 2018 because we just had a static year.

40
00:03:05,330 --> 00:03:10,660
So the last thing we are going to do in the project is just making the user dynamic.

41
00:03:10,820 --> 00:03:16,540
So no matter what year we are at, this is always going to be up to date.

42
00:03:16,910 --> 00:03:19,970
So that's all we need to do in our project.

43
00:03:19,970 --> 00:03:26,120
And before moving on, I'm just going to give you a few tips to make your life easier.

44
00:03:26,130 --> 00:03:34,070
So for this first job that we have to do with this menu, if you go inside here, you see that there's

45
00:03:34,070 --> 00:03:38,990
a hidden element with the idea of sliding had their menu outer.

46
00:03:39,260 --> 00:03:46,550
And as you can see, it has a width of three hundred and twenty and it has the right property said to

47
00:03:46,550 --> 00:03:48,440
minus three hundred and twenty.

48
00:03:48,590 --> 00:03:52,610
So what you need to do here is just setting it to zero.

49
00:03:52,610 --> 00:03:59,630
When you click that button and when you click the close button, you just need to go back to minus three

50
00:03:59,630 --> 00:04:01,180
hundred and twenty pixels.

51
00:04:01,490 --> 00:04:07,640
So this is how this element works for the about us section if you go to the code.

52
00:04:08,620 --> 00:04:17,080
You will see that I've left an object here and two variables, one for the unselected color and another

53
00:04:17,080 --> 00:04:19,250
one for the selected color.

54
00:04:19,540 --> 00:04:22,060
So this is all you need to solve that.

55
00:04:22,310 --> 00:04:29,830
So when you click anything here, so let's say I click this one, you just need to make it selected.

56
00:04:30,040 --> 00:04:35,320
And the way you are going to do this is using these selected color for the background.

57
00:04:35,680 --> 00:04:41,350
And here's the content that you need to use for each of those options.

58
00:04:42,220 --> 00:04:48,910
So the next one is going to be similar, but instead of clicking options, we just have a slider.

59
00:04:48,910 --> 00:04:57,340
So here you just need to go to the next one and here to the previous one and going to the code, you

60
00:04:57,340 --> 00:05:00,500
will see that in this case, I just left an array.

61
00:05:00,550 --> 00:05:05,710
So here we are, starting from the first element, which has an index of zero.

62
00:05:05,740 --> 00:05:07,660
So you just have to control it.

63
00:05:07,900 --> 00:05:15,670
And every time we click those arrows, you just have to update the index and then just get the information

64
00:05:15,670 --> 00:05:16,780
from these objects.

65
00:05:17,140 --> 00:05:19,050
So here's the title for the service.

66
00:05:19,180 --> 00:05:20,290
Here's the text.

67
00:05:20,650 --> 00:05:25,120
And you just have to send to that age HTML element.

68
00:05:26,950 --> 00:05:31,070
So now this one, like I said, we are not going to use JavaScript.

69
00:05:31,090 --> 00:05:37,450
This is a service I'm going to show you again, if you want to try to do it by yourself, you can just

70
00:05:37,450 --> 00:05:41,770
go to post mail in votes, dot com.

71
00:05:42,100 --> 00:05:44,890
This is the service that we are going to use.

72
00:05:45,160 --> 00:05:50,050
So if you want to give it a try before seeing the solution, just go ahead.

73
00:05:50,290 --> 00:05:52,830
It's pretty much self-explanatory.

74
00:05:53,500 --> 00:05:56,170
And here this is very simple.

75
00:05:56,170 --> 00:05:58,870
If you go here, let's go to the inspector.

76
00:05:58,880 --> 00:06:02,200
You will see that there's a span with an idea of current here.

77
00:06:02,410 --> 00:06:10,770
All you need to do is using a date object to show the current ear inside this element.

78
00:06:11,350 --> 00:06:12,300
So that's it.

79
00:06:12,520 --> 00:06:13,890
We have a lot of work to do.

80
00:06:13,900 --> 00:06:15,460
This is going to be a lot of fun.

81
00:06:15,670 --> 00:06:21,010
So in the next video, I'm going to be back here to start working on this.

82
00:06:21,430 --> 00:06:23,020
So I'll see you in the next video.