 How is everyone? It's good to see you. How many of you are waiting for us? You're there for one press, one cup, and none of you are waiting for us. Alright, so Brits are here. So, then I went to sharing just some few tips on front end development. My name is Fenny, it's pronounced as Fenny. My name is Fenny and I'm a front end developer and also have been a one press user since 2019 and I'm also an open source contributor. For fun, I travel and I'm also passionate about conservation and also a writer. I have a personal blog running on white press as well as on hashbook. So, web developers, 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? 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, development of other software that we can use in the website where front end is with designing and the arrangement of different resources. Thank you so much. So, front end development is basically 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? This is 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 is basically what the user sees and then back end is what is happening whether it is but the front end is just when you go to any website what you're seeing that is the front end which is basically the layout as you say. Interface, the design and the dynamic behaviors and interactions. Thank you. So, my first tip for web development is that you just keep it simple. There is that phrase keep it simple, stupid. So, you want to make sure that your website is very easy for someone to 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 looking 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 what 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. You can use the FCS grid and flexbox to align as an example of grid to align your items on 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 services 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, 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 websites testing responsiveness from the beginning using some of these components. For example, React has React Bootstrap and also VUJS and also Angular for that. So, performance. 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 request by optimizing your images. When you log into some websites, you see many some images are not loading. You can use Lazy Lord if you implemented something like that to optimize the images and also you can check for performances on your website. Use that name. 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 0 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. One time somebody asked for a review of a website that you're building and I had to go through that website from page A 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. What does that mean? You're building it for someone to use it. It might work on your computer but then somewhere you want 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 skill 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 front end development skills. So make sure that you connect with people around you who are doing the same things. If you are already a front end developer and you're facing challenges with something, make sure you connect with your front end developers. For example, we have one press here, there are people who are good at one front end development here. So connect with them and get feedback from them. Show them what you have already so that they can give you feedback. Make it again more accessible, make it host it online. Some of us mentioned in 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 around you. 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 like a practical session for this. So anyone with any more tips? If you have any tips or any other questions you can ask the floor is yours. Thank you very much. My question is to take a moment to say you are going to end. Now I am asking one tip from you, then the 8-table and I am going to read it. Do I call you when I come and help you in the JavaScript and I see this and I am going to do that. Do I know front-end because I am not going to send you. I understand but I want to ask you also if you are involved in the 8-table like putting a bit of the behind-the-scenes 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 are working as a team there is someone who is going to work on the back-end but then if you are full staff that means you are going to handle all the HTML on CSS and then 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 are full staff that would mean you will now use another JavaScript library called Node.js