Day 2 started well, I didn’t know where to start so I just Googled “Web App Development for Dummies” and found these gems:
https://www.bitdegree.org/tutorials/how-to-code-for-beginners/
https://www.quora.com/What-is-the-best-web-application-language
https://www.budibase.com/blog/web-application-development/
After reviewing these I learned some important things:
- There is a process for development a web app – a series of stages to follow to make sure you get it done right
- Solution First, Coding Language Second – The language you need will depend on what you’re trying to build.
Here’s the video where I walk you through the best parts of those articles, help you make sense of them and then I’ll show you the web app I’m going to build:
Oh, and here’s my high tech web app I’m going to develop:
My ugly ducking will become a beautiful swan, you’ll see 🙂
Video Transcript
Alright guys, welcome back to day two of the Learn Coding from Scratch Challenge #codingfromscratchchallenge.
And remember, this is all about learning coding from scratch with no money spent and zero experience. Everything has to be free.
If you didn’t read it yet go to freethewageslave.com/blog and you’ll find this post and learn coding from scratch. And it tells you the rules. There’s a video I made that walks you through this blog post. And it will talk to you about why I’m doing it. But what you’ll realise is every day I post the exact resources that I use to learn coding.
So I’ve already got day one in the bag, that post is there.
This is day two. So here’s what I read today. So I read this really nice post by BitDegree called “How To Code For Beginners” and when I read through this, basically the part where this really started to make sense to me was here which is the step by step guide to Coding for Dummies, I’m definitely a dummy when it comes to coding.
So the first thing was working out why you want to learn code. We know that my goal is to build a web app, to be able to build web apps. So I can just quickly have an idea, create something cool, and get it out into the world.
So this has been really interesting for me to choose the right languages, different types of programming require different skills and they basically went through a list of different coding languages, it was a little bit confusing. It looks like there’s a lot of different types.
So Java, they’re saying is the king, and Python is the queen. So these are two that kind of stood out on my radar as to that perhaps I should start to look at, then we looked at Ruby. And this seems to be about a framework for web development. And I don’t really know what that means. But the part that I did like is it works for front end back end development, which what I understand is the back end is like the database where all of the data is stored. And then the front end is how it looks or the user interface to the part that you know we use and then there was all these other languages. And it got a little bit confusing. So I was left really confused about what language should I learn.
So the other thing that it told me is I need to download a code editor. So that’s a place where you actually write and edit your code. So that was really the two things that made the most sense to me. And I kind of left this blog post at that point. So the next place I went was to Google, which is “What is the best language if I want to build a web application?” and it took me to Quora.
Now, this post is a little bit old. I think this is from 2015. But it had this really nice language. So for front end web development, we’ve got Java and back end, we’ve got JavaScript, and then mobile development JavaScript. So that’s definitely on my radar JavaScript, because it’s used across all of these three things that I think will be useful, but really kind of looked at this and I read through this post, and they’re saying, you know, JavaScript in 2019. In the survey, 70% of developers said, Thank you use JavaScript in the last year. Along with HTML and CSS. It’s essential for front end web development. So then the last thing that I read was this, which was really nice from BudiBase.
And what I loved about this post is this guy said in 2010, he had an idea for a web application. So he could organize his shopping list and share it with his family. And he didn’t know how to code. He kind of talked about what is a web application. And this was quite interesting. So he’s telling us here that a web app is an interactive computer program built with web technologies, HTML, CSS, and JavaScript. So this comes up again, and these, you know, needed for a website. So these are on my radar now.
So the program stores database files, and manipulates data. And this crud is it creates data and reads data, updates data and deletes data. So it’s a web technology that stores data and manipulates it used by a team or a single user to form a topic. Ask the internet. So then he gave some examples of like Google Docs is an application, that’s a web application. And this is how it looks, this is what they would call the front end or what you the user would use, you would use this a lot of use. It stores data. So there’s a front end that’s online that you can access. And all of your files are there. And you can create, read, update, or delete the document.
So that kind of made a lot of sense to me. So I really, really liked that. And he gave some other examples. But this is what I really, really liked the web application development process. So I don’t want to learn stuff, I want to be taking action and executing. So there’s eight steps for creating a web application to find the problem you’re solving. plan the workflow. So after you figure out what you’re trying to solve, map out the workflow of how it will work, what needs to happen within your web application for it to solve the problem. Then you wireframe or prototype the web application. So you wireframe is simply a tool for communicating your solution to the target user.
So let’s just take a look. And we’ll go for images. Nice and visual. Let’s see what they mean by a prototype. So I think it’s something like this where in this case, it’s a mobile app where you kind of draw out what it will look like on every screen. So it looks like you’re kind of mapping out the user experience, you know, they’re gonna go from this screen to this screen to another screen.
So you’re kind of visualizing the solution before you get into building it. I think that makes sense. So I quite like that as an idea. So you figure out the problem, then you plan the stages. So for example, okay, they need to input on AirBnb, where do they want to stay and what dates then on the next page, you would have the list of places that they have available. Then the next page of your workflow you’d have the payment that they look at all the information on there, and then I guess the next one would be the page with a book, then the page where they pay. Then the page that says thanks check your email for confirmation.
So the workflows that series of steps. So then you, you wireframe and prototype like I just showed you. Now there’s this step, which is about receiving validation. So the idea here, as I understand it, is if you’re creating a piece of software, you want to show that wireframe to users. Before you actually build it, you get feedback, and then you launch.
I’m actually going to skip that because I want to just get things out there. This is about me building things, learn to code and getting them out there. I’m okay with building a really quick, simple version, and then getting it out into the world and then making changes rather than having this stage that slows me down before and this is the part that I really, really love. Number five, choose your firepower. So you’re going to use different tools, platforms, frameworks to build your web application. It’s important to choose a tool that fits the job and not go with what is popular. So rather than me going off the JavaScript, I need to figure out what is the For the solution that I’m trying to build, and just learn what I need to build that part of my web app, I think that’s such an awesome way of doing it.
So rather than going in theory, what do I need to build this thing? How do I just get myself from A to B? What language or technology do I need to learn to do that? I love that that’s, that’s really cool.
So then you get into building the application. And this part I absolutely love. This really simplifies things. There are just three steps in the application. There’s the database, which is you figure out what data you need to store. And you then build your database. And I guess there’s different technologies for that.
Then there’s the front end. So he says, you’ll likely build the front end and the back end at the same time. Just to be clear, the front end is how it looks when you’re on the website. That’s what you as a user would see. In the back end is all of the machinery in the back that no one sees. That does all of the work. So when you ask AirBnb, I want an apartment in Prague for July.
The front end, and in the back end goes to the database, it pulls up a list of all of the available departments in July, and it serves to you. Okay? So he says, you’re going to build the front and back end at the same time, the front end will loosely mirror the wireframe or prototype validated. So those sketches or those visualizations you did, it’s gonna look roughly like that.
The front end will consist of HTML, CSS, and JavaScript. So that’s three languages that I’m gonna need for sure. And the back end, is one of the toughest parts of the web application development process. The primary function of the back end is to provide HTTP endpoints for your front end, authenticate users authorization and to serve the front end, I have no idea what that means. But we’ll figure that out as we go.
So again, I think it’s really important as you do this challenge, if you’re doing it with me, is don’t get bogged down by not understanding everything. Now let’s just keep moving forward. So you build and then you test and When you deploy, so hosting involves running your web application on the server. So remember, the server is the place where all of your files that make your web application work live. And the server is a place that allows other internet users to connect to those files. So when you create your web app, other people can access it, they can use it, and it works.
So then there was one of the things he talks about here, which is web application development frameworks. And these make web application development easier rather than coding a web app from scratch. And he went through a number of different frameworks. Honestly, it got confusing, but he gave us back end frameworks and front end frameworks. Right now all I’m paying attention to is the framework means you don’t have to code every step from scratch. So what I’ve understood is those frameworks are like themes is like a template that we can then customize.
So that’s what I learned today. I think my piece of work today is to figure out the problem that I want to solve and the Get into prototyping. So I think today for day two, I’m going to get into the problem and the workflow.
Alright, so we’ve now spent a little bit more time today, it’s the evening on day two. And what I’ve now done is I’ve defined the problem that I’m solving. Then it asked me to plan the workflow of the web application. And that was basically the steps that, you know, the user would go through, I’ve now done that. And then it asked us to wireframe or prototype your web application.
So I’ve done kind of the ghetto version of this, defining it and planning the workflow. I’ve just done a real basic. So the software I’m going to build the tool, the web app, I’m going to build this called vegan checker. And this is a tool for vegans to go into and people that don’t want to use products that are tested on animals. They enter the brand name into here they hit check, and it comes up with is the brand vegan and cruelty free. And then who owns the company? And do they test on animals. So currently Now on this page, the brand is going to be carried across from what they entered.
So let’s just say they put in a bath and Bodyworks, it will say bath and Bodyworks is vegan, check if it is and cruelty free check. So it’s bringing in with a check. If they’re not, then it’s going to be red with an x. And then if they are vegan and cruelty free, it’s going to link out to some of their products that you can view. This is going to be optional, I’m not 100% sure of that yet depends on how much work it will take just a real simple just two page thing.
And what I think it’s going to need is two front end pages. So this is a front end user interface. And this is a page the user would see. I think it’s gonna need a database, which is going to sit in the middle here. So when someone searches and they enter bath and Bodyworks, it’s going to look up the database, check for a match, and either tell them, you know, yes, here’s the information or no, we don’t have that yet. And what I’m going to do is I’m going to build it so that when people enter it if we don’t have them We get notified. And then we can add that to the database for future. The other thing we’re gonna have to do is a data collection process, which means we’re gonna have to just kind of figure out the world’s top, I’d know hundred brands, and then figure out if they are vegan, cruelty free, who the parent companies are.
So there’s a bit of work upfront to collect that and put it in the database. But I don’t think it’s that difficult. And I might live to regret saying that. But what this looks like is it’s going to be HTML, CSS, and JavaScript on the front end, based on what I read earlier.
And in the database, I have no idea how we’re going to do that. We might even do a ghetto ghetto version, where we use a Google Sheet or something like that, just to get something functional. So you know, I didn’t say this is going to be world’s best software. This is about me on day two. already thinking about how to get into execution. I think I’ll learn more from action rather than reading 100 things. So if we go back to this, my next step is to wireframe prototype. Tomorrow. So I found some cool tools today that I don’t know if they’re free, I think there’s some that are free. And no, you can come in like this. And you actually create, like the web application to actually build the individual screens.
So I’m quite excited to dig into those tomorrow. Again, I can’t spend any money. So when I see words like pricing, I get scared. But sure, we can find something. And then I’m going to do a bit of research on figuring out the database. And I might spend a little bit of time on figuring out, how do you actually take that design, which I guess is a graphic, and then convert that into code for HTML, CSS and JavaScript. So yeah, that’s my next step. I’m super excited. This has been a great day too. I feel like I’ve made some progress. And looking forward to getting into day three.
See you in the next video.