 When I'm not making games and making websites and one thing that it's always floating around the web dev community is New browsers and when they say a new browser they usually mean just a wrapper with a webkit inside and you know It's not really a new browser. It's just a new set of settings You can change and how tabs are distributed But what I wanted to explore is how it would be like to create a new browser from scratch So I'm gonna do a little experiment and see what we can create with cutoff So we have an empty product here. Let's start with user interface, which is our favorite node and Now Let's start with a script, which is going to be as always the main script for this program and Now one of the nodes we want to use for getting signals from a server or sending, you know requests things like that to get a website is denote HTTP request So this is going to handle all the communication between our go-out program and the Website server now that we have our HTTP request I'm gonna add a node which is going to Display some information in the screen And for this I could use just a rich text label Since at the end of the day all websites are just a text document that your browser reads and interprets in a certain way So this is going to be our Okay, and yeah, this should be enough to start Let's go ahead now and start with the code. So we want the program to first Send a signal to a server telling them. I want to see this website To do that we use the HTTP request node HTTP request node and the request function Here if you press control and click on any of this you get the documentation and Here in the request You have all the information you need for it I don't want to go too deep into how a website works, but if you're interested There's plenty of resources. I will link some in the description Let's do for an example the go-out website. So HTTPS equals go.engine.org Okay, so we're gonna ask okay, I want to see the go-out website now to know when this request is ready We can use the signal from the HTTP request the signal which is request completed So this is the signal. We're gonna use to know the page is loaded and we can add that information to our program Let's link it to the control node and it will give us these four arguments the one that we're interested right now is the body Which is the one that you usually see on your browser You know the other ones you need to take them into account especially for instance Most of you might know this one But if you get a free spawns code of 404 means that the page is not found If you get the 501 is maybe like you don't have access to the website So we're gonna ignore this by now Well, you can build different responses like you know the jumping dinosaur in Chrome or funny stuff like that You can handle all that depending on what Response you get from this request for now, which is gonna get the body of the website and I'm going to add it to the rich label there as a text. So let's see. I select the rich text label and I set the text equals to the body of these requests Okay, let's try it out since this function is added on the ready It's gonna run whenever you run the program. So if I test it out, let's see. I Never save the scene. Okay main I'm getting a never the error. It means that instead of a pulled by array. I need to set a string to this So to do that I can transform this Response that we got from the server from the pulled by array to string by doing get string from UTF 8 Which is how the text is being encoded and Right now it should work as expected Yeah, and we see it here. So technically we already have a web browser Kind of we're getting the information from the website. We can see that's text and you know We have all the HTML and the content of the website So now the next step would be to add a browse bar so we can try to open different websites And then go in element by element and adding style to it So for instance this h2 is a title We would want to select all this part and display it as a bigger thing instead of just to text there And that's what the web browsers do they get all this text and they display you a website with style Let's add nav bar and start navigating some other websites We go back to our view here add Container box container horizontal box container is going to host the input line edit This is going to be the website. We are in and let's add a button Base button button is going to be the go Oh Okay, let's add some space for it by adding margin at the top So that way we don't miss any of the content Let's say like 42 now. Let's make this full width top wide We know that the size of this we wanted it to be 42 because that's the room we made Okay, 41. It's okay. It should be fine. And since the box container is bigger than what the elements have Let's add some special properties to the line edit Here in size flag horizontal Set it to expand this will occupy all the space it cans inside the container. So we have now the browser bar So this this line edit will have the default which is the page that we are loading right now It's DTPS go.engine.org And Let's see how it looks Okay, looks fine. Okay, we can scroll the website. We have here it is. Okay Now let's make it work First I'm going to connect the button to the control So this is when you press the go. This will have to trigger as Function like this one. So HTTP request request and We're gonna get the current text that we have on the line edit here. So Our is another container line edit is this node that text So we get the text we have there. So when we press it It will trigger this function and it will update the body. Let's try it out Let's open a Wikipedia.org Let's see we keep here. Okay, let's go Nice, we get the Wikipedia page It looks terrible It's impossible to read like this But have we have the browser bar and the text here so on the next episode I've been going to get the relevant information like for instance getting the title of the page and things like that and add it to the title of the window and Maybe even I will try to make the links work because if we go back to go to the engine We want to go I don't know to a different page. Let's see if we have here a link Let's look for link here. We have a link here Here href equals to another browser another like a path I want to be able to click on links and open them in the web browser and Yeah, so you can see making a browser from scratch is a huge task But as we did anything else you can do it with Godot. You just need to go step by step Thank you my new Patreons Tyler and Peyton. Thanks to you that all this is possible So thank you so so so much for being there and if you want to know anything in particular Just let me know and I will make sure to answer you Okay, bye