Code Pathway by WriteCode

Our 20-Month Programming Journey - Starting May 6th, 2024!

Live Sessions at 9PM Nicaraguan Time via Zoom

Sessions will be recorded for later playback.

🗓 Schedule: 5 days a week

💻 Requirements:

PC: Basic Laptop or Desktop with at least:
For Windows 10: 1 GHz processor, 2 GB RAM (4 GB recommended), 20 GB available hard disk space, DirectX 9 graphics device with WDDM 1.0 or higher driver.
For Ubuntu: 2 GHz dual-core processor, 2 GB RAM (4 GB recommended), 25 GB of free hard drive space.

If your PC/Laptop is newer than 2010, the requirements should be met.

Internet: Minimum 3 Mbps connection for smooth video streaming and uploads.
💵 Payment: $20/month via Bank Transfer/Deposit

English proficiency minimum 60%

👩‍💻 Curriculum Progression:

Basics: HTML, CSS
JavaScript Fundamentals
Frontend Development: React
Full Stack Mastery: MERN Stack - Comprehensive development with MongoDB (database), Express.js (backend framework), React (frontend library), and Node.js (backend runtime environment)
Essential Tools: GitHub, Version Control
Core Concepts: Algorithms, Data Structures in JavaScript
Professional Skills: Building a Portfolio, Job Interview Preparation
Career Development: Remote Work Dynamics, Job Searching Strategies, Getting Paid
Beyond Coding: Reading Documentation, Minor React Native Projects
🛠 Hands-On Learning:

Collaborative Projects: Engage in pair programming for all weekly projects, fostering teamwork and communication skills.
Real-World Practices: Use branches in version control to manage changes, preparing for professional development workflows.
🌟 Start your coding journey in an inclusive environment that values diversity. Gain practical skills through collaborative projects and real-world practices, transforming your career in the tech industry. No matter your gender, you belong in tech.

Dynamic Theme Switcher
Concept:

The trick uses JavaScript to toggle a class on the body tag of your HTML document.
Based on the class applied, CSS styles will change, allowing for different themes (like light and dark modes).

Implementation:

HTML Setup:
A button or toggle switch in your HTML to switch themes.

html

Switch Theme

CSS Setup:

Define default styles and alternative styles for the dark theme, for example.

css

body {
background-color: white;
color: black;
/* other default light theme styles */
}

dark-theme {
background-color: black;
color: white;
/* other dark theme styles */
}

JavaScript Magic:

Add an event listener to the button that toggles a class on the body tag.

javascript

document.getElementById('themeToggle').addEventListener('click', function() {
document.body.classList.toggle('dark-theme');
});

How It Works:

When a user clicks the button, the JavaScript toggles the dark-theme class on the body.
The CSS for .dark-theme overrides the default styles, effectively switching the theme.
This can be expanded to include multiple themes, not just light and dark.

Why It's Cool:

Enhances User Experience: Allows users to choose a theme they are comfortable with.
Simple and Effective: Easy to implement but significantly improves the interface.
Highly Customizable: You can define various themes and easily expand the functionality.

Conditional Rendering with Custom Hooks in React

This trick involves creating a custom hook in React that facilitates conditional rendering based on screen size. It's an excellent demonstration of how React hooks can be used to create responsive design elements in your application.
Custom Hook: useMediaQuery

Create the Hook:
a. This hook uses window.matchMedia to check if the current screen size matches a specified media query.
b. It returns a boolean value indicating whether the media query is matched.

import { useState, useEffect } from 'react';

function useMediaQuery(query) {
const [matches, setMatches] = useState(window.matchMedia(query).matches);

useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => setMatches(media.matches);
media.addListener(listener);
return () => media.removeListener(listener);
}, [matches, query]);

return matches;
}

Implement in a Component:
a. Use this hook to conditionally render components based on screen size.
b. For example, render different layouts for mobile and desktop views.

function ResponsiveComponent() {
const isMobile = useMediaQuery('(max-width: 600px)');

return (

{isMobile ? : }

);
}

Why It's Cool:

Responsive Design Made Easy: This hook simplifies the implementation of responsive design in React components.

Reusable and Customizable: The useMediaQuery hook can be reused across different components and customized with different media queries.

Improves User Experience: It helps in creating a better user experience by rendering components that are appropriate for the user's screen size.

Real-World Example: E-Commerce Website

Scenario: Different Navigation Menus for Mobile and Desktop

In an e-commerce site, the navigation menu is crucial. You might want a full-featured menu for desktop users, but a simpler, more compact menu for mobile users.
Using the useMediaQuery hook it listens to screen size changes and returns a boolean indicating whether the current screen matches the specified media query.