9 | If you want to learn a little bit more about these things or just want to be more prepared, these are our highly recommended resources.
10 |
11 | - [Windows Tooling](tooling-guides/Windows-Tooling.md)
12 | - [MacOS Tooling](tooling-guides/MacOS-Tooling.md)
13 | - [Front End Masters Handbook](https://frontendmasters.com/guides/front-end-handbook/2024/)
14 | - [Mozilla MDN](https://developer.mozilla.org/en-US/)
15 | - [The Modern JavaScript Tutorial](https://javascript.info/)
16 | - [Getting To know HTML](https://learn.shayhowe.com/html-css/getting-to-know-html/)
17 |
--------------------------------------------------------------------------------
/modules/command-line-basics.md:
--------------------------------------------------------------------------------
1 |
8 |
9 | In this module, we'll dive into the fundamentals of the command line, a powerful tool that will empower you to work your coding wizardry.
10 |
11 |
12 |
13 | ## 💻 What's the Command Line?
14 |
15 | The command line, often referred to as the "command prompt," "terminal," or "CLI" (Command Line Interface), is your backstage pass to interacting with your computer in a way that goes beyond clicking and dragging. It's where the real magic happens.
16 |
17 | ### Operating Systems and Access
18 |
19 | - **MacOS:** To access the Terminal, navigate to `Applications` > `Utilities` > `Terminal`.
20 | - **Windows:** Click `Start`, then `All Programs` > `Accessories` > `Command Prompt`.
21 |
22 |
23 |
24 | ## 📜 Command Line Operations
25 |
26 | Let's start with some essential commands to navigate this new territory:
27 |
28 | ### Print Working Directory (Where Are You?)
29 |
30 | - **MacOS:** Type `pwd` and press Enter.
31 | - **Windows:** Use `cd` and press Enter.
32 |
33 | ### List Directories and Files
34 |
35 | - **MacOS:** Type `ls` and press Enter.
36 | - **Windows:** Use `dir` and press Enter.
37 |
38 | ### Creating a New Directory
39 |
40 | - Create a new directory called "VetsWhoCode" by typing:
41 | ```bash
42 | mkdir VetsWhoCode
43 | ```
44 | and pressing Enter.
45 |
46 | ### Changing Your Working Directory
47 |
48 | - Move into your new directory with:
49 | ```bash
50 | cd VetsWhoCode
51 | ```
52 | and press Enter.
53 |
54 | ### Going Back to the Previous Directory
55 |
56 | - To return to the previous directory, simply type:
57 | ```bash
58 | cd ..
59 | ```
60 | and press Enter.
61 |
62 | ### Deleting a Directory (Oops!)
63 |
64 | - **MacOS:**
65 | ```bash
66 | rm -r NameOfDirectory
67 | ```
68 | - **Windows:**
69 | ```bash
70 | rmdir /S NameOfDirectory
71 | ```
72 |
73 |
74 |
75 | **Now, you're armed with the knowledge and tools to embark on your web development journey. Get ready to create, innovate, and make your mark on the digital world! 🚀**
--------------------------------------------------------------------------------
/account-set-up.md:
--------------------------------------------------------------------------------
1 |
8 |
9 | Before we begin the technical coursework, let's ensure you have all the essential accounts to empower your software engineering journey. These accounts will be your keys to storing projects, solving problems, prototyping, networking, writing, and gaining inspiration from fellow engineers. You'll also gain access to some fantastic projects from others in the industry.
10 |
11 | ### [LinkedIn For Veterans](https://socialimpact.linkedin.com/programs/veterans/premiumform)
12 |
13 | **Unlock Your Potential with LinkedIn Premium:** LinkedIn Premium is your ticket to an enhanced LinkedIn experience. This subscription-based service offers exclusive features not available on the free LinkedIn platform, including the ability to see who's viewed your profile, send unlimited InMails to recruiters, and access premium content and events.
14 |
15 | **For the U.S. Military Community:** Whether you're active-duty, a veteran, or a military spouse, you're eligible for one year of LinkedIn Premium as part of this program. This includes unlimited access to thousands of hours of courses through LinkedIn Learning.
16 |
17 | **Network and Thrive:** LinkedIn is your gateway to connecting with professionals who share your passions and building relationships with potential employers. Join our dedicated [LinkedIn Group](https://www.linkedin.com/groups/14143071/) to expand your network even further!
18 |
19 | ### [GitHub](https://github.com/)
20 |
21 | **Code Hosting and Collaboration:** GitHub is where the magic of version control and collaboration happens. Here, you and your peers can seamlessly work together on projects from anywhere in the world.
22 |
23 | **Explore Our GitHub Organization:** Dive into our [GitHub organization](https://github.com/Vets-Who-Code) and become an integral part of our vibrant coding community.
24 |
25 | ### [Dev.to](https://dev.to/)
26 |
27 | **The Starting Point for Aspiring Developers:** Are you looking to embark on a new career in development or eager to expand your knowledge as an aspiring developer? Dev.to is your ideal starting point.
28 |
29 | **A Community of Developers:** Dev.to is an online community where developers from diverse backgrounds come together to share their experiences and expertise. It's the perfect hub for anyone interested in software development to connect with like-minded individuals actively shaping the industry.
30 |
31 | **Discover Opportunities:** Explore job listings, engage with recruiters, and connect with companies seeking individuals with your skillset. Stay updated on the latest technologies, gain insights into optimizing your career, and share tips for success.
32 |
33 | **Unleash the Power of Writing:** At VWC, we believe that long-form writing is a powerful tool to showcase your expertise and communicate effectively. Use Dev.to to document valuable information, expand your knowledge, and stand out in the tech industry.
34 |
--------------------------------------------------------------------------------
/modules/code-editor.md:
--------------------------------------------------------------------------------
1 | # 🚀 Mission Control: Code Editor
2 |
3 | Now that you've mastered the command line, it's time to introduce you to your trusty sidekick: the code editor. An Integrated Development Environment (IDE) is your go-to software for writing, debugging, and deploying code. Our favorite is Visual Studio Code (VS Code).
4 |
5 | ## Why Visual Studio Code?
6 |
7 | VS Code is a powerful, open-source editor that offers a wide range of features to streamline your development process:
8 |
9 | - **Lightweight and Fast**: Unlike some bulkier IDEs, VS Code is quick to install and load, making it perfect for both small scripts and large projects.
10 | - **Extensible**: Customize your coding environment with a vast library of extensions available on the [VS Code Marketplace](https://marketplace.visualstudio.com/).
11 | - **Intelligent Code Completion**: Boost your productivity with IntelliSense, which provides smart code suggestions based on your project.
12 | - **Integrated Git**: Manage your source code versioning with ease, directly within the editor.
13 | - **Debugging Tools**: Powerful debugging capabilities help you identify and fix issues efficiently.
14 |
15 | ## Getting Started with Visual Studio Code
16 |
17 | 1. **Download and Install**: Get started by [downloading VS Code](https://code.visualstudio.com/). Follow the installation instructions for your operating system.
18 | 2. **Set Up Your Environment**: Enhance your coding experience with our [VetsWhoCode Extension Pack](https://marketplace.visualstudio.com/items?itemName=VetsWhoCode.vetswhocode-extension-pack). This pack includes essential tools and extensions tailored for our curriculum.
19 | 3. **Show Your Pride**: Install the [Vets Who Code HashFlag Extension](https://marketplace.visualstudio.com/items?itemName=OfficialVetsWhoCode.HashFlag) to proudly display your affiliation in your projects and communications.
20 | 4. **Customize Your Workspace**: Personalize your editor with themes and settings that suit your workflow. Check out the VS Code settings to tweak your environment.
21 | 5. **Explore Extensions**: Browse the marketplace to find additional extensions for specific languages, frameworks, and tools that you use. Popular extensions include Python, Prettier, and ESLint.
22 | 6. **Learn Keyboard Shortcuts**: Mastering keyboard shortcuts can significantly speed up your workflow. VS Code offers a comprehensive list of shortcuts in the [keyboard shortcuts reference](https://code.visualstudio.com/docs/getstarted/keybindings).
23 |
24 | ## Tips for Effective Coding
25 |
26 | - **Keep Your Workspace Organized**: Use VS Code's file explorer and search functionality to keep track of your project files.
27 | - **Take Advantage of Snippets**: Use code snippets to quickly insert common code patterns.
28 | - **Utilize the Terminal**: The integrated terminal allows you to run command-line tasks without leaving the editor.
29 | - **Leverage Version Control**: Regularly commit your changes and push to a remote repository to keep your work backed up and accessible.
30 |
31 | By integrating these practices into your routine, you'll find that your coding sessions become more efficient and enjoyable. Welcome to your new Mission Control!
--------------------------------------------------------------------------------
/tooling-guides/MacOS-Tooling.md:
--------------------------------------------------------------------------------
1 | Certainly! Here is the improved and detailed version of the "MacOS Tooling" section without references to freeCodeCamp:
2 |
3 |
10 |
11 | ## Setting Up Your Development Environment
12 |
13 | ### Install Homebrew
14 |
15 | Homebrew is a package manager that simplifies the installation and management of applications on macOS. To get started, open Terminal.app and run the following command:
16 |
17 | ```bash
18 | /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
19 | ```
20 |
21 | ### Install iTerm2
22 |
23 | iTerm2 is a powerful alternative to the default Terminal.app, providing better features and customization options. Install iTerm2 using Homebrew:
24 |
25 | ```bash
26 | brew install --cask iterm2
27 | ```
28 |
29 | Now you can open iTerm2 from your Applications folder.
30 |
31 | ### Install Visual Studio Code
32 |
33 | Next, let's install the best code editor in the galaxy: Visual Studio Code! Use the following command to install it via Homebrew:
34 |
35 | ```bash
36 | brew install --cask visual-studio-code
37 | ```
38 |
39 | In case you encounter any issues, you can alternatively use:
40 |
41 | ```bash
42 | brew install visual-studio-code
43 | ```
44 |
45 | ### Customize Visual Studio Code
46 |
47 | To make your coding environment more comfortable and productive, check out these two podcast episodes for the best tips and extensions:
48 | - [Why is Everyone Switching to VS Code](https://syntax.fm/show/012/why-is-everyone-switching-to-vs-code)
49 | - [VS Code Round Two](https://syntax.fm/show/048/vs-code-round-two)
50 |
51 | The podcasts are great, but you can also just read the show notes for a quick summary.
52 |
53 | ### Install Essential Extensions
54 |
55 | Enhance your VS Code experience with these essential extensions:
56 |
57 | - **Prettier**: Code formatter.
58 | - **ESLint**: Linting tool for JavaScript.
59 | - **GitLens**: Supercharge the built-in Git capabilities.
60 | - **Bracket Pair Colorizer**: Colorize matching brackets.
61 |
62 | ### Keyboard Shortcuts
63 |
64 | Push yourself to use shortcuts to improve productivity. Here are some great resources for mastering macOS keyboard shortcuts:
65 | - [MacOS Keyboard Shortcuts](https://medium.com/productivity-freak/macos-keyboard-shortcuts-41c8184f65a6)
66 |
67 | Additionally, install CheatSheet.app to see all the shortcuts every app you use has to offer:
68 |
69 | ```bash
70 | brew install --cask cheatsheet
71 | ```
72 |
73 | After installing, hold down the ⌘ key for a bit, and boom! You'll see a list of shortcuts.
74 |
75 | ### Additional Tools
76 |
77 | Consider installing the following tools to further enhance your development environment:
78 |
79 | - **Node.js and npm**: JavaScript runtime and package manager:
80 | ```bash
81 | brew install node
82 | ```
83 | - **Git**: Version control system:
84 | ```bash
85 | brew install git
86 | ```
87 | - **Zsh and Oh My Zsh**: Improved shell and its configuration framework:
88 | ```bash
89 | brew install zsh
90 | sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
91 | ```
92 |
93 | ## Conclusion
94 |
95 | With these tools and tips, you're well on your way to creating a powerful and efficient macOS development environment. Good luck, Mac users, and happy coding! 🚀
--------------------------------------------------------------------------------
/modules/browser-essentials.md:
--------------------------------------------------------------------------------
1 | # 🌐 Browser Essentials
2 |
3 | In the world of web development, your browser is not just a tool for surfing the internet—it's an integral part of your development toolkit. We recommend using both Google Chrome and Microsoft Edge for their powerful developer tools. Eventually, you might find a preference for one, but having both will give you flexibility and a comprehensive set of features.
4 |
5 | ## 🌐 Browser Matters
6 |
7 | ### Google Chrome
8 |
9 | Google Chrome is renowned for its robust developer tools, making it a favorite among web developers. Here’s why you should consider Chrome for your development needs:
10 |
11 | - **Comprehensive DevTools**: Chrome DevTools offer a suite of features for debugging, profiling, and inspecting web applications.
12 | - **Performance Insights**: Easily analyze performance bottlenecks with tools for monitoring network activity, memory usage, and CPU load.
13 | - **Accessibility Testing**: Built-in tools to check and improve the accessibility of your web applications.
14 | - **Wide Extension Support**: Enhance your development workflow with a plethora of extensions available on the Chrome Web Store.
15 |
16 | [Download Google Chrome](https://www.google.com/chrome/) and embark on your web development journey.
17 |
18 | ### Microsoft Edge
19 |
20 | Microsoft Edge, built on the Chromium engine, offers similar capabilities to Chrome but with some unique enhancements. Here’s why Edge is also a great choice for developers:
21 |
22 | - **Powerful DevTools**: Like Chrome, Edge provides a robust set of developer tools for debugging and optimizing your web projects.
23 | - **Integration with Microsoft Services**: Seamlessly integrate with Microsoft’s suite of development tools and services.
24 | - **Security Features**: Benefit from advanced security features that protect your browsing and development environment.
25 | - **Cross-Browser Testing**: Easily test how your web applications perform across different browsers and devices.
26 |
27 | [Download Microsoft Edge](https://www.microsoft.com/edge) and enhance your development toolkit.
28 |
29 | ## Setting Up Your Browser for Development
30 |
31 | 1. **Install Developer Extensions**: Equip your browser with extensions that enhance your development experience. Some popular extensions include:
32 | - **React Developer Tools**: For debugging React applications.
33 | - **Redux DevTools**: For managing and debugging application state.
34 | - **Lighthouse**: For performance, accessibility, and SEO audits.
35 | 2. **Enable Experimental Features**: Both Chrome and Edge offer experimental features that can be enabled via the flags settings. These can provide early access to cutting-edge web technologies.
36 | 3. **Use Built-in DevTools**: Familiarize yourself with the built-in developer tools in both browsers. These tools provide powerful capabilities for inspecting elements, monitoring network requests, and debugging JavaScript.
37 | 4. **Regularly Update Your Browser**: Keep your browsers updated to the latest versions to ensure you have access to the newest features and security patches.
38 |
39 | ## Choosing Your Preferred Browser
40 |
41 | Eventually, you may develop a preference for one browser over the other based on your specific needs and workflow. However, maintaining both browsers will give you the flexibility to test and develop applications that work seamlessly across different environments.
42 |
43 | By utilizing the powerful features of Google Chrome and Microsoft Edge, you can significantly enhance your web development process, ensuring that your applications are optimized, secure, and performant. Happy coding!
--------------------------------------------------------------------------------
/modules/capstone.md:
--------------------------------------------------------------------------------
1 |
8 |
9 | Welcome, to the culmination of your prework journey! It's time to put your newfound skills to the test with a capstone project that allows you to shine and show us what you're made of.
10 |
11 |
12 | ## :dart: The Challenge
13 |
14 | Your mission, should you choose to accept it, is to create a captivating website that introduces yourself to the us. Using the dynamic trio of HTML, CSS, and JavaScript, craft an impressive creation that reflects your personality and aspirations.
15 |
16 | ### Why It Matters
17 |
18 | This project isn't just a checkmark on your journey; it's your chance to dive deep into essential web development technologies. It's your opportunity to apply the concepts you've absorbed during this prework and showcase your creative prowess.
19 |
20 | ### What We're Looking For
21 |
22 | We're not just interested in code; we want to see your creativity and ingenuity shine through your project. Craft a website that not only functions flawlessly but also tells us who you are. Your capstone will become the centerpiece of your application and a topic of discussion during your upcoming interview.
23 |
24 |
25 |
26 | ## :outbox_tray: Delivery Options
27 |
28 | To share your creation with us, you have two options:
29 |
30 | #### 1. Web Deployment
31 |
32 | You can upload your code to one of the following platforms, which will provide a shareable URL for your project:
33 |
34 | - [repl.it](https://replit.com/)
35 | - [codepen](https://codepen.io/)
36 | - [GitHub codespaces](https://github.com/features/codespaces)
37 |
38 | #### 2. Code Repository
39 |
40 | Alternatively, you may choose to use a code repository. In this case, ensure that your README.md document offers clear instructions on running your code and consider including screenshots to illustrate your project's functionality and design.
41 |
42 |
43 | ## :white_check_mark: Ready to Impress?
44 |
45 | 1. Visit the [Vets Who Code application page](https://vetswhocode.io/apply).
46 |
47 | 2. Complete the application form with the following details:
48 |
49 | - **GitHub Account Name:** Provide your GitHub username or handle.
50 |
51 | - **Prework Link:** In the "Prework Link" field, please enter the link to your capstone project's web deployment for preview. This will be the web deployment link from any of the sites mentioned above in [Web Deployment](#1.-web-deployment), or any other platform where your project is live.
52 |
53 | - **Prework Repository:** If you used a code repository for your prework, enter the GitHub link to your prework code repository. If you used platforms like [repl.it](https://replit.com/) or [codepen](https://codepen.io/), provide the respective link here.
54 |
55 | 3. Complete any additional required information on the application form as needed.
56 |
57 | 4. Submit your application.
58 |
59 |
60 | ## :rocket: What's Next?
61 |
62 | Once you've submitted your capstone project through the [Vets Who Code application page](https://vetswhocode.io/apply), our team will review your submission. This is your opportunity to shine and demonstrate the skills you've acquired during this course.
63 |
64 | We wish you the best of luck with your capstone project submission, and we look forward to seeing your work! If you have any questions or encounter any issues during the submission process, don't hesitate to reach out to [hello@vetswhocode.io](mailto:hello@vetswhocode.io) for assistance.
65 |
--------------------------------------------------------------------------------
/modules/html-css-basics.md:
--------------------------------------------------------------------------------
1 | Certainly! Here is the improved and comprehensive module for "HTML & CSS: The Dynamic Duo of Web Creation":
2 |
3 |
10 |
11 | HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the dynamic duo that powers the web. They're like Batman and Robin for websites, and together, they build the online world we know and love. Let's dive into this exciting partnership!
12 |
13 | ## 🎯 Setting Up Your Superhero Headquarters
14 |
15 | 1. **Environment Setup:** To craft HTML and CSS wonders, you need a trusty text editor and a web browser. Choose your favorite text editor – it could be Notepad, Sublime Text, Atom, or even the mighty VS Code. For rapid deployment, try online editors like [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/).
16 |
17 | 2. **Creating an HTML Document:** Open your text editor, create a new file, and give it a `.html` extension. The following snippet is an example of a basic HTML document. This is where your web adventure begins:
18 |
19 | ```html
20 |
21 |
22 |
23 | My First Web Page
24 |
25 |
26 |
Welcome to my website!
27 |
This is my first web page.
28 |
29 |
30 | ```
31 |
32 | 3. **Adding Content to Your Web Universe:** Inside the `` tags, you wield the power to add headings, paragraphs, images, links, and lists. Here are a few examples:
33 |
34 | ```html
35 |
51 | ```
52 |
53 | ## 🎨 Styling Your Webmasterpiece
54 |
55 | 1. **Crafting a CSS Arsenal:** Create a new file with a `.css` extension. In this file, you will define the styles for your HTML document using CSS rules. Here's a glimpse of what you can do with CSS:
56 |
57 | ```css
58 | /* This rule sets the color of all h1 elements to red. */
59 | h1 {
60 | color: red;
61 | }
62 | ```
63 |
64 | 2. **Link the CSS file to the HTML document:** In the head section of your HTML document, you can tell the browser where to find your CSS file by adding a link using the following code:
65 |
66 | ```html
67 |
68 |
69 |
70 |
71 | My First Web Page
72 |
73 |
74 |
Welcome to my website!
75 |
This is my first web page.
76 |
77 |
78 | ```
79 |
80 | 3. **Style the HTML document:** Using CSS, you can change the font, color, background, and layout of your web page. Here are a few examples:
81 |
82 | ```css
83 | body {
84 | font-family: Arial, sans-serif;
85 | background-color: #f2f2f2;
86 | }
87 |
88 | h1 {
89 | color: #333;
90 | font-size: 36px;
91 | }
92 |
93 | p {
94 | color: #666;
95 | font-size: 18px;
96 | }
97 | ```
98 |
99 | These rules change the font family, background color, font size, and text color of different elements on the page.
100 |
101 |
102 |
103 |
104 | **Now, you're ready to create web wonders with HTML and CSS, turning the ordinary into the extraordinary! ✨**
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
8 |
9 | Greetings and a warm welcome to the Vets Who Code (VWC) Prework! We are absolutely delighted that you have chosen to embark on your Software Engineering journey with us.
10 |
11 | This condensed program has been meticulously crafted to acquaint you with the essential tools, technologies, and fundamental concepts that will pave the way for your success in the upcoming VWC course. We highly advise you to diligently progress through each section, as they are thoughtfully structured to build upon one another.
12 |
13 | This prework will take approximately 8 hours to complete.
14 |
15 | ## 📚 Modules
16 |
17 | - [Command Line Basics: Your Gateway to Web Development Magic](modules/command-line-basics.md)
18 |
19 | - [Mission Control: Code Editor](modules/code-editor.md#🚀-mission-control-code-editor)
20 |
21 | - [Browser Essentials for Developers](modules/browser-essentials.md#🌐-browser-essentials)
22 |
23 | - [Git and GitHub: Deployment and Collaboration Hub](modules/github-basics.md)
24 |
25 | - [HTML & CSS: The Dynamic Duo of Web Creation](./modules/html-css-basics.md#html--css-the-dynamic-duo-of-web-creation)
26 | - [Setting Up Your Superhero Headquarters](./modules/html-css-basics.md#🎯-setting-up-your-superhero-headquarters)
27 | - [Styling Your Web Masterpiece](./modules/html-css-basics.md#🎨-styling-your-web-masterpiece)
28 |
29 | - [JavaScript: Unlocking Web Interactivity](modules/javascript-basics.md#javascript-your-gateway-to-web-interactivity)
30 | - [Preparing Your Toolkit](modules/javascript-basics.md#🚀-preparing-your-toolkit)
31 | - [Your First JavaScript Code](modules/javascript-basics.md#✨-your-first-javascript-code)
32 | - [Learning the Basics](modules/javascript-basics.md#📚-mastering-the-basics)
33 | - [Enhancing Your Web Pages](modules/javascript-basics.md#🚧-enhancing-your-web-pages)
34 |
35 | - [Capstone: Unleash Your Web Development Skills](modules/capstone.md)
36 | - [The Challenge](modules/capstone.md#🎯-the-challenge)
37 | - [Delivery Options](modules/capstone.md#📤-delivery-options)
38 | - [Ready to Impress?](modules/capstone.md#✅-ready-to-impress)
39 | - [What's Next?](modules/capstone.md#🚀-whats-next)
40 |
41 |
42 |
43 | ## 📝 Instructions for Success
44 |
45 | To make the most of your learning journey, follow these steps:
46 |
47 | 1. [Complete Account Setup](account-set-up.md)
48 |
49 | 2. [Review the Modules](#-modules)
50 |
51 | 3. [Complete the Capstone](modules/capstone.md)
52 |
53 | 4. [Apply to the Program](modules/capstone.md#✅-ready-to-impress)
54 |
55 | 5. [Review Additional Resources](resources.md) _(Optional but highly encouraged)_
56 |
57 | If you have any questions or encounter any issues during the submission process, don't hesitate to reach out to [hello@vetswhocode.io](mailto:hello@vetswhocode.io) for assistance.
58 |
59 |
60 |
61 | ## 📈 Your Journey Begins Now!
62 |
63 | Dive into these essential platforms, connect with the community, and let your software engineering adventure unfold! Embrace the journey of learning and discovery in JavaScript, TypeScript, React, and Next.js. Each platform offers a unique landscape filled with endless opportunities for innovation and creativity. Don't just write code; weave stories through it, solving real-world problems and making an impact.
64 |
65 | Engage with the vibrant community of developers, where collaboration sparks breakthroughs and shared knowledge fuels growth. Remember, every challenge you overcome not only enhances your skills but also brings you one step closer to your ambitious goals with Vets Who Code. This is more than a learning experience; it's a path to transforming your passion into tangible success and making a difference in the lives of many. So, gear up, stay curious, and let your journey in software engineering be a beacon of inspiration and change!
66 |
--------------------------------------------------------------------------------
/tooling-guides/Windows-Tooling.md:
--------------------------------------------------------------------------------
1 | Certainly! Here is the improved version of the "Windows Tooling" section focused exclusively on setting up a development environment on Windows:
2 |
3 |
10 |
11 | Windows has significantly improved for web development, and with the right setup, you can create a powerful and efficient development environment.
12 |
13 | ## Setting Up Your Development Environment
14 |
15 | ### Install Windows Subsystem for Linux (WSL)
16 |
17 | WSL allows you to run a Linux distribution within Windows, providing access to the same tools and terminal environment as Mac and Linux users. Follow these steps to set up WSL:
18 |
19 | 1. **Install WSL:** Open PowerShell as Administrator and run:
20 | ```bash
21 | wsl --install
22 | ```
23 | For more detailed instructions, visit the [WSL installation guide](https://docs.microsoft.com/en-us/windows/wsl/install).
24 |
25 | 2. **Choose a Linux Distribution:** Once WSL is installed, choose a Linux distribution to install (Ubuntu is recommended for beginners).
26 |
27 | 3. **Initialize Your Distribution:** Open your newly installed Linux distribution from the Start menu and complete the initial setup.
28 |
29 | 4. **Update and Upgrade:** Run the following commands to update and upgrade your distribution:
30 | ```bash
31 | sudo apt update
32 | sudo apt upgrade
33 | ```
34 |
35 | ### Install Visual Studio Code
36 |
37 | Visual Studio Code (VSCode) is a powerful, open-source code editor available for Windows, Mac, and Linux. Install it using the following command:
38 |
39 | ```bash
40 | winget install --id Microsoft.VisualStudioCode
41 | ```
42 |
43 | Or download it directly from the [Visual Studio Code website](https://code.visualstudio.com/Download).
44 |
45 | ### Configure VSCode for WSL
46 |
47 | 1. **Open VSCode:** Launch Visual Studio Code.
48 | 2. **Open Terminal:** Press `Ctrl + ` to open the terminal.
49 | 3. **Open Command Palette:** Press `Ctrl + Shift + P` to open the command palette.
50 | 4. **Select Default Shell:** Type `Select Default Shell` and choose `WSL Bash` from the options.
51 | 5. **Open New Terminal:** Click on the `+` icon in the terminal window to open a new WSL Bash terminal.
52 |
53 | ### Install Essential Extensions
54 |
55 | Enhance your VSCode experience with these essential extensions:
56 |
57 | - **Prettier**: Code formatter.
58 | - **ESLint**: Linting tool for JavaScript.
59 | - **GitLens**: Supercharge the built-in Git capabilities.
60 | - **Bracket Pair Colorizer**: Colorize matching brackets.
61 |
62 | ### Keyboard Shortcuts
63 |
64 | Improve your productivity by mastering keyboard shortcuts. Here are some great resources for Windows shortcuts:
65 |
66 | - [Useful Keyboard Shortcuts](https://www.reddit.com/r/AskReddit/comments/633ok7/what_are_some_useful_keyboard_shortcuts_that/)
67 |
68 | Additionally, you can install CheatSheet for Windows alternatives to see all the shortcuts available in each application.
69 |
70 | ### Additional Tools
71 |
72 | Consider installing the following tools to further enhance your development environment:
73 |
74 | - **Node.js and npm:** JavaScript runtime and package manager:
75 | ```bash
76 | winget install OpenJS.NodeJS
77 | ```
78 | - **Git:** Version control system:
79 | ```bash
80 | winget install Git.Git
81 | ```
82 | - **Zsh and Oh My Zsh:** Improved shell and its configuration framework (optional for advanced users):
83 | ```bash
84 | winget install Zsh
85 | sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
86 | ```
87 |
88 | ### Additional Resources
89 |
90 | To make your code editor more comfortable, check out these two podcast episodes for the best tips and extensions:
91 | - [Why is Everyone Switching to VS Code](https://syntax.fm/show/012/why-is-everyone-switching-to-vs-code)
92 | - [VS Code Round Two](https://syntax.fm/show/048/vs-code-round-two)
93 |
94 | The podcasts are great, but you can also read the show notes for a quick summary.
95 |
96 | ## Conclusion
97 |
98 | With these tools and tips, you're well on your way to creating a powerful and efficient Windows development environment. Good luck, and happy coding! 🚀
--------------------------------------------------------------------------------
/modules/github-basics.md:
--------------------------------------------------------------------------------
1 | # 🐙 Git and GitHub: Deployment and Collaboration Hub
2 |
3 | Git and GitHub are essential for collaboration and version control. They empower developers to work together on projects, track changes, and deploy code seamlessly. Here's how to get started:
4 |
5 | ## 🐙 Git and GitHub: The Developer's Playground
6 |
7 | ### Getting Started with Git
8 |
9 | 1. **Install Git:** Download and install Git for Windows from the official [Git website](https://git-scm.com/).
10 |
11 | 2. **Configure Git:** Open Git Bash and set your name and email using these commands:
12 |
13 | ```bash
14 | git config --global user.name "Your Name"
15 | git config --global user.email "youremail@example.com"
16 | ```
17 |
18 | 3. **Create the Repository:** Start by creating a new repository on GitHub. Click "New" and follow the prompts.
19 |
20 | 
21 |
22 | 4. **Clone the Repository:** Copy the repository URL from the "Code" button and follow these steps to clone it to your local machine:
23 | - Open your terminal or command prompt.
24 | - Run:
25 | ```bash
26 | git clone URL-Goes-Here
27 | ```
28 |
29 | 5. **Start Coding:** Open the cloned repository in your favorite code editor, such as Visual Studio Code. It's just like working with a regular folder. Make changes to files, create or delete folders, and let your creativity flow.
30 |
31 | 6. **Stage Your Changes:** You need to let `git` know what changes you made. To add your changes to the staging area, type:
32 | ```bash
33 | git add
34 | ```
35 | You can use `git add .` to add all the changes. To check what changes are staged, run:
36 | ```bash
37 | git status
38 | ```
39 | In the output, the file names in green are the staged changes.
40 |
41 |
42 |
43 | 7. **Commit Changes:** Once you have added your changes to the staging area, commit them by typing:
44 | ```bash
45 | git commit -m ""
46 | ```
47 | Use a meaningful message describing what changes were made.
48 |
49 | 8. **Push Changes:** Upload your changes to the GitHub repository by typing:
50 | ```bash
51 | git push
52 | ```
53 | If your branch isn't set up, check the output in the command line. It may have a message like:
54 | ```bash
55 | git push --set-upstream origin
56 | ```
57 | Once you've set your upstream, you can use `git push` for all future uploads to this branch.
58 |
59 | 9. **Pull Changes:** To update your local machine with changes made elsewhere, run:
60 | ```bash
61 | git pull
62 | ```
63 |
64 | 10. **Create a Pull Request:** If you want to suggest changes to someone else's repository, create a pull request via the "Pull request" button on their repository page.
65 |
66 | 11. **Merge Your Changes:** The repository owner can merge your changes by clicking the "Merge pull request" button.
67 |
68 | ## Additional GitHub Features
69 |
70 | ### Branching Strategy
71 |
72 | Branching allows you to work on different features or fixes simultaneously. Here’s a basic workflow:
73 | - **Create a New Branch:**
74 | ```bash
75 | git checkout -b
76 | ```
77 | - **Switch to an Existing Branch:**
78 | ```bash
79 | git checkout
80 | ```
81 | - **Merge a Branch:** First, switch to the branch you want to merge into (usually `main` or `master`), then:
82 | ```bash
83 | git merge
84 | ```
85 |
86 | ### GitHub Pages
87 |
88 | Deploy your static websites directly from your GitHub repository:
89 | - **Enable GitHub Pages:** Go to the repository settings and select the source branch for GitHub Pages.
90 | - **Push Your Website Code:** Any changes pushed to the source branch will automatically be deployed.
91 |
92 | ### GitHub Actions
93 |
94 | Automate your workflow with GitHub Actions:
95 | - **Create a Workflow:** Define your CI/CD pipeline in a `.github/workflows` directory within your repository.
96 | - **Automate Tasks:** From running tests to deploying code, GitHub Actions can handle it.
97 |
98 | ### Collaborating with Teams
99 |
100 | - **Invite Collaborators:** Add team members to your repository for seamless collaboration.
101 | - **Code Reviews:** Use pull requests for code reviews and feedback.
--------------------------------------------------------------------------------
/modules/javascript-basics.md:
--------------------------------------------------------------------------------
1 |
8 |
9 | JavaScript (JS) is a powerful scripting language that breathes life into websites, making them interactive and dynamic. Let's explore this fascinating world!
10 |
11 | ## 🚀 Preparing Your Toolkit
12 |
13 | Before we embark on our JavaScript journey, make sure you have the following tools:
14 |
15 | 1. **Text Editor:** Think of it as your coding canvas. Choose one like Visual Studio Code or Sublime Text.
16 | 2. **Web Browser:** Your window into the web. Popular browsers like Chrome, Firefox, or Edge will be your stage.
17 |
18 | ## ✨ Your First JavaScript Code
19 |
20 | 1. **Create an HTML File:** Fire up your text editor, create a new file, and save it with a `.html` extension. This is where our coding adventure begins:
21 |
22 | ```html
23 |
24 |
25 |
26 | My First JavaScript Code
27 |
28 |
29 |
30 |
31 |
36 |
37 |
38 | ```
39 |
40 | 2. **Adding JavaScript:** Within the `
186 |
187 |
188 |
5 |
6 | 
4 |
5 | 
41 |
42 |
43 | Visit Example
44 |
45 |
46 | 