 How is everyone? Good to see you. All right. How many of you are with the go-karts? You are there for what difference, what come, and none of you are with the go-karts. Right. So, it's so great to have you here. So, today I'm going to be sharing just some of your tips on front-end development. My name is Fenny, I'm a front-end developer and also have been a WordPress user since 2019. And I'm also an open source contributor. And for fun, I travel and I'm also passionate about conservation. And also a writer. I have a personal blog running on WordPress as well as on Hashtag. So, WordPress, any idea what front-end development is? Let's just have it like, let's make it interactive. Any idea what front-end development is? Yes, thank you. Thank you. There is back-end development and front-end development. Back-end development is mostly recording, like the making of themes and the making of the development of themes, the development of other software that we can use in the website. Front-end is mostly with designing and then arrangement of different resources. Round of applause. Thank you so much. So, front-end development is basically actually described both front-end and back-end. So, when you take a look at this picture, what comes in your mind? You think somebody is actually on air in a plane. That's what you see when this person shares this picture. But then when they share with you what is actually happening, this is what the actual guy is doing. So, this is how best I can explain front-end development in web development, basically what the user sees. And then back-end is what is happening, whether it is FBI's functionalities, the front-end is just when you go to any website, what you're seeing, that's the front-end, which is basically the layout, as you say, interface, the design and the dynamic behaviors and interactions. Thank you. So, now, my first tip for web development is that you just keep it simple. There is that phrase, they say, kiss, keep it simple, stupid. So, you want to make sure that your website is very easy for someone, let someone access it. You want to make sure that it is loading fast, you want to make sure that they are able to navigate well. You want to make sure that everything is visually appealing to the users, the color choices, the font choices. So, you just have to make it simple. You can choose maybe one or two fonts. Another tip is make it mobile-friendly. Nowadays, many people access websites using fonts. So, there is what they call mobile-fast movement. That is like people are coming fast for the mobile user, and then the desktop comes after. So, you need to make sure that your website is accessible on all mobile fonts. So, you can use that by testing on your browser as you're developing the result you call DevTools by Chrome. So, you can check the responsiveness of your website from your browser before you actually put it out for people to see. So, you can use CSS Grid and Flexbox to align as an example of Grid, to align your items in the website. For those taking pictures, I would share with you the slides if you need them. Because I have some references about Grid and Flexbox in the slide. So, you take your time if you're looking to go into web development. These are one of the most important things, especially in CSS, for layouts and Grid to just kind of align your websites in a visually appealing way. So, my next tip is using JavaScript libraries. How many of you are JavaScript developers? We have another one, yes. So, if you've written JavaScript for some time, you notice that there are some frameworks like React, Angular, they come with readymade components for you to just implement some of these things we have talked about. Like the responsiveness, you can actually start developing your website, testing responsiveness from the beginning using some of these components. For example, React has React Bookstrap, and there's also VUJS, and also Angular for that. So, you want to make sure that your website is performing really great in terms of speed, in terms of navigation by the user, in terms of everything that is happening. So, by doing that, you can minimize HTTP requests by optimizing your images. When you log into some websites, you see maybe some images are not loading. You can use Lezyload if you implemented something like that to optimize the images. And also, you can check for performances on your website. Use that name, pay, speed.web.dev, you put the URL to your website there, and then it will give you a display of how your website is performing, whether something is wrong with it. So, using this tool will help you to kind of work on your site and make changes that will just make it better in terms of performance. Because, especially with loading time, loading speed, people don't want to go on websites which is taking like minutes to load. So, your website should take like how many seconds, David? The best speed for websites, yes. Yes, actually, zero seconds. A fast website should not be 0.2 seconds. More something like that. But when you use that tool, it will actually show you what is causing your website to be slow, and what is causing your website to whatever, and you'll be able to fix those issues. And then accessibility. Accessibility, make sure that you're developing it for the user. Now, one time, somebody asked for a review of a website with a building, and I had to go through that website from that to the last bit of it, and I wrote a honest feedback about each of that website. But then there were issues with the website. And I asked him, I said, every site is not working. And his response was, it works on my computer. Now, when you're building a website, you're not building it for yourself. Put this over here. You're building it for someone to use it. It might work on your computer, but then somewhere might be wanting to access it, and then it's not working on their devices. So make sure that accessibility is at a fingertip when you're trying to implement your front-end skills, and make sure that everything is working, and then it's very good to get feedback. Because it is from feedback, that is how you're going to improve either on your website or on your development skills. So make sure that you connect with people around you who are doing the same things. If you want to be, if you are already a developer and you're facing challenges with something, make sure you connect with developers. For example, we have one press here. There are people who are good at one front-end job met here. So connect with them and get feedback from them, show them what you have already, so that they can give you feedback. And then to make it again more accessible, make it host it online. Someone was mentioning some hosting platforms. We have Bluehost, which is one of the sponsors here. There was also Wendaki. So you can host it online so that it reaches a wider range of people. So another important thing is testing. Testing, testing, testing. Before you put your work up there, make sure that you have tested it. And it is doing exactly what you intended it to do. Don't just put it out there before testing it because issues are going to come and it's going to take you as a shock. So I really recommend before putting up your site or before hosting, you have to test. There are tools like browser stack and cross browser testing to automate some of this testing process. And unfortunately, we don't have a practical session for this. So anyone with any more tips? If you have any tips or any other questions, you can ask. The flow is yours. Thank you very much. My question is to take off. So basically, you are front end. Now I'm asking you, one tip, okay, for me out, then back to your moment. And I'm done with it. Do I bring my, okay, do I call you when I want to come and help me with the JavaScript and the CSS? Going to do that. Do I know front end or the environment? Because I'm not going to assign you. Okay, I understand right. Do you also get yourself involved in the HTML? Once you, front end is basically the user layout. So I think the perspective at which I was presenting was that perspective of a front-end developer. But then if you're working as a team, there is someone who is going to work on the back end. But then if you're full stack, that means you're going to handle all the HTML, all the CSS. And then you come back to the back end, which is maybe the JavaScript. But you can also use JavaScript in front end. Like I mentioned, there are these libraries that can help you with really amazing user interfaces. But then if you're full stack, that would mean you now use another JavaScript library called Node.js to implement your back end.