mad-webdev/index.html at main · The-Salisbury-School/mad-webdev · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <title>TSS Technology Department</title>

  </head>

  <body>
    <!-- Big Image with Header Text -->
    <img src="/assets/tech-background.jpg" alt="Developers working at table" width="100%">
    <h1>TSS Technology Department</h1>

    <!-- 4 Circles with each class name
    Make them color or grayed out when active -->
    <h2>Classes</h2>

    <a href="/pages/apcsp.html"><img src="/assets/apcsp-img.jpg" alt="Two people working at computer" width="100%"></a>
    <h3>AP Computer Science Principles</h3>
    <p>Where we learn the basics of computer science and you apply technology to the things that matter to you.</p>

    <a href="/pages/webdev.html"><img src="/assets/webdev-img.jpg" alt="Multiple devices displaying code" width="100%"></a>
    <h3>Web Development</h3>
    <p>Where we end the year with a fully-functioning, multi-page, responsive website, coded by hand to solve a real problem.</p>

    <a href="/pages/gamedev.html"><img src="/assets/gamedev-img.jpg" alt="Gaming controller in front of laptop" width="100%"></a>
    <h3>Game Development</h3>
    <p>Where we end the year with a 15-minute game demo that can be shared, playtested, and submitted to publishers.</p>

    <a href="/pages/hackathon.html"><img src="/assets/hackathon-img.jpg" alt="Person speaking in front of group in tech industry building" width="100%"></a>
    <h3>Hackathon Team</h3>
    <p>Where we compete for prizes and build solutions that matter to you.</p>

    <!-- 4 Cards with images and information -->
    <h2>Why Study Tech?</h2>
    <img src="/assets/dollar.png" alt="Dollar sign icon">
    <h3>Money</h3>
    <p>According to <a href="https://money.usnews.com/careers/best-jobs/software-developer">US News</a>, the median salary for Software Developers in 2020 was $110,140. "The <em>lowest-paid 25%</em> made $84,020."</em></p>

    <img src="/assets/palette.png" alt="Artist palette icon">
    <h3>Creativity</h3>
    <p>The biggest creations that have changed the modern world have come from the world of tech. The solutions for the problems we face now will also likely be solved through modern technology.</p>

    <img src="/assets/rocket.png" alt="Rocket ship icon">
    <h3>Freedom</h3>
    <p>According to <a href="https://terminal.io/state-of-remote-engineering">Terminal</a>, 61% of developers work fully remote. Only 4% have jobs that are never done remotely.</p>

    <img src="/assets/computer.png" alt="Computer monitor icon">
    <h3>Future</h3>
    <p>According to <a href="https://goremotely.net/blog/how-many-software-engineers-are-there/">goremotely.net</a>, "In 2017, there were less than 50,000 Computer Science graduates and over 500,000 open positions." and there are over 1 million software developer jobs currently available.</p>

    <!-- Section with lots of pictures of people who work in tech industry -->
    <h2>I'm 'Not a Coder'</h2>
    <img src="/assets/portrait-sad1.jpg" alt="Portrait" width="20%">
    <img src="/assets/portrait-sad2.jpg" alt="Portrait" width="20%">
    <img src="/assets/portrait-sad3.jpg" alt="Portrait" width="20%">
    <img src="/assets/portrait-sad4.jpg" alt="Portrait" width="20%">
    <img src="/assets/portrait-sad5.jpg" alt="Portrait" width="20%">

    <!-- Section with examples of jobs in tech that don't require coding -->
    <h2>Neither Are We..</h2>
    <img src="/assets/portrait1.jpg" alt="Portrait" width="20%">
    <img src="/assets/portrait2.jpg" alt="Portrait" width="20%">
    <img src="/assets/portrait3.jpg" alt="Portrait" width="20%">
    <img src="/assets/portrait4.jpg" alt="Portrait" width="20%">
    <img src="/assets/portrait5.jpg" alt="Portrait" width="20%">

    <p>You don't have to write code to work with technology.</p>

    <h3>HR</h3>
    <a href="/pages/hr.html"><img src="/assets/hr-img.jpg" alt="Three people in a conference room" width="100%"></a>
    <p>Every major company has a Human Resources department. If you need someone to interview and hire new employees, it would be helpful if they could at least understand the terminology and concepts in the tech world. Therefore, HR workers that have some tech experience are highly sought-after.</p>

    <h3>UI/UX</h3>
    <a href="/pages/ui.html"><img src="/assets/ui-img.jpg" alt="Tablet with website design sketch" width="100%"></a>
    <p>There has never been a better time in history to make money as an artist. Every app and every website needs someone to design the aesthetic elements. User interface designers understand design principles, but they have an awareness of how apps work, so that their designs fit the medium in which they're displayed.</p>

    <h3>Project Manager</h3>
    <a href="/pages/pm.html"><img src="/assets/project-management-img.jpg" alt="Person planning with sticky notes" width="100%"></a>
    <p>Believe it or not, creating new features in apps is a very complect process, and it requires organized coordination of programmers, artists, sales, user experience designers, and others. In order to coordinate this work, companies often hire project managers to just make sure everything goes according to plan and remains on schedule. If you have a talent for organization and planning, you don't necessarily have to know how to code to work for a big tech company, earn a big salary, work remotely, and just organize the work of others.</p>

    <!-- Toggle Switch between "I'm So In!" and "Not sure, but curious" -->
    <!-- https://alvarotrigo.com/blog/toggle-switch-css/ -->
    <input type="checkbox" id="switch" />
    <label for="switch">Toggle</label>

    <!-- Form to submit information if interested -->
    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname"><br>

      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email"><br>

      <label for="phone">Phone number:</label><br>
      <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br>

      <label for="question">Question:</label><br>
      <input type="text" id="question" name="question"><br><br>

      <input type="submit" value="Submit">
    </form>
  </body>
</html>