-
Notifications
You must be signed in to change notification settings - Fork 1
/
web-dev.html
108 lines (103 loc) · 12.2 KB
/
web-dev.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width"/>
<title>Ultimate Hacker Guide</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="./style.css" />
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"/>
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div class="sidebar-brand">
<a href="https://freetailhackers.com/#">
<div class="logo">
<img src="assets/freetailLogo.png" height="75%" width="auto"/>
</div>
</a>
<a href=index.html>Starting Guide </a></div>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="index.html"></i>Guide Introduction</a></li>
<li><a href="authentication.html"></i>Authentication</a></li>
<li><a href="cloud.html"></i>Cloud</a></li>
<li><a href="comp-vis.html"></i>Computer Vision</a></li>
<li><a href="database.html"></i>Database</a></li>
<li><a href="design-ui.html"></i>Design UI</a></li>
<li><a href="github.html"></i>Github</a></li>
<li><a href="hackathon-logistics.html"></i>Hackathon Logistics</a></li>
<li><a href="ideation.html"></i>Ideation</a></li>
<li><a href="machine-learning.html"></i>Machine Learning</a></li>
<li><a href="mobile-apps.html"></i>Mobile Development</a></li>
<li><a href="post-hackathon.html"></i>Post Hackathon</a></li>
<li><a href="submission.html"></i>Submission and pitching</a></li>
<li><a href="terminal.html"></i>Terminal</a></li>
<li><a href="web-dev.html"></i>Web Development</a></li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<h1 class="code-line" data-line-start=0 data-line-end=1 ><a id="Web_Development_0"></a>Web Development</h1>
<h3>What is web development?</h3>
<p class="has-line-data" data-line-start="1" data-line-end="2">Web development is a key skill for many software engineers. Have you ever wondered what actually goes into making a site like Google or GitHub? Web developers are the ones responsible for linking the logic of the website (back-end) to how it’s presented to users like us (front-end). There are a lot of key components to web development, so for this guide, I’m hoping to introduce you to some key concepts and helpful resources to make your first website.</p>
<p class="has-line-data" data-line-start="3" data-line-end="4">The biggest distinction in web development is <strong>front-end</strong> vs. <strong>back-end</strong>. Front-end refers to the creation of the actual webpage, as well as the JavaScript that it uses to make calls to the back-end. Back-end is what receives requests from the front-end, and provides data, information, or whatever else it might ask for. The libraries and languages used for each one can be very different, so I’ve placed separate tutorials for each of them in this folder. Happy web developing!</p>
<h2 id="front-end-development">Front-end Development</h2>
<p>The distinction between front-end and back-end is crucial. Front-end code refers to what creates the webpage that users see, and the primary languages used in front-end development are <strong>HTML, CSS, and Javascript (JS)</strong>. HTML, or HyperText Markup Language, is what defines the content on a webpage, while CSS, or Cascading Style Sheets, is what helps format it to make it look nice. Using just these two, you can make some really cool looking sites, but they won't actually be able to interact with running code unless you make use of JavaScript. While there are plenty of frameworks and tools to make front-end development easier, knowing these three is vital to becoming a good web developer. I've linked some helpful tutorials for each of these 3 below. I recommend starting with HTML, and then moving on to CSS and JavaScript when you feel comfortable.</p>
<ul>
<li><a href="https://www.w3schools.com/html/">HTML 1</a>, <a href="https://html.com/">HTML 2</a>, <a href="https://www.tutorialspoint.com/html/index.htm">HTML 3</a></li>
<li><a href="https://www.w3schools.com/css/">CSS 1</a>, <a href="https://www.tutorialspoint.com/css/index.htm">CSS 2</a>, <a href="https://www.csstutorial.net/">CSS 3</a></li>
<li><a href="https://www.w3schools.com/js/">JS 1</a>, <a href="https://javascript.info/">JS 2</a></li>
</ul>
<p>One important thing to remember, which may seem rather trivial, is to ensure you have the correct file types for each type of file. HTML files should use the <strong>.html</strong> extension, and CSS/JS files should use <strong>.css</strong> and <strong>.js</strong> respectively. Without these, your website will not know which files to look in for which information, and stuff won't work properly.</p>
<h3 id="linking-html-css-and-javascript">Linking HTML, CSS, and JavaScript</h3>
<p>The best way to use these three languages is to have them in their own files, and link them through the header of your HTML file. Each HTML file should have a <head> tag somewhere towards the top, and inside this tag, you'll want to link your CSS and JavaScript like this:</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"[NAME OF CSS FILE HERE]"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"[NAME OF JS FILE HERE]"</span>></span><span class="undefined"></span>
</code></pre>
<p>If you need your files linked in a specific order, make sure to get the order right so they can find the correct information. Also, the most common names for files are <strong>index.html, style.css, and app.js</strong>, which you may find all over the tutorials.</p>
<h3 id="css-warning">CSS Warning</h3>
<p>One of the most common bugs beginners face in front-end development cycles is updating CSS but it not showing up on the HTML page you have pulled up, even if you refresh. This is usually because your web browser went ahead and stored your old CSS file so it wouldn't have to access it all over again from the file system, and is therefore not seeing any changes you recently made. If you want to force your browser to pull the new CSS file, you'll need to delete its cache/memory by doing a hard refresh, which is <strong>Ctrl + f5</strong>, at least on Windows.</p>
<h2 id="back-end-development">Back-end Development</h1>
<p>Back-end development, as I mentioned earlier, is the process of coding an information base for the front-end. It's main purpose is to respond to the front-end whenever it receives a <strong>request</strong>, while also running any data calculations or logic. Most websites have a back-end that is split into two sections; a <strong>middleware</strong> section and a <strong>database</strong> section. Databases have their own folder in this guide, so I will go into middleware here.</p>
<h3 id="popular-libraries">Popular Libraries</h2>
<p>There are plenty of popular ways to create HTML backends, so much so that your favorite language probably has a method for doing so. Old sites rely on <strong>PHP</strong>, while newer ones rely on more robust languages like <strong>Java</strong> and <strong>Python</strong>. I've attached links here for all of my favorite back-end libraries, but keep in mind there are plenty more than this.</p>
<ul>
<li><a href="https://www.w3schools.com/php/DEFAULT.asp">PHP</a></li>
<li><a href="https://flask.palletsprojects.com/en/1.1.x/tutorial/">Flask (Python)</a></li>
<li><a href="https://spring.io/guides/gs/spring-boot/">Spring Boot (Java, somewhat complicated)</a></li>
</ul>
<p>As usual, it never hurts to know more than one of these, but I think it's wisest to pick one and stick with it until you get really good at it. Flask is a perfect middle-ground for beginners: it is lightweight and easy to use, but has the same structure as many back-ends across the tech industry.</p>
<h3 id="basic-flask-structure">Basic Flask Structure</h2>
<p>I've placed a hello world Flask file in this folder, and there are a couple key things to note. The following line is what defines the url to go to.</p>
<pre><code class="lang-python">@<span class="hljs-keyword">app</span>.<span class="hljs-keyword">route</span>('/<span class="hljs-keyword">hello</span>')
</code></pre>
<p>This line basically says: "When someone types in "localhost:5000/hello" in to their browser, you will return the following code." The rest of the code defines what to return. While it's a simple String for now, it can be any sort of data structure in a JSON format, and you'll find more information on this in the Flask tutorials. </p>
<h3 id="running-your-flask-app">Running your Flask app</h3>
<p>Once you've got the hello world file saved, running your app is relatively easy. Find the file in your command prompt or terminal. If you need help doing this, check out the getting-started-terminal folder in this guide. Once you're there, you need to set the environment variable FLASK_APP to be the name of your python file. For example, if you called your file <strong>hello.py</strong>, you need to write either <strong>set FLASK_APP=hello.py</strong> into the windows terminal or <strong>export FLASK_APP=hello.py</strong> in a Linux terminal. Finally, just type the command <strong>flask run</strong>, and you should be able to see the following output:</p>
<pre><code> * Serving Flask app <span class="hljs-string">"application.py"</span>
* Environment: production
WARNING: This is <span class="hljs-keyword">a</span> development server. Do <span class="hljs-keyword">not</span> use <span class="hljs-keyword">it</span> <span class="hljs-keyword">in</span> <span class="hljs-keyword">a</span> production deployment.
Use <span class="hljs-keyword">a</span> production WSGI server instead.
* Debug mode: off
* Running <span class="hljs-keyword">on</span> <span class="hljs-title">http</span>://<span class="hljs-title">127</span><span class="hljs-number">.0</span><span class="hljs-number">.0</span><span class="hljs-number">.1</span>:<span class="hljs-title">5000</span>/ (<span class="hljs-title">Press</span> <span class="hljs-title">CTRL</span>+<span class="hljs-title">C</span> <span class="hljs-title">to</span> <span class="hljs-title">quit</span>)
</code></pre><p>If you see this, congratulations! You've successfully run your Flask app. All you need to do to see it is go to <a href="http://127.0.0.1:5000/hello">http://127.0.0.1:5000/hello</a> or whatever URL you were given in a browser like Chrome, and you should be able to see your returned message.</p>
<!-- <button id="boilerplate">React Website Starter Code</button> -->
<h3>How can I get started</h3>
<p>We have provided some code to use as a template for a basic react website <a href="https://github.com/FreetailHackers/uhsg/tree/master/web-dev-boilerplate">here</a>.</p>
<button id="menu-toggle" class="btn btn-secondary">
<i id="toggleIcon" class="fa fa-angle-double-down"></i>
</button>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- partial -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>