In this course you’ll learn to develop an app/website/web component, well a web solution. It could be an entire application or as simple as a plugin for a web input. We will see those things, first we need to understand the web.
Web
The web it’s simple, look at it as people; you ask questions and they will answer you every question, if the answer is an error that’s an answer, a bad one but an answer at least. But trust me a bad answer it’s better than nothing.
But here’s the trick her is that you have to make the right questions, so how do we even start to ask. Well there’s always a problem we want to solve, it could be something very small as “I always forget to check my wishlist every day” or maybe something like “I want my portfolio looks very cool” It doesn’t really matters, what you need it’s break that problem into little pieces, so you can solve every piece one by one.
Now that we have our little bag of problems we always will have more than one solution; Find a tool that could take care of that issue or solve the issue on our own, in this course we are going to see both, don’t worry.
Technical Part
So the first thing you need to know about web is this:
The Internet
The internet could be the person that would run to tell other people about your questions or answers, that’s right you could also answer somebody else’s question. If you are connected right now you’re a piece of the internet, you are contributing to this world of interconnected machines.
Web Server
This is the middle-man in the transaction between the client and the world outside, here you can process files, questions, you can also get a service from or create routines that can be working time to time. A web server it’s not so different from a computer, there are a few web servers, the most popular it’s Apache, but we will get there.
Web Browser
The Customer Service of the Web, this one is’t dealing with all clients, by far the most popular connect with the web, there a lot of web browser.
This is getting all your requests, saving your personal info, and doing some of the process in your machine to get your answers as fast as he can.
So we’re going to work first with the Web Browser, it’s simple and most people have access to a web browser. I know I know, a lot of people use their phones, but even a cellphone requires a web browser like Safari, Chrome, Firefox, etc…
Well this is because the cellphone has his own Operative System so the question is it should work the same as the desktop version right? So sorry but the answer is no, and the reason it’s pretty simple, you’re not in a computer, you don’t have the same resources so the developers behind the Web Browser don’t have the same tools that they had to develop his older brothers.
But don’t worry every season the web browser are updated with some new features, fixing old bugs and doing the right thing, like Internet Explorer; so this is not a post about how bad it’s IE, actually a lot of people use it because it’s a standard in tech companies, all the software developed in Microsoft technology with some web features use IE inside.
But we are talking in the web browsers and the mobile web browsers, so to start I would like to open the console, every web browser has a console, this is where the code it’s executed. and type next:
2 + 2;
Now I know there will be a lot of questions, but don’t worry, just do as I do, I’m going to make this in Chrome so if you’re using another Web Browser just find out how to open the console in Firefox or your favorite web browser, so here we go
Ctrl + Shift + I or Cmd + Opt + I
So you should see something like this:
As you can see that it’s the code of the page, you can run this trick in every page you want, we should pay attention to the upper bar there:
1 The first button is to look in the page for an element, it could be an image or a text, a video anything.
2 The second button would change the size of your browser to see how it would look in a mobile device.
Elements Here you can see every element of your page, so yes we haven’t see how it’s an element, don’t worry.
Console Now here’s where you can do your magic tricks, here are the messages developers left or error that’s should happen.
In here we will find another buttons and a list with all the messages from the page, don’t worry just click in the Clear Console button. So now we can write our code here, this it’s just a simple way to play with Javascript.
PD: If some messages are continuously showing up press the option “Hide network messages”
So this is Javascript and we are going to see this awesome language very soon.
To conclude right now we’re able to open the console in a web page, and run a little bit of Javascript, we don’t know what exactly we can do with this but hey, at least we know it’s very smart, try to do some more complex math, trust me it will answer all your math questions.
Next time, we’re going to talk about languages, and a lot of our new friend Javascript, see ya later.
You can check a little more of information, tutorials and or demos here:
