Portfolio-2016/bookmarks.php at master · Landtiser/Portfolio-2016 · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<?php include("header.php"); ?>

    <h1 class="title">
        Bookmarks & Tools
    </h1>

    <ul class="social-icons">
      <li class="social-icons__item">
        <a href="https://www.linkedin.com/in/landtiser" target="_blank">
          <img class="social-icons__img" width="76px" height="76px" alt="LinkedIn" src="img/linkedin.svg">
        </a>
      </li>
      <li class="social-icons__item">
        <a href="https://twitter.com/Landtiser" target="_blank">
          <img class="social-icons__img" width="76px" height="76px" alt="Twitter" src="img/twitter.svg">
        </a>
      </li>
      <li class="social-icons__item">
        <a href="https://github.com/Landtiser" target="_blank">
          <img class="social-icons__img" width="76px" height="76px" alt="GitHub" src="img/github.svg">
        </a>
      </li>
    </ul>

    <hr>

    <h2 class="center-title">Learning Tools</h2>

    <div class="card-deck">

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="Pico" src="img/bookmarks/pico.png">
        <h3><a href="https://hellopico.com/developer-resources" target="_blink">Pico</a></h3>
        <p class="card-deck__text">An expert collection of resources for both front and back-end developers. It’s also broken into sections for junior, experienced, and senior level developers!</p>
      </div>

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="Tuts+" src="img/bookmarks/tutsplus.jpg">
        <h3><a href="https://tutsplus.com/" target="_blink">Tuts+</a></h3>
        <p class="card-deck__text">Tuts+ has a wealth of resources available for web coding and ‘harder’ computer science related skills. Tutorials are available both free and premium.</p>
      </div>

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="Team Treehouse" src="img/bookmarks/teamtreehouse.jpg">
        <h3><a href="http://teamtreehouse.com/" target="_blink">Team Treehouse</a></h3>
        <p class="card-deck__text">Treehouse is very web and app-centric, with a business leaning that encourages entrepreneurs and career advancement for all its members.</p>
      </div>

        <div class="card-deck__card">
          <img class="card-deck__image" width="210px" height="210px" alt="Google University" src="img/bookmarks/googledevelopers.jpg">
          <h3><a href="https://developers.google.com/university/courses/" target="_blink">Google University</a></h3>
          <p class="card-deck__text">All hail the omniscient Google. It showers us with knowledge of database languages and Google-specific API coding!</p>
        </div>

        <div class="card-deck__card">
          <img class="card-deck__image" width="210px" height="210px" alt="Tuts+" src="img/bookmarks/codecademy.jpg">
          <h3><a href="http://www.codecademy.com/" target="_blink">Codecademy</a></h3>
          <p class="card-deck__text">A personal favorite for 101-learning in a whole ton of code topics, and steadily gaining depth from community-contributed knowledge.</p>
        </div>

        <div class="card-deck__card">
          <img class="card-deck__image" width="210px" height="210px" alt="Team Treehouse" src="img/bookmarks/bentobox.jpg">
          <h3><a href="http://www.bentobox.io/" target="_blink">Bentobox</a></h3>
          <p class="card-deck__text">Bentobox.io is a by-webheads-for-webheads collection of learning for web topics across the front and back end of the industry.</p>
        </div>

    </div>

    <h2 class="center-title">Color Tools</h2>

    <div class="card-deck">

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="Adobe Color" src="img/bookmarks/kuler.jpg">
        <h3><a href="https://color.adobe.com/" target="_blink">Adobe Color CC</a></h3>
        <p class="card-deck__text">Adobe Color provides simple and fast color pallet options for either quick prototyping or detailed design work. Save your swatches and view others’ work!</p>
      </div>

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="Subtle Patterns" src="img/bookmarks/subtlepatterns.jpg">
        <h3><a href="http://subtlepatterns.com/" target="_blink">Subtle Patterns</a></h3>
        <p class="card-deck__text">Subtle Patterns is another great resource for background images, patterns, and other visuals that can add high quality effects without overwhelming.</p>
      </div>

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="ColorZilla" src="img/bookmarks/colorzilla.jpg">
        <h3><a href="http://www.colorzilla.com/gradient-editor/" target="_blink">CSS Gradients</a></h3>
        <p class="card-deck__text">CSS Gradients are a snap using this generator. Fine tune your specs and you’ve got code in hand that effectively utilizes vendor prefixes to maximize compatibility.</p>
      </div>

        <div class="card-deck__card">
          <img class="card-deck__image" width="210px" height="210px" alt="ColoRotate" src="img/bookmarks/colorotate.jpg">
          <h3><a href="http://web.colorotate.org/" target="_blink">ColoRotate</a></h3>
          <p class="card-deck__text">Ever wanted to see colors in… 3D?! Colorotate is a really fun and cool little tool that lets you re-visualize your color scheme in whole new dimensions.</p>
        </div>

        <div class="card-deck__card">
          <img class="card-deck__image" width="210px" height="210px" alt="ColourLOVERS" src="img/bookmarks/colourlovers.jpg">
          <h3><a href="http://www.colourlovers.com/" target="_blink">ColourLOVERS</a></h3>
          <p class="card-deck__text">ColourLOVERS provides equal parts color and pattern resources as it does a large and eclectic community of designers and color fanciers!</p>
        </div>

        <div class="card-deck__card">
          <img class="card-deck__image" width="210px" height="210px" alt="Web Color Chart – Visibone" src="img/bookmarks/visibone.jpg">
          <h3><a href="http://html-color-codes.com/" target="_blink">Web Color Chart – Visibone</a></h3>
          <p class="card-deck__text">Visibone’s color chart is a go-to for Hex # information, plus they have lots of great color/design goodies.</p>
        </div>

    </div>

    <h2 class="center-title">Web Tools</h2>

    <div class="card-deck">

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="CodePen" src="img/bookmarks/codepen.jpg">
        <h3><a href="http://codepen.io/" target="_blink">CodePen</a></h3>
        <p class="card-deck__text">CodePen provides in-browser realtime editing and sharing for HTML, CSS, and Javascript. Learn and teach in share!</p>
      </div>

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="jQuery" src="img/bookmarks/jquery.jpg">
        <h3><a href="http://jquery.com/" target="_blink">jQuery</a></h3>
        <p class="card-deck__text">The jQuery javascript library has spent years on the top of the internet’s “You NEED This” list for your web developing toolbox!</p>
      </div>

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="Roots" src="img/bookmarks/roots.jpg">
        <h3><a href="http://roots.io/" target="_blink">Roots</a></h3>
        <p class="card-deck__text">Roots is a launching pad ‘theme’ to your wildest, responsive dreams on a WordPress powered website. Highly recommended.</p>
      </div>

        <div class="card-deck__card">
          <img class="card-deck__image" width="210px" height="210px" alt="Google Fonts" src="img/bookmarks/googlefonts.jpg">
          <h3><a href="http://www.google.com/fonts/" target="_blink">Google Fonts</a></h3>
          <p class="card-deck__text">Convenient access to libraries of information and media; that’s Google for you! Utilize these fonts well, for any number of projects.</p>
        </div>

        <div class="card-deck__card">
          <img class="card-deck__image" width="210px" height="210px" alt="Responsive Resources" src="img/bookmarks/responsiveresources.jpg">
          <h3><a href="http://bradfrost.github.io/this-is-responsive/resources.html" target="_blink">Responsive Resources</a></h3>
          <p class="card-deck__text">An awesome collection of reading material and resources to use involving the biggest growing movement in web design: truly responsive site building.</p>
        </div>

        <div class="card-deck__card">
          <img class="card-deck__image" width="210px" height="210px" alt="Macaw" src="img/bookmarks/macaw.jpg">
          <h3><a href="http://macaw.co/" target="_blink">Macaw</a></h3>
          <p class="card-deck__text">Macaw provides a whole lot of functionality for wire-framing and quick-launching incredibly flexible sites.</p>
        </div>

    </div>

    <h2 class="center-title">Good Reads</h2>

    <div class="card-deck">

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="A List Apart" src="img/bookmarks/alistapart.jpg">
        <h3><a href="http://alistapart.com/" target="_blink">A List Apart</a></h3>
        <p class="card-deck__text">A great collection of content ranging from industry talk to actual coding technique and best practices. My daily morning read.</p>
      </div>

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="Six Revisions" src="img/bookmarks/sixrevisions.jpg">
        <h3><a href="http://sixrevisions.com/" target="_blink">Six Revisions</a></h3>
        <p class="card-deck__text">Combines guest writing on web related topics with up-to-date resources, giveaways, and template deals!</p>
      </div>

      <div class="card-deck__card">
        <img class="card-deck__image" width="210px" height="210px" alt="Web Designer Depot" src="img/bookmarks/webdesignerdepot.jpg">
        <h3><a href="http://www.webdesignerdepot.com/" target="_blink">Web Designer Depot</a></h3>
        <p class="card-deck__text">Web Designer Depot focuses on articles about the web industry, including lots of lists and best-of features, distilling lots of talk into accessible summaries.</p>
      </div>

    </div>


<?php include("footer.php"); ?>