What I want to talk about today covers\nshort glimpses into many fields. There are many questions I had myself when I\nstarted working and exploring in this field. You find yourself confronted with\nso many decisions at the get-go that it can seem impossible even to start.<\/p>\n\n\n\n
I want to take you by the hand as a complete beginner, someone who only knows the term Webdesign, and guide you to those first lessons to learn, videos to watch, documentation pages to read and give you an overview of what you are dealing with.<\/p>\n\n\n\n
In the following paragraphs, I want to\ncover the following areas:<\/p>\n\n\n\n
Surely you feel overwhelmed right now by\nwhat you are about to undertake, but rest assured: Even if there is sometimes\nsome difficulty and if there are setbacks, the effort you put in will be worth\nit. It’s an amazing feeling to see a finished project, to see a tool you came\nup with in use, to profit from automation of a process you used to do manually.<\/p>\n\n\n\n
Let’s dive right in!<\/p>\n\n\n\n
For the sake of readability, I will spare you the same story over again how some smart people in the military invented the Internet formerly named the ARPANET<\/a>. You can find that in a history book \u2013 or on the Internet. All you need to know is the fact that the Internet enables computers to send text back and forth. Now you might think that you can also send images but that’s not exactly right. The images you send via the Internet get translated into a machine language that explains how they look. There are many such languages. JPEG, PNG, and SVG might be some you have seen before. <\/p>\n\n\n\n Why do I tell you this? Because it is also\na good introduction to Webdesign and why it strikes people as difficult: Let’s\nsay you have a computer and want it to show everyone on the Internet a nice\nrepresentation of your local business. If you are only able to send them pure\ntext files, that’s going to be a pretty boring introduction. With pictures,\nyou’re already one step further, but now you’re still stuck with a long text\nand some pictures. What about the positioning of text, interactivity, colors,\nlayout, all that stuff?<\/p>\n\n\n\n HTML exists to solve this problem. It is a\nlanguage to give the text meaning. We call programs that understand this\nlanguage browsers. They receive a document written in HTML and show you a nice\ngraphical representation of what that HTML contains. HTML has commands to turn\ntext into a link or a heading, and just like that, we can create basic\nwebsites.<\/p>\n\n\n\n To extend the functionality of pure\nfunctionality, people introduced further languages to cover additional ground:<\/p>\n\n\n\n These technologies introduce multiple ways of how to do Webdesign. Let’s assume you insert a URL into your browser’s address bar. What happens? What are the possible ways? Your browser will send a request to the address you gave it. If the destination is a computer awaiting your request, we expect it to send us a valid HTML document. It could either<\/p>\n\n\n\n In the first case, we will always receive\nthe same website no matter how many times we call it and at which time. The\nspace for the date will always contain the same value. The second time, we will\nreceive an individual return value every time because the server has to look up\nthe date every time.<\/p>\n\n\n\n In the second case above, the server has to\ndo all the heavy lifting, while your browser, the client, only displays\nwhatever the server sends it. Imagine, however, that you want to write an\nonline game, say, Sudoku. If it goes well, you might have millions of people playing\nyour game. Do you want all those people using your computer for their games?\nThat would be a lot of work. <\/p>\n\n\n\n It would be best if you could send them the\nrules of Sudoku and what the board is supposed to look like and let the browser\ndo the rest. Your computer should be smart enough to do the rest. That’s where\nJavaScript comes in. It is a programming language your browser understands and\nwhich can access the website the browser displays. So the server sends you some\nJavaScript code that describes how the game works, your browser executes that\ncode, and you have a game. Now the server doesn’t care anymore if you play one\nor ten games, and if you win or lose, it sends the rules and layout once. Cool,\nright?<\/p>\n\n\n\n We call code that running on the server “server-side<\/em>.” The most widely used language here is PHP. This way, you can access data from a database without opening the database up to browsers. If, for example, a username shows on a website, PHP gets that name from the database, inserts it into the HTML as pure text, and sends it to the browser. That way, only the server needs to access the database – not the browser.<\/p>\n\n\n\n The code that runs in the browser is called “client-side<\/em>,” and we write it in JavaScript.<\/p>\n\n\n\n Most websites today feature some\ninteraction. That could be a login to access some personal dashboard,\nmessaging, leaving comments, or shopping. That functionality requires code to\nrun that reacts to your requests either on the server or in the browser.\nTypically you will use a combination of both. The modern trend, however, is to\nput more and more functionality into the browser, which means to write more\ncode in JavaScript. There is also a system to write server-side code in\nJavaScript, so JavaScript that gets executed on the server, called NodeJs. <\/p>\n\n\n\n One of the core lessons in programming is that someone already did what you want to do, and you don’t need to re-invent the wheel. There are already websites out there that have a login-functionality that is secure and makes sense \u2013 why would you do it differently? The core differentiation you can make here is the one between a tool <\/em>and a framework<\/em>. Both help you find a solution to your problem. However, the framework will be part of that solution \u2013 the tool will not. Angular, for example, is a web framework to build modern websites. Every website you build with angular contains the angular code + your code, so you use the framework and add your details to it. Dreamweaver, on the other hand, used to be a tool to design websites, but it generates a website for you, that doesn’t require Dreamweaver to run. Once you hit export, Dreamweaver’s work is done.<\/p>\n\n\n\n To keep everything nice and compact, people\nmodularize frameworks so people can use only the building blocks they need\nrather than bringing a lot of code they don’t require. Sometimes there are also\nmultiple ways to solve a problem. These two facts have introduced the\nterminology of a software stack. That term describes the list of tools and\nframeworks you use for your project. Some work well together; some are written\nby the same people and make sense together. There are, therefore, some famous\nsoftware stacks out there which we will talk about later. <\/p>\n\n\n\n You will also read the term library. Function-wise it is interchangeable with a framework. It is code you bundle with yours to build a website. However, the “Inversion of Control”-principle<\/a> states that a library is a piece of code you call to do a task while a framework is code that calls you to do something where it needs you. You could use a math-library to compute the square root of a number when you need it. WordPress is a framework, and it will ask you for the name of your website and what you want it to look like. <\/p>\n\n\n\n In the last paragraph, I mentioned WordPress and called it a framework. That is not the whole truth. WordPress <\/a>doesn’t require you to do any more programming. All you do is manage your content. That includes actions like creating pages, uploading images, writing text in an online editor to be displayed on the website. This nature of the system is why we call this sort of framework a Content-Management-System or CMS. Joomla <\/a>and Wikipedia are further examples.<\/p>\n\n\n\n While WordPress uses PHP (and is, therefore, a server-side technology), Angular, for example, is a framework written in JavaScript and is therefore client-sided. The only real restriction here is that user data and other confidential data will always be stored on your server and not entirely in the client. It will, therefore, make some functionality on the server necessary for the client to retrieve the data it needs. So if you have a website with user data, you will need some code on the server-side.<\/p>\n\n\n\n At this point, you are aware of most of the\nimportant lingo that you need. This should help you decide what you want to do\nand how. For example: If you are more interested in the design aspects,\nstructure, color, fonts, etc. CSS would be a good starting point for you. If\nyou don’t want to do any coding but need a website, a CMS like WordPress is\nyour goto solution, and if coding aka the art of building functionality is what\nyou are after, you only have to choose server or client-side, and you’re off to\na good start. I now want to teach you a little bit about how to get going.<\/p>\n\n\n\n First off, I want to list some good sources\nof information:<\/p>\n\n\n\n I want to end\nthis article with some important remarks I want you to keep with you and to\nremember whenever you do any programming:<\/p>\n\n\n\n I don’t want you to go off and do what I\ndo. I do those things because I like them \u2013 you might not. None the less I want\nto introduce you to some of the technologies I find interesting:<\/p>\n\n\n\nSoftware<\/h2>\n\n\n\n
Starting Point<\/h2>\n\n\n\n
My personal favorites<\/h2>\n\n\n\n