{"id":192,"date":"2022-11-25T12:35:22","date_gmt":"2022-11-25T17:35:22","guid":{"rendered":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/?page_id=192"},"modified":"2022-12-02T18:58:04","modified_gmt":"2022-12-02T23:58:04","slug":"resources","status":"publish","type":"page","link":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/resources\/","title":{"rendered":"Resources"},"content":{"rendered":"\n

Development Tools and Resources<\/h1>\n\n\n\n
\n\n\n\n

Below are some helpful tools and utilities I have used for various aspects of development.<\/p>\n\n\n\n

\n\n\n\n

Pexels<\/a><\/h6>\n\n\n\n
TinyPNG<\/a><\/h6>\n\n\n\n
Freeicons.io<\/a><\/h6>\n\n\n\n
Google Fonts<\/a><\/h6>\n\n\n\n
Coolors<\/a><\/h6>\n\n\n\n
Adobe Express<\/a><\/h6>\n\n\n\n
CSS-Tricks<\/a><\/h6>\n\n\n\n
Responsively<\/a><\/h6>\n\n\n\n
Google Chrome Developer Tools & Lighthouse<\/a><\/h6>\n\n\n\n
Stack Overflow<\/a><\/h6>\n\n\n\n
Figma<\/a><\/h6>\n\n\n\n
Draw.io<\/a><\/h6>\n\n\n\n
GlooMaps<\/a><\/h6>\n\n\n\n
Visual Studio Code<\/a><\/h6>\n\n\n\n
Wing 101<\/a><\/h6>\n\n\n\n
GitHub<\/a><\/h6>\n\n\n\n
\n\n\n\n
<\/div>\n\n\n\n

Pexels<\/h4>\n\n\n
\n
\"Pexels\"<\/a><\/figure>\n<\/div>\n\n\n

Pexels<\/a> is a great tool for finding free high quality images for your web pages and projects. They have a great and easily searchable catalog, so finding something useful is super simple. The featured photo for this page was from Pexels. <\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

TinyPNG<\/h4>\n\n\n
\n
\"TinyPNG\"<\/a><\/figure>\n<\/div>\n\n\n

TinyPNG<\/a> is a tool for using lossy compression techniques to reduce the file size of the images used for your projects. This is really useful when the platform you are using limits file sizes. Its also a good practice to minimize these sizes whenever possible to maintain fast loading speeds and optimize website performance. <\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Freeicons.io<\/h4>\n\n\n
\n
\"Freeicons.io\"<\/a>
<\/figcaption><\/figure>\n<\/div>\n\n\n

Freeicons.io<\/a> is similar to Pexels above. Rather than large images though, its a great place to source smaller icons and logos.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Google Fonts<\/h4>\n\n\n
\n
\"Google<\/a><\/figure>\n<\/div>\n\n\n

Google Fonts<\/a> is a great place to browse and source different fonts for your projects. The user interface is excellent and its widely used for how easy it is to import and use their font catalog. <\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Coolors<\/h4>\n\n\n
\n
\"Coolors.co\"<\/a><\/figure>\n<\/div>\n\n\n

Coolors<\/a> is a fun and super easy utility to generate color palettes for a website or project. You can shuffle endlessly until a color stands out and then lock that color in. The generator will then only shuffle the remaining colors with good complimentary options. Branding and theme design is important and this tool makes things easy and fun. <\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Adobe Express<\/h4>\n\n\n
\n
\"Adobe<\/a><\/figure>\n<\/div>\n\n\n

Adobe Express<\/a> is a great tool for editing and resizing media for your projects. They offer a lot of capabilities for free, but tons more if you decide to upgrade to the paid version. <\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

CSS-Tricks<\/h4>\n\n\n
\n
\"CSS-Tricks<\/a><\/figure>\n<\/div>\n\n\n

CSS-Tricks<\/a> was created by Chris Coyier and is a great resource for all things CSS. There is an almanac page where you can find any selector or property you may ever need as well as the proper syntax and examples. The site also offers tutorials and guides making this a great utility and learning tool.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Responsively<\/h4>\n\n\n
\n
\"Responsively<\/a><\/figure>\n<\/div>\n\n\n

Responsively<\/a> is a really cool program for testing a web project across a vast array of possible viewport sizes and devices. This is a fast way to make sure your design and media queries are working as intended.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Google Chrome Developer Tools & Lighthouse<\/h4>\n\n\n
\n
\"Google<\/a><\/figure>\n<\/div>\n\n
\n
\"Lighthouse<\/a><\/figure>\n<\/div>\n\n\n

Googles Chrome browser comes loaded with helpful developer tools where you can see and interact with a webpage to see what is going on behind the scenes. You can view structures and performance metrics to help you find certain details as well as debug and optimize your projects. The Lighthouse utility is an honorable mention as its a great way to test and verify the quality and integrity of any site. There are several ways to access this tool but first you must download and use the Chrome Browser<\/a>. From there simply right click on any page and click “inspect”.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Stack Overflow<\/h4>\n\n\n
\n
\"Stack<\/a><\/figure>\n<\/div>\n\n\n

Stack Overflow<\/a> is a great place to learn and get answers when you find yourself stuck. There is a large community of developers in all different areas with varying experience levels and unique perspectives. Almost anytime I get stuck and start researching a solution or I google an error message, I inevitably end up reading a few posts from other developers struggling with something similar at Stack Overflow.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Figma<\/h4>\n\n\n
\n
\"Figma<\/a>
<\/figcaption><\/figure>\n<\/div>\n\n\n

Figma<\/a> is an excellent prototyping tool. I used Figma to prototype a multipage mobile app and the easy drag and drop project structure made this a real asset for getting a vision together for the project.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Draw.io<\/h4>\n\n\n
\n
\"Draw.io<\/a><\/figure>\n<\/div>\n\n\n

Draw.io<\/a> is another great early stage planning tool. It comes equipped with easy to configure diagrams and application maps. Documentation and planning are super import in large scale projects. Draw.io made creating relationship and class diagrams a breeze for me. <\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

GlooMaps<\/h4>\n\n\n
\n
\"My<\/a><\/figure>\n<\/div>\n\n\n

GlooMaps<\/a> is another simple and effective planning tool for creating site maps for your projects. It makes planning and creating the structure of your sites a breeze. Above is a simple map I created for this site. More pages may be added eventually but this was helpful during the initial stages.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Visual Studio Code<\/h4>\n\n\n
\n
\"React<\/a><\/figure>\n<\/div>\n\n\n

Visual Studio Code<\/a> is a powerful coding environment developed by Microsoft. Its highly popular and often regarded as the industry standard for code editors. With a massive library of extensions to work with various languages and its file management and source control capabilities, VS Code is a no brainer and a great free asset.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

Wing 101<\/h4>\n\n\n
\n
\"Covid<\/a><\/figure>\n<\/div>\n\n\n

Wing 101<\/a> is a stripped down and simplified coding environment for Python. Its excellent for smaller projects and a really nice free tool for beginners working with Python. Its simple layout reduces confusion for beginners and offers the ability to run and debug programs easily.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

GitHub<\/h4>\n\n\n
\n
\"Github<\/a><\/figure>\n<\/div>\n\n\n

GitHub<\/a> is another crowd favorite. GitHub offers repositories for storing files and projects. Its an excellent free choice for collaborative programming efforts. With branching and version control capabilities, GitHub is a powerful asset for developers of any level. Its also a great place to archive your projects. A lot of my work can be seen in my public repositories found by following the link in the footer. <\/p>\n","protected":false},"excerpt":{"rendered":"

Development Tools and Resources Below are some helpful tools and utilities I have used for various aspects of development. Pexels TinyPNG Freeicons.io Google Fonts Coolors …<\/p>\n","protected":false},"author":1,"featured_media":261,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-192","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/wp-json\/wp\/v2\/pages\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/wp-json\/wp\/v2\/comments?post=192"}],"version-history":[{"count":29,"href":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/wp-json\/wp\/v2\/pages\/192\/revisions"}],"predecessor-version":[{"id":532,"href":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/wp-json\/wp\/v2\/pages\/192\/revisions\/532"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/wp-json\/wp\/v2\/media\/261"}],"wp:attachment":[{"href":"https:\/\/wcet.waketech.edu\/pljeffers\/WEB250\/wordpress\/wp-json\/wp\/v2\/media?parent=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}