diff --git a/translations/pa/.co-op-translator.json b/translations/pa/.co-op-translator.json index 453b66af2..ac60b8374 100644 --- a/translations/pa/.co-op-translator.json +++ b/translations/pa/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-03T16:13:57+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T12:30:42+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "pa" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:49:30+00:00", + "translation_date": "2026-03-06T12:42:53+00:00", "source_file": "AGENTS.md", "language_code": "pa" }, @@ -516,8 +516,8 @@ "language_code": "pa" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:44:35+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T12:24:47+00:00", "source_file": "README.md", "language_code": "pa" }, diff --git a/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 3b5abe8ab..48fbfd1b8 100644 --- a/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,125 +1,332 @@ -# ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਆਧੁਨਿਕ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਦਾ ਪਰਿਚਯ +# ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਆਧੁਨਿਕ ਡਿਵੈਲਪਰ ਟੂਲਾਂ ਦਾ ਪਰਿਚਇ + +ਹੈਲੋ, ਭਵਿੱਖ ਦਾ ਡਿਵੈਲਪਰ! 👋 ਕੀ ਮੈਂ ਤੁਹਾਨੂੰ ਕੁਝ ਐਸਾ ਦੱਸਾਂ ਜੋ ਹਰ ਰੋਜ਼ ਮੈਨੂੰ ਸਿਰਮੌਰ ਕਰਦਾ ਹੈ? ਤੁਸੀਂ ਇਹ ਜਾਣਨ ਵਾਲੇ ਹੋ ਕਿ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਿਰਫ ਕੰਪਿਊਟਰਾਂ ਬਾਰੇ ਹੀ ਨਹੀਂ ਹੈ – ਇਹ ਆਪਣੇ ਸਭ ਤੋਂ ਜ਼ਬਰਦਸਤ ਖਿਆਲਾਂ ਨੂੰ ਜੀਵੰਤ ਕਰਨ ਵਾਸਤੇ ਅਸਲ ਦੀਆਂ ਸੂਪਰਪਾਵਰ ਹੋਣ ਬਾਰੇ ਹੈ! -ਹੈਲੋ, ਭਵਿੱਖ ਦੇ ਡਿਵੈਲਪਰ! 👋 ਕੀ ਮੈਂ ਤੁਹਾਨੂੰ ਕੁਝ ਦੱਸ ਸਕਦਾ ਹਾਂ ਜੋ ਹਰ ਰੋਜ਼ ਮੈਨੂੰ ਰੋਮਾਂਚਿਤ ਕਰਦਾ ਹੈ? ਤੁਸੀਂ ਜਲਦੀ ਹੀ ਪਤਾ ਲਗਾਉਣ ਵਾਲੇ ਹੋ ਕਿ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਿਰਫ ਕੰਪਿਊਟਰਾਂ ਬਾਰੇ ਨਹੀਂ ਹੈ - ਇਹ ਤੁਹਾਡੇ ਸਭ ਤੋਂ ਜੰਗਲੀ ਵਿਚਾਰਾਂ ਨੂੰ ਹਕੀਕਤ ਵਿੱਚ ਬਦਲਣ ਲਈ ਅਸਲ ਤਾਕਤਾਂ ਬਾਰੇ ਹੈ! +ਤੁਹਾਨੂੰ ਉਹ ਲਹਜ਼ਾ ਪਤਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੀ ਮਨਪਸੰਦ ਐਪ ਵਰਤ ਰਹੇ ਹੋ ਅਤੇ ਸਭ ਕੁਝ ਬਿਲਕੁਲ ਸਹੀ ਢੰਗ ਨਾਲ ਕਲਿੱਕ ਹੋ ਜਾਂਦਾ ਹੈ? ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਬਟਨ ਨੂੰ ਟੈਪ ਕਰਦੇ ਹੋ ਅਤੇ ਕੋਈ ਜਾਦੂਈ ਗੱਲ ਹੁੰਦੀ ਹੈ ਜਿਸ ਨੂੰ ਦੇਖ ਕੇ ਤੁਸੀਂ ਕਹਿੰਦੇ ਹੋ "ਵਾਹ, ਉਹਨਾਂ ਨੇ ਇਹ ਕਿਵੇਂ ਕੀਤਾ?" ਖੈਰ, ਕੋਈ ਇੰਝ ਜਿਹਾ ਹੀ ਸੀ – ਸ਼ਾਇਦ ਆਪਣੀ ਮਨਪਸੰਦ ਕੌਫੀ ਸ਼ਾਪ ’ਚ 2 ਵਜੇ ਤੀਜੀ ਐਸਪ੍ਰੈੱਸੋ ਪੀ ਰਹੇ ਹੋਂਦਿਆਂ – ਜਿਸਨੇ ਉਕੋਡ ਕੀਤਾ ਜੋ ਉਹ ਜਾਦੂ ਪੈਦਾ ਕਰਦਾ ਹੈ। ਅਤੇ ਇਹ ਗੱਲ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਦੇਵੇਗੀ: ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਸਮਝੋਂਗੇ ਕਿ ਉਹਨਾਂ ਨੇ ਇਹ ਕਿਵੇਂ ਕੀਤਾ, ਸਾਥ ਹੀ ਤੁਸੀਂ ਖੁਦ ਇਸਨੂੰ ਅਜ਼ਮਾਉਣ ਲਈ ਉਤਸ਼ੁਕ ਹੋ ਜਾਉਗੇ! -ਤੁਹਾਨੂੰ ਉਹ ਪਲ ਯਾਦ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੀ ਮਨਪਸੰਦ ਐਪ ਵਰਤ ਰਹੇ ਹੋ ਅਤੇ ਸਭ ਕੁਝ ਬਿਲਕੁਲ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ? ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਨੂੰ ਦਬਾਉਂਦੇ ਹੋ ਅਤੇ ਕੁਝ ਬਿਲਕੁਲ ਜਾਦੂਈ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ "ਵਾਹ, ਉਹਨਾਂ ਨੇ ਇਹ ਕਿਵੇਂ ਕੀਤਾ?" ਕਹਿਣ ਲਈ ਮਜਬੂਰ ਕਰਦਾ ਹੈ। ਖੈਰ, ਕੋਈ ਤੁਹਾਡੇ ਵਰਗਾ - ਸ਼ਾਇਦ ਰਾਤ ਦੇ 2 ਵਜੇ ਆਪਣੇ ਮਨਪਸੰਦ ਕਾਫੀ ਸ਼ਾਪ ਵਿੱਚ ਬੈਠਾ ਹੋਵੇ - ਉਸ ਜਾਦੂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਕੋਡ ਲਿਖਿਆ। ਅਤੇ ਇਹ ਹੈ ਜੋ ਤੁਹਾਡੇ ਮਨ ਨੂੰ ਉਡਾ ਦੇਵੇਗਾ: ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਿਰਫ ਸਮਝ ਨਹੀਂ ਪਾਵੋਗੇ ਕਿ ਉਹਨਾਂ ਨੇ ਇਹ ਕਿਵੇਂ ਕੀਤਾ, ਪਰ ਤੁਸੀਂ ਖੁਦ ਇਸਨੂੰ ਅਜ਼ਮਾਉਣ ਲਈ ਬੇਚੈਨ ਹੋਵੋਗੇ! +ਸुनੋ, ਮੈਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਝ ਹੈ ਕਿ ਹੁਣ ਪ੍ਰੋਗਰਾਮਿੰਗ ਤੁਹਾਨੂੰ ਭਿਆਨਕ ਲੱਗ ਸਕਦੀ ਹੈ। ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰੀ ਸ਼ੁਰੂ ਕੀਤਾ ਸੀ, ਮੈਨੂੰ ਅਸਲ ਵਿੱਚ ਲੱਗਦਾ ਸੀ ਕਿ ਤੁਹਾਨੂੰ ਕੋਈ ਗਣਿਤ ਦਾ ਜਾਦੂਗਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਤੁਸੀਂ ਪੰਜ ਸਾਲ ਦੀ ਉਮਰ ਤੋਂ ਕੋਡ ਕਰ ਰਹੇ ਹੋ। ਪਰ ਇਹ ਗੱਲ ਜੋ ਮੇਰੀ ਸੋਚ ਬਦਲ ਦਿੰਦੀ ਹੈ: ਪ੍ਰੋਗਰਾਮਿੰਗ ਬਿਲਕੁਲ ਵੱਖ-ਵੱਖ ਭਾਸ਼ਾ ਵਿੱਚ ਗੱਲਾਂ ਕਰਨ ਵਾਂਗ ਹੈ। ਤੁਸੀਂ "ਹੈਲੋ" ਅਤੇ "ਥੈਂਕ ਯੂ" ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਫਿਰ ਕੌਫੀ ਮੰਗਦੇ ਹੋ, ਅਤੇ ਜਲਦੀ ਹੀ ਤੂੰ ਗੰਭੀਰ ਦਰਸ਼ਨਿਕ ਚਰਚਾ ਕਰਦੇ ਹੋ! ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਤੁਸੀਂ ਕੰਪਿਊਟਰ ਨਾਲ ਗੱਲ ਕਰ ਰਹੇ ਹੋ, ਅਤੇ ਸਚ ਪੁੱਛੋ ਤਾਂ? ਉਹ ਸਭ ਤੋਂ ਧੀਰਜ ਵਾਲੇ ਗੱਲਬਾਤ ਕਰਤਾ ਹਨ ਜੋ ਤੁਸੀਂ ਕਦੇ ਵੱਖਰੀ ਦੇਖੋਗੇ – ਉਹ ਤੁਹਾਡੇ ਗਲਤੀਆਂ ਦਾ ਕਦੇ ਅੰਦਾਜ਼ਾ ਨਹੀਂ ਲਗਾਉਂਦੇ ਅਤੇ ਹਮੇਸ਼ਾ ਓਹ ਪੁੜਕਣ ਲਈ ਤੇਯਾਰ ਹੁੰਦੇ ਹਨ! -ਵੇਖੋ, ਜੇ ਤੁਹਾਨੂੰ ਹੁਣ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਡਰਾਉਣ ਵਾਲੀ ਲੱਗਦੀ ਹੈ ਤਾਂ ਮੈਂ ਇਸਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਝਦਾ ਹਾਂ। ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰ ਸ਼ੁਰੂ ਕੀਤਾ ਸੀ, ਮੈਂ ਸੱਚਮੁੱਚ ਸੋਚਿਆ ਕਿ ਤੁਹਾਨੂੰ ਕਿਸੇ ਕਿਸਮ ਦੇ ਗਣਿਤ ਦੇ ਜ਼ਹਾਨੀ ਜਾਂ ਪੰਜ ਸਾਲ ਦੀ ਉਮਰ ਤੋਂ ਕੋਡਿੰਗ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਪਰ ਇਹ ਹੈ ਜੋ ਮੇਰੇ ਨਜ਼ਰੀਏ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੰਦਾ ਹੈ: ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਬਿਲਕੁਲ ਇੱਕ ਨਵੀਂ ਭਾਸ਼ਾ ਵਿੱਚ ਗੱਲਬਾਤ ਕਰਨਾ ਸਿੱਖਣ ਵਰਗਾ ਹੈ। ਤੁਸੀਂ "ਹੈਲੋ" ਅਤੇ "ਧੰਨਵਾਦ" ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਫਿਰ ਕਾਫੀ ਮੰਗਣ ਲਈ ਕੰਮ ਕਰਦੇ ਹੋ, ਅਤੇ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ, ਤੁਸੀਂ ਡੂੰਘੀਆਂ ਦਾਰਸ਼ਨਿਕ ਚਰਚਾਵਾਂ ਕਰ ਰਹੇ ਹੋ! ਇਸ ਦੇ ਬਦਲੇ ਵਿੱਚ, ਤੁਸੀਂ ਕੰਪਿਊਟਰਾਂ ਨਾਲ ਗੱਲਬਾਤ ਕਰ ਰਹੇ ਹੋ, ਅਤੇ ਸੱਚਮੁੱਚ? ਉਹ ਸਭ ਤੋਂ ਧੀਰਜਵਾਨ ਗੱਲਬਾਤ ਸਾਥੀ ਹਨ ਜੋ ਤੁਸੀਂ ਕਦੇ ਵੀ ਮਿਲੇ ਹੋਵੋਗੇ - ਉਹ ਕਦੇ ਵੀ ਤੁਹਾਡੇ ਗਲਤੀਆਂ ਦਾ ਨਿਰਣੇ ਨਹੀਂ ਕਰਦੇ ਅਤੇ ਉਹ ਹਮੇਸ਼ਾ ਮੁੜ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਲਈ ਉਤਸੁਕ ਰਹਿੰਦੇ ਹਨ! - -ਅੱਜ, ਅਸੀਂ ਉਹ ਸ਼ਾਨਦਾਰ ਟੂਲਜ਼ ਦੀ ਖੋਜ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਆਧੁਨਿਕ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਨੂੰ ਸਿਰਫ ਸੰਭਵ ਹੀ ਨਹੀਂ ਬਲਕਿ ਗੰਭੀਰ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹਨ। ਮੈਂ ਉਹੀ ਸੰਪਾਦਕਾਂ, ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਵਰਕਫਲੋਜ਼ ਬਾਰੇ ਗੱਲ ਕਰ ਰਿਹਾ ਹਾਂ ਜੋ Netflix, Spotify, ਅਤੇ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਇੰਡੀ ਐਪ ਸਟੂਡੀਓ ਦੇ ਡਿਵੈਲਪਰ ਹਰ ਰੋਜ਼ ਵਰਤਦੇ ਹਨ। ਅਤੇ ਇਹ ਹੈ ਉਹ ਹਿੱਸਾ ਜੋ ਤੁਹਾਨੂੰ ਖੁਸ਼ੀ ਨਾਲ ਨੱਚਣ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ: ਇਹਨਾਂ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਪੇਸ਼ੇਵਰ-ਗਰੇਡ, ਉਦਯੋਗ-ਮਿਆਰੀ ਟੂਲਜ਼ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੁਫ਼ਤ ਹਨ! +ਅੱਜ, ਅਸੀਂ ਉਹ ਸ਼ਾਨਦਾਰ ਟੂਲਾਂ ਦਾ ਪਤਾ ਲਗਾਣ ਜਾ ਰਹੇ ਹਾਂ ਜਿਹੜੇ ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਨੂੰ ਨਾ ਸਿਰਫ ਸੰਭਵ ਬਣਾਉਂਦੇ ਹਨ, ਬਲਕਿ ਬੜੀ ਖੁਸ਼ੀਦਾਇਕ ਬਣਾਉਂਦੇ ਹਨ। ਮੈਂ ਉਹੀ ਠੀਕ ਸੋਫਟਵੇਅਰ ਐਡੀਟਰ, ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਵਰਕਫਲੋਜ਼ ਦੀ ਗੱਲ ਕਰ ਰਿਹਾ ਹਾਂ ਜੋ Netflix, Spotify ਅਤੇ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਇੰਡੀ ਐਪ ਸਟੂਡਿਓ ਵਿੱਚ ਡਿਵੈਲਪਰ ਹਰੇਕ ਦਿਨ ਵਰਤਦੇ ਹਨ। ਅਤੇ ਇਹ ਗੱਲ ਤੁਹਾਨੂੰ ਖੁਸ਼ ਕਰ ਦੇਵੇਗੀ: ਜਿਆਦਾਤਰ ਇਹ ਪੇਸ਼ਾਵਰ ਦਰਜੇ ਦੇ, ਉਦਯੋਗ ਮਿਆਰੀ ਟੂਲ ਬਿਲਕੁਲ ਮੁਫ਼ਤ ਹਨ! ![Intro Programming](../../../../translated_images/pa/webdev101-programming.d6e3f98e61ac4bff.webp) -> ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਦੁਆਰਾ +> ਸਕੇਚਨੋਟ by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title ਤੁਹਾਡਾ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦਾ ਸਫਰ ਅੱਜ + section ਖੋਜੋ + ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਕੀ ਹੈ: 5: You + ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ: 4: You + ਟੂਲਜ਼ ਦਾ ਜਾਇਜ਼ਾ: 5: You + section ਖੋਜ ਕਰੋ + ਕੋਡ ਐਡੀਟਰਸ: 4: You + ਬ੍ਰਾਉਜ਼ਰ ਅਤੇ ਡੈਵਟੂਲਜ਼: 5: You + ਕਮਾਂਡ ਲਾਈਨ: 3: You + section ਅਭਿਆਸ + ਭਾਸ਼ਾ ਡਿਟੈਕਟਿਵ: 4: You + ਟੂਲ ਐਕਸਪਲੋਰੇਸ਼ਨ: 5: You + ਕਮਿਊਨਿਟੀ ਕਨੈਕਸ਼ਨ: 5: You ``` +## ਆਓ ਵੇਖੀਏ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਕੀ ਜਾਣਦੇ ਹੋ! + +ਮਜ਼ੇਦਾਰ ਚੀਜ਼ਾਂ ਵਿੱਚ ਦਾਖਲ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ, ਮੈਂ ਦਿਲਚਸਪੀ ਰੱਖਦਾ ਹਾਂ – ਇਸ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਦੁਨੀਆ ਬਾਰੇ ਤੁਸੀਂ ਪਹਿਲਾਂ ਕੀ ਜਾਣਦੇ ਹੋ? ਤੇ ਵੇਖੋ, ਜੇ ਤੁਸੀਂ ਇਹ ਸવાલ ਵੇਖ ਕੇ ਸੋਚ ਰਹੇ ਹੋ "ਮੈਨੂੰ ਇਹ ਸਭ ਬਾਰੇ ਕੋਈ ਖਾਸ ਸਮਝ ਨਹੀਂ," ਤਾਂ ਇਹ ਨਾ ਸਿਰਫ ਠੀਕ ਹੈ, ਬਲਕਿ ਬਹੁਤ ਵਧੀਆ ਹੈ! ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਠੀਕ ਜਗ੍ਹਾ ਤੇ ਹੋ। ਇਸ ਕਵਿਜ਼ ਨੂੰ ਵਰਕਆਉਟ ਤੋਂ ਪਹਿਲਾਂ ਸਟਰੇਚਿੰਗ ਵਾਂਗ ਸਮਝੋ – ਅਸੀਂ ਆਪਣੇ ਦਿਮਾਗੀ ਮਾਸਪੇਸ਼ੀਆਂ ਨੂੰ ਗਰਮ ਕਰਨ ਵਾਲੇ ਹਾਂ! + +[ਪ्री-ਪਾਠ ਕਵਿਜ਼ ਲਓ](https://ff-quizzes.netlify.app/web/) + + +## ਸਾਥੀ ਮੁਹਿੰਮ ਜਿਸ ‘ਤੇ ਅਸੀਂ ਇਕੱਠੇ ਨਿਕਲ ਰਹੇ ਹਾਂ + +ਠੀਕ ਹੈ, ਮੈਂ ਸੱਚਮੁੱਚ ਇਸ ਗੱਲ ਨਾਲ ਬੜੀ ਉਤਸ਼ਾਹਿਤ ਹਾਂ ਕਿ ਅਸੀਂ ਅੱਜ ਕੀ ਖੋਜ ਕਰਨ ਵਾਲੇ ਹਾਂ! ਵਿਚਾਰ ਕਰੋ, ਕਦੋਂ ਤੁਸੀਂ ਕਈ ਗੱਲਾਂ ਦੇ ਮਤਲਬ ਨੂੰ ਸਮਝੋਗੇ ਤਾਂ ਮੈਂ ਤੁਹਾਡੇ ਚਿਹਰੇ ਨੂੰ ਵੇਖਣਾ ਚਾਹੁੰਦਾ ਹਾਂ। ਅਸੀ ਇੱਕ ਸ਼ਾਨਦਾਰ ਯਾਤਰਾ ‘ਤੇ ਹਾਂ: + +- **ਪ੍ਰੋਗਰਾਮਿੰਗ ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ (ਅਤੇ ਇਹ ਕਿਉਂ ਸਭ ਤੋਂ ਕੂਲ ਚੀਜ਼ ਹੈ!)** – ਅਸੀਂ ਜਾਣਾਂਗੇ ਕਿ ਕੋਡ ਇਸ ਅਦ੍ਰਿਸ਼ਯ ਜਾਦੂ ਵਰਗਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਆਲੇ-ਦੁਆਲੇ ਹਰ ਚੀਜ਼ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ, ਉਸ ਆਲਾਰਮ ਤੋਂ ਲੈ ਕੇ ਜੋ ਸੋਮਵਾਰ ਦੀ ਸਵੇਰ ਨੂੰ ਜਾਣਦਾ ਹੈ, ਤੱਕ algorithm ਜੋ ਟਾਈਟ netflix ਦੀ ਸਿਫਾਰਿਸ਼ ਕਰਦਾ ਹੈ। +- **ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਉਹਨਾਂ ਦੀਆਂ ਸ਼ਾਨਦਾਰ ਵਿਅਕਤਿਤਵਾਂ** – ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਪਾਰਟੀ ਵਿੱਚ ਜਾ ਰਹੇ ਹੋ ਜਿੱਥੇ ਹਰ ਵਿਅਕਤੀ ਦੇ ਵੱਖਰੇ ਸੂਪਰਪਾਵਰ ਅਤੇ ਸਮੱਸਿਆਵਾਂ ਦੇ ਹੱਲ ਕਰਨ ਦੇ ਢੰਗ ਹਨ। ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਦੀ ਦੁਨੀਆ ਇੰਝ ਹੀ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਮਿਲ ਕੇ ਮਸਤੀ ਕਰੋਗੇ! +- **ਉਹ ਮੂਲਭੂਤ ਕੰਮ ਦਾ ਸਾਜੋ-ਸਮਾਨ ਜੋ ਡਿਜੀਟਲ ਜਾਦੂ ਪੈਦਾ ਕਰਦਾ ਹੈ** – ਇਹਨਾਂ ਨੂੰ ਸਭ ਤੋਂ ਸ਼ਾਨਦਾਰ ਬਣਾਉਣ ਵਾਲੇ LEGO ਸੈੱਟ ਵਾਂਗ ਸੋਚੋ। ਜਦ ਤੁਸੀਂ ਸਮਝ ਲਵੋਗੇ ਕਿ ਇਹ ਟੁਕੜੇ ਕਿਵੇਂ ਜੁੜਦੇ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਕੁਝ ਵੀ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਕੱਲਪਨਾ ਕਰਦੇ ਹੋ। +- **ਉਦਯੋਗ-ਮਿਆਰੀ ਟੂਲ ਜਿਹੜੇ ਤੁਹਾਨੂੰ ਜਾਦੂਗਰ ਦੀ ਛੜੀ ਹੱਥ ਵਿੱਚ ਮਿਲੀ ਹੋਵੇ ਵਰਗਾ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦੇ ਹਨ** – ਮੈਂ ਨਾਟਕ ਨਹੀਂ ਕਰ ਰਿਹਾ – ਇਹ ਟੂਲ ਵਾਸਤਵ ਵਿੱਚ ਤੁਹਾਨੂੰ ਜਾਦੂਗਰ ਬਣਾਉਂਦੇ ਹਨ, ਅਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਗੱਲ? ਇਹੋ ਜਿਹੇ ਟੂਲ ਉਹ ਹਨ ਜੋ ਪ੍ਰੋ ਬਣਾਂਦੇ ਨੇ! + +> 💡 **ਇਹ ਗੱਲ ਯਾਦ ਰੱਖੋ**: ਅੱਜ ਸਾਰਾ ਕੁਝ ਯਾਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਨਾ ਕਰੋ! ਅੱਜ ਮੈਂ ਸਿਰਫ ਇਹ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਸੰਭਾਵਨਾਵਾਂ ਦੇ ਬਾਰੇ ਉਤਸ਼ਾਹ ਮਹਿਸੂਸ ਕਰੋ। ਬਾਰਿਕੀਆਂ ਆਪੇ ਹੀ ਯਾਦ ਰਹਿਣਗੀਆਂ ਜਦ ਅਸੀਂ ਇਕੱਠੇ ਅਭਿਆਸ ਕਰਾਂਗੇ – ਅਸਲੀ ਸਿੱਖਿਆ ਇਹੀ ਹੈ! + +> ਤੁਸੀਂ ਇਹ ਪਾਠ [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) ’ਤੇ ਵੀ ਕਰ ਸਕਦੇ ਹੋ! + +## ਤਾਂ ਪ੍ਰੋਗਰਾਮਿੰਗ ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ? + +ਚਲੋ, ਅਸਲੀ ਸਵਾਲ ਦਾ ਜਵਾਬ ਦਿੰਦੇ ਹਾਂ: ਪ੍ਰੋਗਰਾਮਿੰਗ ਕੀ ਹੈ? + +ਮੈਂ ਤੁਹਾਨੂੰ ਇੱਕ ਕਹਾਣੀ ਦੱਸਾਂਗਾ ਜਿਸ ਨੇ ਮੇਰੀ ਸੋਚ ਬਦਲ ਦਿੱਤੀ। ਪਿਛਲੇ ਹਫਤੇ ਮੈਂ ਆਪਣੀ ਮਾਂ ਨੂੰ ਸਾਡਾ ਨਵਾਂ ਸਮਾਰਟ ਟੀਵੀ ਰਿਮੋਟ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ, ਸਮਝਾ ਰਿਹਾ ਸੀ। ਮੈਂ ਕਹਿੰਦਾ ਪਿਆ, "ਲਾਲ ਬਟਨ ਦਬਾਓ, ਪਰ ਵੱਡਾ ਲਾਲ ਨਹੀਂ, ਛੋਟਾ ਲਾਲ ਜੋ ਖੱਬੇ ਪਾਸੇ ਹੈ... ਨਹੀਂ, ਤੇਰਾ ਅੱਗਲਾ ਖੱਬਾ... ਠੀਕ ਹੈ, ਹੁਣ ਦੋ ਸਕਿੰਟ ਲਈ ਰੱਖੋ, ਇੱਕ ਨਹੀਂ, ਤਿੰਨ ਨਹੀਂ..." ਇਹ ਸੁਣ ਕੇ ਕੋਈ ਜਾਣਦਾ ਹੈ? 😅 + +ਇਹ ਹੀ ਪ੍ਰੋਗਰਾਮਿੰਗ ਹੈ! ਇਹ ਬਹੁਤ ਹੀ ਵਿਸਥਾਰਤ ਕਦਮ-ਬੰਦ-ਕਦਮ ਹਦਾਇਤਾਂ ਦੇਣ ਦੀ ਕਲਾ ਹੈ ਕੁਝ ਅੱਤਿਆਧੁਨਿਕ ਚੀਜ਼ ਨੂੰ, ਜਿਸ ਨੂੰ ਹਰ ਚੀਜ਼ ਬਿਲਕੁਲ ਠੀਕ ਢੰਗ ਨਾਲ ਸਮਝਾਉਣੀ ਪੈਂਦੀ ਹੈ। ਪਰਮਾਤਮਾ ਨੂੰ ਸਮਝਾਉਣ ਦੇ ਬਜਾਏ (ਜੋ ਪੁੱਛ ਸਕਦੀ ਹੈ "ਕਿਹੜਾ ਲਾਲ ਬਟਨ?!"), ਤੁਸੀਂ ਕੰਪਿਊਟਰ ਨੂੰ ਸਮਝਾ ਰਹੇ ਹੋ (ਜੋ ਬਿਲਕੁਲ ਉਹੀ ਕਰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਕਹਿੰਦੇ ਹੋ, ਭਾਵੇਂ ਤੁਸੀਂ ਜੋ ਕਿਹਾ ਉਹੀ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਨਾ ਹੋਵੋ)। + +ਜਦੋਂ ਮੈਂ ਇਹ ਸਿੱਖਿਆ ਸੀ, ਤਾਂ ਇਹ ਗੱਲ ਮੇਰੇ ਮਨ ਨੂੰ ਹਿਲਾ ਦੇਂਦੀ ਸੀ: ਕੰਪਿਊਟਰ ਅਸਲ ਵਿੱਚ ਬਹੁਤ ਸਧਾਰਨ ਹਨ। ਉਹ ਸਿਰਫ਼ ਦੋ ਗੱਲਾਂ ਸਮਝਦੇ ਹਨ – 1 ਅਤੇ 0, ਜੋ ਆਮ ਤੌਰ ‘ਤੇ "ਹਾਂ" ਅਤੇ "ਨਾ" ਜਾਂ "ਚਾਲੂ" ਅਤੇ "ਬੰਦ" ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ। ਬੱਸ! ਪਰ ਜਾਦੂਦਾਰ ਗੱਲ ਇਹ ਹੈ ਕਿ ਸਾਨੂੰ 1 ਅਤੇ 0 ਵਿੱਚ ਗੱਲ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ ਜਿਵੇਂ 'ਦ ਮੈਟਰਿਕਸ' ਵਿੱਚ ਹੁੰਦਾ ਹੈ। ਇੱਥੇ ਆਉਂਦੇ ਹਨ **ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ** ਜੋ ਤੁਹਾਡੇ ਸਮਾਨ ਜਗਤ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਅਨੁਵਾਦਕ ਹਨ ਜੋ ਤੁਹਾਡੇ ਸਧਾਰਣ ਵਚਨ ਨੂੰ ਕੰਪਿਊਟਰ ਦੀ ਭਾਸ਼ਾ ਵਿੱਚ ਬਦਲ ਦੇਂਦੇ ਹਨ। -## ਆਓ ਵੇਖੀਏ ਕਿ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਕੀ ਜਾਣਦੇ ਹੋ! +ਅਤੇ ਇਹ ਗੱਲ ਹਰ ਸਵੇਰੇ ਮੈਨੂੰ ਹਿਲਾ ਦਿੰਦੀ ਹੈ: ਤੁਹਾਡੇ ਜੀਵਨ ਦੀ ਹਰ ਡਿਜੀਟਲ ਚੀਜ਼ ਕਿਸੇ ਤੇਰੇ ਵਰਗੇ ਹੀ ਕਿਸੇ ਨੇ ਸ਼ੁਰੂ ਕੀਤੀ ਸੀ, ਸ਼ਾਇਦ ਪੀਜਾਮੇ ਪਹਿਨੇ ਕੌਫੀ ਦਾ ਕੱਪ ਹੱਥ ਵਿੱਚ ਲੇ ਕੇ, ਆਪਣੇ ਲੈਪਟਾਪ ਤੇ ਕੋਡ ਟਾਈਪ ਕਰਦਾ। ਉਹ Instagram ਫਿਲਟਰ ਜੋ ਤੁਹਾਨੂੰ ਬੇਦਾਗ ਦਿਖਾਉਂਦਾ ਹੈ? ਕਿਸੇ ਨੇ ਕੋਡ ਕੀਤਾ। ਉਹ ਸਿਫਾਰਸ਼ ਜੋ ਤੁਹਾਨੂੰ ਤੇਰਾ ਮਨਪਸੰਦ ਗੀਤ ਸੁਣਾਇਆ? ਇੱਕ ਡਿਵੈਲਪਰ ਨੇ ਉਹ algorithm ਬਣਾਇਆ। ਉਹ ਐਪ ਜੋ ਤੁਹਾਨੂੰ ਦੋਸਤਾਂ ਨਾਲ ਬਿੱਲ ਵੰਡਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ? ਹਾਂ, ਕਿਸੇ ਨੇ ਸੋਚਿਆ "ਇਹ ਤੰਗ ਕਰਦਾ ਹੈ, ਮੈਂ ਇਹ ਠੀਕ ਕਰ ਸਕਦਾ ਹਾਂ" ਅਤੇ ਫਿਰ... ਕੀਤਾ! -ਮਜ਼ੇਦਾਰ ਚੀਜ਼ਾਂ ਵਿੱਚ ਛਾਲ ਮਾਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਮੈਂ ਜਾਨਣਾ ਚਾਹੁੰਦਾ ਹਾਂ - ਕੀ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਇਸ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੁਨੀਆ ਬਾਰੇ ਕੁਝ ਜਾਣਦੇ ਹੋ? ਅਤੇ ਸੁਣੋ, ਜੇ ਤੁਸੀਂ ਇਹ ਸਵਾਲਾਂ ਦੇਖ ਰਹੇ ਹੋ ਅਤੇ ਸੋਚ ਰਹੇ ਹੋ "ਮੈਨੂੰ ਇਸ ਬਾਰੇ ਬਿਲਕੁਲ ਕੁਝ ਪਤਾ ਨਹੀਂ," ਇਹ ਸਿਰਫ ਠੀਕ ਨਹੀਂ ਹੈ, ਇਹ ਬਿਲਕੁਲ ਸਹੀ ਹੈ! ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਬਿਲਕੁਲ ਸਹੀ ਜਗ੍ਹਾ 'ਤੇ ਹੋ। ਇਸ ਕਵਿਜ਼ ਨੂੰ ਇੱਕ ਵਰਕਆਉਟ ਤੋਂ ਪਹਿਲਾਂ ਖਿੱਚਣ ਵਾਂਗ ਸੋਚੋ - ਅਸੀਂ ਸਿਰਫ ਉਹਨਾਂ ਦਿਮਾਗੀ ਮਾਸਪੇਸ਼ੀਆਂ ਨੂੰ ਗਰਮ ਕਰ ਰਹੇ ਹਾਂ! +ਜਦੋਂ ਤੁਸੀਂ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਿੱਖਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਿਰਫ਼ ਨਵੀਂ ਯੋਗਤਾ ਨਹੀਂ ਹਾਸਲ ਕਰ ਰਹੇ, ਤੁਸੀਂ ਉਸ ਅਦਭੁਤ ਸਮੁਦਾਇ ਦਾ ਹਿੱਸਾ ਬਣ ਰਹੇ ਹੋ ਜੋ ਸਮੱਸਿਆਵਾਂ ਦਾ ਹੱਲ ਲੱਭਣ ਵਿੱਚ ਲੱਗਿਆ ਹੈ ਜੋ ਇਹ ਸੋਚਦੇ ਹਨ, "ਜੇ ਮੈਂ ਕੁਝ ਐਸਾ ਬਣਾ ਸਕਾਂ ਜੋ ਕਿਸੇ ਦਾ ਦਿਨ ਥੋੜ੍ਹਾ ਬਿਹਤਰ ਕਰ ਦੇਵੇ?" ਖ਼ਰਚੀ, ਕੀ ਇਸ ਤੋਂ ਕੂਲ ਕੁਝ ਹੋ ਸਕਦਾ ਹੈ? -[ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼ ਲਵੋ](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +✅ **ਮਜ਼ੇਦਾਰ ਤੱਥ ਖੋਜ**: ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਕੁਝ ਖਾਲੀ ਸਮਾਂ ਹੋਵੇ ਤਾਂ ਇਹ ਗੱਲ ਵੇਖੋ – ਦੁਨੀਆ ਦਾ ਪਹਿਲਾ ਕੰਪਿਊਟਰ ਪ੍ਰੋਗਰਾਮਰ ਕੌਣ ਸੀ? ਮੈਂ ਤੁਹਾਨੂੰ ਸੰਕੇਤ ਦਿੰਦਾ ਹਾਂ: ਇਹ ਉਸ ਉਮੀਦ ਵਾਲੇ ਵਿਅਕਤੀ ਤੋਂ ਵੱਖਰਾ ਹੋ ਸਕਦਾ ਹੈ! ਉਸ ਵਿਅਕਤੀ ਦੀ ਕਹਾਣੀ ਬਹੁਤ ਦਿਲਚਸਪ ਹੈ ਅਤੇ ਦਰਸਾਉਂਦੀ ਹੈ ਕਿ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਦਾ ਹੀ ਰਚਨਾਤਮਕ ਸਮੱਸਿਆ ਹੱਲ ਅਤੇ ਨਵੇਂ ਤਰੀਕੇ ਸੋਚਣ ਬਾਰੇ ਰਹੀ ਹੈ। -## ਸਫ਼ਰ ਜੋ ਅਸੀਂ ਇਕੱਠੇ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ +### 🧠 **ਚੈਕ-ਇਨ ਸਮਾਂ: ਤੁਹਾਡੇ ਕੀ ਅਹਿਸਾਸ ਹਨ?** -ਠੀਕ ਹੈ, ਮੈਂ ਸੱਚਮੁੱਚ ਉਸ ਬਾਰੇ ਉਤਸਾਹਿਤ ਹਾਂ ਜੋ ਅਸੀਂ ਅੱਜ ਖੋਜਣ ਜਾ ਰਹੇ ਹਾਂ! ਸੱਚਮੁੱਚ, ਮੈਂ ਕਾਸ਼ ਤੁਹਾਡਾ ਚਿਹਰਾ ਦੇਖ ਸਕਦਾ ਜਦੋਂ ਕੁਝ ਸੰਕਲਪ ਸਪਸ਼ਟ ਹੁੰਦੇ ਹਨ। ਇਹ ਹੈ ਸ਼ਾਨਦਾਰ ਯਾਤਰਾ ਜੋ ਅਸੀਂ ਇਕੱਠੇ ਕਰ ਰਹੇ ਹਾਂ: +**ਇੱਕ ਪਲ ਲਈ ਸੋਚੋ:** +- ਕੀ ਤੁਸੀਂ ਹੁਣ "ਕੰਪਿਊਟਰਾਂ ਨੂੰ ਹਦਾਇਤਾਂ ਦੇਣ" ਦਾ ਮਤਲਬ ਸਮਝਦੇ ਹੋ? +- ਕੀ ਤੁਸੀਂ ਕੋਈ ਰੋਜ਼ਾਨਾ ਕੰਮ ਸੋਚ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਪ੍ਰੋਗਰਾਮਿੰਗ ਨਾਲ ਸੁਚਾਰੂ ਬਣਾ ਸਕਦੇ ਹੋ? +- ਇਸ ਸਾਰੀ ਪ੍ਰੋਗਰਾਮਿੰਗ ਮਾਮਲੇ ਵਾਰੇ ਤੁਹਾਡੇ ਮਨ ਵਿੱਚ ਕਿਹੜੇ ਸਵਾਲ ਉੱਠ ਰਹੇ ਹਨ? -- **ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ (ਅਤੇ ਇਹ ਕਿਉਂ ਸਭ ਤੋਂ ਵਧੀਆ ਚੀਜ਼ ਹੈ!)** - ਅਸੀਂ ਪਤਾ ਲਗਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਕੋਡ ਬਿਲਕੁਲ ਅਦ੍ਰਿਸ਼ ਜਾਦੂ ਹੈ ਜੋ ਤੁਹਾਡੇ ਆਲੇ ਦੁਆਲੇ ਸਭ ਕੁਝ ਚਲਾਉਂਦਾ ਹੈ, ਉਸ ਅਲਾਰਮ ਤੋਂ ਜੋ ਕਿਸੇ ਤਰੀਕੇ ਨਾਲ ਜਾਣਦਾ ਹੈ ਕਿ ਇਹ ਸੋਮਵਾਰ ਸਵੇਰ ਹੈ, Netflix ਦੀਆਂ ਸਿਫਾਰਸ਼ਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੁਰੇਟ ਕਰਨ ਵਾਲੇ ਐਲਗੋਰਿਦਮ ਤੱਕ -- **ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਉਹਨਾਂ ਦੇ ਸ਼ਾਨਦਾਰ ਵਿਅਕਤੀਗਤ ਗੁਣ** - ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਪਾਰਟੀ ਵਿੱਚ ਜਾ ਰਹੇ ਹੋ ਜਿੱਥੇ ਹਰ ਵਿਅਕਤੀ ਦੇ ਬਿਲਕੁਲ ਵੱਖਰੇ ਤਾਕਤਾਂ ਅਤੇ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਦੇ ਤਰੀਕੇ ਹਨ। ਇਹ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾ ਦੀ ਦੁਨੀਆ ਵਰਗੀ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਮਿਲਣ ਵਿੱਚ ਮਜ਼ਾ ਆਵੇਗਾ! -- **ਡਿਜੀਟਲ ਜਾਦੂ ਬਣਾਉਣ ਵਾਲੇ ਮੂਲ ਬਲਾਕ** - ਇਹਨਾਂ ਨੂੰ ਅੰਤਮ ਰਚਨਾਤਮਕ LEGO ਸੈਟ ਵਾਂਗ ਸੋਚੋ। ਜਦੋਂ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ ਇਹ ਟੁਕੜੇ ਕਿਵੇਂ ਇਕੱਠੇ ਹੁੰਦੇ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਅਹਿਸਾਸ ਕਰੋਗੇ ਕਿ ਤੁਸੀਂ ਬਿਲਕੁਲ ਕੁਝ ਵੀ ਬਣਾਉਣ ਲਈ ਯੋਗ ਹੋ ਜੋ ਤੁਹਾਡੀ ਕਲਪਨਾ ਕਰਦੀ ਹੈ -- **ਪੇਸ਼ੇਵਰ ਟੂਲ ਜੋ ਤੁਹਾਨੂੰ ਮਹਿਸੂ ਕਰਵਾਉਂਦੇ ਹਨ ਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਜਾਦੂਗਰ ਦੀ ਛੜੀ ਦਿੱਤੀ ਗਈ ਹੈ** - ਮੈਂ ਇੱਥੇ ਨਾਟਕ ਨਹੀਂ ਕਰ ਰਿਹਾ - ਇਹ ਟੂਲ ਸੱਚਮੁੱਚ ਤੁਹਾਨੂੰ ਮਹਿਸੂ ਕਰਵਾਉਣਗੇ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਤਾਕਤਾਂ ਹਨ, ਅਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਹਿੱਸਾ? ਇਹ ਉਹੀ ਹਨ ਜੋ ਪੇਸ਼ੇਵਰ ਵਰਤਦੇ ਹਨ! +> **ਯਾਦ ਰੱਖੋ**: ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਣ ਗੱਲ ਹੈ ਕਿ ਕੁਝ ਧਾਰਣਾਵਾਂ ਅਜੇ ਸਪਸ਼ਟ ਨਾ ਹੋਣ। ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਿੱਖਣਾ ਨਵੀਂ ਭਾਸ਼ਾ ਸਿੱਖਣ ਵਾਂਗ ਹੈ – ਇਹ ਤੁਹਾਡੇ ਦਿਮਾਗ ਨੂੰ ਉਹ ਨਿਊਰਲ ਰਾਹ ਬਣਾਉਣ ਲਈ ਸਮਾਂ ਲੈਂਦਾ ਹੈ। ਤੁਸੀਂ ਬੜੀਆ ਕੰਮ ਕਰ ਰਹੇ ਹੋ! -> 💡 **ਇਹ ਗੱਲ ਹੈ**: ਅੱਜ ਸਭ ਕੁਝ ਯਾਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਬਾਰੇ ਸੋਚੋ ਵੀ ਨਾ! ਇਸ ਸਮੇਂ, ਮੈਂ ਸਿਰਫ ਇਹ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਜੋ ਸੰਭਵ ਹੈ ਉਸ ਬਾਰੇ ਉਤਸਾਹ ਮਹਿਸੂ ਕਰੋ। ਜਿਵੇਂ ਅਸੀਂ ਇਕੱਠੇ ਅਭਿਆਸ ਕਰਦੇ ਹਾਂ, ਵੇਰਵੇ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਚਿਪਕ ਜਾਣਗੇ - ਅਸਲ ਸਿੱਖਣ ਇਸ ਤਰੀਕੇ ਨਾਲ ਹੁੰਦਾ ਹੈ! +## ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵੱਖ-ਵੱਖ ਜਾਦੂਆਂ ਦੇ ਸਵਾਦ ਵਾਂਗ ਹਨ -> ਤੁਸੀਂ ਇਹ ਪਾਠ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ! +ਠੀਕ ਹੈ, ਇਹ ਅਜੀਬ ਲੱਗ ਸਕਦਾ ਹੈ ਪਰ ਮੇਰੇ ਨਾਲ ਰਹੋ – ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਬਹੁਤ ਵੱਖਰੇ ਸੰਗੀਤ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਵਾਂਗ ਹਨ। ਸੋਚੋ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਜੈਜ਼ ਹੈ, ਜੋ ਸਹਜ ਅਤੇ ਇਮਪ੍ਰੋਵਾਈਜ਼ੇਸ਼ਨ ਵਾਲਾ ਹੈ, ਰਾਕ ਜੋ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅਤੇ ਸਿੱਧਾ ਹੈ, ਕਲਾਸਿਕ ਜੋ ਸੁੰਦਰ ਅਤੇ ਸੰਰਚਿਤ ਹੈ ਅਤੇ ਹਿਪ-ਹੌਪ ਜੋ ਰਚਨਾਤਮਕ ਅਤੇ ਪ੍ਰਗਟਾਵਾ ਵਾਲਾ ਹੈ। ਹਰ ਸ਼ੈਲੀ ਦਾ ਆਪਣਾ ਮਹਿਸੂਸ, ਉਸਦਾ ਆਪਣੇ ਉਤਸ਼ਾਹੀ ਭਗਤਾਂ ਦਾ ਸਮੂਹ ਹੈ, ਅਤੇ ਹਰ ਇੱਕ ਮੁੱਖ ਵੱਖ-ਵੱਖ ਮੂਡ ਅਤੇ ਮੌਕਿਆਂ ਲਈ ਵਧੀਆ ਹੈ। -## ਤਾਂ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਅਸਲ ਵਿੱਚ *ਕੀ* ਹੈ? +ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਬਿਲਕੁਲ ਇਨ੍ਹਾਂ ਵਾਂਗ ਹੀ ਕੰਮ ਕਰਦੀਆਂ ਹਨ! ਤੁਸੀਂ ਇੱਕੋ ਭਾਸ਼ਾ ਨੂੰ ਇੱਕ ਮਜ਼ੇਦਾਰ ਮੋਬਾਇਲ ਖੇਡ ਬਣਾਉਣ ਲਈ ਵਰਤੋਂ ਵਿੱਚ ਨਹੀਂ ਲਿਆਉਗੇ ਜੋ ਤੁਸੀਂ ਵੱਡੇ ਪੱਧਰ ਦੇ ਕੁਲਿਤੀ ਡੇਟਾ ਦਾ ਹਿਸਾਬ ਕਿਤਾਬ ਕਰਨ ਲਈ ਵਰਤੋਂ ਹੋਵੇਗਾ, ਬਿਲਕੁਲ ਜਿਵੇਂ ਤੁਸੀਂ ਯੋਗਾ ਕਲਾਸ ਵਿੱਚ ਡੈਥ ਮੈਟਲ ਨਹੀਂ ਬਜਾਉਂਦੇ (ਅੱਛਾ, ਅਕਸਰ ਯੋਗਾ ਕਲਾਸਾਂ ਵਿੱਚ! 😄). -ਚਲੋ, ਮਿਲੀਅਨ-ਡਾਲਰ ਸਵਾਲ ਦਾ ਜਵਾਬ ਦਿੰਦੇ ਹਾਂ: ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ? +ਪਰ ਜੋ ਗੱਲ ਹਰ ਵਾਰੀ ਮੇਰੇ ਮਨ ਨੂੰ ਹਿਲਾ ਦਿੰਦੀ ਹੈ ਉਹ ਇਹ ਹੈ: ਇਹ ਭਾਸ਼ਾਵਾਂ ਤੁਹਾਡੇ ਬगल ਵਿੱਚ ਬੈਠੇ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਧੀਰਜਵਾਂ, ਬਹੁਤ ਤੇਜ਼ ਅਨੁਵਾਦਕ ਵਰਗੀ ਹਨ। ਤੁਸੀਂ ਆਪਣੇ ਮਨੁੱਖੀ ਦਿਮਾਗ ਲਈ ਸਵਭਾਵਿਕ ਢੰਗ ਨਾਲ ਆਪਣੇ ਵਿਚਾਰ ਪ੍ਰਗਟ ਕਰੋ, ਅਤੇ ਉਹ ਸਾਰਾ ਜਟਿਲ ਕੰਮ ਕਰਦੇ ਹਨ ਜੋ ਉਸਨੂੰ 1 ਅਤੇ 0 ਵਿੱਚ ਬਦਲ ਦੇਂਦਾ ਹੈ ਜੋ ਕੰਪਿਊਟਰ ਸੱਚਮੁਚ ਬੋਲਦੇ ਹਨ। ਇਹ ਬਿਲਕੁਲ ਉਹੋ ਜਿਹਾ ਹੈ ਜਿਵੇਂ ਕੋਈ ਦੋਸਤ ਜੋ "ਮਨੁੱਖੀ ਰਚਨਾਤਮਕਤਾ" ਅਤੇ "ਕੰਪਿਊਟਰ ਤਰਕ" ਦੋਹਾਂ ਵਿੱਚ ਪਰਫੈਕਟ ਫਲੂਐਂਟ ਹੋਵੇ – ਉਹ ਕਦੇ ਥੱਕਦੇ ਨਹੀਂ, ਕਦੇ ਕੌਫੀ ਬ੍ਰੇਕ ਨਹੀਂ ਲੈਂਦੇ ਅਤੇ ਉਹ ਕਦੇ ਤੁਹਾਡੇ ਮੈਂਪ੍ਰਸ਼ਨਾਂ ਦਾ ਦੋਹਰਾਅ ਕਰਨ ’ਤੇ ਨਿੱਡਰ ਨਹੀਂ ਹੁੰਦੇ! + +### ਪ੍ਰਸਿੱਧ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਉਹਨਾਂ ਦੇ ਉਪਯੋਗ + +```mermaid +mindmap + root((ਕੋਡਿੰਗ ਭਾਸ਼ਾਵਾਂ)) + Web Development + JavaScript + ਅੱਗੇ ਦਾ ਜਾਦੂ + ਇੰਟਰਐਕਟਿਵ ਵੈੱਬਸਾਈਟਸ + TypeScript + ਜਾਵਾਸਕ੍ਰਿਪਟ + ਟਾਈਪਸ + ਉਦਯੋਗਿਕ ਐਪਸ + Data & AI + Python + ਡਾਟਾ ਵਿਗਿਆਨ + ਮਸ਼ੀਨ ਲਰਨਿੰਗ + ਆਟੋਮੇਸ਼ਨ + R + ਅੰਕੜੇ + ਖੋਜ + Mobile Apps + Java + ਐਂਡਰੌਇਡ + ਉਦਯੋਗਿਕ + Swift + iOS + ਐਪਲ ਐਕੋਸਿਸਟਮ + Kotlin + ਆਧੁਨਿਕ ਐਂਡਰੌਇਡ + ਕ੍ਰਾਸ-ਪਲੇਟਫਾਰਮ + Systems & Performance + C++ + ਖੇਡਾਂ + ਪ੍ਰਦਰਸ਼ਨ ਸੰਵੇਦਨਸ਼ੀਲ + Rust + ਮੈਮੋਰੀ ਸੁਰੱਖਿਆ + ਪ੍ਰਣਾਲੀ ਕੋਡਿੰਗ + Go + ਕਲਾਉਡ ਸੇਵਾਵਾਂ + ਸਕੇਲਬਲ ਬੈਕਐਂਡ +``` +| ਭਾਸ਼ਾ | ਸਭ ਤੋਂ ਵਧੀਆ | ਕਿਉਂ ਇਹ ਪ੍ਰਸਿੱਧ ਹੈ | +|------------|---------------|--------------------------------------| +| **JavaScript** | ਵੈੱਬ ਵਿਕਾਸ, ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ | ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੀ ਹੈ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬਸਾਈਟਸ ਚਲਾਉਂਦੀ ਹੈ | +| **Python** | ਡੇਟਾ ਸਾਇੰਸ, ਆਟੋਮੇਸ਼ਨ, ਏਆਈ | ਪੜ੍ਹਨ ਅਤੇ ਸਿੱਖਣ ਵਿੱਚ آسان, ਸ਼ਕਤੀਸ਼ਾਲੀ ਲਾਇਬ੍ਰੇਰੀਜ਼ | +| **Java** | ਐਨਟਰਪਰਾਈਜ਼ ਐਪਲੀਕੇਸ਼ਨ, ਐਂਡਰਾਇਡ ਐਪਸ | ਪਲੇਟਫੌਰਮ-ਅਜ਼ਾਦ, ਵੱਡੇ ਸਿਸਟਮਾਂ ਲਈ ਮਜ਼ਬੂਤ | +| **C#** | ਵਿੰਡੋਜ਼ ਐਪਲੀਕੇਸ਼ਨ, ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ | ਮਾਈਕ੍ਰੋਸਾਫਟ ਸਿਸਟਮਾਂ ਦਾ ਧਾਰਮਿਕ ਸਹਿਯੋਗ | +| **Go** | ਕਲਾਉਡ ਸੇਵਾਵਾਂ, ਬੈਕਐਂਡ ਸਿਸਟਮ | ਤੇਜ਼, ਸਧਾਰਨ, ਆਧੁਨਿਕ ਕੰਪਿਊਟਿੰਗ ਲਈ डिजाइन ਕੀਤੀ ਗਈ | + +### ਹਾਈ-ਲੈਵਲ ਵਸੁਲ ਲੋ-ਲੈਵਲ ਭਾਸ਼ਾਵਾਂ + +ਠੀਕ ਹੈ, ਇਹ ਵਾਕਈ ਉਹ ਧਾਰਣਾ ਸੀ ਜੋ ਮੇਰਾ ਦਿਮਾਗ ਤੋੜਦਾ ਸੀ ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰੀ ਸਿੱਖ ਰਿਹਾ ਸੀ, ਇਸ ਲਈ ਮੈਂ ਉਹ ਉਦਾਹਰਨ ਸਾਂਝੀ ਕਰਾਂਗਾ ਜਿਸ ਨੇ ਮੈਨੂੰ ਇਹ ਸਮਝਾਇਆ – ਅਤੇ ਮੈਂ ਆਸ ਕਰਦਾ ਹਾਂ ਕਿ ਤੁਹਾਨੂੰ ਵੀ ਸਮਝ ਆਏਗੀ! + +ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਕਿਸੇ ਅਜਿਹੇ ਦੇਸ਼ ਵਿਚ ਜਾ ਰਹੇ ਹੋ ਜਿੱਥੇ ਤੁਸੀਂ ਭਾਸ਼ਾ ਨਹੀਂ ਬੋਲਦੇ ਅਤੇ ਤੁਹਾਨੂੰ ਬਹੁਤ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਸਭ ਤੋਂ ਨੇੜੇ ਵਾਲਾ ਬਾਥਰੂਮ ਕਿੱਥੇ ਹੈ (ਸਾਨੂੰ ਸਾਰਿਆਂ ਨੇ ਇਹ ਸੈਨ! 😅): + +- **ਲੋ-ਲੇਵਲ ਪ੍ਰੋਗਰਾਮਿੰਗ** ਬਿਲਕੁਲ ਉਸ ਜਿਹੀ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਸਥਾਨਕ ਬੋਲੀ ਅਜਿਹੀ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਿੱਖ ਲئی ਹੈ ਕਿ ਤੁਸੀਂ ਫਲ ਵੇਚ ਰਹੀ ਦਾਦੀ ਨਾਲ ਬੜੀ ਗੱਲ-ਬਾਤ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਸ ਵਿੱਚ ਸਾਂਝੇ ਸੱਭਿਆਚਾਰਕ ਹਵਾਲੇ, ਸਥਾਨਕ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਮਜ਼ਾਕ ਹਨ ਜੋ ਸਿਰਫ ਉਸ ਜਗ੍ਹਾ ਦੇ ਲੋਕ ਸਮਝਦੇ ਹਨ। ਬਹੁਤ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਅਤੇ ਬੇਹਦ ਪ੍ਰਭਾਵੀ... ਜੇ ਤੁਸੀਂ ਇਹ ਜਾਣਦੇ ਹੋ! ਪਰ ਬਾਥਰੂਮ ਲੱਭਣ ਸਮੇਂ ਇਹ ਉਲਝਣ ਵਾਲੀ ਗੱਲ ਹੋ ਸਕਦੀ ਹੈ। + +- **ਹਾਈ-ਲੇਵਲ ਪ੍ਰੋਗਰਾਮਿੰਗ** ਉਸੇ ਜਿਹੀ ਹੈ ਜਿਵੇਂ ਤੁਹਾਡੇ ਕੋਲ ਕੋਈ ਸਥਾਨਕ ਦੋਸਤ ਹੋਵੇ ਜੋ ਤੁਹਾਡੇ ਮਤਲਬ ਨੂੰ ਸਮਝਦਾ ਹੋਵੇ। ਤੁਸੀਂ ਸਾਫ਼ ਅੰਗਰੇਜ਼ੀ ਵਿੱਚ ਕਹ ਸਕਦੇ ਹੋ "ਮੈਨੂੰ ਬਾਥਰੂਮ ਲੱਭਣਾ ਹੈ," ਅਤੇ ਉਹ ਸਾਰੇ ਸੱਭਿਆਚਾਰਕ ਅਨੁਵਾਦ ਕਰਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਲਈ ਛੇਤੀ ਤੇਸਰੀ ਸਮਝ ਵਾਲੇ ਹਵਾਲੇ ਦਿੰਦਾ ਹੈ। + +ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਟਰਮਾਂ ਵਿੱਚ: +- **ਲੋ-ਲੇਵਲ ਭਾਸ਼ਾਵਾਂ** (ਜਿਵੇਂ Assembly ਜਾਂ C) ਤੁਹਾਨੂੰ ਕੰਪਿਊਟਰ ਦੇ ਹਾਰਡਵੇਅਰ ਨਾਲ ਬਹੁਤ ਵਿਸਥਾਰਿਤ ਗੱਲਬਾਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀਆਂ ਹਨ, ਪਰ ਤੁਹਾਨੂੰ ਮਸ਼ੀਨ ਵਿਚਾਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ, ਜੋ… ਚਲੋ ਕਹੀਏ ਇਹ ਇਕ ਵੱਡਾ ਮਨੋਵੈਜ্ঞানਿਕ ਬਦਲਾਅ ਹੈ! +- **ਹਾਈ-ਲੇਵਲ ਭਾਸ਼ਾਵਾਂ** (ਜਿਵੇਂ JavaScript, Python, ਜਾਂ C#) ਤੁਹਾਨੂੰ ਮਨੁੱਖੀ ਤਰ੍ਹਾਂ ਸੋਚਣ ਦਿੰਦੀਆਂ ਹਨ ਜਦੋਂਕਿ ਉਹ ਸਾਰੇ ਮਸ਼ੀਨੀ ਗੱਲਬਾਤਾਂ ਦਾ ਕੰਮ ਛੁਪੇ ਤਰੀਕੇ ਨਾਲ ਸਹਿਣ ਲੈਂਦੀਆਂ ਹਨ। ਇਨ੍ਹਾਂ ਦੇ ਕਮਿਊਨਿਟੀ ਬਹੁਤ ਸਹਿਯੋਗੀ ਹੁੰਦੇ ਹਨ ਜੋ ਯਾਦ ਰੱਖਦੇ ਹਨ ਕਿ ਨਵੇਂ ਸੀ ਕਿਵੇਂ ਮਹਿਸੂਸ ਕਰਦੇ ਹਨ ਅਤੇ ਸਾਫ਼ਦਿਲੀ ਨਾਲ ਮਦਦ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ! + +ਸੋਚੋ ਮੈਂ ਤੁਹਾਨੂੰ ਕਿਹੜੀਆਂ ਭਾਸ਼ਾਵਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਸਲਾਹ ਦਿੰਦਾ ਹਾਂ? 😉 ਹਾਈ-ਲੈਵਲ ਭਾਸ਼ਾਵਾਂ ਉਹ ਪ੍ਰਸ਼ਿਖਣ ਵਾਹਨੇ ਵਰਗੀ ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਤੁਸੀਂ ਕਦੇ ਨਹੀਂ ਹਟਾਉਂਦੇ ਕਿਉਂਕਿ ਉਹ ਸਾਰਾ ਅਨੁਭਵ ਬਹੁਤ ਹੀ ਆਸਾਨ ਅਤੇ ਮਨੋਹਰ ਬਣਾ ਦਿੱਂਦੀਆਂ ਹਨ! + +```mermaid +flowchart TB + A["👤 ਮਨੁੱਖੀ ਸੋਚ:
'ਮੈਂ ਫਿਬੋਨਾਚੀ ਨੰਬਰ ਗਿਣਣੇ ਚਾਹੁੰਦਾ ਹਾਂ'"] --> B{ਭਾਸ਼ਾ ਪੱਧਰ ਚੁਣੋ} + + B -->|ਉੱਚ-ਪੱਧਰ| C["🌟 ਜਾਵਾਸਕ੍ਰਿਪਟ/ਪਾਈਥਨ
ਆਸਾਨ ਪੜ੍ਹਨ ਅਤੇ ਲਿਖਣ ਲਈ"] + B -->|ਹੇਠਾਂ-ਪੱਧਰ| D["⚙️ ਅਸੈਂਬਲੀ/ਸੀ
ਸਿੱਧਾ ਹਾਰਡਵੇਅਰ ਕੰਟਰੋਲ"] + + C --> E["📝 ਲਿਖੋ: fibonacci(10)"] + D --> F["📝 ਲਿਖੋ: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 ਕੰਪਿਊਟਰ ਸਮਝ:
ਅਨੁਵਾਦਕ ਜਟਿਲਤਾ ਸੰਭਾਲਦਾ ਹੈ"] + F --> G + + G --> H["💻 ਇੱਕੋ ਨਤੀਜਾ:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +### ਆਓ ਮੈਂ ਤੁਹਾਨੂੰ ਦਿਖਾਵਾਂ ਕਿ ਹਾਈ-ਲੈਵਲ ਭਾਸ਼ਾਵਾਂ ਕਿਵੇਂ ਜ਼ਿਆਦਾ ਦੋਸਤਾਨਾ ਹੁੰਦੀਆਂ ਹਨ -ਮੈਂ ਤੁਹਾਨੂੰ ਇੱਕ ਕਹਾਣੀ ਦਿੰਦਾ ਹਾਂ ਜਿਸ ਨੇ ਮੇਰੇ ਸੋਚਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ। ਪਿਛਲੇ ਹਫ਼ਤੇ, ਮੈਂ ਆਪਣੀ ਮਾਂ ਨੂੰ ਸਾਡੇ ਨਵੇਂ ਸਮਾਰਟ ਟੀਵੀ ਰਿਮੋਟ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਮਝਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਿਹਾ ਸੀ। ਮੈਂ ਆਪਣੇ ਆਪ ਨੂੰ ਇਹ ਕਹਿੰਦੇ ਹੋਏ ਪਾਇਆ "ਲਾਲ ਬਟਨ ਦਬਾਓ, ਪਰ ਵੱਡਾ ਲਾਲ ਬਟਨ ਨਹੀਂ, ਛੋਟਾ ਲਾਲ ਬਟਨ ਖੱਬੇ ਪਾਸੇ... ਨਹੀਂ, ਤੁਹਾਡਾ ਦੂਜਾ ਖੱਬਾ... ਠੀਕ ਹੈ, ਹੁਣ ਇਸਨੂੰ ਦੋ ਸਕਿੰਟ ਲਈ ਰੱਖੋ, ਇੱਕ ਨਹੀਂ, ਤਿੰਨ ਨਹੀਂ..." ਜਾਣ ਪਛਾਣ ਲੱਗਦਾ ਹੈ? 😅 +ਠੀਕ ਹੈ, ਮੈਂ ਤੁਹਾਨੂੰ ਕੁਝ ਅਜਿਹਾ ਦੇਖਾਉਣ ਜਾ ਰਿਹਾ ਹਾਂ ਜੋ ਸਹੀ ਤਰ੍ਹਾਂ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਮੈਂ ਹਾਈ-ਲੈਵਲ ਭਾਸ਼ਾਵਾਂ ਨਾਲ ਕਿਵੇਂ ਪਿਆਰ ਕਰ ਬੈਠਿਆ, ਪਰ ਪਹਿਲਾਂ – ਤੁਸੀਂ ਮੈਨੂੰ ਇੱਕ ਵਾਅਦਾ ਕਰੋ। ਜਦੋਂ ਤੁਸੀਂ ਪਹਿਲਾ ਕੋਡ ਉਦਾਹਰਨ ਵੇਖੋਗੇ, ਤਾਂ ਘਬਰਾਓ ਨਹੀਂ! ਇਹ ਉਦਾਹਰਨ ਅਸਲ ਵਿੱਚ ਭਿਆਨਕ ਲੱਗਣ ਲਈ ਹੈ। ਇਹੀ ਗੱਲ ਮੈਂ ਦਰਸਾਉਂਣਾ ਚਾਹੁੰਦਾ ਹਾਂ! -ਇਹ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਹੈ! ਇਹ ਕੁਝ ਬਹੁਤ ਸ਼ਕਤੀਸ਼ਾਲੀ ਨੂੰ ਬਹੁਤ ਹੀ ਵਿਸਥਾਰਵਾਦੀ, ਕਦਮ-ਦਰ-ਕਦਮ ਹਦਾਇਤਾਂ ਦੇਣ ਦੀ ਕਲਾ ਹੈ ਪਰ ਇਸਨੂੰ ਸਭ ਕੁਝ ਬਿਲਕੁਲ ਸਪਸ਼ਟ ਤਰੀਕੇ ਨਾਲ ਦੱਸਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। -- **ਟਿੱਪਣੀਆਂ**: ਉੱਚ-ਸਤਹ ਦੀਆਂ ਭਾਸ਼ਾਵਾਂ ਵਿਆਖਿਆਤਮਕ ਟਿੱਪਣੀਆਂ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦੀਆਂ ਹਨ ਜੋ ਕੋਡ ਨੂੰ ਆਪ ਹੀ ਦਸਤਾਵੇਜ਼ ਬਣਾਉਣ ਵਾਲਾ ਬਣਾਉਂਦੀਆਂ ਹਨ -- **ਸੰਰਚਨਾ**: JavaScript ਦੀ ਤਰਕਸ਼ੀਲ ਲਹਿਰਵਾਹੀ ਉਸ ਤਰੀਕੇ ਨਾਲ ਮਿਲਦੀ ਹੈ ਜਿਵੇਂ ਮਨੁੱਖ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਸੋਚਦੇ ਹਨ -- **ਰੱਖ-ਰਖਾਵ**: ਵੱਖ-ਵੱਖ ਜ਼ਰੂਰਤਾਂ ਲਈ JavaScript ਵਰਜਨ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਸਿੱਧਾ ਅਤੇ ਸਪਸ਼ਟ ਹੈ +ਅਸੀਂ ਇੱਕੋ ਕੰਮ ਨੂੰ ਦੋ ਬਿਲਕੁਲ ਵੱਖ-ਵੱਖ ਅੰਦਾਜ਼ਾਂ ਵਿੱਚ ਲਿਖਿਆ ਵੇਖਾਂਗੇ। ਦੋਵੇਂ Fibonacci ਕ੍ਰਮ ਬਣਾ ਰਹੇ ਹਨ – ਇਹ ਇੱਕ ਸੁੰਦਰ ਗਣਿਤੀਕ ਢਾਂਚਾ ਹੈ ਜਿਸ ਵਿੱਚ ਹਰ ਨੰਬਰ ਪਿਛਲੇ ਦੋ ਨੰਬਰਾਂ ਦਾ ਜੋੜ ਹੁੰਦਾ ਹੈ: 0, 1, 1, 2, 3, 5, 8, 13... (ਮਜ਼ੇਦਾਰ ਤੱਥ: ਤੁਸੀਂ ਇਹ ਪੈਟਰਨ ਵਿੱਚ ਕੁਦਰਤ ਵਿੱਚ ਹਰ ਥਾਂ ਲੱਭੋਗੇ – ਸੂਰਜਮੁਖੀ ਦੇ ਬੀਜ ਵਾਲੀਆਂ ਘੁੰਬਦੀਆਂ, ਚੀੜ ਦੇਸ਼ ਦੇ ਨਮੂਨੇ, ਅਤੇ ਗੈਲੈਕਸੀ ਦੇ ਬਣਤਰਾਂ ਵਿੱਚ!) -✅ **ਫਿਬੋਨਾਚੀ ਸੀਰੀਜ਼ ਬਾਰੇ**: ਇਹ ਬੇਹੱਦ ਸੁੰਦਰ ਗਿਣਤੀ ਦਾ ਪੈਟਰਨ (ਜਿੱਥੇ ਹਰ ਗਿਣਤੀ ਪਿਛਲੇ ਦੋ ਗਿਣਤੀਆਂ ਦੇ ਜੋੜ ਦੇ ਬਰਾਬਰ ਹੁੰਦੀ ਹੈ: 0, 1, 1, 2, 3, 5, 8...) ਕੁਦਰਤ ਵਿੱਚ ਹਰ ਜਗ੍ਹਾ ਮਿਲਦਾ ਹੈ! ਤੁਸੀਂ ਇਸਨੂੰ ਸੂਰਜਮੁਖੀ ਦੇ ਘੁੰਮਾਓ, ਪਾਈਨਕੋਨ ਦੇ ਪੈਟਰਨ, ਨੌਟਿਲਸ ਸ਼ੈਲ ਦੇ ਵਕਰ ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਦਰੱਖਤਾਂ ਦੀਆਂ ਟਾਹਣੀਆਂ ਦੇ ਵਧਣ ਦੇ ਤਰੀਕੇ ਵਿੱਚ ਵੀ ਪਾਓਗੇ। ਇਹ ਵਾਕਈ ਹੈਰਾਨੀਜਨਕ ਹੈ ਕਿ ਗਣਿਤ ਅਤੇ ਕੋਡ ਸਾਨੂੰ ਸਮਝਣ ਅਤੇ ਦੁਬਾਰਾ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ ਜੋ ਕੁਦਰਤ ਸੁੰਦਰਤਾ ਬਣਾਉਣ ਲਈ ਵਰਤਦੀ ਹੈ! +ਤਿਆਰ ਹੋ ਇਸ ਅੰਤਰ ਨੂੰ ਵੇਖਣ ਲਈ? ਚਲੋ ਚੱਲੀਏ! -## ਜਾਦੂ ਬਣਾਉਣ ਵਾਲੇ ਬੁਨਿਆਦੀ ਹਿੱਸੇ +**ਹਾਈ-ਲੈਵਲ ਭਾਸ਼ਾ (JavaScript) – ਮਨੁੱਖੀ-ਮਿੱਤਰ:** -ਚੰਗਾ, ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਦੇਖ ਲਿਆ ਕਿ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਆਓ ਉਹ ਬੁਨਿਆਦੀ ਹਿੱਸੇ ਤੋੜੀਏ ਜੋ ਲਗਭਗ ਹਰ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਬਣਾਉਂਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਰਸੋਈ ਦੇ ਅਵਸ਼ਕ ਅੰਗਾਂ ਵਾਂਗ ਸੋਚੋ – ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਲੈਂਦੇ ਹੋ ਕਿ ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ, ਤੁਸੀਂ ਲਗਭਗ ਕਿਸੇ ਵੀ ਭਾਸ਼ਾ ਵਿੱਚ ਕੋਡ ਪੜ੍ਹ ਅਤੇ ਲਿਖ ਸਕਦੇ ਹੋ! +```javascript +// ਕਦਮ 1: ਮੁਢਲਾ ਫਿਬੋਨਾਚੀ ਸੈਟਅਪ +const fibonacciCount = 10; +let current = 0; +let next = 1; -ਇਹ ਕੁਝ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਵਿਆਕਰਨ ਨੂੰ ਸਿੱਖਣ ਵਾਂਗ ਹੈ। ਯਾਦ ਕਰੋ ਸਕੂਲ ਵਿੱਚ ਜਦੋਂ ਤੁਸੀਂ ਨਾਉਨ, ਵਰਬ ਅਤੇ ਵਾਕ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਬਾਰੇ ਸਿੱਖਿਆ ਸੀ? ਪ੍ਰੋਗਰਾਮਿੰਗ ਦਾ ਆਪਣਾ ਵਿਆਕਰਨ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਸੱਚਮੁੱਚ, ਇਹ ਅੰਗਰੇਜ਼ੀ ਵਿਆਕਰਨ ਤੋਂ ਕਾਫੀ ਜ਼ਿਆਦਾ ਤਰਕਸ਼ੀਲ ਅਤੇ ਮਾਫ਼ ਕਰਨ ਵਾਲਾ ਹੁੰਦਾ ਹੈ! 😄 +console.log('Fibonacci sequence:'); +``` -### ਸਟੇਟਮੈਂਟ: ਕਦਮ-ਦਰ-ਕਦਮ ਹਦਾਇਤਾਂ +**ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:** +- **ਇੱਕ ਨਿਸ਼ਚਿਤ ਕਿੰਨ੍ਹਾ Fibonacci ਅੰਕ ਬਣਾਉਣ ਹਨ, ਇਹ ਦੱਸਣ ਲਈ ਇੱਕ constant ঘোষণা ਕਰੋ** +- **ਦੋ ਵਰिएਬਲਸ ਸ਼ੁਰੂ ਕਰੋ ਜੋ ਵਰਤਮਾਨ ਅਤੇ ਅੱਗਲੇ ਨੰਬਰ ਨੂੰ ਟਰੈਕ ਕਰਨਗੇ** +- **ਸ਼ੁਰੂਆਤੀ ਕੀਮਤਾਂ (0 ਅਤੇ 1) ਸੈੱਟ ਕਰੋ ਜੋ Fibonacci ਪੈਟਰਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀਆਂ ਹਨ** +- **ਆਪਣੇ ਨਤੀਜੇ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਹੈਡਰ ਸੁਨੇਹਾ ਦਿਖਾਓ** -ਆਓ **ਸਟੇਟਮੈਂਟ** ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ – ਇਹ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨਾਲ ਗੱਲਬਾਤ ਵਿੱਚ ਵਿਅਕਤੀਗਤ ਵਾਕਾਂ ਵਾਂਗ ਹੁੰਦੇ ਹਨ। ਹਰ ਸਟੇਟਮੈਂਟ ਕੰਪਿਊਟਰ ਨੂੰ ਇੱਕ ਖਾਸ ਕੰਮ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਦਿਸ਼ਾਵਾਂ ਦੇਣਾ: "ਇੱਥੇ ਖੱਬੇ ਮੁੜੋ," "ਲਾਲ ਬੱਤੀ 'ਤੇ ਰੁਕੋ," "ਉਸ ਜਗ੍ਹਾ 'ਤੇ ਪਾਰਕ ਕਰੋ।" +```javascript +// ਕਦਮ 2: ਲੂਪ ਨਾਲ ਕ੍ਰਮ ਤਿਆਰ ਕਰੋ +for (let i = 0; i < fibonacciCount; i++) { + console.log(`Position ${i + 1}: ${current}`); + + // ਕ੍ਰਮ ਵਿੱਚ ਅਗਲਾ ਨੰਬਰ ਗਣਨਾ ਕਰੋ + const sum = current + next; + current = next; + next = sum; +} +``` -ਮੈਨੂੰ ਸਟੇਟਮੈਂਟ ਬਾਰੇ ਇਹ ਚੰਗਾ ਲੱਗਦਾ ਹੈ ਕਿ ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਕਿੰਨੇ ਪੜ੍ਹਨ ਯੋਗ ਹੁੰਦੇ ਹਨ। ਇਹ ਦੇਖੋ: +**ਅਤੇ ਇਹ ਜਿਹੜਾ ਹੁੰਦਾ ਹੈ:** +- **ਸਾਡੀ ਲੜੀ ਵਿੱਚ ਹਰ ਸਥਾਨ ਲਈ `for` ਲੂਪ ਚਲਾਓ** +- **ਹਰ ਨੰਬਰ ਨੂੰ ਉਸਦੀ ਸਥਿਤੀ ਦੇ ਨਾਲ template literal ਫਾਰਮੈਟ ਵਿੱਚ ਦਿਖਾਓ** +- **ਵਰਤਮਾਨ ਅਤੇ ਅਗਲੇ ਨੰਬਰਾਂ ਨੂੰ ਜੋੜ ਕੇ ਅਗਲਾ Fibonacci ਨੰਬਰ ਗਣਨਾ ਕਰੋ** +- **ਅਗਲੀ ਦੌੜ ਲਈ ਵਰੀਏਬਲਸ ਨੂੰ ਅਪਡੇਟ ਕਰੋ** ```javascript -// Basic statements that perform single actions +// ਕਦਮ 3: ਆਧੁਨਿਕ ਕਾਰਯਕਾਰੀ ਪਹੁੰਚ +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; + +// ਵਰਤੋਂ ਦਾ ਉਦਾਹਰਨ +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` + +**ਉਪਰਲੇ ਕੋਡ ਵਿੱਚ, ਅਸੀਂ:** +- **ਆਧੁਨਿਕ arrow function syntax ਵਰਤ ਕੇ ਇੱਕ ਪਾਠ ਬਣਾਉਂਦਾ ਕਾਰਜਕਾਰੀ function ਬਣਾਇਆ** +- **ਸਾਰੀ ਲੜੀ ਨੂੰ ਇੱਕ ਐਰੇ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਬਜਾਏ ਹਰ ਨੰਬਰ ਦਿਖਾਉਣ ਦੇ** +- **ਪਿਛਲੇ ਨੰਬਰਾਂ ਤੋਂ ਨਵਾਂ ਨੰਬਰ ਕੈਲਕੁਲੇਟ ਕਰਨ ਲਈ ਐਰੇ ਇੰਡੈਕਸਿੰਗ ਵਰਤੀ** +- **ਪੂਰੀ ਲੜੀ ਨੂੰ ਵਾਪਸ ਕੀਤਾ, ਜੋ ਸਾਡੀ ਕਾਰਜਕਾਰੀ ਦੇ ਹੋਰ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵਰਤੀ ਜਾ ਸਕਦੀ ਹੈ** + +**ਲੋ-ਲੇਵਲ ਭਾਸ਼ਾ (ARM Assembly) – ਕੰਪਿਊਟਰ-ਮਿੱਤਰ:** + +```assembly + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਰਜਨ ਲਗਭਗ ਅੰਗਰੇਜ਼ੀ ਹਦਾਇਤਾਂ ਵਾਂਗ ਪੜ੍ਹਦਾ ਹੈ, ਜਦਕਿ Assembly ਵਰਜਨ ਰਾਜ਼ਦਾਰ ਹੁਕਮਾਂ ਦਾ ਇਸਤੇਮਾਲ ਕਰਦਾਂ ਜੋ ਸਿੱਧਾ ਕੰਪਿਊਟਰ ਦੇ ਪ੍ਰੋਸੈਸਰ ਨੂੰ ਕંટ੍ਰੋਲ ਕਰਦਾ ਹੈ। ਦੋਹਾਂ ਨੇ ਇਕੋ ਕੰਮ ਕੀਤਾ, ਪਰ ਹਾਈ-ਲੈਵਲ ਭਾਸ਼ਾ ਮਨੁੱਖਾਂ ਲਈ ਸਮਝਣ, ਲਿਖਣ ਅਤੇ ਸੰਭਾਲਣ ਵਿੱਚ ਬਹੁਤ ਸੌਖੀ ਹੁੰਦੀ ਹੈ। + +**ਤੁਹਾਨੂੰ ਜੋ ਮੁੱਖ ਅੰਤਰ ਨਜ਼ਰ ਆਉਂਦੇ ਹਨ:** +- **ਵਾਚੀਯਤਾ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਰਣਨਾਤਮਕ ਨਾਮ ਵਰਤਦਾ ਹੈ ਜਿਵੇਂ ਕਿ `fibonacciCount` ਜਦਕਿ ਐਸੈਂਬਲੀ ਰਾਜ਼ੀ ਨਾਂ ਜਿਵੇਂ `r0`, `r1` ਵਰਤਦਾ ਹੈ +- **ਟਿੱਪਣੀਆਂ**: ਉੱਚ-ਸਤ੍ਹਰ ਦੀਆਂ ਭਾਸ਼ਾਵਾਂ ਵਿਆਖਿਆਤਮਕ ਟਿੱਪਣੀਆਂ ਦੀ ਹੌਂਸਲਾਬੱਦੀ ਕਰਦੀਆਂ ਹਨ ਜੋ ਕੋਡ ਨੂੰ ਖੁਦ-ਦਸਤਾਵੇਜ਼ ਬਣਾਉਂਦੀਆਂ ਹਨ +- **ਸੰਰਚਨਾ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਦਾ ਤਰਕੀਬੀ ਪ੍ਰਵਾਹ ਇੰਨਾ ਸਵਭਾਵਿਕ ਹੈ ਜਿਵੇਂ ਮਨੁੱਖ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਕਦਮ-ਬੰਦ ਤਰੀਕੇ ਨਾਲ ਸੋਚਦੇ ਹਨ +- **ਰਖ-ਰਖਾਵ**: ਵੱਖ-ਵੱਖ ਲੋੜਾਂ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਰਜਨ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਸਾਡੇ ਲਈ ਸਿਧਾ ਅਤੇ ਸਪਸ਼ਟ ਹੈ + +✅ **ਫਿਬੋਨਾਚੀ ਕ੍ਰਮ ਬਾਰੇ**: ਇਹ ਬਿਲਕੁਲ ਸੁੰਦਰ ਨੰਬਰਾਂ ਦਾ ਪੈਟਰਨ (ਜਿੱਥੇ ਹਰ ਨੰਬਰ ਪਿਛਲੇ ਦੋ ਨੰਬਰਾਂ ਦੇ ਜੋੜ ਦੇ ਬਰਾਬਰ ਹੁੰਦਾ ਹੈ: 0, 1, 1, 2, 3, 5, 8...) ਕੁਦਰਤ ਵਿੱਚ ਹਰੇਕ ਥਾਂ ਸੰਜੀਦਗੀ ਨਾਲ ਮਿਲਦਾ ਹੈ! ਤੁਸੀਂ ਇਹ ਸੂਰਜਮੁਖੀ ਦੇ ਸੁਤਰਾਂਵਾਂ, ਪਾਈਨਕੋਨ ਦੇ ਨਮੂਨੇ, ਨੌਟਿਲਸ ਖੋਲ੍ਹਾਂ ਦੇ ਮੁੜਨ ਦੇ ਤਰੀਕੇ ਅਤੇ ਦਰੱਖਤ ਦੀਆਂ ਸ਼ਾਖਾਂ ਦੀ ਵਧੌਤ ਵਿੱਚ ਵੀ ਦੇਖੋਗੇ। ਇਹ ਕਿਤਨਾ ਅਦਭੁਤ ਗੱਲ ਹੈ ਕਿ ਗਣਿਤ ਅਤੇ ਕੋਡ ਸਾਡੇ ਲਈ ਕੁਦਰਤੀ ਸੁੰਦਰਤਾ ਬਣਾਉਣ ਵਾਲੇ ਪੈਟਰਨ ਨੂੰ ਸਮਝਣ ਅਤੇ ਦੁਹਰਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ! + +## ਬਿਲਡਿੰਗ ਬਲਾਕ ਜੋ ਜਾਦੂ ਬਣਾਉਂਦੇ ਹਨ + +ਚਲੋ, ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਦੇਖ ਚੁੱਕੇ ਹੋ ਕਿ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਮਲ ਵਿੱਚ ਕੀਹ ਲੱਗਦੀਆਂ ਹਨ, ਚਲੋ ਉਹ ਮੂਲਭੂਤ ਤੱਤ ਤੋੜਦੇ ਹਾਂ ਜੋ ਹਰੇਕ ਲਿਖੇ ਪ੍ਰੋਗ੍ਰਾਮ ਨੂੰ ਬਣਾਉਂਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਮਨਪਸੰਦ ਰੇਸੀਪੀ ਦੇ ਜਰੂਰੀ ਸਮਗਰੀ ਜਿਵੇਂ ਸੋਚੋ – ਜਦੋਂ ਤੁਸੀਂ ਜਾਣ ਲਵੋਗੇ ਕਿ ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ ਤਾਂ ਤੁਸੀਂ ਲਗਭਗ ਕਿਸੇ ਭਾਸ਼ਾ ਵਿੱਚ ਕੋਡ ਨੂੰ ਪੜ੍ਹ ਅਤੇ ਲਿਖ ਸਕੋਗੇ! + +ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੀ ਵਿਸ਼ੇਸ਼ ਭਾਸ਼ਾ ਸਿਖ ਰਹੇ ਹੋ। ਸਕੂਲ ਵਿੱਚ ਜਦੋਂ ਤੁਸੀਂ ਨਾਂਉਂ, ਕਿਰਿਆਵਾਂ ਅਤੇ ਵਾਕਾਂ ਦੀ ਬਣਤਰ ਸਿੱਖੀ ਸੀ, ਤਾਂ ਇਹ ਵੀ ਉਸੇ ਤਰ੍ਹਾਂ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੀ ਆਪਣੀ ਗ੍ਰਾਮਰ ਹੈ, ਜੋ ਇੰਗਲਿਸ਼ ਦੀ ਗ੍ਰਾਮਰ ਨਾਲੋਂ ਕਾਫੀ ਜ਼ਿਆਦਾ ਤਰਕਸ਼ੀਲ ਅਤੇ ਮਾਫ਼ ਕਰਣ ਵਾਲੀ ਹੈ! 😄 + +### ਬਿਆਨ: ਕਦਮ-ਬਦ ਕਦਮ ਨਿਰਦੇਸ਼ + +ਆਓ **ਬਿਆਨਾਂ** ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ – ਇਹ ਬਿਲਕੁਲ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨਾਲ ਸਾਂਝੀ ਗੱਲਬਾਤ ਵਿੱਚ ਵਾਕਾਂ ਵਾਂਗ ਹਨ। ਹਰ ਬਿਆਨ ਕੰਪਿਊਟਰ ਨੂੰ ਇੱਕ ਖਾਸ ਕੰਮ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ, ਹੋਰ ਥਾਂ ਨਾਲ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਦੇਣ ਵਰਗਾ: "ਇੱਥੇ ਖੱਬੇ ਮੁੜੋ," "ਲਾਲ ਬੱਤੀ ਤੇ ਰੁਕੋ," "ਉਸ ਥਾਂ ਗੱਡੀ ਖੜੀ ਕਰੋ।" + +ਮੈਨੂੰ ਬਿਆਨਾਂ ਦੀ ਪੜ੍ਹਨਯੋਗਤਾ ਬਹੁਤ ਪਸੰਦ ਹੈ ਕਿਉਂਕਿ ਇਹ ਆਮ ਤੌਰ ਤੇ ਕਾਫੀ ਸਮਝਣਯੋਗ ਹੁੰਦੇ ਹਨ। ਏਹ ਵੇਖੋ: + +```javascript +// ਮੂਲ ਬਿਆਨ ਜੋ ਇਕੱਲੀ ਕਾਰਵਾਈ ਕਰਦੇ ਹਨ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:** -- **ਘੋਸ਼ਣਾ** ਕਰੋ ਇੱਕ constant variable ਨੂੰ ਵਰਤੋਂਕਾਰ ਦੇ ਨਾਮ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ -- **ਦਿਖਾਓ** ਇੱਕ ਸਵਾਗਤ ਸੰਦੇਸ਼ ਨੂੰ console output 'ਤੇ -- **ਗਣਨਾ ਕਰੋ** ਅਤੇ ਇੱਕ ਗਣਿਤੀਕ ਕਾਰਵਾਈ ਦੇ ਨਤੀਜੇ ਨੂੰ ਸਟੋਰ ਕਰੋ +- ਇੱਕ ਯੂਜ਼ਰ ਦੇ ਨਾਮ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਇੱਕ ਅਸਥਿਰ ਵੈਰੀਏਬਲ ਘੋਸ਼ਿਤ ਕਰੋ +- ਕਨਸੋਲ ਆઉਟਪੁੱਟ ’ਤੇ ਸਲਾਮੀ ਸੁਨੇਹੁ ਦਿਖਾਓ +- ਗਣਿਤੀ ਕਾਰਵਾਈ ਦਾ ਨਤੀਜਾ ਕੈਲਕੁਲੇਟ ਕਰੋ ਅਤੇ ਸਟੋਰ ਕਰੋ ```javascript -// Statements that interact with web pages +// ਬਿਆਨ ਜੋ ਵੈੱਬ ਪੰਨਿਆਂ ਨਾਲ ਇੰਟਰਏਕਟ ਕਰਦੇ ਹਨ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**ਕਦਮ-ਦਰ-ਕਦਮ, ਇਹ ਹੈ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:** -- **ਸੋਧੋ** ਵੈਬਪੇਜ ਦਾ ਸਿਰਲੇਖ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ -- **ਬਦਲੋ** ਪੂਰੇ ਪੇਜ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦਾ ਰੰਗ +**ਕਦਮ-ਦਰ-ਕਦਮ ਇਹ ਹੋ ਰਿਹਾ ਹੈ:** +- ਬਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ ਵੇਬਪੇਜ ਦਾ ਸਿਰਲੇਖ ਬਦਲੋ +- ਪੂਰੇ ਪੇਜ ਬਾਡੀ ਦਾ ਪਿਛੋਕੜ ਰੰਗ ਬਦਲੋ -### ਵੈਰੀਏਬਲ: ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦਾ ਮੈਮੋਰੀ ਸਿਸਟਮ +### ਵੈਰੀਏਬਲ: ਤੁਹਾਡੇ ਪ੍ਰੋਗ੍ਰਾਮ ਦੀ ਯਾਦਦਾਸ਼ਤ ਪ੍ਰਣਾਲੀ -ਚੰਗਾ, **ਵੈਰੀਏਬਲ** ਸੱਚਮੁੱਚ ਮੇਰੇ ਮਨਪਸੰਦ ਸੰਕਲਪਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹਨ ਸਿੱਖਾਉਣ ਲਈ ਕਿਉਂਕਿ ਇਹ ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਵਾਂਗ ਹਨ ਜੋ ਤੁਸੀਂ ਹਰ ਰੋਜ਼ ਵਰਤਦੇ ਹੋ! +ਠੀਕ ਹੈ, **ਵੈਰੀਏਬਲ** ਮੇਰੇ ਮਨਪਸੰਦ ਤੱਤਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹਨ ਕਿਉਂਕਿ ਇਹ ਹਰ ਰੋਜ਼ ਵਰਤੇ ਜਾਂਦੇ ਚੀਜ਼ਾਂ ਵਾਂਗ ਹਨ! -ਤੁਹਾਡੇ ਫੋਨ ਦੇ ਸੰਪਰਕ ਸੂਚੀ ਬਾਰੇ ਇੱਕ ਸਕਿੰਟ ਲਈ ਸੋਚੋ। ਤੁਸੀਂ ਹਰ ਕਿਸੇ ਦਾ ਫੋਨ ਨੰਬਰ ਯਾਦ ਨਹੀਂ ਕਰਦੇ – ਇਸਦੀ ਬਜਾਏ, ਤੁਸੀਂ "ਮਾਂ," "ਸਰਬੋਤਮ ਦੋਸਤ," ਜਾਂ "ਪਿਜ਼ਾ ਸਥਾਨ ਜੋ 2 AM ਤੱਕ ਡਿਲਿਵਰੀ ਕਰਦਾ ਹੈ" ਸੇਵ ਕਰਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਫੋਨ ਨੂੰ ਅਸਲ ਨੰਬਰ ਯਾਦ ਕਰਨ ਦਿੰਦੇ ਹੋ। ਵੈਰੀਏਬਲ ਬਿਲਕੁਲ ਇਸੇ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ! ਇਹ ਲੇਬਲ ਵਾਲੇ ਕੰਟੇਨਰਾਂ ਵਾਂਗ ਹੁੰਦੇ ਹਨ ਜਿੱਥੇ ਤੁਹਾਡਾ ਪ੍ਰੋਗਰਾਮ ਜਾਣਕਾਰੀ ਸਟੋਰ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇੱਕ ਨਾਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦਾ ਹੈ ਜੋ ਵਾਸਤਵ ਵਿੱਚ ਮਾਨਸੂਬੀ ਬਣਾਉਂਦਾ ਹੈ। +ਆਪਣੇ ਫੋਨ ਦੇ ਕਾਂਟੈਕਟ ਲਿਸਟ ਬਾਰੇ ਸੋਚੋ। ਤੁਸੀਂ ਹਰ ਕਿਸੇ ਦਾ ਨੰਬਰ ਯਾਦ ਨਹੀਂ ਰੱਖਦੇ – ਤੁਸੀਂ "ਮਾਂ," "ਸਭ ਤੋਂ ਚੰਗਾ ਮਿੱਤਰ," ਜਾਂ "ਉਹ ਪੀਜ਼ਾ ਵਾਲਾ ਜਿਹੜਾ ਰਾਤ 2 ਵਜੇ ਤੱਕ ਡਿਲਿਵਰੀ ਕਰਦਾ ਹੈ" ਵਰਗੇ ਨਾਮ ਸੇਵ ਕਰ ਲੈਂਦੇ ਹੋ ਅਤੇ ਫੋਨ ਅਸਲੀ ਨੰਬਰ ਯਾਦ ਰੱਖਦਾ ਹੈ। ਵੈਰੀਏਬਲ ਵੀ ਏਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ! ਇਹ ਲੇਬਲ ਕੀਤੇ ਹੋਏ ਕੰਟੇਨਰ ਵਾਂਗ ਹਨ ਜਿੱਥੇ ਤੁਹਾਡਾ ਪ੍ਰੋਗ੍ਰਾਮ ਜਾਣਕਾਰੀ ਸਟੋਰ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਉਸਨੂੰ ਇਕ ਸੂਚਿਤ ਨਾਮ ਨਾਲ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦਾ ਹੈ। -ਇਹ ਹੈ ਕਿ ਕੀ ਚੰਗਾ ਹੈ: ਵੈਰੀਏਬਲ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਚਲਣ ਦੇ ਨਾਲ ਬਦਲ ਸਕਦੇ ਹਨ (ਇਸ ਲਈ ਨਾਮ "ਵੈਰੀਏਬਲ" – ਦੇਖੋ ਉਹਨਾਂ ਨੇ ਕੀ ਕੀਤਾ?). ਜਿਵੇਂ ਤੁਸੀਂ ਉਸ ਪਿਜ਼ਾ ਸਥਾਨ ਸੰਪਰਕ ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਕੋਈ ਹੋਰ ਬਿਹਤਰ ਸਥਾਨ ਲੱਭਦੇ ਹੋ, ਵੈਰੀਏਬਲ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਨਵੀਂ ਜਾਣਕਾਰੀ ਸਿੱਖਣ ਜਾਂ ਸਥਿਤੀਆਂ ਦੇ ਬਦਲਣ ਦੇ ਨਾਲ ਅਪਡੇਟ ਹੋ ਸਕਦੇ ਹਨ! +ਇਹ ਗੱਲ ਵਧੀਆ ਹੈ ਕਿ ਵੈਰੀਏਬਲ ਆਪਣੇ ਨੂੰ ਚਲਦੇ ਸਮੇਂ ਬਦਲ ਸਕਦੇ ਹਨ (ਇਸ ਲਈ ਨਾਮ "ਵੈਰੀਏਬਲ" ਰੱਖਿਆ ਗਿਆ ਹੈ – ਵੇਖੋ ਕਿਵੇਂ ਖੇਡ ਰਹੇ ਹਨ)। ਜਿਵੇਂ ਤੁਸੀਂ ਉਹ ਪੀਜ਼ਾ ਠੇਕਣਾ ਅਪਡੇਟ ਕਰਦੇ ਹੋ ਜਦ ਤੁਹਾਨੂੰ ਕੋਈ ਹੋਰ ਚੰਗਾ ਜਗ੍ਹਾ ਮਿਲ ਜਾਂਦੀ ਹੈ, ਵੈਰੀਏਬਲ ਵੀ ਪ੍ਰੋਗ੍ਰਾਮ ਵਿਚ ਨਵਾਂ ਡੇਟਾ ਆਉਣ ਜਾਂ ਹਾਲਾਤ ਬਦਲਣ ਤੇ ਅਪਡੇਟ ਹੁੰਦੇ ਹਨ! -ਮੈਨੂੰ ਤੁਹਾਨੂੰ ਦਿਖਾਉਣ ਦਿਓ ਕਿ ਇਹ ਕਿੰਨਾ ਸੁੰਦਰ ਅਤੇ ਸਧਾਰਨ ਹੋ ਸਕਦਾ ਹੈ: +ਹੇਠਾਂ ਵਿਖਾਉਂਦਾ ਹਾਂ ਕਿ ਇਹ ਕਿਵੇਂ ਸੁੰਦਰ ਅਤੇ ਸਧਾਰਨ ਹੋ ਸਕਦਾ ਹੈ: ```javascript -// Step 1: Creating basic variables +// ਕਦਮ 1: ਮੁਢਲੀ ਵੈਰੀਏਬਲ ਬਣਾਉਣਾ const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` -**ਇਹ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝਣਾ:** -- **ਸਟੋਰ** ਅਸਥਿਰ ਮੁੱਲਾਂ ਨੂੰ `const` ਵੈਰੀਏਬਲਾਂ ਵਿੱਚ (ਜਿਵੇਂ ਸਾਈਟ ਦਾ ਨਾਮ) -- **ਵਰਤੋਂ** `let` ਉਹ ਮੁੱਲਾਂ ਲਈ ਜੋ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਦੌਰਾਨ ਬਦਲ ਸਕਦੇ ਹਨ -- **ਅਸਾਈਨ** ਵੱਖ-ਵੱਖ ਡੇਟਾ ਕਿਸਮਾਂ: strings (ਟੈਕਸਟ), numbers, ਅਤੇ booleans (true/false) -- **ਚੁਣੋ** ਵਿਆਖਿਆਤਮਕ ਨਾਮ ਜੋ ਹਰ ਵੈਰੀਏਬਲ ਵਿੱਚ ਕੀ ਹੈ ਇਹ ਸਮਝਾਉਂਦੇ ਹਨ +**ਇਹ ਅਸੂਲ ਸਮਝੋ:** +- `const` ਵੈਰੀਏਬਲਾਂ ਵਿੱਚ ਅਟੱਲ ਮੁੱਲ ਸਟੋਰ ਕਰੋ (ਜਿਵੇਂ ਸਾਈਟ ਦਾ ਨਾਮ) +- `let` ਦਾ ਉਪਯੋਗ ਕਰੋ ਉਹ ਮੁੱਲ ਜਿਹੜੇ ਤੁਹਾਡੇ ਪ੍ਰੋਗ੍ਰਾਮ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹਨ +- ਵੱਖ ਵੱਖ ਡਾਟਾ ਕਿਸਮਾਂ ਨਿਰਧਾਰਿਤ ਕਰੋ: ਸਤਰਾਂ (ਟੈਕਸਟ), ਸੰਖਿਆਵਾਂ ਅਤੇ ਬੂਲੀਅਨ (ਸੱਚ/ਝੂਠ) +- ਵਿਆਖਿਆਤਮਕ ਨਾਮ ਚੁਣੋ ਜੋ ਦੱਸਣ ਕਿ ਹਰ ਵੈਰੀਏਬਲ ਵਿੱਚ ਕੀ ਹੈ ```javascript -// Step 2: Working with objects to group related data +// ਕਦਮ 2: ਸੰਬੰਧਤ ਡਾਟਾ ਨੂੰ ਇਕੱਠਾ ਕਰਨ ਲਈ ਆਬਜੈਕਟਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ const weatherData = { location: "San Francisco", humidity: 65, @@ -127,50 +334,50 @@ const weatherData = { }; ``` -**ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:** -- **ਬਣਾਇਆ** ਇੱਕ object ਜੋ ਸੰਬੰਧਿਤ ਮੌਸਮ ਜਾਣਕਾਰੀ ਨੂੰ ਇਕੱਠਾ ਕਰਦਾ ਹੈ -- **ਸੰਗਠਿਤ** ਕਈ ਡੇਟਾ ਟੁਕੜੇ ਇੱਕ ਵੈਰੀਏਬਲ ਨਾਮ ਦੇ ਹੇਠਾਂ -- **ਵਰਤੋਂ** key-value ਜੋੜੇ ਹਰ ਜਾਣਕਾਰੀ ਦੇ ਟੁਕੜੇ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਲੇਬਲ ਕਰਨ ਲਈ +**ਉੱਪਰ ਦਿੱਤਾ ਗਿਆ:** +- ਇੱਕ ਓਬਜੈਕਟ ਬਣਾਇਆ ਜੋ ਸਬੰਧਤ ਮੌਸਮੀ ਜਾਣਕਾਰੀ ਨੂੰ ਇਕੱਠਾ ਕਰਦਾ ਹੈ +- ਕਈ ਜਾਣਕਾਰੀ ਨੂੰ ਇੱਕ ਵੈਰੀਏਬਲ ਨਾਮ ਹੇਠ ਇਕਟਠਾ ਕੀਤਾ +- ਲੇਬਲ ਕਰਨ ਲਈ ਕੀ-ਮੁੱਲ ਜੋੜਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ```javascript -// Step 3: Using and updating variables +// ਕਦਮ 3: ਵేరੀਏਬਲ ਵਰਤੋਂ ਅਤੇ ਅਪਡੇਟ ਕਰਨਾ console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// ਬਦਲਣਯੋਗ ਵేరੀਏਬਲ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ currentWeather = "cloudy"; temperature = 68; ``` -**ਆਓ ਹਰ ਹਿੱਸੇ ਨੂੰ ਸਮਝੀਏ:** -- **ਦਿਖਾਓ** ਜਾਣਕਾਰੀ ਨੂੰ template literals ਦੇ ਨਾਲ `${}` syntax ਵਰਤ ਕੇ -- **ਪਹੁੰਚੋ** object properties ਨੂੰ dot notation (`weatherData.windSpeed`) ਨਾਲ -- **ਅਪਡੇਟ ਕਰੋ** `let` ਨਾਲ ਘੋਸ਼ਿਤ ਵੈਰੀਏਬਲ ਨੂੰ ਬਦਲ ਰਹੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ -- **ਜੋੜੋ** ਕਈ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਅਰਥਪੂਰਨ ਸੰਦੇਸ਼ ਬਣਾਉਣ ਲਈ +**ਹਰੇਕ ਹਿੱਸੇ ਨੂੰ ਸਮਝੋ:** +- ਇੰਫੋ ਲਈ ਟੈਂਪਲੇਟ ਲਿਟਰਲ `${}` ਸਿੰਟੈਕਸ ਨਾਲ ਜਾਣਕਾਰੀ ਦਿਖਾਓ +- ਡਾਟ ਨੋਟੇਸ਼ਨ (`weatherData.windSpeed`) ਨਾਲ ਓਬਜੈਕਟ ਦੀਆਂ ਸੰਪਤੀਆਂ ਨੂੰ ਐਕਸੈੱਸ ਕਰੋ +- ਬਦਲ ਸਕਣ ਵਾਲੇ `let` ਵੈਰੀਏਬਲ ਬਦਲੋ ਤਸ਼ਦੀਕ ਲਈ +- ਅਰਥਪੂਰਨ ਸੁਨੇਹੇ ਬਣਾਉਣ ਲਈ ਕਈ ਵੈਰੀਏਬਲ ਮਿਲਾਓ ```javascript -// Step 4: Modern destructuring for cleaner code +// ਕਦਮ 4: ਸਾਫ ਸੂਥਰੇ ਕੋਡ ਲਈ ਆਧੁਨਿਕ ਵਿਘਟਨ const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ:** -- **ਨਿਕਾਲੋ** ਖਾਸ properties ਨੂੰ objects ਤੋਂ destructuring assignment ਦੀ ਵਰਤੋਂ ਕਰਕੇ -- **ਬਣਾਓ** ਨਵੇਂ ਵੈਰੀਏਬਲ ਆਪਣੇ ਆਪ object keys ਦੇ ਨਾਮਾਂ ਦੇ ਨਾਲ -- **ਸਰਲ ਕਰੋ** ਕੋਡ ਨੂੰ ਦੁਹਰਾਉਣ ਵਾਲੀ dot notation ਤੋਂ ਬਚ ਕੇ +**ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨਾ ਚਾਹੀਦਾ ਹੈ:** +- ਵਿਖੰਡਨ ਅਸਾਈਨਮੈਂਟ ਨਾਲ ਓਬਜੈਕਟਾਂ ਤੋਂ ਖਾਸ ਸੰਪਤੀਆਂ ਕੱਢੋ +- ਓਬਜੈਕਟ ਕੀ ਕੀ ਜਾਂਨਾਂ ਵਾਂਗ ਖੁਦ-ਬ-ਖੁਦ ਨਵਾਂ ਵੈਰੀਏਬਲ ਬਣਾਓ +- ਡਾਟ ਨੋਟੇਸ਼ਨ ਬਾਰੰਬਾਰ ਕਰਨ ਤੋਂ ਬਚਾਉਣ ਨਾਲ ਕੋਡ ਸੀਧਾ ਕਰੋ -### ਕੰਟਰੋਲ ਫਲੋ: ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਸੋਚਣਾ ਸਿਖਾਉਣਾ +### ਕੰਟਰੋਲ ਫਲੋ: ਆਪਣੇ ਪ੍ਰੋਗ੍ਰਾਮ ਨੂੰ ਸੋਚਣਾ ਸਿਖਾਉਣਾ -ਚੰਗਾ, ਇਹ ਜਿੱਥੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਬਿਲਕੁਲ ਹੈਰਾਨੀਜਨਕ ਹੋ ਜਾਂਦੀ ਹੈ! **ਕੰਟਰੋਲ ਫਲੋ** ਮੂਲ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਸਮਾਰਟ ਫੈਸਲੇ ਲੈਣਾ ਸਿਖਾਉਣਾ ਹੈ, ਬਿਲਕੁਲ ਜਿਵੇਂ ਤੁਸੀਂ ਹਰ ਰੋਜ਼ ਬਿਨਾਂ ਸੋਚੇ ਸਮਝਦੇ ਹੋ। +ਠੀਕ ਹੈ, ਇੱਥੇ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਬਿਲਕੁਲ ਅਤੇ ਬਿਲਕੁਲ ਮਨ ਨੂੰ ਘੇਰ ਲੈਣ ਵਾਲੀ ਹੋ ਜਾਂਦੀ ਹੈ! **ਕੰਟਰੋਲ ਫਲੋ** ਹੈ ਉਹ ਤਰੀਕਾ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਗ੍ਰਾਮ ਨੂੰ ਸਮਾਰਟ ਫ਼ੈਸਲੇ ਕਰਨਾ ਸਿਖਾਉਂਦੇ ਹੋ, ਜਿਵੇਂ ਤੁਸੀਂ ਹਰ ਰੋਜ਼ ਬਿਨਾਂ ਸੋਚੇ ਕੀਤਾ ਕਰੋ। -ਇਸਨੂੰ ਸੋਚੋ: ਅੱਜ ਸਵੇਰੇ ਤੁਸੀਂ ਸ਼ਾਇਦ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਕੀਤਾ ਹੋਵੇਗਾ "ਜੇ ਬਾਰਿਸ਼ ਹੋ ਰਹੀ ਹੈ, ਤਾਂ ਮੈਂ ਛਤਰੀ ਲਵਾਂਗਾ। ਜੇ ਠੰਢ ਹੈ, ਤਾਂ ਮੈਂ ਜੈਕਟ ਪਹਿਨਾਂਗਾ। ਜੇ ਮੈਂ ਦੇਰ ਕਰ ਰਿਹਾ ਹਾਂ, ਤਾਂ ਮੈਂ ਨਾਸ਼ਤਾ ਛੱਡ ਦਿਆਂਗਾ ਅਤੇ ਰਾਹ ਵਿੱਚ ਕੌਫੀ ਲਵਾਂਗਾ।" ਤੁਹਾਡਾ ਦਿਮਾਗ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਇਸ if-then ਤਰਕ ਨੂੰ ਹਰ ਰੋਜ਼ ਦਜਨਾਂ ਵਾਰ ਫਾਲੋ ਕਰਦਾ ਹੈ! +ਕਲਪਨਾ ਕਰੋ: ਸਵੇਰੇ ਤੁਸੀਂ ਸੋਚਿਆ "ਜੇ ਬਾਰਿਸ਼ ਹੋ ਰਹੀ ਹੈ ਤਾਂ ਛਤਰੀ ਲਵਾਂਗਾ। ਜੇ ਠੰਢ ਹੈ ਤਾਂ ਜੈਕਟ ਪਹਿਨਾਂਗਾ। ਜੇ ਦੇਰ ਹੋ ਰਹੀ ਹੈ ਤਾਂ ਨਾਸ਼ਤਾ ਛੱਡ ਕੇ ਕੌਫੀ ਲਵਾਂਗਾ।" ਤੁਹਾਡਾ ਦਿਮਾਗ ਹਰ ਰੋਜ਼ ਇਸ ਤਰ੍ਹਾਂ ਦੀ 'ਜੇ-ਤਦ' ਤਰਕਸੰਗਤ ਲਾਜਿਕ ਕਈ ਵਾਰ ਅਮਲ ਕਰਦਾ ਹੈ! -ਇਹ ਉਹ ਹੈ ਜੋ ਪ੍ਰੋਗਰਾਮਾਂ ਨੂੰ ਬੇਵਕੂਫ਼, ਪੇਸ਼ਕਸ਼ੀਲ ਸਕ੍ਰਿਪਟ ਦੀ ਪਾਲਣਾ ਕਰਨ ਦੀ ਬਜਾਏ ਸਮਾਰਟ ਅਤੇ ਜ਼ਿੰਦਾ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ। ਉਹ ਵਾਸਤਵ ਵਿੱਚ ਇੱਕ ਸਥਿਤੀ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹਨ, ਜੋ ਹੋ ਰਿਹਾ ਹੈ ਉਸਦਾ ਅਨੁਮਾਨ ਲਗਾ ਸਕਦੇ ਹਨ, ਅਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰ ਸਕਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਇੱਕ ਦਿਮਾਗ ਦੇਣ ਵਾਂਗ ਹੈ ਜੋ ਅਨੁਕੂਲ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਚੋਣਾਂ ਕਰ ਸਕਦਾ ਹੈ! +ਇਹੀ ਕਾਰਨ ਹੈ ਕਿ ਪ੍ਰੋਗ੍ਰਾਮ ਭੁੱਲੋ-ਭੁੱਲਾਈ ਸਮਝਦਾਰ ਅਤੇ ਜ਼ਿੰਦਾ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ ਨਾ ਕਿ ਕੋਈ ਇਕ ਰੁਟੀਨੀ ਕਥਾ ਬਣਾ ਕੇ ਦਿਓ। ਇਹ ਹਾਲਾਤ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹਨ, ਮੂਲਾਂਕਣ ਕਰ ਸਕਦੇ ਹਨ, ਅਤੇ ਉਚਿਤ ਜਵਾਬ ਦੇ ਸਕਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਪ੍ਰੋਗ੍ਰਾਮ ਨੂੰ ਇੱਕ ਅਜਿਹਾ ਦਿਮਾਗ ਦਿੰਦਾ ਹੈ ਜੋ ਅਨੁਕੂਲਨ ਅਤੇ ਚੋਣਾਂ ਕਰ ਸਕਦਾ ਹੈ! -ਤੁਹਾਨੂੰ ਦਿਖਾਉਣ ਦਿਓ ਕਿ ਇਹ ਕਿੰਨਾ ਸੁੰਦਰ ਕੰਮ ਕਰਦਾ ਹੈ: +ਚਾਹੁੰਦੇ ਹੋ ਵੇਖਣਾ ਕਿ ਇਹ ਕਿਵੇਂ ਸੁੰਦਰ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ? ਮੈਨੂੰ ਦਿਖਾਉਣ ਦਿਓ: ```javascript -// Step 1: Basic conditional logic +// ਕਦਮ 1: ਮੂਲ ਸ਼ਰਤੀ ਤਰਕ const userAge = 17; if (userAge >= 18) { @@ -182,13 +389,13 @@ if (userAge >= 18) { ``` **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:** -- **ਜਾਂਚੋ** ਕਿ ਵਰਤੋਂਕਾਰ ਦੀ ਉਮਰ ਵੋਟਿੰਗ ਦੀ ਲੋੜ ਨੂੰ ਪੂਰਾ ਕਰਦੀ ਹੈ ਜਾਂ ਨਹੀਂ -- **ਅਮਲ ਕਰੋ** ਵੱਖ-ਵੱਖ ਕੋਡ ਬਲਾਕ ਸਥਿਤੀ ਦੇ ਨਤੀਜੇ ਦੇ ਆਧਾਰ 'ਤੇ -- **ਗਣਨਾ ਕਰੋ** ਅਤੇ ਦਿਖਾਓ ਕਿ ਵੋਟਿੰਗ ਯੋਗਤਾ ਤੱਕ ਕਿੰਨਾ ਸਮਾਂ ਬਾਕੀ ਹੈ ਜੇ 18 ਤੋਂ ਘੱਟ ਹੈ -- **ਪ੍ਰਦਾਨ ਕਰੋ** ਹਰ ਸਥਿਤੀ ਲਈ ਖਾਸ, ਮਦਦਗਾਰ ਫੀਡਬੈਕ +- ਜਾਂਚ ਕਰਦਾ ਹੈ ਕਿ ਯੂਜ਼ਰ ਦੀ ਉਮਰ ਵੋਟਿੰਗ ਦੀ ਯੋਗਤਾ ਨੂੰ ਪੂਰਾ ਕਰਦੀ ਹੈ +- ਸਥਿਤੀ ਦੇ ਨਤੀਜੇ ਅਨੁਸਾਰ ਵੱਖਰੇ ਕੋਡ ਬਲਾਕ ਚਲਾਉਂਦਾ ਹੈ +- 18 ਤੋਂ ਘੱਟ ਹਲਾਤ ਵਿੱਚ ਵੋਟਿੰਗ ਅਧਿਕਾਰ ਤੱਕ ਕਿੰਨੀ ਦੇਰ ਹੈ ਕੈਲਕੁਲੇਟ ਕਰਦਾ ਹੈ ਅਤੇ ਦਿਖਾਉਂਦਾ ਹੈ +- ਹਰ ਸਥਿਤੀ ਲਈ ਖਾਸ ਅਤੇ ਮਦਦਗਾਰ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ```javascript -// Step 2: Multiple conditions with logical operators +// ਕਦਮ 2: ਤਰਕਿਕ ਓਪਰੇਟਰਾਂ ਨਾਲ ਕਈ ਸ਼ਰਤਾਂ const userAge = 17; const hasPermission = true; @@ -201,25 +408,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ ਇਸਨੂੰ ਤੋੜ ਕੇ ਸਮਝੋ:** -- **ਜੋੜੋ** ਕਈ ਸਥਿਤੀਆਂ ਨੂੰ `&&` (and) operator ਦੀ ਵਰਤੋਂ ਕਰਕੇ -- **ਬਣਾਓ** ਸਥਿਤੀਆਂ ਦੀ ਇੱਕ hierarchy `else if` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ ਸਥਿਤੀਆਂ ਲਈ -- **ਸੰਭਾਲੋ** ਸਾਰੀਆਂ ਸੰਭਾਵਿਤ ਸਥਿਤੀਆਂ ਨੂੰ ਇੱਕ ਅੰਤਮ `else` ਸਟੇਟਮ ਨਾਲ -- **ਪ੍ਰਦਾਨ ਕਰੋ** ਸਪਸ਼ਟ, ਕਾਰਵਾਈਯੋਗ ਫੀਡਬੈਕ ਹਰ ਵੱਖ-ਵੱਖ ਸਥਿਤੀ ਲਈ +**ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:** +- ਕਈ ਸਥਿਤੀਆਂ ਨੂੰ `&&` (ਅਤੇ) ਓਪਰੇਟਰ ਨਾਲ ਜੋੜਦਾ ਹੈ +- ਕਈ ਹਾਲਾਤਾਂ ਲਈ `else if` ਨਾਲ ਸਥਿਤੀ ਦੀ ਸ਼੍ਰੇਣੀ ਬਣਾਉਂਦਾ ਹੈ +- ਸਭ ਸੰਭਾਵਿਤ ਹਾਲਾਤਾਂ ਨੂੰ ਇੱਕ ਆਖਰੀ `else` ਨਾਲ ਸੰਭਾਲਦਾ ਹੈ +- ਹਰ ਵੱਖਰੀ ਸਥਿਤੀ ਲਈ ਸਪਸ਼ਟ ਫੀਡਬੈਕ ਦਿੰਦਾ ਹੈ ```javascript -// Step 3: Concise conditional with ternary operator +// ਕਦਮ 3: ਤਿਨ-ਅਪਰੇਟਰ ਨਾਲ ਸੰਖੇਪ ਸਥਿਤੀਕਸ਼ਰ const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**ਤੁਹਾਨੂੰ ਕੀ ਯਾਦ ਰੱਖਣਾ ਹੈ:** -- **ਵਰਤੋਂ** ternary operator (`? :`) ਸਧਾਰਨ ਦੋ-ਵਿਕਲਪ ਸਥਿਤੀਆਂ ਲਈ -- **ਲਿਖੋ** ਸਥਿਤੀ ਪਹਿਲਾਂ, ਫਿਰ `?`, ਫਿਰ ਸੱਚਾ ਨਤੀਜਾ, ਫਿਰ `:`, ਫਿਰ ਗਲਤ ਨਤੀਜਾ -- **ਲਾਗੂ ਕਰੋ** ਇਹ ਪੈਟਰਨ ਜਦੋਂ ਤੁਹਾਨੂੰ ਸਥਿਤੀਆਂ ਦੇ ਆਧਾਰ 'ਤੇ ਮੁੱਲਾਂ ਅਸਾਈਨ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇ +**ਸਮਝਣ ਦੀ ਗੱਲ:** +- ਆਸਾਨ ਦੋ-ਵਿਕਲਪ ਵਾਲੀਆਂ ਸਥਿਤੀਆਂ ਲਈ ਟਰਨਰੀ ਓਪਰੇਟਰ (`? :`) ਨਾਲ ਵਰਤੋਂ ਕਰੋ +- ਪਹਿਲਾਂ ਸਥਿਤੀ ਲਿਖੋ, ਫਿਰ `?`, ਫਿਰ ਸੱਚ ਨਤੀਜਾ, ਫਿਰ `:`, ਫਿਰ ਝੂਠ ਨਤੀਜਾ +- ਜਦ ਤੁਹਾਨੂੰ ਸਥਿਤੀ ਅਨੁਸਾਰ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰਨੇ ਹੋਣ ਤਦ ਇਹ ਪੈਟਰਨ ਵਰਤੋਂ ```javascript -// Step 4: Handling multiple specific cases +// ਕਦਮ 4: ਕਈ ਵਿਸ਼ੇਸ਼ ਮਾਮਲਿਆਂ ਨੂੰ ਸੰਭਾਲਣਾ const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -239,261 +446,406 @@ switch (dayOfWeek) { } ``` -**ਇਹ ਕੋਡ ਹਾਸਲ ਕਰਦਾ ਹੈ:** -- **ਮਿਲਾਓ** ਵੈਰੀਏਬਲ ਮੁੱਲ ਨੂੰ ਕਈ ਖਾਸ ਕੇਸਾਂ ਦੇ ਖਿਲਾਫ -- **ਗਰੁੱਪ ਕਰੋ** ਸਮਾਨ ਕੇਸਾਂ ਨੂੰ ਇਕੱਠੇ (ਹਫ਼ਤੇ ਦੇ ਦਿਨ ਵਸ. ਹਫ਼ਤੇ ਦੇ ਅੰਤ) -- **ਅਮਲ ਕਰੋ** ਸਹੀ ਕੋਡ ਬਲਾਕ ਜਦੋਂ ਇੱਕ ਮੈਚ ਮਿਲਦਾ ਹੈ -- **ਸ਼ਾਮਲ ਕਰੋ** ਇੱਕ `default` ਕੇਸ ਅਣਪਛਾਤੇ ਮੁੱਲਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ -- **ਵਰਤੋਂ** `break` ਸਟੇਟਮਾਂ ਕੋਡ ਨੂੰ ਅਗਲੇ ਕੇਸ ਵਿੱਚ ਜਾਰੀ ਰੱਖਣ ਤੋਂ ਰੋਕਣ ਲਈ +**ਇਹ ਕੋਡ ਇਹ ਕਰਦਾ ਹੈ:** +- ਵੈਰੀਏਬਲ ਦੇ ਮੁੱਲ ਨੂੰ ਕਈ ਵਿਸ਼ੇਸ਼ ਕੇਸਾਂ ਨਾਲ ਮੈਚ ਕਰਦਾ ਹੈ +- ਸਮਾਨ ਕੇਸਾਂ ਨੂੰ ਇਕੱਠਾ ਕਰਦਾ ਹੈ (ਹਫਤੇ ਦੇ ਦਿਨਾਂ ਅਤੇ ਹਫਤੇ ਦੇ ਅੰਤ) +- ਮੈਚ ਮਿਲਣ ਤੇ ਉਚਿਤ ਕੋਡ ਚਲਾਉਂਦਾ ਹੈ +- ਅਣਉਮੀਦ ਮੁੱਲਾਂ ਲਈ `default` ਕੇਸ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ +- ਅਗਲੇ ਕੇਸ 'ਤੇ ਨਾ ਜਾਣ ਲਈ `break` ਬਿਆਨ ਵਰਤਦਾ ਹੈ -> 💡 **ਅਸਲ-ਦੁਨੀਆ ਦੀ ਮਿਸਾਲ**: ਕੰਟਰੋਲ ਫਲੋ ਨੂੰ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਧੀਰਜ ਵਾਲੇ GPS ਵਾਂਗ ਸੋਚੋ ਜੋ ਤੁਹਾਨੂੰ ਦਿਸ਼ਾਵਾਂ ਦਿੰਦਾ ਹੈ। ਇਹ ਸ਼ਾਇਦ ਕਹੇ "ਜੇ ਮੈਨ ਸਟ੍ਰੀਟ 'ਤੇ ਟ੍ਰੈਫਿਕ ਹੈ, ਤਾਂ ਇਸਦੀ ਬਜਾਏ ਹਾਈਵੇ ਲਵੋ। ਜੇ ਹਾਈਵੇ 'ਤੇ ਕੰਸਟਰਕਸ਼ਨ ਰੁਕਾਵਟ ਪੈਦਾ ਕਰ ਰਿਹਾ ਹੈ, ਤਾਂ ਦ੍ਰਿਸ਼ਯਮਾਰਗ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।" ਪ੍ਰੋਗਰਾਮ ਬਿਲਕੁਲ ਇਸੇ ਤਰ੍ਹਾਂ ਦੀ ਸਥਿਤੀਕ ਤਰਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਨੂੰ ਸਮਰਥਨਯੋਗ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਲਈ ਅਤੇ ਹਮੇਸ਼ਾ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਸਭ ਤੋਂ ਵਧੀਆ ਅਨੁਭਵ ਦਿੰਦੇ ਹਨ। +> 💡 **ਅਸਲੀ ਜ਼ਿੰਦਗੀ ਦੀ ਉਦਾਹਰਣ**: ਕੰਟਰੋਲ ਫਲੋ ਨੂੰ ਇਹੋ ਜਿਹਾ ਸੋਚੋ ਜਿਵੇਂ ਦੁਨੀਆ ਦਾ ਸਭ ਤੋਂ ਧੀਰਜਵਾਨ GPS ਤੁਹਾਨੂੰ ਰਸਤੇ ਦਿਖਾ ਰਿਹਾ ਹੈ। "ਜੇ ਮੇਨ ਸਟ੍ਰੀਟ ਤੇ ਟ੍ਰੈਫਿਕ ਹੈ ਤਾਂ ਹਾਈਵੇ ਤੇ ਜਾਓ। ਜੇ ਹਾਈਵੇ ਬੰਦ ਹੈ ਤਾਂ ਖੂਬਸੂਰਤ ਰਸਤਾ ਲਵੋ।" ਪ੍ਰੋਗ੍ਰਾਮ ਵੀ ਅਗਲੇ ਸਥਿਤੀਆਂ ਲਈ ਇਸ ਤਰ੍ਹਾਂ ਦੀ ਸ਼ਰਤੀ ਲਾਜਿਕ ਵਰਤਕੇ ਸਮਾਰਟ ਜਵਾਬ ਦਿੰਦੇ ਹਨ ਅਤੇ ਸਦੀਵ ਅਨੁਭਵ ਬਿਹਤਰ ਬਣਾਉਂਦੇ ਹਨ। -### 🎯 **ਸੰਕਲਪ ਚੈੱਕ: ਬੁਨਿਆਦੀ ਹਿੱਸਿਆਂ ਦੀ ਮਾਹਰਤਾ** +### 🎯 **ਅਸੂਲਾਂ ਦੀ ਜਾਂਚ: ਬਿਲਡਿੰਗ ਬਲਾਕ ਮਾਹਰਤਾ** -**ਆਓ ਦੇਖੀਏ ਕਿ ਤੁਸੀਂ ਬੁਨਿਆਦੀਆਂ ਨਾਲ ਕਿਵੇਂ ਕਰ ਰਹੇ ਹੋ:** -- ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਸ਼ਬਦਾਂ ਵਿੱਚ ਵੈਰੀਏਬਲ ਅਤੇ ਸਟੇਟਮੈਂਟ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਨੂੰ ਸਮਝਾ ਸਕਦੇ ਹੋ? -- ਇੱਕ ਅਸਲ-ਦੁਨੀਆ ਦੀ ਸਥਿਤੀ ਬਾਰੇ ਸੋਚੋ ਜਿੱਥੇ ਤੁਸੀਂ ਇੱਕ if-then ਫੈਸਲਾ ਲਗਾਉਂਦੇ ਹੋ (ਜਿਵੇਂ ਸਾਡਾ ਵੋਟਿੰਗ ਉਦਾਹਰਨ) -- ਪ੍ਰੋਗਰਾਮਿੰਗ ਤਰਕ ਬਾਰੇ ਇੱਕ ਚੀਜ਼ ਜੋ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਗਈ? +**ਆਓ ਵੇਖੀਏ ਤੁਸੀਂ ਮੂਲ ਅਸੂਲ ਕਿਵੇਂ ਸਮਝੇ ਹੋ:** +- ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਸ਼ਬਦਾਂ ਵਿੱਚ ਬਿਆਨ ਅਤੇ ਵੈਰੀਏਬਲ ਵਿਚਕਾਰ ਫਰਕ ਸਮਝਾ ਸਕਦੇ ਹੋ? +- ਕਿਸੇ ਅਸਲੀ ਦੁਨੀਆ ਦੀ ਸਥਿਤੀ ਸੋਚੋ ਜਿੱਥੇ ਤੁਸੀਂ ਜੇ-ਤਦ ਫੈਸਲਾ ਲਿਆ ਹੋਵੇ (ਸਾਡੇ ਵੋਟਿੰਗ ਉਦਾਹਰਣ ਵਰਗਾ) +- ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੀ ਲਾਜਿਕ ਬਾਰੇ ਇਕ ਗੱਲ ਜੋ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਗਈ ਕੀ ਹੈ? -**ਤੁਰੰਤ ਭਰੋਸਾ ਵਧਾਉਣ ਵਾਲਾ:** +**ਦੇਰ ਨਾ ਕਰੋ ਆਪਣਾ ਬਿਸਵਾਸ ਵਧਾਉਣ ਲਈ:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 ਬਿਆਨ
(ਹੁਕਮ)"] --> B["📦 ਚਲਾਕ
(ਭੰਡਾਰ)"] --> C["🔀 ਕੰਟਰੋਲ ਫਲੋ
(ਫੈਸਲੇ)"] --> D["🎉 ਕੰਮ ਕਰ ਰਿਹਾ ਪ੍ਰੋਗਰਾਮ!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` - -✅ **ਅਗਲਾ ਕੀ ਆ ਰਿਹਾ ਹੈ**: ਅਸੀਂ ਇਹਨਾਂ ਸੰਕਲਪਾਂ ਵਿੱਚ ਹੋਰ ਡੂੰਘਾਈ ਵਿੱਚ ਜਾਣ ਲਈ ਬਿਲਕੁਲ ਮਜ਼ੇਦਾਰ ਸਮਾਂ ਬਿਤਾਉਣ ਵਾਲੇ ਹਾਂ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਇਹ ਸ਼ਾਨਦਾਰ ਯਾਤਰਾ ਇਕੱਠੇ ਜਾਰੀ ਰੱਖਦੇ ਹਾਂ! ਇਸ ਸਮੇਂ, ਸਿਰਫ਼ ਉਹ ਸਾਰਾ ਉਤਸ਼ਾਹ ਮਹਿਸੂਸ ਕਰਨ 'ਤੇ ਧਿਆਨ ਦਿਓ ਜੋ ਤੁਹਾਡੇ ਅੱਗੇ ਸਾਰੇ ਸ਼ਾਨਦਾਰ ਸੰਭਾਵਨਾਵਾਂ ਬਾਰੇ ਹੈ। ਖਾਸ ਹੁਨਰ ਅਤੇ ਤਕਨੀਕਾਂ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਚਿਪਕ ਜਾਣਗੀਆਂ ਜਿਵੇਂ ਅਸੀਂ ਇਕੱਠੇ ਅਭਿਆਸ ਕਰਦੇ ਹਾਂ – ਮੈਂ ਵਾਅਦਾ ਕਰਦਾ ਹਾਂ ਕਿ ਇਹ ਤੁਹਾਡੇ ਸੋਚਣ ਤੋਂ ਕਾਫ਼ੀ ਜ਼ਿਆਦਾ ਮਜ਼ੇਦਾਰ ਹੋਵੇਗਾ! +``` +✅ **ਅੱਗੇ ਕੀ ਆ ਰਿਹਾ ਹੈ**: ਅਸੀਂ ਨਾਲ ਮਿਲਕੇ ਇਹ ਨਵੀਂਆਂ ਯਾਤਰਾਵਾਂ ਵਿੱਚ ਡੁੱਬਕੀ ਲਗਾਉਣ ਲਈ ਬੜਾ ਮਜ਼ਾ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ! ਹੁਣ ਫਿਲਹਾਲ ਸਿਰਫ ਉਹ ਉਤਸ਼ਾਹ ਮਹਿਸੂਸ ਕਰੋ ਜੋ ਤੁਹਾਡੇ ਅੱਗੇ ਸ਼ਾਨਦਾਰ ਸੰਭਾਵਨਾਵਾਂ ਨੂੰ ਲੈ ਕੇ ਆ ਰਿਹਾ ਹੈ। ਵਿਸ਼ੇਸ਼ ਹੁਨਰਾਂ ਅਤੇ ਤਕਨੀਕਾਂ ਕੁਦਰਤੀ ਰੂਪ ਵਿੱਚ ਜੁੜ ਜਾਣਗੇ ਜਿਵੇਂ ਅਸੀਂ ਮਿਲਕੇ ਅਭਿਆਸ ਕਰਾਂਗੇ – ਇਹ ਇੱਕ ਬਹੁਤ ਹੀ ਯਾਦਗਾਰ ਸਮਾਂ ਹੋਵੇਗਾ! + +## ਸਾਜ-ਸਾਮਾਨ -## ਵਪਾਰ ਦੇ ਸਾਧਨ +ਠੀਕ ਹੈ, ਇਹ ਮੇਰੇ ਲਈ ਬਹੁਤ ਹੀ ਉਤਸ਼ਾਹਿਤ ਕਰਨ ਵਾਲੀ ਗੱਲ ਹੈ! 🚀 ਅਸੀਂ ਗੱਲ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ ਉਹ ਸ਼ਾਨਦਾਰ ਸਾਧਨਾਂ ਬਾਰੇ ਜੋ ਤੁਹਾਨੂੰ ਲੱਗੇਗਾ ਕਿ ਤੁਸੀਂ ਵਿੱਚ ਡਿਜ਼ਿਟਲ ਸਪੇਸਸ਼ਿਪ ਦੀ ਚਾਬੀ ਮਿਲ ਗਈ ਹੈ। + +ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਇੱਕ ਰਸੋਈਆ ਕੋਲ ਸਧਾਰਨ ਅਤੇ ਬਰਾਬਰ ਤੌਰ 'ਤੇ ਆਪਣੇ ਹੱਥਾਂ ਦੀ ਵਧੀਆ ਕਟਾਰੀ ਹੁੰਦੀ ਹੈ? ਜਾਂ ਕਿ ਇੱਕ ਸੰਗੀਤਕਾਰ ਕੋਲ ਉਹ ਗਿਟਾਰ ਹੁੰਦਾ ਹੈ ਜੋ ਜਦੋਂ ਛੁਹਿਆ ਜਾਵੇ ਮੱਤਜਾ ਹੋ ਜਾਂਦਾ ਹੈ? ਠੀਕ ਹੈ, ਡਿਵੈਲਪਰਾਂ ਕੋਲ ਵੀ ਅਜਿਹੇ ਜਾਦੂਈ ਸਾਧਨ ਹੁੰਦੇ ਹਨ, ਤੇ ਇਹ ਗੱਲ ਤੁਹਾਡੇ ਦਿਮਾਗ ਨੂੰ ਪੱਕੀ ਤਰ੍ਹਾਂ ਹਿਲਾ ਦੇਵੇਗੀ – ਮੋਸਟ ਸਾਧਨ ਮੁਫ਼ਤ ਹਨ! + +ਮੈਂ ਆਪਣੀ ਕਰਸੀ 'ਤੇ ਬੈਠ ਕੇ ਉਤਸ਼ਾਹਿਤ ਹਾਂ ਇਹ ਸਾਧਨ ਤੁਹਾਡੇ ਨਾਲ ਸਾਂਝੇ ਕਰਨ ਲਈ ਕਿਉਂਕਿ ਇਹ ਸਾਡੇ ਸੌਫਟਵੇਅਰ ਬਨਾਉਣ ਦੇ ਤਰੀਕਿਆਂ ਵਿੱਚ ਕ੍ਰਾਂਤੀ ਲੈ ਕੇ ਆਏ ਹਨ। ਅਸੀਂ ਗੱਲ ਕਰ ਰਹੇ ਹਾਂ AI ਸਮਰਥਿਤ ਕੋਡਿੰਗ ਸਹਾਇਕਾਂ ਦੀ ਜੋ ਤੁਹਾਡਾ ਕੋਡ ਲਿਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ (ਸੱਚੀ ਮੈਨੂੰ ਕਦੇ ਵੀ ਬਹੁਤ ਲੱਗਾ ਨਹੀਂ!), ਕਲਾਉਡ ਭਰੂਣ ਵਾਲੇ ਵਾਤਾਵਰਨ ਜਿੱਥੇ ਤੁਸੀਂ Wi-Fi ਨਾਲ ਕਿਥੇ ਵੀ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾ ਸਕਦੇ ਹੋ, ਅਤੇ ਡਿਬੱਗ ਕਰਨ ਵਾਲੇ ਸਾਧਨ ਜਿਹੜੇ X-ਰੇ ਵਿਜ਼ਨ ਵਰਗੇ ਹਨ ਤੁਹਾਡੇ ਪ੍ਰੋਗ੍ਰਾਮਾਂ ਲਈ। + +ਅਤੇ ਇਹ ਗੱਲ ਜੋ ਮੈਨੂੰ ਅਜੇ ਵੀ ਸਿਰ ਕੁੰਮ੍ਹਾ ਦੇਂਦੀ ਹੈ: ਇਹ "ਨਵੇਂ ਸ਼ੁਰੂਆਤੀ" ਸਾਧਨ ਨਹੀਂ ਹਨ ਜਿਹੜੇ ਤੁਸੀਂ ਤੇਜ਼ੀ ਨਾਲ ਛੱਡ ਦੋਗੇ। ਇਹ ਉਹੀ ਪੇਸ਼ੇਵਰ ਗਰੇਡ ਸਾਧਨ ਹਨ ਜੋ ਗੂਗਲ, ਨੈਟਫਲਿਕਸ, ਅਤੇ ਉਹ ਇੰਡੀ ਐਪ ਸਟੂਡੀਓ ਜਿਹੜਾ ਤੁਸੀਂ ਪਿਆਰ ਕਰਦੇ ਹੋ, ਇਸ ਸਮੇਂ ਵਰਤ ਰਹੇ ਹਨ। ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਖੁਦ ਨੂੰ ਬਹੁਤ ਪ੍ਰੋ ਮਹਿਸੂਸ ਕਰੋਂਗੇ! + +```mermaid +graph TD + A["💡 ਤੁਹਾਡਾ ਖ਼ਿਆਲ"] --> B["⌨️ ਕੋਡ ਸੰਪਾਦਕ
(VS ਕੋਡ)"] + B --> C["🌐 ਬ੍ਰਾਊਜ਼ਰ ਡਿਵਟੂਲਜ਼
(ਟੈਸਟਿੰਗ ਅਤੇ ਡਿਬੱਗਿੰਗ)"] + C --> D["⚡ ਕਮਾਂਡ ਲਾਈਨ
(ਆਟੋਮੈਸ਼ਨ ਅਤੇ ਟੂਲਸ)"] + D --> E["📚 ਦਸਤਾਵੇਜ਼
(ਸਿੱਖਣ ਅਤੇ ਸੰਦਰਭ)"] + E --> F["🚀 ਸ਼ਾਨਦਾਰ ਵੈੱਬ ਐਪ!"] + + B -.-> G["🤖 ਏਆਈ ਸਹਾਇਕ
(GitHub ਕੋਪਾਇਲਟ)"] + C -.-> H["📱 ਡਿਵਾਈਸ ਟੈਸਟਿੰਗ
(ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ)"] + D -.-> I["📦 ਪੈਕেজ ਮੈਨੇਜਰ
(npm, yarn)"] + E -.-> J["👥 ਕਮਿਊਨਿਟੀ
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### ਕੋਡ ਐਡੀਟਰ ਅਤੇ IDEs: ਤੁਹਾਡੇ ਨਵੇਂ ਡਿਜੀਟਲ ਸਭ ਤੋਂ ਚੰਗੇ ਦੋਸਤ -ਚੰਗਾ, ਇਹ ਸੱਚਮੁੱਚ ਜਿੱਥੇ ਮੈਂ ਬਹੁਤ ਉਤਸ਼ਾਹਿਤ ਹੋ ਜਾਂਦਾ ਹਾਂ ਮੈਂ ਆਪਣੇ ਆਪ ਨੂੰ ਮੁਸ਼ਕਿਲ ਨਾਲ ਕਾਬੂ ਕਰ ਸਕਦਾ ਹਾਂ! 🚀 ਅਸੀਂ ਉਹ ਸ਼ਾਨਦਾਰ ਸਾਧਨਾਂ ਬਾਰੇ ਗੱਲ ਕਰਨ ਵਾਲੇ ਹਾਂ ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਮਹਿਸੂਸ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰਨ ਵਾਲੇ ਹਨ ਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਡਿਜ਼ੀਟਲ ਸਪੇਸਸ਼ਿਪ ਦੀਆਂ ਕੁੰਜੀਆਂ ਦਿੱਤੀਆਂ ਗਈਆਂ ਹਨ। +ਆਓ ਗੱਲ ਕਰੀਏ ਕੋਡ ਐਡੀਟਰਾਂ ਬਾਰੇ – ਇਹ ਸੱਚਮੁਚ ਤੁਹਾਡੇ ਨਵੇਂ ਮਨਪਸੰਦ ਸਥਾਨ ਹੋ ਜਾ ਰਹੇ ਹਨ! ਇਹ ਤੁਹਾਡਾ ਨਿੱਜੀ ਕੋਡਿੰਗ ਸੈਂਚੁਰੀ ਹੋਣਗੇ ਜਿਥੇ ਤੁਸੀਂ ਆਪਣਾ ਵਧੀਆ ਕੰਮ ਬਣਾ ਕੇ ਬਹਿਤ ਕੀਤਾ ਕਰੋਗੇ। + +ਪਰ ਇੱਥੇ ਇੱਕ ਮਾਹਰ ਚੀਜ਼ ਹੈ ਆਧੁਨਿਕ ਐਡੀਟਰਾਂ ਦੀ: ਇਹ ਸਿਰਫ ਸਧਾਰਣ ਟੈਕਸਟ ਐਡੀਟਰ ਨਹੀਂ। ਇਹ ਬਿਲਕੁਲ ਹਰ ਵੇਲੇ ਤੁਹਾਡੇ ਨਾਲ ਬੈਠੇ ਸਭ ਤੋਂ ਤੇਜ਼, ਸਮਰਥਿਤ ਕੋਡਿੰਗ ਮੈਨਟਰ ਵਰਗੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਟਾਈਪਿੰਗ ਦੀਆਂ ਗਲਤੀਆਂ ਫੜ ਲੈਂਦੇ ਹਨ ਪਹਿਲਾਂ ਹੀ ਤੁਸੀਂ ਖ਼ਬਰ ਹੁੰਦੀ, ਸੁਝਾਵ ਦਿੰਦੇ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਜੀਂਅਸ ਵਰਗਾ ਲਗਾਊਂਦੇ ਹਨ, ਸਮਝਾਉਂਦੇ ਹਨ ਕਿ ਹਰ ਹਿੱਸਾ ਕੀ ਕਰਦਾ ਹੈ, ਅਤੇ ਕੁਝ ਤਾਂ ਤੁਹਾਡੇ ਸੋਚੇ ਸਿੱਧੇ ਹੀ ਪੂਰੇ ਕਰਕੇ ਖ਼ਤਮ ਕਰ ਦੇਂਦੇ ਹਨ! + +ਮੈਨੂੰ ਯਾਦ ਹੈ ਜਦ ਮੈਂ ਪਹਿਲੀ ਵਾਰੀ ਆਟੋ-ਕੰਪਲੀਸ਼ਨ ਲੱਭੀ – ਮੈਨੂੰ ਅਜੇ ਵੀ ਮਹਿਸੂਸ ਹੁੰਦਾ ਜਿਵੇਂ ਮੈਂ ਭਵਿੱਖ ਵਿੱਚ ਜੀ ਰਿਹਾ ਹਾਂ। ਤੁਸੀਂ ਕੁਝ ਲਿਖਣਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਤੇ ਤੁਹਾਡਾ ਐਡੀਟਰ ਕਹਿੰਦਾ ਹੈ "ਹੇ, ਕੀ ਤੁਸੀਂ ਉਸ ਫੰਕਸ਼ਨ ਬਾਰੇ ਸੋਚ ਰਹੇ ਸੀ ਜੋ ਤੁਹਾਡੇ ਕੰਮ ਆਉਂਦਾ?" ਇਹ ਤੁਹਾਡਾ ਮਾਈਂਡ ਰੀਡਰ ਜਿਵੇਂ ਹੈ ਜੋ ਤੁਹਾਡਾ ਕੋਡਿੰਗ ਸਾਥੀ ਹੈ! + +**ਇਹ ਐਡੀਟਰਾਂ ਨੂੰ ਇੰਨਾ ਸ਼ਾਨਦਾਰ ਕੀ ਬਣਾਉਂਦਾ ਹੈ?** + +ਆਧੁਨਿਕ ਕੋਡ ਐਡੀਟਰ ਇੱਕ ਲੰਬੀ ਸੂਚੀ ਫੀਚਰ ਲੈ ਕੇ ਆਉਂਦੇ ਹਨ ਜੋ ਤੁਹਾਡੀ ਉਤਪਾਦਕਤਾ ਵਧਾਉਂਦੇ ਹਨ: + +| ਵਿਸ਼ੇਸ਼ਤਾ | ਇਹ ਕੀ ਕਰਦੀ ਹੈ | ਇਹ ਕਿਉਂ ਮਦਦਗਾਰ ਹੈ | +|---------|--------------|--------------| +| **ਸਿੰਟੈਕਸ ਹਾਈਲਾਈਟਿੰਗ** | ਤੁਹਾਡੇ ਕੋਡ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਨੂੰ ਰੰਗ ਬਣਾਉਂਦੀ ਹੈ | ਕੋਡ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਗਲਤੀਆਂ ਆਪਣੀਆਂ ਸਮਝ ਨੂੰ ਸੁਲਝਾਉਂਦਾ ਹੈ | +| **ਆਟੋ-ਕੰਪਲੀਸ਼ਨ** | ਜਦ ਤੁਸੀਂ ਲਿਖਦੇ ਹੋ ਤਾਂ ਸੁਝਾਵ ਦਿੰਦਾ ਹੈ | ਕੋਡਿੰਗ ਤੇਜ਼ ਅਤੇ ਗਲਤੀਆਂ ਘਟਾਉਂਦਾ ਹੈ | +| **ਡਿਬੱਗਿੰਗ ਸਾਧਨ** | ਗਲਤੀਆਂ ਲੱਭਣ ਅਤੇ ਠੀਕ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ | ਟਰਬਲਸ਼ੂਟਿੰਗ ਦਾ ਸਮਾਂ ਬਚਾਉਂਦਾ ਹੈ | +| **ਐਕਸਟੈਂਸ਼ਨਜ਼** | ਵਿਸ਼ੇਸ਼ ਫੀਚਰ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ | ਕਿਸੇ ਵੀ ਤਕਨਾਲੋਜੀ ਲਈ ਐਡੀਟਰ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਦਾ ਹੈ | +| **AI ਸਹਾਇਕਾਂ** | ਕੋਡ ਅਤੇ ਵਿਆਖਿਆਵਾਂ ਦਾ ਸੁਝਾਅ ਕਰਦੇ ਹਨ | ਸਿਖਣ ਅਤੇ ਲਾਜ਼मी ਤੇਜ਼ੀ ਵਧਾਉਂਦੇ ਹਨ | + +> 🎥 **ਵੀਡੀਓ ਸਰੋਤ**: ਇਹ ਸਾਰੇ ਸਾਧਨ ਕਾਰਜ ਵਿੱਚ ਦੇਖਣ ਲਈ ਇਹ [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) ਦੇਖੋ। + +#### ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਸਿਫਾਰਸ਼ੀਤ ਐਡੀਟਰ + +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (ਮੁਫ਼ਤ) +- ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਵਿੱਚ ਸਭ ਤੋਂ ਲੋਕਪ੍ਰਿਯ +- ਸ਼ਾਨਦਾਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰਣਾਲੀ +- ਬਿਲਟ-ਇਨ ਟਰਮੀਨਲ ਅਤੇ Git ਇੰਟੀਗ੍ਰੇਸ਼ਨ +- **ਅਨਿਵਾਰ੍ਯ ਐਕਸਟੈਂਸ਼ਨਜ਼**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI ਸਮਰਥਿਤ ਕੋਡ ਸੁਝਾਵ + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - ਤੁਰੰਤ ਸਾਂਝਾ ਕਿਰਿਆ + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - ਆਪਣੇ ਆਪ ਕੋਡ ਫਾਰਮੈਟਿੰਗ + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - ਕੋਡ ਵਿੱਚ ਟਾਈਪੋ ਫੜਨ ਵਾਲਾ + +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (ਪੈਡ, ਵਿਦਿਆਰਥੀਆਂ ਲਈ ਮੁਫ਼ਤ) +- ਅਗੇਤਰ ਡਿਬੱਗਿੰਗ ਅਤੇ ਟੈਸਟਿੰਗ ਸਾਧਨ +- ਸਮਾਰਥ ਕੋਡ ਪੂਰਨਤਾ +- ਬਿਲਟ-ਇਨ ਵਰਜ਼ਨ ਕੰਟਰੋਲ + +**ਕਲਾਉਡ-ਆਧਾਰਿਤ IDEs** (ਵੱਖ-ਵੱਖ ਕੀਮਤ) +- [GitHub Codespaces](https://github.com/features/codespaces) - ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਪੂਰਾ VS ਕੋਡ +- [Replit](https://replit.com/) - ਸਿੱਖਣ ਅਤੇ ਕੋਡ ਸਾਂਝਾ ਕਰਨ ਲਈ ਵਧੀਆ +- [StackBlitz](https://stackblitz.com/) - ਤੁਰੰਤ, ਪੂਰਾ-ਸਟੈਕ ਵੈੱਬ ਵਿਕਾਸ + +> 💡 **ਸ਼ੁਰੂਆਤੀ ਸਲਾਹ**: Visual Studio Code ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ – ਇਹ ਮੁਫ਼ਤ ਹੈ, ਉਦਯੋਗ ਵਿੱਚ ਵਿਆਪਕ ਤੌਰ ਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਸਦਾ ਇਕ ਵੱਡਾ ਕਮਿਊਨਟੀ ਹੈ ਜੋ ਮਦਦਗਾਰ ਟਿਊਟੋਰਿਯਲ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਂਦਾ ਹੈ। + +### ਵੈੱਬ ਬ੍ਰਾਉਜ਼ਰ: ਤੁਹਾਡਾ ਗੁਪਤ ਵਿਕਾਸ ਲੈਬ + +ਠੀਕ ਹੈ, ਆਪਣਾ ਦਿਮਾਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਘੁਮਾ ਲੈਣ ਲਈ ਤਿਆਰ ਰਹੋ! ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਬ੍ਰਾਉਜ਼ਰਾਂ ਨੂੰ ਸੋਸ਼ਲ ਮੀਡੀਆ ਸਕ੍ਰੋਲ ਕਰਣ ਅਤੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ ਵਰਤਦੇ ਰਹੇ ਹੋ? ਪਰ ਇਹ ਪਤਾ ਲੱਗਾ ਹੈ ਕਿ ਸਾਰੀ ਸਮਾਂ ਇਹ ਅਦਭੁਤ ਗੁਪਿਤ ਵਿਕਾਸ ਲੈਬ੍ਰੇਟਰੀ ਲੁਕਾਈ ਹੋਈ ਸੀ, ਸਿਰਫ ਤੁਹਾਡੇ ਦੁਆਰਾ ਖੋਜ ਲਈ ਉਡੀਕ ਰਹੀ ਸੀ! -ਤੁਹਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਇੱਕ ਸ਼ੈਫ਼ ਕੋਲ ਉਹਨਾਂ ਦੇ ਹੱਥਾਂ ਦੇ ਵਧਾਏ ਹੋਏ ਹਿੱਸਿਆਂ ਵਾਂਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੰਤੁਲਿਤ ਚਾਕੂ ਹੁੰਦੇ ਹਨ? ਜਾਂ ਇੱਕ ਸੰਗੀਤਕਾਰ ਕੋਲ ਉਹ ਇੱਕ ਗਿਟਾਰ ਹੁੰਦੀ ਹੈ ਜੋ ਉਹਨਾਂ ਦੇ ਛੂਹਣ ਦੇ ਸਮੇਂ ਗਾਉਂਦੀ ਹੈ? ਚੰਗਾ, ਡਿਵੈਲਪਰਾਂ ਕੋਲ ਇਹਨਾਂ ਜਾਦੂਈ ਸਾਧਨਾਂ ਦਾ ਆਪਣਾ ਸੰਸਕਰਣ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਇਹ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਬਿਲਕੁਲ ਹੈਰਾਨ ਕਰ ਦੇਵੇਗਾ – ਇਹਨਾਂ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੁਫ਼ਤ ਹਨ! +ਹਰ ਵਾਰੀ ਜਦ ਤੁਸੀਂ ਵੈੱਬਪੇਜ਼ 'ਤੇ Right-click ਕਰਕੇ "Inspect Element" ਛਾਂਟੀਏ ਹੋ, ਤੁਸੀਂ ਇੱਕ ਛੁਪਿਆ ਹੋਇਆ ਵਿਕਾਸ ਟੂਲਜ਼ ਦਾ ਜਗਤ ਖੋਲ੍ਹ ਰਹੇ ਹੋ ਜੋ ਇੱਥੇ ਤੱਕ ਕਿ ਕਈ ਮਹਿੰਗੇ ਸਾਫਟਵੇਅਰਾਂ ਨਾਲੋਂ ਵੀ ਵੱਧ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ ਜਿਸ ਲਈ ਮੈਨੂੰ ਕਈ ਸੌ ਡਾਲਰ ਖਰਚਣੇ ਪਏ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਤੁਹਾਡੀ ਆਮ ਪੱਕੀ ਰਸੋਈ ਵਿੱਚ ਛੁਪਿਆ ਇੱਕ ਪ੍ਰੋਫੈਸ਼ਨਲ ਰਸੋਈਆ ਦਾ ਲੈਬ ਹੋਵੇ ਕਿ ਜਿਸਦਾ ਦਰਵਾਜ਼ਾ ਕੋਈ ਦ੍ਰਿਸ਼ਟੀ ਨਹੀਂ ਕਰਦਾ! +ਜਦੋਂ ਕਿਸੇ ਨੇ ਪਹਿਲੀ ਵਾਰ ਮੈਨੂੰ browser DevTools ਦਿਖਾਏ, ਮੈਂ ਤਿੰਨ ਘੰਟੇ ਸਿਰਫ ਕਲਿੱਕ ਕਰਦਾ ਰਹਿੰਦਾ ਅਤੇ ਕਹਿੰਦਾ "ਰੁਕੋ, ਇਹ ਵੀ ਕਰ ਸਕਦਾ ਹੈ?!" ਤੁਸੀਂ ਹਕੀਕਤ ਵਿੱਚ ਕਿਸੇ ਵੀ ਵੈੱਬਸਾਈਟ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਸੋਧ ਸਕਦੇ ਹੋ, ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਸਾਰਾ ਕੁਝ ਕਿੰਨਾ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਆਪਣੇ ਸਾਈਟ ਨੂੰ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਕਿਵੇਂ ਲੱਗਦਾ ਹੈ ਟੈਸਟ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਪੂਰੀ ਮਾਹਰਤਾ ਨਾਲ ਡਿਬੱਗ ਵੀ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਬਿਲਕੁਲ ਹੈਰਾਨ ਕਰਨ ਵਾਲਾ ਹੈ! -@@CODE -ਜਦੋਂ ਪਹਿਲੀ ਵਾਰ ਕਿਸੇ ਨੇ ਮੈਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇਵਟੂਲਸ ਦਿਖਾਏ, ਮੈਂ ਤਿੰਨ ਘੰਟੇ ਸਿਰਫ਼ ਕਲਿੱਕ ਕਰਦਾ ਰਿਹਾ ਅਤੇ "ਰੁਕੋ, ਇਹ ਵੀ ਕਰ ਸਕਦਾ ਹੈ?!" ਕਹਿੰਦਾ ਰਿਹਾ। ਤੁਸੀਂ ਹਰੇਕ ਵੈਬਸਾਈਟ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਐਡਿਟ ਕਰ ਸਕਦੇ ਹੋ, ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਸਭ ਕੁਝ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਆਪਣੀ ਸਾਈਟ ਕਿਵੇਂ ਦਿਖਦੀ ਹੈ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਪੂਰੇ ਪ੍ਰੋਫੈਸ਼ਨਲ ਦੀ ਤਰ੍ਹਾਂ ਡੀਬੱਗ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਬਿਲਕੁਲ ਹੈਰਾਨੀਜਨਕ ਹੈ! +**ਇਹ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਗੁਪਤ ਹਥਿਆਰ ਕਿਉਂ ਹਨ:** -**ਇਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਗੁਪਤ ਹਥਿਆਰ ਹਨ:** +ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਵੈੱਬਸਾਈਟ ਜਾਂ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਹ ਦੇਖਣਾ ਪੈਂਦਾ ਹੈ ਕਿ ਇਹ ਅਸਲੀ ਦੁਨੀਆਂ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਦਾ ਹੈ ਅਤੇ ਕਿਵੇਂ ਵਰਤਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਸਿਰਫ ਤੁਹਾਡੇ ਕੰਮ ਨੂੰ ਵਿਖਾਉਂਦੇ ਨਹੀਂ, ਸਗੋਂ ਪ੍ਰਦਰਸ਼ਨ, ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਸੰਭਾਵਿਤ ਸਮੱਸਿਆਵਾਂ ਬਾਰੇ ਵਿਸਥਾਰ ਨਾਲ ਫੀਡਬੈਕ ਵੀ ਦਿੰਦੇ ਹਨ। -ਜਦੋਂ ਤੁਸੀਂ ਵੈਬਸਾਈਟ ਜਾਂ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਦੇਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਕਿ ਇਹ ਅਸਲ ਦੁਨੀਆ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਦੀ ਹੈ ਅਤੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਸਿਰਫ਼ ਤੁਹਾਡਾ ਕੰਮ ਦਿਖਾਉਂਦੇ ਹੀ ਨਹੀਂ, ਸਗੋਂ ਪ੍ਰਦਰਸ਼ਨ, ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਸੰਭਾਵਿਤ ਸਮੱਸਿਆਵਾਂ ਬਾਰੇ ਵਿਸਥਾਰ ਵਿੱਚ ਫੀਡਬੈਕ ਵੀ ਦਿੰਦੇ ਹਨ। +#### ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ (DevTools) -#### ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਸ (DevTools) +ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਵੱਡੇ ਵਿਕਾਸ ਸੂਟਸ਼ਾਮਿਲ ਕਰਦੇ ਹਨ: -ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿਸਥਾਰਤ ਵਿਕਾਸ ਸੂਟ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ: +| ਟੂਲ ਸ਼੍ਰੇਣੀ | ਇਹ ਕੀ ਕਰਦਾ ਹੈ | ਉਦਾਹਰਨ ਵਰਤੋਂ ਮਾਮਲਾ | +|-------------|-----------------|---------------------| +| **ਏਲੀਮੈਂਟ ਇੰਸਪੈਕਟਰ** | ਹਟਮਲ/ਸੀਐੱਸਐੱਸ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਵੇਖੋ ਅਤੇ ਸੋਧੋ | ਤੁਰੰਤ ਨਤੀਜੇ ਵੇਖਣ ਲਈ ਸਟਾਈਲਿੰਗ ਬਦਲੋ | +| **ਕਨਸੋਲ** | ਗਲਤੀ ਸੰਦਰਭ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਟੈਸਟ ਕਰੋ | ਮੁਸ਼ਕਿਲਾਂ ਡੀਬੱਗ ਕਰੋ ਅਤੇ ਕੋਡ ਨਾਲ ਅਜ਼ਮਾਇਸ਼ ਕਰੋ | +| **ਨੈੱਟਵਰਕ ਮਾਨੀਟਰ** | ਕਿਵੇਂ ਸਾਧਨ ਲੋਡ ਹੁੰਦੇ ਹਨ ਟਰੈਕ ਕਰੋ | ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਲੋਡਿੰਗ ਸਮੇਂ ਨੂੰ ਠੀਕ ਕਰੋ | +| **ਪਹੁੰਚਯੋਗਤਾ ਚੈਕਰ** | ਸਮਾਵੇਸ਼ੀ ਡਿਜ਼ਾਈਨ ਲਈ ਟੈਸਟ ਕਰੋ | ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਸਾਰੇ ਉਪਭੋਗਤਿਆਂ ਲਈ ਕੰਮ ਕਰਦੀ ਹੈ | +| **ਡਿਵਾਈਸ ਸਿਮੁਲੇਟਰ** | ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਆਕਾਰਾਂ 'ਤੇ ਪ੍ਰੀਵਿਊ ਕਰੋ | ਬਿਨਾਂ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਦੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਟੈਸਟ ਕਰੋ | -| ਟੂਲ ਸ਼੍ਰੇਣੀ | ਇਹ ਕੀ ਕਰਦਾ ਹੈ | ਉਦਾਹਰਨ ਵਰਤੋਂ | -|---------------|--------------|------------------| -| **ਐਲਿਮੈਂਟ ਇੰਸਪੈਕਟਰ** | HTML/CSS ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਵੇਖੋ ਅਤੇ ਐਡਿਟ ਕਰੋ | ਸਟਾਈਲਿੰਗ ਨੂੰ ਤੁਰੰਤ ਨਤੀਜੇ ਦੇਖਣ ਲਈ ਠੀਕ ਕਰੋ | -| **ਕੰਸੋਲ** | ਗਲਤੀ ਦੇ ਸੁਨੇਹੇ ਵੇਖੋ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਟੈਸਟ ਕਰੋ | ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਡੀਬੱਗ ਕਰੋ ਅਤੇ ਕੋਡ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ | -| **ਨੈਟਵਰਕ ਮਾਨੀਟਰ** | ਸਰੋਤਾਂ ਦੇ ਲੋਡ ਹੋਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ | ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਲੋਡਿੰਗ ਸਮੇਂ ਨੂੰ ਠੀਕ ਕਰੋ | -| **ਐਕਸੈਸਬਿਲਿਟੀ ਚੈੱਕਰ** | ਸਮਾਵੇਸ਼ੀ ਡਿਜ਼ਾਈਨ ਲਈ ਟੈਸਟ ਕਰੋ | ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਸਾਰੇ ਯੂਜ਼ਰਾਂ ਲਈ ਕੰਮ ਕਰਦੀ ਹੈ | -| **ਡਿਵਾਈਸ ਸਿਮੂਲੇਟਰ** | ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਪ੍ਰੀਵਿਊ ਕਰੋ | ਬਿਨਾਂ ਕਈ ਡਿਵਾਈਸਾਂ ਦੇ ਜ਼ਰੂਰੀ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਦੀ ਜਾਂਚ ਕਰੋ | +#### ਵਿਕਾਸ ਲਈ ਸੁਝਾਏ ਗਏ ਬ੍ਰਾਊਜ਼ਰ -#### ਵਿਕਾਸ ਲਈ ਸਿਫਾਰਸ਼ੀ ਬ੍ਰਾਊਜ਼ਰ +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - ਉਦਯੋਗ-ਮਿਆਰੀ DevTools ਬਹੁਤ ਮੁਫ਼ਤ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਨਾਲ +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - ਸ਼ਾਨਦਾਰ CSS ਗ੍ਰਿਡ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਟੂਲਜ਼ +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Microsoft ਦੇ ਡਿਵੈਲਪਰ ਸੰਜੋਨੀਆਂ ਦੇ ਨਾਲ Chromium 'ਤੇ ਬਣਾਇਆ ਗਿਆ -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - ਉਦਯੋਗ-ਮਾਨਕ DevTools ਵਿਸਥਾਰਤ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਨਾਲ -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - ਸ਼ਾਨਦਾਰ CSS ਗ੍ਰਿਡ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਟੂਲਸ -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium 'ਤੇ ਬਣਿਆ ਹੋਇਆ Microsoft ਦੇ ਡਿਵੈਲਪਰ ਸਰੋਤਾਂ ਨਾਲ +> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਟੈਸਟਿੰਗ ਸੁਝਾਅ**: ਹਮੇਸ਼ਾ ਆਪਣੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਕਈ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿਚ ਟੈਸਟ ਕਰੋ! ਜੋ Chrome ਵਿੱਚ ਬਿਲਕੁਲ ਠੀਕ ਕੰਮ ਕਰਦਾ ਹੈ, ਉਸਦੀ ਲੁੱਕ Safari ਜਾਂ Firefox ਵਿੱਚ ਵੱਖਰੀ ਹੋ ਸਕਦੀ ਹੈ। ਪ੍ਰੋਫੈਸ਼ਨਲ ਵਿਕਾਸਕਾਰ ਸਾਰੇ ਮੁੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਸਟ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਉਪਯੋਗਤਾ ਅਨੁਭਵ ਸਥਿਰ ਰਹੇ। -> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਟੈਸਟਿੰਗ ਟਿਪ**: ਹਮੇਸ਼ਾ ਆਪਣੀਆਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਕਈ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਸਟ ਕਰੋ! Chrome ਵਿੱਚ ਜੋ ਬਿਲਕੁਲ ਸਹੀ ਕੰਮ ਕਰਦਾ ਹੈ, Safari ਜਾਂ Firefox ਵਿੱਚ ਵੱਖਰਾ ਦਿਖ ਸਕਦਾ ਹੈ। ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਸਾਰੇ ਮੁੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਸਟ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਸਥਿਰ ਯੂਜ਼ਰ ਅਨੁਭਵ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ। -### ਕਮਾਂਡ ਲਾਈਨ ਟੂਲਸ: ਡਿਵੈਲਪਰ ਸੂਪਰਪਾਵਰਜ਼ ਦਾ ਗੇਟਵੇ +### ਕਮਾਂਡ ਲਾਈਨ ਟੂਲਜ਼: ਤੁਹਾਡੇ ਡਿਵੈਲਪਰ ਮਹਾਓਗਤ ਦੇ ਦਰਵਾਜ਼ੇ -ਚੰਗਾ, ਆਓ ਕਮਾਂਡ ਲਾਈਨ ਬਾਰੇ ਇੱਕ ਬਿਲਕੁਲ ਇਮਾਨਦਾਰ ਪਲ ਬਿਤਾਈਏ, ਕਿਉਂਕਿ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਇਹ ਕਿਸੇ ਅਜਿਹੇ ਵਿਅਕਤੀ ਤੋਂ ਸੁਣੋ ਜੋ ਇਸਨੂੰ ਸੱਚਮੁੱਚ ਸਮਝਦਾ ਹੈ। ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰ ਇਸਨੂੰ ਵੇਖਿਆ – ਸਿਰਫ਼ ਇਹ ਡਰਾਉਣਾ ਕਾਲਾ ਸਕ੍ਰੀਨ ਜਿਸ 'ਤੇ ਟੈਕਸਟ ਚਮਕ ਰਿਹਾ ਸੀ – ਮੈਂ ਸੱਚਮੁੱਚ ਸੋਚਿਆ, "ਨਹੀਂ, ਬਿਲਕੁਲ ਨਹੀਂ! ਇਹ ਕੁਝ 1980 ਦੇ ਹੈਕਰ ਫਿਲਮ ਤੋਂ ਲੱਗਦਾ ਹੈ, ਅਤੇ ਮੈਂ ਇਸ ਲਈ ਬਿਲਕੁਲ ਕਾਬਲ ਨਹੀਂ ਹਾਂ!" 😅 +ਚਲੋ, ਕਮਾਂਡ ਲਾਈਨ ਬਾਰੇ ਬਿਲਕੁਲ ਸਚਿਆਈ ਨਾਲ ਗੱਲ ਕਰੀਏ, ਕਿਉਂਕਿ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਇਹ ਕਿਸੇ ਅਜੇਹੇ ਵਿਅਕਤੀ ਤੋਂ ਸੁਣੋ ਜੋ ਤੇਰੇ ਸਹੀ ਮਾਇਨੇ ਵਿੱਚ ਇਸਨੂੰ ਸਮਝਦਾ ਹੈ। ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰ ਇਸਨੂੰ ਦੇਖਿਆ – ਇੱਕ ਡਰਾਉਣਾ ਕਾਲਾ ਸਕਰੀਨ ਚਮਕਦੇ ਲਿਖਤ ਨਾਲ – ਮੈਂ ਵਾਕਈ ਸੋਚਿਆ, "ਨਹੀਂ, ਬਿਲਕੁਲ ਨਹੀਂ! ਇਹ ਕਿਸੇ 1980 ਦੇ ਦਹਾਕੇ ਦੇ ਹੈਕਰ ਫਿਲਮ ਵਰਗਾ ਲੱਗਦਾ ਹੈ, ਅਤੇ ਮੈਂ ਇਸ ਲਈ ਬਿਲਕੁਲ ਸਮਾਰਟ ਨਹੀਂ ਹਾਂ!" 😅 -ਪਰ ਇਹ ਹੈ ਜੋ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਕਿਸੇ ਨੇ ਮੈਨੂੰ ਉਸ ਸਮੇਂ ਦੱਸਿਆ ਹੋਵੇ, ਅਤੇ ਜੋ ਮੈਂ ਤੁਹਾਨੂੰ ਹੁਣ ਦੱਸ ਰਿਹਾ ਹਾਂ: ਕਮਾਂਡ ਲਾਈਨ ਡਰਾਉਣੀ ਨਹੀਂ ਹੈ – ਇਹ ਅਸਲ ਵਿੱਚ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨਾਲ ਸਿੱਧੀ ਗੱਲਬਾਤ ਕਰਨ ਵਰਗਾ ਹੈ। ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਕਿ ਖਾਣਾ ਆਰਡਰ ਕਰਨ ਦਾ ਤਰੀਕਾ ਇੱਕ ਸ਼ਾਨਦਾਰ ਐਪ ਦੇ ਜ਼ਰੀਏ ਹੈ ਜਿਸ ਵਿੱਚ ਤਸਵੀਰਾਂ ਅਤੇ ਮੈਨੂ ਹਨ (ਜੋ ਸੁਹਜ ਅਤੇ ਆਸਾਨ ਹੈ) ਬਨਾਮ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਸਥਾਨਕ ਰੈਸਟੋਰੈਂਟ ਵਿੱਚ ਜਾਣਾ ਜਿੱਥੇ ਸ਼ੈਫ਼ ਨੂੰ ਪਤਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਕੀ ਪਸੰਦ ਹੈ ਅਤੇ ਸਿਰਫ਼ ਤੁਹਾਡੇ "ਮੈਨੂੰ ਕੁਝ ਸ਼ਾਨਦਾਰ ਨਾਲ ਹੈਰਾਨ ਕਰੋ" ਕਹਿਣ 'ਤੇ ਕੁਝ ਪੂਰਨ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੈ। +ਪਰ ਇਹ ਹੈ ਜੋ ਕਾਸ਼ ਕਿਸੇ ਨੇ ਮੈਨੂੰ ਉਸ ਸਮੇਂ ਦੱਸਿਆ ਹੁੰਦਾ, ਅਤੇ ਹੁਣ ਮੈਂ ਤੁਹਾਨੂੰ ਦੱਸ ਰਿਹਾ ਹਾਂ: ਕਮਾਂਡ ਲਾਈਨ ਡਰਾਉਣਾ ਨਹੀਂ ਹੈ – ਇਹ ਵਾਸਤਵ ਵਿੱਚ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨਾਲ ਸਿੱਧੀ ਗੱਲਬਾਤ ਕਰਨ ਵਰਗਾ ਹੈ। ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਜਿਵੇਂ ਫੋਟੋਆਂ ਅਤੇ ਮੇਨੂਜ਼ ਨਾਲ ਇੱਕ ਸਜਾਇਆ ਗਿਆ ਐਪ ਦੁਆਰਾ ਖਾਣਾ ਮੰਗਾਉਣਾ (ਜੋ ਸੁਗਮ ਅਤੇ ਆਸਾਨ ਹੈ) ਅਤੇ ਆਪਣੇ ਮਨਪਸੰਦ ਸਥਾਨਕ ਰੈਸਟੋਰੈਂਟ ਵਿੱਚ ਜਾਣਾ ਜਿੱਥੇ ਖਾਣਾਢ ਦਾ ਕੁੱਕ ਜਾਣਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਕੀ ਪਸੰਦ ਕਰਦੇ ਹੋ ਅਤੇ ਤੁਸੀਂ "ਕੁਝ ਅਜਿਹਾ ਹੈਰਾਨੀਜਨਕ ਬਣਾਓ" ਕਹਿਣ ਨਾਲ ਹੀ ਕੁਝ ਲਾਜਵਾਬ ਤਿਆਰ ਕਰਦਾ ਹੈ। -ਕਮਾਂਡ ਲਾਈਨ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਡਿਵੈਲਪਰ ਜਾਦੂਗਰਾਂ ਵਰਗਾ ਮਹਿਸੂਸ ਕਰਨ ਲਈ ਜਾਂਦੇ ਹਨ। ਤੁਸੀਂ ਕੁਝ ਜਾਦੂਈ ਸ਼ਬਦ (ਠੀਕ ਹੈ, ਇਹ ਸਿਰਫ਼ ਕਮਾਂਡ ਹਨ, ਪਰ ਇਹ ਜਾਦੂਈ ਮਹਿਸੂਸ ਹੁੰਦੀਆਂ ਹਨ!) ਟਾਈਪ ਕਰਦੇ ਹੋ, ਐਂਟਰ ਦਬਾਉਂਦੇ ਹੋ, ਅਤੇ ਬੂਮ – ਤੁਸੀਂ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਸਟ੍ਰਕਚਰ ਬਣਾਏ, ਦੁਨੀਆ ਭਰ ਤੋਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲਸ ਇੰਸਟਾਲ ਕੀਤੇ, ਜਾਂ ਆਪਣਾ ਐਪ ਇੰਟਰਨੈਟ 'ਤੇ ਲੋੜੀਂਦੇ ਲੋਕਾਂ ਲਈ ਡਿਪਲੌਇ ਕੀਤਾ। ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਸ਼ਕਤੀ ਦਾ ਪਹਿਲਾ ਸਵਾਦ ਲੈਂਦੇ ਹੋ, ਇਹ ਸੱਚਮੁੱਚ ਕਾਫ਼ੀ ਆਕਰਸ਼ਕ ਹੁੰਦਾ ਹੈ! +ਕਮਾਂਡ ਲਾਈਨ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਡਿਵੈਲਪਰ ਆਪ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਾਦੂਗਰ ਮਹਸੂਸ ਕਰਦੇ ਹਨ। ਤੁਸੀਂ ਕੁਝ ਜਾਦੂਈ ਸ਼ਬਦ (ਠੀਕ ਹੈ, ਇਹ ਸਿਰਫ ਹੁਕਮ ਹਨ, ਪਰ ਇਹ ਜਾਦੂਈ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ!) ਟਾਇਪ ਕਰਦੇ ਹੋ, ਐਂਟਰ ਦਬਾਉਂਦੇ ਹੋ, ਅਤੇ ਬੂਮ – ਤੁਸੀਂ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਸੰਰਚਨਾਵਾਂ ਬਣਾ ਦਿਤੇ, ਸੰਸਾਰ ਭਰ ਤੋਂ ਤਾਕਤਵਰ ਟੂਲ ਇੰਸਟਾਲ ਕੀਤੇ, ਜਾਂ ਆਪਣਾ ਐਪ ਇੰਟਰਨੈੱਟ 'ਤੇ ਲੱਖਾਂ ਲੋਕਾਂ ਨੂੰ ਵੇਖਣ ਲਈ ਡਿਪਲੋਇ ਕੀਤਾ। ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਤਕਤ ਦਾ ਪਹਿਲਾ ਜ਼ਾਇਕਾ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਇਹ ਸੱਚਮੁੱਚ ਆਦਤ ਬਣ ਜਾਂਦਾ ਹੈ! -**ਕਮਾਂਡ ਲਾਈਨ ਤੁਹਾਡਾ ਮਨਪਸੰਦ ਟੂਲ ਕਿਉਂ ਬਣ ਜਾਵੇਗਾ:** +**ਕਮਾਂਡ ਲਾਈਨ ਤੁਹਾਡਾ ਪਸੰਦੀਦਾ ਟੂਲ ਕਿਉਂ ਬਣੇਗਾ:** -ਜਦੋਂ ਕਿ ਗ੍ਰਾਫਿਕਲ ਇੰਟਰਫੇਸ ਕਈ ਕੰਮਾਂ ਲਈ ਸ਼ਾਨਦਾਰ ਹਨ, ਕਮਾਂਡ ਲਾਈਨ ਆਟੋਮੇਸ਼ਨ, ਸਹੀਤਾ ਅਤੇ ਗਤੀ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਹੈ। ਕਈ ਵਿਕਾਸ ਟੂਲਸ ਮੁੱਖ ਤੌਰ 'ਤੇ ਕਮਾਂਡ ਲਾਈਨ ਇੰਟਰਫੇਸਾਂ ਦੇ ਜ਼ਰੀਏ ਕੰਮ ਕਰਦੇ ਹਨ, ਅਤੇ ਇਨ੍ਹਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਵਰਤਣ ਦੀ ਸਿੱਖਿਆ ਤੁਹਾਡੀ ਉਤਪਾਦਕਤਾ ਨੂੰ ਬਹੁਤ ਵਧਾ ਸਕਦੀ ਹੈ। +ਜਦੋਂ ਕਿ ਗ੍ਰਾਫਿਕਲ ਇੰਟਰਫੇਸ ਬਹੁਤ ਸਾਰੇ ਕੰਮਾਂ ਲਈ ਵਧੀਆ ਹਨ, ਕਮਾਂਡ ਲਾਈਨ ਸੁਚਜਤਾ, ਨੈਪਕਤਾ ਅਤੇ ਗਤੀ ਵਿੱਚ ਕਮਾਲ ਕਰਦੀ ਹੈ। ਬਹੁਤ ਸਾਰੇ ਵਿਕਾਸ ਟੂਲ ਮੁੱਖ ਤੌਰ 'ਤੇ ਕਮਾਂਡ ਲਾਈਨ ਇੰਟਰਫੇਸਾਂ ਰਾਹੀਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਵਰਤਣਾ ਸਿਖਣਾ ਤੁਹਾਡੀ ਉਤਪਾਦਕਤਾ ਵਿੱਚ ਬਹੁਤ ਸੁਧਾਰ ਕਰ ਸਕਦਾ ਹੈ। ```bash -# Step 1: Create and navigate to project directory +# ਕਦਮ 1: ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਬਣਾਓ ਅਤੇ ਨੇਵੀਗੇਟ ਕਰੋ mkdir my-awesome-website cd my-awesome-website ``` **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:** -- **ਨਵਾਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਓ** "my-awesome-website" ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ -- **ਨਵੇਂ ਬਣਾਏ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾਓ** ਕੰਮ ਸ਼ੁਰੂ ਕਰਨ ਲਈ +- ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਲਈ "my-awesome-website" ਨਾਮਕ ਇੱਕ ਨਵਾਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਓ +- ਕੰਮ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਨਵੀਂ ਬਣਾਈ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾਓ ```bash -# Step 2: Initialize project with package.json +# ਕਦਮ 2: package.json ਨਾਲ ਪ੍ਰੋਜੈਕਟ ਸ਼ੁਰੂ ਕਰੋ npm init -y -# Install modern development tools +# ਆਧੁਨਿਕ ਵਿਕਾਸ ਟੂਲਸ ਇੰਸਟਾਲ ਕਰੋ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` **ਕਦਮ-ਦਰ-ਕਦਮ, ਇਹ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:** -- **ਨਵਾਂ Node.js ਪ੍ਰੋਜੈਕਟ ਸ਼ੁਰੂ ਕਰੋ** ਡਿਫਾਲਟ ਸੈਟਿੰਗਾਂ ਨਾਲ `npm init -y` ਦੀ ਵਰਤੋਂ ਕਰਕੇ -- **Vite ਇੰਸਟਾਲ ਕਰੋ** ਇੱਕ ਆਧੁਨਿਕ ਬਿਲਡ ਟੂਲ ਵਧੀਆ ਵਿਕਾਸ ਅਤੇ ਉਤਪਾਦਨ ਬਿਲਡ ਲਈ -- **Prettier ਸ਼ਾਮਲ ਕਰੋ** ਆਟੋਮੈਟਿਕ ਕੋਡ ਫਾਰਮੈਟਿੰਗ ਲਈ ਅਤੇ ESLint ਕੋਡ ਗੁਣਵੱਤਾ ਚੈੱਕ ਲਈ -- **ਵਰਤੋਂ ਕਰੋ** `--save-dev` ਫਲੈਗ ਇਨ੍ਹਾਂ ਨੂੰ ਸਿਰਫ਼ ਵਿਕਾਸ-ਮਾਤਰ ਡਿਪੈਂਡੈਂਸੀਜ਼ ਵਜੋਂ ਮਾਰਕ ਕਰਨ ਲਈ +- ਮੂਲ ਸੈਟਿੰਗਾਂ ਨਾਲ ਇੱਕ ਨਵਾਂ Node.js ਪ੍ਰੋਜੈਕਟ `$ npm init -y` ਦੇ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ +- ਤੇਜ਼ ਵਿਕਾਸ ਅਤੇ ਉਤਪਾਦਨ ਬਣਾਵਟ ਲਈ Vite ਇੰਸਟਾਲ ਕਰੋ +- ਆਟੋਮੈਟਿਕ ਕੋਡ ਫਾਰਮੈਟਿੰਗ ਲਈ Prettier ਅਤੇ ਕੋਡ ਗੁਣਵੱਤਾ ਜਾਂਚ ਲਈ ESLint ਸ਼ਾਮਿਲ ਕਰੋ +- ਇਹਨਾਂ ਨੂੰ ਵਿਕਾਸ-ਕੇਵਲ ਨਿਰਭਰਤਾਵਾਂ ਵਜੋਂ ਮਾਰਕ ਕਰਨ ਲਈ `--save-dev` ਝੰਡਾ ਵਰਤੋਂ ```bash -# Step 3: Create project structure and files +# ਕਦਮ 3: ਪ੍ਰੋਜੈਕਟ ਦਾ ਢਾਂਚਾ ਅਤੇ ਫਾਈਲਾਂ ਬਣਾਓ mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ npx vite ``` -**ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:** -- **ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸੰਗਠਿਤ ਕੀਤਾ** ਸਰੋਤ ਕੋਡ ਅਤੇ ਐਸੈਟਸ ਲਈ ਵੱਖਰੇ ਫੋਲਡਰ ਬਣਾਕੇ -- **ਮੁੱਢਲੀ HTML ਫਾਈਲ ਬਣਾਈ** ਸਹੀ ਦਸਤਾਵੇਜ਼ ਸਟ੍ਰਕਚਰ ਨਾਲ -- **Vite ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕੀਤਾ** ਲਾਈਵ ਰੀਲੋਡਿੰਗ ਅਤੇ ਹਾਟ ਮੋਡਿਊਲ ਰਿਪਲੇਸਮੈਂਟ ਲਈ +**ਉਪਰ ਦਿੱਤੇ ਕੋਡ ਵਿੱਚ, ਅਸੀਂ:** +- ਸੋਰਸ ਕੋਡ ਅਤੇ ਐਸੈੱਟ ਲਈ ਵੱਖ-ਵੱਖ ਫੋਲਡਰ ਬਣਾਕੇ ਪ੍ਰੋਜੈਕਟ ਦਾ ਆਯੋਜਨ ਕੀਤਾ +- ਸਹੀ ਦਸਤਾਵੇਜ਼ ਸੰਰਚਨਾ ਨਾਲ ਇੱਕ ਮੂਲ HTML ਫਾਇਲ ਬਣਾਈ +- ਲਾਈਵ ਰੀਲੋਡਿੰਗ ਅਤੇ ਹੌਟ ਮਾਡਿਊਲ ਰੀਪਲੇਸਮੈਂਟ ਲਈ Vite ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਸ਼ੁਰੂ ਕੀਤਾ -#### ਵੈਬ ਵਿਕਾਸ ਲਈ ਜ਼ਰੂਰੀ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲਸ +#### ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਅਣਿਵਾਰ્ય ਕਮਾਂਡ ਲਾਈਨ ਟੂਲਜ਼ -| ਟੂਲ | ਉਦੇਸ਼ | ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ | -|------|---------|-----------------| -| **[Git](https://git-scm.com/)** | ਵਰਜਨ ਕੰਟਰੋਲ | ਬਦਲਾਅ ਟ੍ਰੈਕ ਕਰੋ, ਹੋਰਾਂ ਨਾਲ ਸਹਿਯੋਗ ਕਰੋ, ਆਪਣਾ ਕੰਮ ਬੈਕਅਪ ਕਰੋ | -| **[Node.js & npm](https://nodejs.org/)** | ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਨਟਾਈਮ ਅਤੇ ਪੈਕੇਜ ਮੈਨੇਜਮੈਂਟ | ਬ੍ਰਾਊਜ਼ਰਾਂ ਤੋਂ ਬਾਹਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਚਲਾਓ, ਆਧੁਨਿਕ ਵਿਕਾਸ ਟੂਲਸ ਇੰਸਟਾਲ ਕਰੋ | -| **[Vite](https://vitejs.dev/)** | ਬਿਲਡ ਟੂਲ ਅਤੇ ਡਿਵ ਸਰਵਰ | ਹਾਟ ਮੋਡਿਊਲ ਰਿਪਲੇਸਮੈਂਟ ਨਾਲ ਤੇਜ਼ ਵਿਕਾਸ | -| **[ESLint](https://eslint.org/)** | ਕੋਡ ਗੁਣਵੱਤਾ | ਤੁਹਾਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਲੱਭੋ ਅਤੇ ਠੀਕ ਕਰੋ | -| **[Prettier](https://prettier.io/)** | ਕੋਡ ਫਾਰਮੈਟਿੰਗ | ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸਥਿਰ ਤੌਰ 'ਤੇ ਫਾਰਮੈਟ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਰੱਖੋ | +| ਟੂਲ | ਮਕਸਦ | ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਕੀ ਲੋੜ ਹੈ | +|-------|---------|--------------------------| +| **[Git](https://git-scm.com/)** | ਵਰਜਨ ਕੰਟਰੋਲ | ਬਦਲਾਵ ਟਰੈਕ ਕਰੋ, ਦੂਜਿਆਂ ਨਾਲ ਸਹਿਯੋਗ ਕਰੋ, ਆਪਣਾ ਕੰਮ ਬੈਕਅੱਪ ਕਰੋ | +| **[Node.js & npm](https://nodejs.org/)** | ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਨਟਾਈਮ ਅਤੇ ਪੈਕੇਜ ਮੈਨੇਜਮੈਂਟ | ਬ੍ਰਾਊਜ਼ਰਾਂ ਤੋਂ ਬਾਹਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਚਲਾਓ, ਆਧੁਨਿਕ ਵਿਕਾਸ ਟੂਲ ਇੰਸਟਾਲ ਕਰੋ | +| **[Vite](https://vitejs.dev/)** | ਬਿਲਡ ਟੂਲ ਅਤੇ ਡਿਵ ਸਰਵਰ | ਬਿਜਲੀ-ਜਿਹਾ ਤੇਜ਼ ਵਿਕਾਸ ਹੌਟ ਮਾਡਿਊਲ ਬਦਲੀ ਸਮੇਤ | +| **[ESLint](https://eslint.org/)** | ਕੋਡ ਗੁਣਵੱਤਾ | ਆਪਣੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਮੁਸ਼ਕਿਲਾਂ ਆਪਮੈਟਿਕ ਢੰਗ ਨਾਲ ਲੱਭੋ ਅਤੇ ਠੀਕ ਕਰੋ | +| **[Prettier](https://prettier.io/)** | ਕੋਡ ਫਾਰਮੈਟਿੰਗ | ਆਪਣੇ ਕੋਡ ਨੂੰ ਇਕਸਾਰ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਰੱਖੋ | #### ਪਲੇਟਫਾਰਮ-ਵਿਸ਼ੇਸ਼ ਵਿਕਲਪ **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ਆਧੁਨਿਕ, ਵਿਸਥਾਰਤ ਟਰਮੀਨਲ +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ਆਧੁਨਿਕ, ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਭਰਪੂਰ ਟਰਮੀਨਲ - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਕ੍ਰਿਪਟਿੰਗ ਵਾਤਾਵਰਣ -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - ਪਰੰਪਰਾਗਤ Windows ਕਮਾਂਡ ਲਾਈਨ +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - ਪਰੰਪਰਾਤਮਕ Windows ਕਮਾਂਡ ਲਾਈਨ **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - ਬਿਲਟ-ਇਨ ਟਰਮੀਨਲ ਐਪਲੀਕੇਸ਼ਨ -- **[iTerm2](https://iterm2.com/)** - ਵਿਸਥਾਰਤ ਟਰਮੀਨਲ ਉੱਨਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ +- **[iTerm2](https://iterm2.com/)** - ਉੱਨਤ ਫੀਚਰਾਂ ਨਾਲ ਸੰਵਾਰਿਆ ਟਰਮੀਨਲ **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - ਸਟੈਂਡਰਡ Linux ਸ਼ੈਲ -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - ਉੱਨਤ ਟਰਮੀਨਲ ਇਮੀਲੇਟਰ +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - ਮਿਆਰੀ Linux ਸ਼ੈਲ +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - ਉੱਨਤ ਟਰਮੀਨਲ ਇਮੂਲੇਟਰ -> 💻 = ਓਪਰੇਟਿੰਗ ਸਿਸਟਮ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਇੰਸਟਾਲ +> 💻 = ਓਪਰੇਟਿੰਗ ਸਿਸਟਮ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਸਥਾਪਿਤ -> 🎯 **ਸਿੱਖਣ ਦਾ ਰਾਹ**: ਬੁਨਿਆਦੀ ਕਮਾਂਡਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਜਿਵੇਂ `cd` (ਡਾਇਰੈਕਟਰੀ ਬਦਲੋ), `ls` ਜਾਂ `dir` (ਫਾਈਲਾਂ ਦੀ ਸੂਚੀ), ਅਤੇ `mkdir` (ਫੋਲਡਰ ਬਣਾਓ)। ਆਧੁਨਿਕ ਵਰਕਫਲੋ ਕਮਾਂਡਾਂ ਜਿਵੇਂ `npm install`, `git status`, ਅਤੇ `code .` (ਮੌਜੂਦਾ ਡਾਇਰੈਕਟਰੀ ਨੂੰ VS Code ਵਿੱਚ ਖੋਲ੍ਹੋ) ਨਾਲ ਅਭਿਆਸ ਕਰੋ। ਜਿਵੇਂ ਤੁਸੀਂ ਹੋਰ ਆਰਾਮਦਾਇਕ ਹੋ ਜਾਂਦੇ ਹੋ, ਤੁਸੀਂ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਹੋਰ ਉੱਨਤ ਕਮਾਂਡਾਂ ਅਤੇ ਆਟੋਮੇਸ਼ਨ ਤਕਨੀਕਾਂ ਨੂੰ ਸਿੱਖ ਲਵੋਗੇ। +> 🎯 **ਸਿੱਖਣ ਦਾ ਰਸਤਾ**: ਮੂਲ ਕਮਾਂਡਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਜਿਵੇਂ ਕਿ `cd` (ਡਾਇਰੈਕਟਰੀ ਬਦਲਣ ਲਈ), `ls` ਜਾਂ `dir` (ਫਾਇਲਾਂ ਦੀ ਸੂਚੀ), ਅਤੇ `mkdir` (ਫੋਲਡਰ ਬਣਾਉਣ ਲਈ)। ਮੁਕਤਦਮ ਵਰਕਫ਼ਲੋ ਕਮਾਂਡਾਂ ਜਿਵੇਂ ਕਿ `npm install`, `git status`, ਅਤੇ `code .` (ਮੌਜੂਦਾ ਡਾਇਰੈਕਟਰੀ VS ਕੋਡ ਵਿੱਚ ਖੋਲ੍ਹਣ ਲਈ) ਨਾਲ ਅਭਿਆਸ ਕਰੋ। ਜਿਵੇਂ ਜਿਵੇਂ ਤੁਸੀਂ ਆਰਾਮਦਾਇਕ ਹੋਵੋਗੇ, ਤੁਸੀਂ ਕੁਦਰਤੀ ਤੌਰ ਤੇ ਹੌਲੀ-ਹੌਲੀ ਵਧੀਆ ਕਮਾਂਡਾਂ ਅਤੇ ਆਟੋਮੇਸ਼ਨ ਤਕਨੀਕਾਂ ਸਿੱਖੋਗੇ। -### ਦਸਤਾਵੇਜ਼ੀਕਰਨ: ਤੁਹਾਡਾ ਹਮੇਸ਼ਾ-ਉਪਲਬਧ ਸਿੱਖਣ ਵਾਲਾ ਮੰਤਰ -ਚੰਗਾ, ਆਓ ਇੱਕ ਛੋਟਾ ਰਾਜ਼ ਸਾਂਝਾ ਕਰੀਏ ਜੋ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂਆਤੀ ਹੋਣ ਬਾਰੇ ਬਹੁਤ ਬਿਹਤਰ ਮਹਿਸੂਸ ਕਰੇਗਾ: ਸਭ ਤੋਂ ਅਨੁਭਵੀ ਡਿਵੈਲਪਰ ਆਪਣਾ ਬਹੁਤ ਸਾਰਾ ਸਮਾਂ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਪੜ੍ਹਨ ਵਿੱਚ ਬਿਤਾਉਂਦੇ ਹਨ। ਅਤੇ ਇਹ ਇਸ ਲਈ ਨਹੀਂ ਕਿ ਉਹ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਉਹ ਕੀ ਕਰ ਰਹੇ ਹਨ – ਇਹ ਅਸਲ ਵਿੱਚ ਬੁੱਧੀਮਾਨ ਹੋਣ ਦੀ ਨਿਸ਼ਾਨੀ ਹੈ! +### ਦਸਤਾਵੇਜ਼ੀਕਰਨ: ਤੁਹਾਡਾ ਹਮੇਸ਼ਾ ਉਪਲਬਧ ਸਿੱਖਣ ਵਾਲਾ ਗੁਰੂ -ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਨੂੰ 24/7 ਉਪਲਬਧ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਧੀਰਜਵਾਨ, ਗਿਆਨਵਾਨ ਅਧਿਆਪਕਾਂ ਤੱਕ ਪਹੁੰਚ ਹੋਣ ਵਜੋਂ ਸੋਚੋ। 2 AM 'ਤੇ ਸਮੱਸਿਆ 'ਤੇ ਫਸੇ ਹੋ? ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਤੁਹਾਡੇ ਲਈ ਇੱਕ ਗਰਮ ਵਰਚੁਅਲ ਹੱਗ ਅਤੇ ਬਿਲਕੁਲ ਉਹ ਜਵਾਬ ਹੈ ਜਿਸ ਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ। ਕੁਝ ਠੰਡੇ ਨਵੇਂ ਫੀਚਰ ਬਾਰੇ ਸਿੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਿਸ ਬਾਰੇ ਹਰ ਕੋਈ ਗੱਲ ਕਰ ਰਿਹਾ ਹੈ? ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਤੁਹਾਡੇ ਲਈ ਪਿੱਠ ਹੈ ਸਟੈਪ-ਬਾਈ-ਸਟੈਪ ਉਦਾਹਰਨਾਂ ਨਾਲ। ਸਮਝਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ ਕਿ ਕੁਝ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ? ਤੁਸੀਂ ਅਨੁਮਾਨ ਲਗਾਇਆ – ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਇਸਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਸਮਝਾਉਣ ਲਈ ਤਿਆਰ ਹੈ ਜੋ ਅੰਤ ਵਿੱਚ ਇਸਨੂੰ ਕਲਿੱਕ ਕਰਦਾ ਹੈ! +ਠੀਕ ਹੈ, ਮੈਂ ਇੱਕ ਛੋਟਾ ਸਿਕੰਦਰ ਸਾਂਝਾ ਕਰਦਾ ਹਾਂ ਜੋ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂਆਤੀ ਹੋਣ ਦੇ ਬਾਵਜੂਦ ਬਹੁਤ ਠੀਕ ਮਹਿਸੂਸ ਕਰਵਾਏਗਾ: ਸਭ ਤੋਂ ਤਜਰਬੇਕਾਰ ਡਿਵੈਲਪਰ ਵੀ ਆਪਣੇ ਸਮੇਂ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਪੜ੍ਹਨ ਵਿੱਚ ਬਿਤਾਂਦੇ ਹਨ। ਅਤੇ ਇਹ ਇਸ ਲਈ ਨਹੀਂ ਕਿ ਉਹ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਉਹ ਕੀ ਕਰ ਰਹੇ ਹਨ – ਇਹ ਦਰਅਸਲ ਬੁੱਧੀਮੱਤਾ ਦੀ ਨਿਸ਼ਾਨੀ ਹੈ! -ਇਹ ਕੁਝ ਹੈ ਜਿਸ ਨੇ ਮੇਰੇ ਨਜ਼ਰੀਏ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ: ਵੈਬ ਵਿਕਾਸ ਦੀ ਦੁਨੀਆ ਬਹੁਤ ਤੇਜ਼ੀ ਨਾਲ ਅੱਗੇ ਵਧਦੀ ਹੈ, ਅਤੇ ਕੋਈ ਵੀ (ਮੈਂ ਬਿਲਕੁਲ ਕੋਈ ਵੀ ਨਹੀਂ!) ਸਭ ਕੁਝ ਯਾਦ ਨਹੀਂ ਰੱਖਦਾ। ਮੈਂ 15+ ਸਾਲਾਂ ਦੇ ਅਨੁਭਵ ਵਾਲੇ ਸੀਨੀਅਰ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਬੁਨਿਆਦੀ ਸਿੰਟੈਕਸ ਦੀ ਖੋਜ ਕਰਦੇ ਦੇਖਿਆ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਕੀ? ਇਹ ਸ਼ਰਮਨਾਕ ਨਹੀਂ ਹੈ – ਇਹ ਸਮਾਰਟ ਹੈ! ਇਹ ਪੂਰੀ ਯਾਦਸ਼ਤ ਹੋਣ ਬਾਰੇ ਨਹੀਂ ਹੈ; ਇਹ ਤੇਜ਼ੀ ਨਾਲ ਭਰੋਸੇਮੰਦ ਜਵਾਬ ਲੱਭਣ ਅਤੇ ਇਹ ਸਮਝਣ ਬਾਰੇ ਹੈ ਕਿ ਉਨ੍ਹਾਂ ਨੂੰ ਕਿਵੇਂ ਅਤੇ ਕਦੋਂ ਲਾਗੂ ਕਰਨਾ ਹੈ। +ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਨੂੰ ਧਿਆਨ ਨਾਲ ਸੋਚੋ ਕਿ ਇਹ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਧੀਰੀ, ਗਿਆਨਵਾਨ ਅਧਿਆਪਕਾਂ ਦੀ ਪਹੁੰਚਾਂਵਾਲਾ ਹੈ ਜੋ 24/7 ਉਪਲਬਧ ਹਨ। 2 ਵਜੇ ਰਾਤ ਨੂੰ ਕਿਸੇ ਸਮੱਸਿਆ 'ਤੇ ਫਸ ਗਏ? ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਗਰਮਜੋਸ਼ੀ ਨਾਲ ਵਰਚੁਅਲ ਗਲੇ ਲਗਾਉਂਦਾ ਹੈ ਅਤੇ ਬਿਲਕੁਲ ਉਹੀ ਜਵਾਬ ਦਿੰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਚਾਹੀਦਾ ਹੈ। ਕੁਝ ਨਵੀਂ ਖੂਬਸੂਰਤ ਫੀਚਰ ਬਾਰੇ ਸਿੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਹਰ ਕੋਈ ਗੱਲ ਕਰ ਰਿਹਾ ਹੈ? ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਤੁਹਾਡੇ ਨਾਲ ਕਦਮ-ਦਰ-कਦਮ ਉਦਾਹਰਨਾਂ ਦੇ ਕੇ ਹੈ। ਸਮਝਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ ਕਿ ਕੁਝ ਕਿਉਂ ਕੰਮ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਰਦਾ ਹੈ? ਤੁਸੀਂ ਸਹੀ ਸਮਝੇ – ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਇਸਨੂੰ ਅਜਿਹੇ ਢੰਗ ਨਾਲ ਸਮਝਾਉਣ ਲਈ ਤਤਪਰ ਹੈ ਜਿਸ ਨਾਲ ਸਹੀ ਸਮਝ ਆਉਂਦੀ ਹੈ! -**ਇਥੇ ਹੈ ਜਿੱਥੇ ਅਸਲ ਜਾਦੂ ਹੁੰਦਾ ਹੈ:** +ਇੱਕ ਚੀਜ਼ ਜਿਸ ਨੇ ਮੇਰਾ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਬਿਲਕੁਲ ਬਦਲ ਦਿੱਤਾ ਹੈ: ਵੈੱਬ ਵਿਕਾਸ ਦੀ ਦੁਨੀਆਂ ਬੜੀ ਤੇਜ਼ੀ ਨਾਲ ਹਿਲਦੀ ਹੈ, ਅਤੇ ਕੋਈ ਵੀ (ਸਿਰਫ ਕੋਈ ਵੀ ਨਹੀਂ!) ਸਭ ਕੁਝ ਯਾਦ ਨਹੀਂ ਕਰ ਸਕਦਾ। ਮੈਂ 15+ ਸਾਲ ਤਜ਼ਰਬੇ ਵਾਲੇ ਸੀਨੀਅਰ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਮੂਲ ਸਿੰਟੈਕਸ ਵੇਖਦੇ ਵੇਖਿਆ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਕੀ ਪਤਾ? ਇਹ ਸ਼ਰਮਨਾਕ ਨਹੀਂ ਸਗੋਂ ਸਮਾਰਟ ਹੈ! ਇਹ ਪਰਫੈਕਟ ਯਾਦ ਦਿਹਾੜੇ ਬਾਰੇ ਨਹੀਂ, ਸਗੋਂ ਇਹ ਜਾਣਣ ਬਾਰੇ ਹੈ ਕਿ ਭਰੋਸੇਯੋਗ ਜਵਾਬ ਕਿੱਥੇ ਲੱਭਣੇ ਹਨ ਤੇ ਕਿਵੇਂ ਉਨ੍ਹਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਹੈ। -ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਆਪਣਾ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਪੜ੍ਹਨ ਵਿੱਚ ਬਿਤਾਉਂਦੇ ਹਨ – ਇਹ ਇਸ ਲਈ ਨਹੀਂ ਕਿ ਉਹ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਉਹ ਕੀ ਕਰ ਰਹੇ ਹਨ, ਸਗੋਂ ਕਿਉਂਕਿ ਵੈਬ ਵਿਕਾਸ ਦਾ ਦ੍ਰਿਸ਼ ਬਹੁਤ ਤੇਜ਼ੀ ਨਾਲ ਵਿਕਸਿਤ ਹੁੰਦਾ ਹੈ ਕਿ ਅਪ-ਟੂ-ਡੇਟ ਰਹਿਣ ਲਈ ਲਗਾਤਾਰ ਸਿੱਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਸ਼ਾਨਦਾਰ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ *ਕਿਵੇਂ* ਕੁਝ ਵਰਤਣਾ ਹੈ, ਸਗੋਂ *ਕਿਉਂ* ਅਤੇ *ਕਦੋਂ* ਵਰਤਣਾ ਹੈ, ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। +**ਅਸਲੀ ਜਾਦੂ ਇੱਥੇ ਹੁੰਦਾ ਹੈ:** -#### ਜ਼ਰੂਰੀ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਸਰੋਤ +ਪ੍ਰੋਫੈਸ਼ਨਲ ਵਿਕਾਸਕਾਰ ਲੰਮੇ ਸਮੇਂ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਪੜ੍ਹਦੇ ਹਨ – ਇਸ ਲਈ ਨਹੀਂ ਕਿ ਉਹ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਉਹ ਕੀ ਕਰ ਰਹੇ ਹਨ, ਪਰ ਵੈੱਬ ਵਿਕਾਸੇ ਦਾ ਖੇਤਰ ਇੰਨਾ ਤੇਜ਼ੀ ਨਾਲ ਵਿਕਸਤ ਹੁੰਦਾ ਹੈ ਕਿ ਅੱਛੇ ਨਾਲ ਅੱਛਾ ਰਹਿਣ ਲਈ ਲਗਾਤਾਰ ਸਿੱਖਣਾ ਲਾਜ਼ਮੀ ਹੈ। ਮਹਾਨ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਤੁਹਾਨੂੰ ਸਿਰਫ ਇਹ ਨਹੀਂ ਦਿਖਾਉਂਦੀ ਕਿ *ਕਿਵੇਂ* ਕੁਝ ਵਰਤਣਾ ਹੈ, ਪਰ *ਕਿਉਂ* ਅਤੇ *ਕਦੋਂ* ਇਸਨੂੰ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ। -**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- ਵੈਬ ਤਕਨਾਲੋਜੀ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਲਈ ਸੋਨੇ ਦਾ ਮਾਨਕ -- HTML, CSS, ਅਤੇ JavaScript ਲਈ ਵਿਸਥਾਰਤ ਗਾਈਡ -- ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਹੈ -- ਵਿਹੰਗਮ ਉਦਾਹਰਨਾਂ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਡੈਮੋਜ਼ ਦੀ ਵਿਸ਼ੇ -## ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਅਧਿਐਨ +#### ਲਾਜ਼ਮੀ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਸਰੋਤ -**ਆਪਣਾ ਸਮਾਂ ਲਓ, ਖੋਜ ਕਰੋ ਅਤੇ ਇਸ ਦਾ ਆਨੰਦ ਮਾਣੋ!** +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- ਵੈੱਬ ਤਕਨਾਲੋਜੀ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਵਿੱਚ ਸੋਨੇ ਦੀ ਸਥਿਤੀ +- HTML, CSS, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਈ ਵਿਸ਼ਤ ਰਾਹਦਰਸ਼ਨ +- ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਤਾ ਜਾਣਕਾਰੀ ਸ਼ਾਮਿਲ +- ਵਿਹਾਰਕ ਉਦਾਹਰਨ ਅਤੇ ਇੰਟਰੈਕਟਿਵ ਡੈਮੋਜ਼ -ਤੁਸੀਂ ਅੱਜ ਕਾਫ਼ੀ ਕੁਝ ਸਿੱਖਿਆ ਹੈ, ਅਤੇ ਇਹ ਗਰਵ ਕਰਨ ਵਾਲੀ ਗੱਲ ਹੈ! ਹੁਣ ਮਜ਼ੇਦਾਰ ਹਿੱਸਾ ਆਉਂਦਾ ਹੈ – ਉਹ ਵਿਸ਼ੇ ਖੋਜਣ ਜੋ ਤੁਹਾਡੀ ਦਿਲਚਸਪੀ ਨੂੰ ਜਗਾਉਂਦੇ ਹਨ। ਯਾਦ ਰੱਖੋ, ਇਹ ਘਰ ਦਾ ਕੰਮ ਨਹੀਂ ਹੈ – ਇਹ ਇੱਕ ਸਫ਼ਰ ਹੈ! +**[Web.dev](https://web.dev)** (ਗੂਗਲ ਵੱਲੋਂ) +- ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਸਰਵੋਤਮ ਅਮਲ +- ਪ੍ਰਦਰਸ਼ਨ ਵਧਾਇਆਣ ਦੇ ਮਾਰਗਦਰਸ਼ਨ +- ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਸਮਾਵੇਸ਼ੀ ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤ +- ਅਸਲ-ਦੁਨੀਆਂ ਪ੍ਰੋਜੈਕਟਾਂ ਤੋਂ ਕੇਸ ਸਟਡੀਜ਼ -**ਜੋ ਤੁਹਾਨੂੰ ਰੁਝਾਉਂਦਾ ਹੈ ਉਸ ਵਿੱਚ ਡੁੱਬੋ:** +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Edge ਬ੍ਰਾਊਜ਼ਰ ਵਿਕਾਸ ਸਰੋਤ +- ਪ੍ਰੋਗਰੇਸਿਵ ਵੈੱਬ ਐਪ ਗਾਈਡ +- ਕਰਾਸ-ਪਲੇਟਫਾਰਮ ਵਿਕਾਸ ਦੀ ਜਾਣਕਾਰੀ -**ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਨਾਲ ਹੱਥ-ਪੈਰ ਮਾਰੋ:** -- ਉਹ 2-3 ਭਾਸ਼ਾਵਾਂ ਦੀਆਂ ਅਧਿਕਾਰਤ ਵੈਬਸਾਈਟਾਂ 'ਤੇ ਜਾਓ ਜਿਨ੍ਹਾਂ ਨੇ ਤੁਹਾਡਾ ਧਿਆਨ ਖਿੱਚਿਆ। ਹਰ ਇੱਕ ਦੀ ਆਪਣੀ ਵਿਸ਼ੇਸ਼ਤਾ ਅਤੇ ਕਹਾਣੀ ਹੁੰਦੀ ਹੈ! -- ਕੁਝ ਆਨਲਾਈਨ ਕੋਡਿੰਗ ਪਲੇਗਰਾਊਂਡ ਜਿਵੇਂ [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ਜਾਂ [Replit](https://replit.com/) ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਪ੍ਰਯੋਗ ਕਰਨ ਤੋਂ ਡਰੋ ਨਾ – ਤੁਸੀਂ ਕੁਝ ਵੀ ਖਰਾਬ ਨਹੀਂ ਕਰ ਸਕਦੇ! -- ਪੜ੍ਹੋ ਕਿ ਤੁਹਾਡੀ ਮਨਪਸੰਦ ਭਾਸ਼ਾ ਕਿਵੇਂ ਬਣੀ। ਸੱਚਮੁੱਚ, ਕੁਝ ਕਹਾਣੀਆਂ ਬਹੁਤ ਦਿਲਚਸਪ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਇਹ ਤੁਹਾਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਕਿ ਭਾਸ਼ਾਵਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ। +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- ਸੰਰਚਿਤ ਸਿੱਖਣ ਵਾਲੇ ਕੋਰਸ +- ਉਦਯੋਗ ਕੇ ਮਾਹਿਰਾਂ ਤੋਂ ਵੀਡੀਓ ਕੋਰਸ +- ਹੱਥੋਂ-ਹੱਥ ਕੋਡਿੰਗ ਕਸਰਤਾਂ -**ਆਪਣੇ ਨਵੇਂ ਟੂਲਾਂ ਨਾਲ ਆਰਾਮਦਾਇਕ ਹੋਵੋ:** -- Visual Studio Code ਡਾਊਨਲੋਡ ਕਰੋ ਜੇਕਰ ਤੁਸੀਂ ਅਜੇ ਤੱਕ ਨਹੀਂ ਕੀਤਾ – ਇਹ ਮੁਫ਼ਤ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਇਹ ਪਸੰਦ ਆਵੇਗਾ! -- Extensions marketplace 'ਤੇ ਕੁਝ ਮਿੰਟ ਬਿਤਾਓ। ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਐਡੀਟਰ ਲਈ ਇੱਕ ਐਪ ਸਟੋਰ ਵਰਗਾ ਹੈ! -- ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ Developer Tools ਖੋਲ੍ਹੋ ਅਤੇ ਸਿਰਫ਼ ਕਲਿਕ ਕਰੋ। ਹਰ ਚੀਜ਼ ਨੂੰ ਸਮਝਣ ਦੀ ਚਿੰਤਾ ਨਾ ਕਰੋ – ਸਿਰਫ਼ ਇਸ ਨਾਲ ਜਾਣੂ ਹੋਵੋ ਕਿ ਉੱਥੇ ਕੀ ਹੈ। +> 📚 **ਅਧਿਐਨ ਰਣਨੀਤੀ**: ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਯਾਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਨਾ ਕਰੋ – ਇਸ ਦੀ ਜਗ੍ਹਾ ਇਸਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਕਿਵੇਂ ਖੋਜਣਾ ਹੈ, ਇਹ ਸਿੱਖੋ। ਅਕਸਰ ਵਰਤੇ ਜਾਂਦੇ ਸਰੋਤਾਂ ਨੂੰ ਬੁੱਕਮਾਰਕ ਕਰੋ ਅਤੇ ਲਾਂਭੇ ਸਮੇਂ ਵਿੱਚ ਖੋਜ ਕਾਰਜਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਟੁੱਟੇ ਹੋਏ ਪ੍ਰਸ਼ਨਾਂ ਦਾ ਜਵਾਬ ਤੇਜ਼ੀ ਨਾਲ ਲੱਭਣਾ ਅਭਿਆਸ ਕਰੋ। + +### 🔧 **ਟੂਲ ਮਾਸਟਰੀ ਚੈੱਕ: ਤੁਹਾਡੇ ਨਾਲ ਕਿਹੜੀ ਗੱਲ ਜ਼ਿਆਦਾ ਜੁੜਦੀ ਹੈ?** + +**ਇੱਕ ਪਲ ਲਈ ਸੋਚੋ:** +- ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਕਿਸ ਟੂਲ ਨੂੰ ਅਜ਼ਮਾਉਣ ਵਿੱਚ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਰੁਚੀ ਹੈ? (ਕੋਈ ਗਲਤ ਜਵਾਬ ਨਹੀਂ!) +- ਕਮਾਂਡ ਲਾਈਨ ਤੁਹਾਨੂੰ ਅਜੇ ਵੀ ਡਰਾਵਣੀ ਲੱਗਦੀ ਹੈ ਜਾਂ ਤੁਹਾਨੂੰ ਇਸ ਵਿਚ ਦਿਲਚਸਪੀ ਹੈ? +- ਕੀ ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ DevTools ਨੂੰ ਵਰਤ ਕੇ ਆਪਣੀਆਂ ਮਨਪਸੰਦ ਵੈੱਬਸਾਈਟਾਂ ਦੇ ਪਿੱਛੇ ਵਾਲਾ ਪਰਦਾਰੁਸ ਤਕਨੀਕੀ ਜ਼ਰੂਰਤਾਂ ਦਾ ਅੰਦਾਜ਼ਾ ਲਗਾ ਸਕਦੇ ਹੋ? + +```mermaid +pie title "ਡਿਵੈਲਪਰ ਦਾ ਸੰਦਾਂ ਨਾਲ ਲੱਗਾਇਆ ਸਮਾਂ" + "ਕੋਡ ਐਡੀਟਰ" : 40 + "ਬ੍ਰਾਉਜ਼ਰ ਟੈਸਟਿੰਗ" : 25 + "ਕਮਾਂਡ ਲਾਈਨ" : 15 + "ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹਨਾ" : 15 + "ਡਿਬੱਗਿੰਗ" : 5 +``` +> **ਮਜ਼ੇਦਾਰ ਜਾਣਕਾਰੀ**: ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰ ਆਪਣੇ ਸਮੇਂ ਦਾ ਲਗਭਗ 40% ਸਮਾਂ ਆਪਣੇ ਕੋਡ ਐਡੀਟਰ ਵਿੱਚ ਬਿਤਾਂਦੇ ਹਨ, ਪਰ ਧਿਆਨ ਦਿਓ ਕਿ ਟੈਸਟਿੰਗ, ਸਿੱਖਣ ਅਤੇ ਸਮੱਸਿਆ ਹੱਲ ਕਰਨ ਵਿੱਚ ਕਿੰਨਾ ਸਮਾਂ ਲਗਦਾ ਹੈ। ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਿਰਫ ਕੋਡ ਲਿਖਣ ਬਾਰੇ ਨਹੀਂ – ਇਹ ਤਜ਼ਰਬੇ ਬਣਾਉਣ ਬਾਰੇ ਹੈ! + +✅ **ਵਿਚਾਰ ਲਈ ਕੁਝ ਖੁਰਾਕ**: ਇੱਥੇ ਇੱਕ ਦਿਲਚਸਪ ਗੱਲ ਹੈ – ਤੁਹਾਡੇ ਖ਼ਿਆਲ ਵਿੱਚ ਵੈੱਬਸਾਈਟਾਂ ਬਨਾਉਣ (ਡਿਵੈਲਪਮੈਂਟ) ਲਈ ਟੂਲ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਲੁੱਕ (ਡਿਜ਼ਾਈਨ) ਲਈ ਟੂਲ ਵਿੱਚ ਕੀ ਫਰਕ ਹੋ ਸਕਦਾ ਹੈ? ਇਹ ਕੁਝ ਫਰਕ ਵਾਂਗ ਹੈ ਜਿਵੇਂ ਕਿ ਇੱਕ ਆਰਕੀਟੈਕਟ ਸੁੰਦਰ ਘਰ ਡਿਜ਼ਾਈਨ ਕਰਦਾ ਹੈ ਅਤੇ ਇੱਕ ਠੇਕਦਾਰ ਉਸਨੂੰ ਬਣਾਉਂਦਾ ਹੈ। ਦੋਹਾਂ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ, ਪਰ ਉਨ੍ਹਾਂ ਦੀਆਂ ਟੂਲਬਾਕਸਾਂ ਵੱਖ-ਵੱਖ ਹੁੰਦੀਆਂ ਹਨ! ਇਹ ਸੋਚ ਤੁਹਾਡੇ ਲਈ ਵੱਡਾ ਚਿੱਤਰ ਦੇਖਣ ਵਿੱਚ ਸਹਾਇਕ ਹੋਵੇਗੀ ਕਿ ਵੈੱਬਸਾਈਟਾਂ ਕਿਵੇਂ ਜੀਵੰਤ ਹੁੰਦੀਆਂ ਹਨ। + +## GitHub Copilot Agent ਚੈਲੇਂਜ 🚀 + +Agent ਮੋਡ ਨੂੰ ਵਰਤ ਕੇ ਹੇਠਾਂ ਦਿੱਤਾ ਚੈਲੇਂਜ ਪੂਰਾ ਕਰੋ: + +**ਵੇਰਵਾ:** ਇੱਕ ਆਧੁਨਿਕ ਕੋਡ ਐਡੀਟਰ ਜਾਂ IDE ਦੀਆਂ ਖੂਬੀਵਾਂ ਨੂੰ ਖੋਜੋ ਅਤੇ ਦਰਸਾਓ ਕਿ ਇਹ ਕਿਵੇਂ ਤੁਹਾਡੀ ਵੈੱਬ ਵਿਕਾਸ ਵਰਕਫਲੋ ਨੂੰ ਬਹਿਤਰ ਬਣਾਉਂਦਾ ਹੈ। + +**ਪ੍ਰੌਂਪਟ:** ਇੱਕ ਕੋਡ ਐਡੀਟਰ ਜਾਂ IDE ਚੁਣੋ (ਜਿਵੇਂ Visual Studio Code, WebStorm, ਜਾਂ ਕਲਾਊਡ-ਆਧਾਰਤ IDE)। ਤਿੰਨ ਖੂਬੀਆਂ ਜਾਂ ਵਿਸਥਾਰ ਦਿੱਤੇ ਜੋ ਤੁਹਾਨੂੰ ਜ਼ਿਆਦਾ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਕੋਡ ਲਿਖਣ, ਡਿਬੱਗ ਕਰਨ ਜਾਂ ਸੰਭਾਲਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ। ਹਰ ਇੱਕ ਲਈ, ਇੱਕ ਛੋਟਾ ਵਰਨਨ ਦਿਓ ਕਿ ਇਹ ਤੁਹਾਡੇ ਵਰਕਫਲੋ ਲਈ ਕਿਵੇਂ ਲਾਭਦਾਇਕ ਹੈ। + +--- + +## 🚀 ਚੈਲੇਂਜ + +**ਠੀਕ ਹੈ, ਜਾਸੂਸ, ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਪਹਿਲੇ ਮਾਮਲੇ ਲਈ ਤਿਆਰ ਹੋ?** + +ਹੁਣ ਜਦੋਂ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਇਹ ਸ਼ਾਨਦਾਰ ਅਧਾਰ ਹੈ, ਮੈਂ ਇੱਕ ਐਸਾ ਸਫ਼ਰ ਤੁਹਾਡੀ ਲਈ ਲੈ ਕੇ ਆਇਆ ਹਾਂ ਜੋ ਤੁਹਾਨੂੰ ਵੇਖਾਉਂਦਾ ਹੈ ਕਿ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਦੁਨੀਆ ਕਿੰਨੀ ਬਹੁਵਿਧ ਅਤੇ ਮਨੋਹਰ ਹੈ। ਅਤੇ ਸੁਣੋ – ਇਹ ਅਜੇ ਕੋਡ ਲਿਖਣ ਬਾਰੇ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਕੋਈ ਦਬਾਅ ਨਹੀਂ! ਖਿੱਚੋ ਆਪਣੇ ਆਪ ਨੂੰ ਇੱਕ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਦਾ ਜਾਸੂਸ ਸਮਝੋ ਜੋ ਆਪਣੇ ਪਹਿਲੇ ਦਿਲਚਸਪ ਮਾਮਲੇ 'ਤੇ ਹੈ! + +**ਤੁਹਾਡਾ ਮਿਸ਼ਨ, ਜੇ ਤੁਸੀਂ ਇਹ ਸਵੀਕਾਰ ਕਰੋ:** +1. **ਭਾਸ਼ਾ ਖੋਜਕਰਤਾ ਬਣੋ**: ਬਿਲਕੁਲ ਵੱਖ-ਵੱਖ ਬ੍ਰਹਿਮੰਡਾਂ ਦੀਆਂ ਤਿੰਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਚੁਣੋ – ਸ਼ਾਇਦ ਇੱਕ ਵੈੱਬਸਾਈਟ ਬਣਾਉਂਣ ਲਈ, ਇੱਕ ਮੋਬਾਈਲ ਐਪ ਬਣਾਉਣ ਲਈ, ਅਤੇ ਇੱਕ ਵਿਗਿਆਨੀਆਂ ਲਈ ਡਾਟਾ ਪ੍ਰੋਸੈਸ ਕਰਨ ਲਈ। ਹਰ ਇਕ ਵਿੱਚ ਇੱਕੋ ਸਧਾਰਨ ਕੰਮ ਦੇ ਉਦਾਹਰਨ ਲੱਭੋ। ਮੈਂ ਵਾਅਦਾ ਕਰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਦੇਖ ਕੇ ਬਿਲਕੁਲ ਹੈਰਾਨ ਹੋ ਜਾਵੋਗੇ ਕਿ ਇੱਕੋ ਕੰਮ ਅਜੇ ਵੀ ਕਿੰਨਾ ਵੱਖਰਾ ਲੱਗਦਾ ਹੈ! +2. **ਉਹਨਾਂ ਦੀਆਂ ਮੂਲ ਕਹਾਣੀਆਂ ਖੋਜੋ**: ਹਰ ਇੱਕ ਭਾਸ਼ਾ ਵਿਲੱਖਣ ਕਿਵੇਂ ਹੈ? ਇਕ ਮਜ਼ੇਦਾਰ ਗੱਲ ਇਹ ਹੈ – ਹਰੇਕ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾ ਇਸ ਲਈ ਬਣਾਈ ਗਈ ਸੀ ਕਿਉਂਕਿ ਕਿਸੇ ਨੇ ਸੋਚਿਆ, "ਮੈਨੂੰ ਲੱਗਦਾ ਹੈ ਇਸ ਖਾਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।" ਕੀ ਤੁਸੀਂ ਪਤਾ ਲਗਾ ਸਕਦੇ ਹੋ ਉਹ ਸਮੱਸਿਆਵਾਂ ਕੀ ਸਨ? ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੁਝ ਕਹਾਣੀਆਂ ਸੱਚਮੁੱਚ ਦਿਲਚਸਪ ਹਨ! +3. **ਕਮਿਊਨਿਟੀ ਨਾਲ ਮਿਲੋ**: ਵੇਖੋ ਕਿ ਹਰ ਇੱਕ ਭਾਸ਼ਾ ਦਾ ਕਮਿਊਨਿਟੀ ਕਿੰਨਾ ਸਵਾਗਤਯੋਗ ਅਤੇ ਜੁਸ਼ੀਲਾ ਹੈ। ਕੁਝ ਕੋਡਰਾਂ ਦੀ ਲੱਖਾਂ ਦੀ ਗਿਣਤੀ ਹੈ ਜੋ ਗਿਆਨ ਸਾਂਝਾ ਕਰਦੇ ਹਨ ਅਤੇ ਇਕ ਦੂਜੇ ਦੀ ਮਦਦ ਕਰਦੇ ਹਨ, ਕੁਝ ਛੋਟੇ ਪਰ ਬੜੇ ਘਰਾਨਾ ਅਤੇ ਸਹਾਇਕ ਹਨ। ਤੁਸੀਂ ਇਹ ਵੱਖ-ਵੱਖ ਨਰਸੁੰਗੀਆਂ ਦੇਖ ਕੇ ਬਹੁਤ ਖੁਸ਼ ਹੋਵੋਗੇ! +4. **ਆਪਣੇ ਦਿਲ ਦੀ ਸੁਣੋ**: ਤੁਹਾਨੂੰ ਕਿਹੜੀ ਭਾਸ਼ਾ ਇਸ ਸਮੇਂ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਸਮਝਦਾਰ ਲੱਗਦੀ ਹੈ? "ਪਰਫੈਕਟ" ਚੋਣ ਕਰਨ ਦਾ ਦਬਾਅ ਨਾ ਲਵੋ – ਸਿਰਫ਼ ਆਪਣੇ ਹਾਵ-ਭਾਵ ਨੂੰ ਸੁਣੋ! ਸੱਚਮੁੱਚ ਇੱਥੇ ਕੋਈ ਗਲਤ ਜਵਾਬ ਨਹੀਂ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਹੋਰਾਂ ਨੂੰ ਵੀ ਖੋਜ ਸਕਦੇ ਹੋ। + +**ਬੋਨਸ ਜਾਸੂਸੀ ਕਾਰਜ**: ਵੇਖੋ ਕਿ ਕੀ ਤੁਸੀਂ ਲੱਭ ਸਕਦੇ ਹੋ ਕਿ ਮੁੱਖ ਵੈੱਬਸਾਈਟਾਂ ਜਾਂ ਐਪਸ ਕਿਸ ਭਾਸ਼ਾ ਨਾਲ ਬਣੇ ਹਨ। ਮੈਂ ਗੈਰੰਟੀ ਦਿੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਚੌਕ ਜਾਓਗੇ ਇਹ ਜਾਣ ਕੇ ਕਿ ਇੰਸਟਾਗ੍ਰਾਮ, ਨੈਟਫਲਿਕਸ, ਜਾਂ ਉਹ ਮੋਬਾਈਲ ਗੇਮ ਜਿਸਨੂੰ ਤੁਸੀਂ ਰੋਕ ਨਹੀਂ ਸਕਦੇ, ਕਿਹੜੀ ਭਾਸ਼ਾ ਤੇ ਚੱਲਦੇ ਹਨ! + +> 💡 **ਯਾਦ ਰੱਖੋ**: ਤੁਹਾਡਾ ਇਰਾਦਾ ਨਹੀਂ ਹੈ ਕਿ ਅੱਜ ਕਿਸੇ ਭਾਸ਼ਾ ਦੇ ਮਾਹਿਰ ਬਣਨਾ। ਤੁਸੀਂ ਸਿਰਫ਼ ਇਲਾਕਾ ਜਾਣ ਰਹੇ ਹੋ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਤੁਸੀਂ ਸੋਚੋ ਕਿ ਕਿੱਥੇ ਆਪਣਾ ਦਫ਼ਤਰ ਕਾਇਮ ਕਰਨਾ ਹੈ। ਆਪਣੇ ਵਕਤ ਲਵੋ, ਮਜ਼ੇ ਕਰੋ, ਅਤੇ ਕੁਤੂਹਲ ਨੂੰ ਮਾਰਗਦਰਸ਼ਨ ਬਨਾਉਣ ਦਿਓ! + +## ਆਓ ਜਸ਼ਨ ਮਨਾਈਏ ਜੋ ਤੁਸੀਂ ਸਿੱਖਿਆ ਹੈ! + +ਹੋਲਿ ਮੋਲੀ, ਤੁਸੀਂ ਅੱਜ ਜਿੰਨੀ ਵਧੀਆ ਜਾਣਕਾਰੀ ਸਿੱਖੀ ਹੈ ਉਹ ਬਹੁਤ ਪ੍ਰੇਰਣਾਦਾਇਕ ਹੈ! ਮੈਂ ਸੱਚਮੁੱਚ ਉਮੀਦਵਾਰ ਹਾਂ ਕਿ ਇਸ ਅਸਧਾਰਨ ਯਾਤਰਾ ਵਿੱਚੋਂ ਕਿਨਾ ਜ਼ਿਆਦਾ ਤੁਹਾਡੇ ਵਿੱਚ ਟਿਕਿਆ ਹੋਵੇਗਾ। ਤੇ ਯਾਦ ਰੱਖੋ – ਇਹ ਕੋਈ ਟੈਸਟ ਨਹੀਂ ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਸਾਰਾ ਕੁਝ ਪੂਰੀ ਤਰ੍ਹਾਂ ਠੀਕ ਕਰਨਾ ਹੈ। ਇਹ ਵਧੀਆ ਕੁਝ ਸਿੱਖਣ ਬਾਰੇ ਜਸ਼ਨ ਮਨਾਉਣ ਵਰਗਾ ਹੈ ਜੋ ਤੁਸੀਂ ਇਸ ਦਿਲਚਸਪ ਦੁਨੀਆਂ ਬਾਰੇ ਜਾਣਿਆ ਹੈ ਜੋ ਤੁਸੀਂ ਖੋਜ ਰਹੇ ਹੋ! + +[ਪੋਸਟ-ਪਾਠ ਕਈਜ਼ ਲਓ](https://ff-quizzes.netlify.app/web/) + +## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ-ਅਧਿਐਨ + +**ਆਪਣਾ ਵਕਤ ਲਵੋ ਤੇ ਇਸਨੂੰ ਖੋਜੋ ਅਤੇ ਮਜ਼ੇ ਲਵੋ!** +ਤੁਸੀਂ ਅੱਜ ਕਾਫੀ ਕੁਝ ਸਿਖ ਲਿਆ ਹੈ, ਅਤੇ ਇਹ ਗੱਲ ਮਾਣ ਕਰਨ ਵਾਲੀ ਹੈ! ਹੁਣ ਆਉਂਦੀ ਹੈ ਮਜ਼ੇਦਾਰ ਭਾਗ – ਉਹ ਵਿਸ਼ੇ ਜਿਨ੍ਹਾਂ ਨੇ ਤੁਹਾਡੇ ਵਿਚ ਉਤਸ਼ਾਹ ਜਗਾਇਆ। ਯਾਦ ਰੱਖੋ, ਇਹ ਹੋਮਵਰਕ ਨਹੀਂ ਹੈ – ਇਹ ਇੱਕ ਸੁਹਾਉਣਾ ਸਫ਼ਰ ਹੈ! + +**ਜੋ ਤੁਹਾਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦਾ ਹੈ, ਉਸ ਵਿੱਚ ਵਧੇਰੇ ਡੁੱਬਕੀਆ ਮਾਰੋ:** + +**ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਨਾਲ ਹੱਥੋਂ-ਹੱਥ ਜਾਣੂ ਹੋਵੋ:** +- 2-3 ਭਾਸ਼ਾਵਾਂ ਦੀਆਂ ਅਧਿਕਾਰਿਕ ਵੈੱਬਸਾਈਟਾਂ ਤੇ ਜਾਓ ਜਿਹੜੀਆਂ ਤੁਹਾਡੇ ਧਿਆਨ ਵਿੱਚ ਆਈਆਂ। ਹਰ ਇੱਕ ਦੀ ਆਪਣੀ ਵਿਅਕਤੀਗਤਤਾ ਅਤੇ ਕਹਾਣੀ ਹੈ! +- ਕੁਝ ਆਨਲਾਈਨ ਕੋਡਿੰਗ ਪ੍ਲੇਗ੍ਰਾਊਂਡਾਂ ਜਿਵੇਂ ਕਿ [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ਜਾਂ [Replit](https://replit.com/) ਵਰਤ ਕੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਪ੍ਰਯੋਗ ਕਰਨ ਤੋਂ ਨਾ ਡਰੋ – ਤੁਸੀਂ ਕੁਝ ਟੁੱਟਦਾ ਨਹੀਂ! +- ਆਪਣੇ ਮਨਪਸੰਦ ਭਾਸ਼ਾ ਦੇ ਬਣਨ ਦੀ ਕਹਾਣੀ ਬਾਰੇ ਪੜ੍ਹੋ। ਸਚਮੁਚ, ਕੁਝ ਇਹਨਾਂ ਦੀ ਮੂਲ ਕਹਾਣੀਆਂ ਬਹੁਤ ਦਿਲਚਸਪ ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਸਮਝਾਉਂਦੀਆਂ ਹਨ ਕਿ ਭਾਸ਼ਾਵਾਂ ਇਹ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਿਉਂ ਕਰਦੀਆਂ ਹਨ। + +**ਆਪਣੇ ਨਵੇਂ ਟੂਲਾਂ ਨਾਲ ਆਦਤ ਬਣਾਓ:** +- ਜੇ ਤੁਸੀਂ ਹਾਲੇ ਤੱਕ ਡਾਊਨਲੋਡ ਨਹੀਂ ਕੀਤਾ, ਤਾਂ Visual Studio Code ਡਾਊਨਲੋਡ ਕਰੋ – ਇਹ ਮੁਫ਼ਤ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਇਹ ਵਧੀਆ ਲੱਗੇਗਾ! +- ਕੁਝ ਮਿੰਟ Extensions ਮਾਰਕੀਟਪਲੇਸ ਨੂੰ ਵੇਖਣ ਵਿੱਚ ਬਿਤਾਓ। ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਐਡੀਟਰ ਲਈ ਐਪ ਸਟੋਰ ਵਰਗਾ ਹੈ! +- ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ Developer Tools ਖੋਲ੍ਹੋ ਅਤੇ ਬਸ ਕਲਿੱਕ ਕਰਦੇ ਜਾਓ। ਸਭ ਕੁਝ ਸਮਝਣ ਦੀ ਚਿੰਤਾ ਨਾ ਕਰੋ – ਸਿਰਫ਼ ਜਿਸ ਤਰ੍ਹਾਂ ਕੁਝ ਹੈ ਉਹਨਾਂ ਨਾਲ ਪਰਿਚਿਤ ਹੋ ਜਾਓ। **ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ:** -- ਕੁਝ ਡਿਵੈਲਪਰ ਕਮਿਊਨਿਟੀਆਂ ਨੂੰ [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ਜਾਂ [GitHub](https://github.com/) 'ਤੇ ਫਾਲੋ ਕਰੋ। ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਕਮਿਊਨਿਟੀ ਨਵਾਂ ਸ਼ੁਰੂ ਕਰਨ ਵਾਲਿਆਂ ਲਈ ਬਹੁਤ ਸਵਾਗਤਯੋਗ ਹੈ! -- YouTube 'ਤੇ ਕੁਝ ਸ਼ੁਰੂਆਤੀ-ਦੋਸਤਾਨਾ ਕੋਡਿੰਗ ਵੀਡੀਓਜ਼ ਦੇਖੋ। ਉੱਥੇ ਬਹੁਤ ਸਾਰੇ ਵਧੀਆ ਕ੍ਰੀਏਟਰ ਹਨ ਜੋ ਯਾਦ ਕਰਦੇ ਹਨ ਕਿ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਾ ਹੋਣਾ ਕਿਵੇਂ ਹੁੰਦਾ ਹੈ। -- ਸਥਾਨਕ ਮੀਟਅੱਪਸ ਜਾਂ ਆਨਲਾਈਨ ਕਮਿਊਨਿਟੀਆਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣ ਬਾਰੇ ਸੋਚੋ। ਮੈਨੂੰ ਵਿਸ਼ਵਾਸ ਹੈ, ਡਿਵੈਲਪਰ ਨਵਾਂ ਸ਼ੁਰੂ ਕਰਨ ਵਾਲਿਆਂ ਦੀ ਮਦਦ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹਨ! +- ਕੁਝ ਡਿਵੈਲਪਰ ਕਮਿਊਨਿਟੀਆਂ ਦੇ ਫਾਲੋ ਕਰੋ ਜਿਵੇਂ ਕਿ [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ਜਾਂ [GitHub](https://github.com/)। ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਕਮਿਊਨਿਟੀ ਨਵੇਂ ਆਏ ਲੋਕਾਂ ਲਈ ਬਹੁਤ ਸੁਆਗਤਯੋਗ ਹੈ! +- YouTube 'ਤੇ ਕੁਝ ਬਿਗਿਨਰ-ਫ੍ਰੈਂਡਲੀ ਕੋਡਿੰਗ ਵੀਡੀਓਜ਼ ਦੇਖੋ। ਬਹੁਤ ਸਾਰੇ ਵਧੀਆ ਸਿਰਜਣਹਾਰ ਹਨ ਜੋ ਯਾਦ ਰੱਖਦੇ ਹਨ ਕਿ ਨਵੀਂ ਸ਼ੁਰੂਆਤ ਕਿੰਨੀ ਮੁਸ਼ਕਿਲ ਹੁੰਦੀ ਹੈ। +- ਸਥਾਨਕ ਮੀਟਅੱਪ ਜਾਂ ਆਨਲਾਈਨ ਕਮਿਊਨਿਟੀਆਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣ ਤੇ ਵੀ ਵਿਚਾਰ ਕਰੋ। ਮੇਰੀ ਗੱਲ ਮਾਨੋ, ਡਿਵੈਲਪਰ ਨਵੇਂ ਲੋਕਾਂ ਦੀ ਮਦਦ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹਨ! -> 🎯 **ਸੁਣੋ, ਇਹ ਹੈ ਜੋ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਯਾਦ ਰੱਖੋ**: ਤੁਹਾਨੂੰ ਇੱਕ ਰਾਤ ਵਿੱਚ ਕੋਡਿੰਗ ਦੇ ਮਾਹਰ ਬਣਨ ਦੀ ਉਮੀਦ ਨਹੀਂ ਹੈ! ਇਸ ਸਮੇਂ, ਤੁਸੀਂ ਸਿਰਫ਼ ਇਸ ਸ਼ਾਨਦਾਰ ਨਵੇਂ ਸੰਸਾਰ ਨੂੰ ਜਾਣ ਰਹੇ ਹੋ ਜਿਸਦਾ ਤੁਸੀਂ ਹਿੱਸਾ ਬਣਨ ਵਾਲੇ ਹੋ। ਆਪਣਾ ਸਮਾਂ ਲਓ, ਸਫ਼ਰ ਦਾ ਆਨੰਦ ਮਾਣੋ, ਅਤੇ ਯਾਦ ਰੱਖੋ – ਹਰ ਇੱਕ ਡਿਵੈਲਪਰ ਜਿਸਦੀ ਤੁਸੀਂ ਪ੍ਰਸ਼ੰਸਾ ਕਰਦੇ ਹੋ, ਇੱਕ ਵਾਰ ਤੁਹਾਡੇ ਜਿਵੇਂ ਹੀ ਸੀ, ਉਤਸ਼ਾਹਿਤ ਅਤੇ ਸ਼ਾਇਦ ਥੋੜਾ ਜਿਹਾ ਘਬਰਾਇਆ ਹੋਇਆ। ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਹੈ, ਅਤੇ ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਸਹੀ ਕਰ ਰਹੇ ਹੋ। +> 🎯 **ਸੁਣੋ, ਇਹ ਗੱਲ ਮੈਂ ਤੁਹਾਨੂੰ ਯਾਦ ਰਹੇਗੀ:** ਤੁਸੀਂ ਇੱਕ ਰਾਤ ਵਿੱਚ ਕੋਡਿੰਗ ਮਾਹਿਰ ਬਣਨ ਦੀ ਉਮੀਦ ਨਾ ਰੱਖੋ! ਇਸ ਵੇਲੇ, ਤੁਸੀਂ ਸਿਰਫ਼ ਇਸ ਅਚੰਭੇ ਨਵੇਂ ਸੰਸਾਰ ਨੂੰ ਜਾਣ ਰਹੇ ਹੋ ਜਿਸ ਦਾ ਹਿੱਸਾ ਤੁਸੀਂ ਬਣਨ ਵਾਲੇ ਹੋ। ਆਪਣਾ ਸਮਾਂ ਲਵੋ, ਸਫਰ ਦਾ ਮਜ਼ਾ ਲਵੋ, ਅਤੇ ਯਾਦ ਰੱਖੋ – ਹਰ ਇਕ ਡਿਵੈਲਪਰ ਜਿਸ ਦੀ ਤੁਸੀਂ ਪ੍ਰਸ਼ੰਸਾ ਕਰਦੇ ਹੋ, ਉਹ ਇਕ ਸਮੇਂ ਤੁਹਾਡੇ ਵਰਗੇ ਬਿਲਕੁਲ ਇਸੀ ਥਾਂ ਬੈਠਾ ਸੀ, ਜਿੰਨਾ ਐਕਸਾਇਟ ਅਤੇ ਸ਼ਾਇਦ ਕੁਝ ਘਬਰਾਇਆ ਹੋਇਆ। ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਗੱਲ ਹੈ, ਅਤੇ ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਸਹੀ ਕਰ ਰਹੇ ਹੋ! ## ਅਸਾਈਨਮੈਂਟ -[Docs ਪੜ੍ਹਨਾ](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **ਤੁਹਾਡੇ ਅਸਾਈਨਮੈਂਟ ਲਈ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਇਸ਼ਾਰਾ**: ਮੈਂ ਬਿਲਕੁਲ ਪਸੰਦ ਕਰਾਂਗਾ ਕਿ ਤੁਸੀਂ ਕੁਝ ਟੂਲਾਂ ਦੀ ਖੋਜ ਕਰੋ ਜੋ ਅਸੀਂ ਅਜੇ ਤੱਕ ਕਵਰ ਨਹੀਂ ਕੀਤੇ! ਉਹ ਐਡੀਟਰ, ਬ੍ਰਾਊਜ਼ਰ, ਅਤੇ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲਾਂ ਨੂੰ ਛੱਡ ਦਿਓ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਗੱਲ ਕੀਤੀ ਹੈ – ਉੱਥੇ ਇੱਕ ਪੂਰਾ ਸ਼ਾਨਦਾਰ ਬ੍ਰਹਿਮੰਡ ਹੈ ਜੋ ਅਦਭੁਤ ਵਿਕਾਸ ਟੂਲਾਂ ਨਾਲ ਭਰਿਆ ਹੋਇਆ ਹੈ ਜੋ ਸਿਰਫ਼ ਖੋਜੇ ਜਾਣ ਦੀ ਉਡੀਕ ਕਰ ਰਹੇ ਹਨ। ਉਹਨਾਂ ਦੀ ਭਾਲ ਕਰੋ ਜੋ ਸਰਗਰਮ ਤੌਰ 'ਤੇ ਰੱਖੇ ਗਏ ਹਨ ਅਤੇ ਜ਼ਿੰਦਾਦਿਲ, ਮਦਦਗਾਰ ਕਮਿਊਨਿਟੀਆਂ ਹਨ (ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਟਿਊਟੋਰਿਅਲ ਅਤੇ ਸਭ ਤੋਂ ਸਹਾਇਕ ਲੋਕਾਂ ਵਾਲੇ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਅਣਮੁੱਲ ਹੋ ਜਾਂਦੇ ਹੋ ਅਤੇ ਤੁਹਾਨੂੰ ਇੱਕ ਦੋਸਤਾਨਾ ਹੱਥ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ)। +> 💡 **ਤੁਹਾਡੇ ਅਸਾਈਨਮੈਂਟ ਲਈ ਥੋੜ੍ਹਾ ਜਿਹਾ ਪ੍ਰੇਰਣਾ:** ਮੈਂ ਬੇਹਦ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਕੁਝ ਐਸੇ ਟੂਲ ਕੱਢ ਕੇ ਵੇਖੋ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਅਸੀਂ ਅੱਜ ਤੱਕ ਗੱਲ ਨਹੀਂ ਕੀਤੀ! ਉਹ ਐਡੀਟਰ, ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ ਜੋ ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਚਰਚਾ ਕੀਤੇ ਹਨ, ਉਹ ਛੱਡੋ – ਇੱਥੇ ਬਹੁਤ ਵਧੀਆ ਵਿਕਾਸ ਟੂਲਾਂ ਦੀ ਦੁਨੀਆ ਹੈ ਜੋ ਤੁਹਾਡੇ ਲਈ ਖੁੱਲ੍ਹੀ ਹੈ। ਅਜੇਦਰ ਰੱਖਣ ਵਾਲੇ ਅਤੇ ਜੀਵੰਤ ਕਮਿਊਨਿਟੀਆਂ ਵਾਲੇ ਟੂਲ ਲੱਭੋ (ਇਹ ਹੋਰਾਂ ਦਾ ਸਹਿਯੋਗ ਅਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਟਿਊਟੋਰਿਅਲ ਦਿੰਦੇ ਹਨ, ਜਦੋਂ ਤੁਸੀਂ ਫਸ ਜਾਂਦੇ ਹੋ ਅਤੇ ਮਦਦ ਚਾਹੀਦੀ ਹੈ)। --- -## 🚀 ਤੁਹਾਡਾ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਫ਼ਰ ਦਾ ਟਾਈਮਲਾਈਨ +## 🚀 ਤੁਹਾਡਾ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਫਰ ਦੀ ਟਾਈਮਲਾਈਨ ### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ** -- [ ] ਉਹ 2-3 ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਦੀਆਂ ਵੈਬਸਾਈਟਾਂ ਬੁੱਕਮਾਰਕ ਕਰੋ ਜਿਨ੍ਹਾਂ ਨੇ ਤੁਹਾਡਾ ਧਿਆਨ ਖਿੱਚਿਆ -- [ ] Visual Studio Code ਡਾਊਨਲੋਡ ਕਰੋ ਜੇਕਰ ਤੁਸੀਂ ਅਜੇ ਤੱਕ ਨਹੀਂ ਕੀਤਾ -- [ ] ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ DevTools (F12) ਖੋਲ੍ਹੋ ਅਤੇ ਕਿਸੇ ਵੀ ਵੈਬਸਾਈਟ 'ਤੇ ਕਲਿਕ ਕਰੋ +- [ ] 2-3 ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਦੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਬੁੱਕਮਾਰਕ ਕਰੋ ਜਿਹੜੀਆਂ ਤੁਹਾਡੇ ਧਿਆਨ ਵਿੱਚ ਆਈਆਂ +- [ ] ਜੇ ਤੁਸੀਂ ਹਾਲੇ ਤੱਕ ਕੀਤਾ ਨਹੀਂ, ਤਾਂ Visual Studio Code ਡਾਊਨਲੋਡ ਕਰੋ +- [ ] ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ DevTools (F12) ਖੋਲ੍ਹੋ ਅਤੇ ਕਿਸੇ ਵੀ ਵੈੱਬਸਾਈਟ 'ਤੇ ਕਲਿੱਕ ਕਰੋ - [ ] ਇੱਕ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ (Dev.to, Reddit r/webdev, ਜਾਂ Stack Overflow) -### ⏰ **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ** -- [ ] ਪੋਸਟ-ਪਾਠ ਕਵੀਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਆਪਣੇ ਜਵਾਬਾਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ -- [ ] GitHub Copilot ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ VS Code ਸੈਟਅੱਪ ਕਰੋ -- [ ] 2 ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਆਨਲਾਈਨ "Hello World" ਉਦਾਹਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ -- [ ] YouTube 'ਤੇ "Day in the Life of a Developer" ਵੀਡੀਓ ਦੇਖੋ -- [ ] ਆਪਣੀ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾ ਡਿਟੈਕਟਿਵ ਵਰਕ ਸ਼ੁਰੂ ਕਰੋ (ਚੁਣੌਤੀ ਤੋਂ) +### ⏰ **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹੋ** +- [ ] ਪੋਸਟ-ਕਲਾਸ ਕੁਇਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਆਪਣੇ ਜਵਾਬਾਂ ਬਾਰੇ ਸੋਚੋ +- [ ] VS Code ਨੂੰ GitHub Copilot ਐਕਸਟੇਨਸ਼ਨ ਨਾਲ ਸੈੱਟਅੱਪ ਕਰੋ +- [ ] ਅਨਲਾਈਨ 2 ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ "Hello World" ਦਾ ਉਦਾਹਰਨ ਕੋਸ਼ਿਸ਼ ਕਰੋ +- [ ] YouTube 'ਤੇ "ਡੇ ਇਨ ਦ ਲਾਈਫ ਆਫ ਅ ਡਿਵੈਲਪਰ" ਵੀਡੀਓ ਦੇਖੋ +- [ ] ਆਪਣੇ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾ ਦੀ ਖੋਜ ਸ਼ੁਰੂ ਕਰੋ (ਚੈਲੈਂਜ ਤੋਂ) -### 📅 **ਤੁਹਾਡਾ ਇੱਕ ਹਫ਼ਤੇ ਦਾ ਸਫ਼ਰ** -- [ ] ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰੋ ਅਤੇ 3 ਨਵੇਂ ਵਿਕਾਸ ਟੂਲਾਂ ਦੀ ਖੋਜ ਕਰੋ +### 📅 **ਤੁਹਾਡਾ ਇੱਕ ਹਫ਼ਤਾ ਲੰਬਾ ਸਫ਼ਰ** +- [ ] ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰੋ ਅਤੇ 3 ਨਵੇਂ ਵਿਕਾਸ ਟੂਲ ਖੋਜੋ - [ ] 5 ਡਿਵੈਲਪਰਾਂ ਜਾਂ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਖਾਤਿਆਂ ਨੂੰ ਸੋਸ਼ਲ ਮੀਡੀਆ 'ਤੇ ਫਾਲੋ ਕਰੋ -- [ ] CodePen ਜਾਂ Replit 'ਤੇ ਕੁਝ ਛੋਟਾ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ (ਭਾਵੇਂ ਸਿਰਫ਼ "Hello, [ਤੁਹਾਡਾ ਨਾਮ]!" ਹੋਵੇ!) -- [ ] ਕਿਸੇ ਡਿਵੈਲਪਰ ਦੇ ਬਲੌਗ ਪੋਸਟ ਨੂੰ ਪੜ੍ਹੋ ਜਿਸ ਵਿੱਚ ਉਹਨਾਂ ਦੇ ਕੋਡਿੰਗ ਸਫ਼ਰ ਬਾਰੇ ਦੱਸਿਆ ਗਿਆ ਹੋਵੇ -- [ ] ਇੱਕ ਵਰਚੁਅਲ ਮੀਟਅੱਪ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ ਜਾਂ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਟਾਕ ਦੇਖੋ -- [ ] ਆਨਲਾਈਨ ਟਿਊਟੋਰਿਅਲ ਨਾਲ ਆਪਣੀ ਚੁਣੀ ਹੋਈ ਭਾਸ਼ਾ ਸਿੱਖਣ ਸ਼ੁਰੂ ਕਰੋ - -### 🗓️ **ਤੁਹਾਡਾ ਇੱਕ ਮਹੀਨੇ ਦਾ ਬਦਲਾਅ** -- [ ] ਆਪਣਾ ਪਹਿਲਾ ਛੋਟਾ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ (ਭਾਵੇਂ ਇੱਕ ਸਧਾਰਨ ਵੈਬਪੇਜ ਹੀ ਕਿਉਂ ਨਾ ਹੋਵੇ!) -- [ ] ਇੱਕ ਓਪਨ-ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਯੋਗਦਾਨ ਦਿਓ (ਡਾਕੂਮੈਂਟੇਸ਼ਨ ਫਿਕਸਾਂ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰੋ) -- [ ] ਕਿਸੇ ਨੂੰ ਮਦਦ ਦਿਓ ਜੋ ਸਿਰਫ਼ ਆਪਣਾ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਫ਼ਰ ਸ਼ੁਰੂ ਕਰ ਰਿਹਾ ਹੈ -- [ ] ਆਪਣੀ ਡਿਵੈਲਪਰ ਪੋਰਟਫੋਲਿਓ ਵੈਬਸਾਈਟ ਬਣਾਓ -- [ ] ਸਥਾਨਕ ਡਿਵੈਲਪਰ ਕਮਿਊਨਿਟੀਆਂ ਜਾਂ ਅਧਿਐਨ ਸਮੂਹਾਂ ਨਾਲ ਜੁੜੋ -- [ ] ਆਪਣਾ ਅਗਲਾ ਸਿੱਖਣ ਦਾ ਮੀਲ ਪੱਥਰ ਯੋਜਨਾ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੋ - -### 🎯 **ਅੰਤਮ ਵਿਚਾਰ-ਵਿਮਰਸ਼ ਚੈੱਕ-ਇਨ** - -**ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਇੱਕ ਪਲ ਲਓ ਮਨਾਉਣ ਲਈ:** -- ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਬਾਰੇ ਅੱਜ ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਰੁਝਾਉਣ ਵਾਲੀ ਗੱਲ ਕੀ ਸੀ? -- ਕਿਹੜਾ ਟੂਲ ਜਾਂ ਧਾਰਨਾ ਤੁਸੀਂ ਪਹਿਲਾਂ ਖੋਜਣਾ ਚਾਹੁੰਦੇ ਹੋ? -- ਇਸ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਫ਼ਰ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਬਾਰੇ ਤੁਹਾਨੂੰ ਕਿਵੇਂ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ? -- ਇੱਕ ਸਵਾਲ ਜੋ ਤੁਸੀਂ ਇਸ ਸਮੇਂ ਕਿਸੇ ਡਿਵੈਲਪਰ ਨੂੰ ਪੁੱਛਣਾ ਚਾਹੁੰਦੇ ਹੋ? +- [ ] CodePen ਜਾਂ Replit 'ਚ ਕੁਝ ਛੋਟਾ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ (ਇਹ ਜਿਹਾ “Hello, [ਤੁਹਾਡਾ ਨਾਮ]!” ਵੀ ਹੋ ਸਕਦਾ ਹੈ) +- [ ] ਕਿਸੇ ਡਿਵੈਲਪਰ ਦੇ ਕੋਡਿੰਗ ਯਾਤਰਾ ਬਾਰੇ ਇਕ ਬ੍ਲੌਗ ਪੋਸਟ ਪੜ੍ਹੋ +- [ ] ਇੱਕ ਵਰਚੁਅਲ ਮੀਟਅੱਪ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ ਜਾਂ ਕੋਈ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਟਾਕ ਦੇਖੋ +- [ ] ਆਪਣੇ ਚੁਣੇ ਹੋਏ ਭਾਸ਼ਾ ਨੂੰ ਆਨਲਾਈਨ ਟਿਊਟੋਰਿਅਲ ਨਾਲ ਸਿੱਖਣਾ ਸ਼ੁਰੂ ਕਰੋ + +### 🗓️ **ਤੁਹਾਡੀ ਮਹੀਨੇ ਲੰਬੀ ਤਬਦੀਲੀ** +- [ ] ਆਪਣਾ ਪਹਿਲਾ ਛੋਟਾ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ (ਇੱਕ ਸਧਾਰਣ ਵੈੱਬਪੇਜ ਵੀ ਗਿਣਤੀ ਵਿਚ ਆਉਂਦਾ ਹੈ!) +- [ ] ਕਿਸੇ ਓਪਨ-ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ (ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸੁਧਾਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ) +- [ ] ਕਿਸੇ ਨਵੇਂ ਆਏ ਵਿਅਕਤੀ ਦਾ ਮੈਨਟਰ ਬਣੋ ਜੋ ਆਪਣਾ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਫਰ ਸ਼ੁਰੂ ਕਰ ਰਿਹਾ ਹੈ +- [ ] ਆਪਣੀ ਡਿਵੈਲਪਰ ਪੋਰਟਫੋਲਿਓ ਵੈੱਬਸਾਈਟ ਬਣਾਓ +- [ ] ਸਥਾਨਕ ਡਿਵੈਲਪਰ ਕਮਿਊਨਿਟੀ ਜਾਂ ਅਧਿਐਨ ਸਮੂਹਾਂ ਨਾਲ ਕਨੈਕਟ ਕਰੋ +- [ ] ਆਪਣਾ ਅਗਲਾ ਸਿਖਲਾਈ ਮੀਲ ਦਾ ਪੱਥਰ ਯੋਜਨਾ ਬਣਾਓ + +### 🎯 **ਅੰਤਿਮ ਵਿਚਾਰਾਂ ਲਈ ਜाँच-ਪੜਤਾਲ** + +**ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਮਨਾਉਣ ਲਈ ਇਕ ਪਲ ਲਵੋ:** +- ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਵਿੱਚ ਅੱਜ ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਕੀ ਚੀਜ਼ ਉਤਸ਼ਾਹਿਤ ਕਰਦੀ ਹੈ? +- ਕਿਹੜਾ ਟੂਲ ਜਾਂ ਧਾਰਣਾ ਤੁਸੀਂ ਪਹਿਲਾਂ ਖੋਜਣਾ ਚਾਹੁੰਦੇ ਹੋ? +- ਇਸ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਫਰ ਦੀ ਸ਼ੁਰੂਆਤ ਬਾਰੇ ਤੁਹਾਡੇ ਵਿਚ ਕਿਵੇਂ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ? +- ਅੱਜ ਤੁਸੀਂ ਕਿਸੇ ਡਿਵੈਲਪਰ ਨੂੰ ਕਿਹੜਾ سوال ਪੁੱਛਣਾ ਚਾਹੋਗੇ? ```mermaid journey - title Your Confidence Building Journey - section Today + title ਤੁਹਾਡਾ ਆਤਮਵਿਸ਼ਵਾਸ ਬਣਾਉਣ ਯਾਤਰਾ + section ਅੱਜ Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section This Week + section ਇਸ ਹਫਤੇ Exploring: 4: You Learning: 5: You Connecting: 4: You - section Next Month + section ਅਗਲਾ ਮਹੀਨਾ Building: 5: You Confident: 5: You Helping Others: 5: You ``` - -> 🌟 **ਯਾਦ ਰੱਖੋ**: ਹਰ ਮਾਹਰ ਇੱਕ ਵਾਰ ਸ਼ੁਰੂਆਤੀ ਸੀ। ਹਰ ਸੀਨੀਅਰ ਡਿਵੈਲਪਰ ਇੱਕ ਵਾਰ ਬਿਲਕੁਲ ਤੁਹਾਡੇ ਜਿਵੇਂ ਮਹਿਸੂਸ ਕਰਦਾ ਸੀ – ਉਤਸ਼ਾਹਿਤ, ਸ਼ਾਇਦ ਥੋੜਾ ਜਿਹਾ ਘਬਰਾਇਆ ਹੋਇਆ, ਅਤੇ ਨਿਸ਼ਚਿਤ ਤੌਰ 'ਤੇ ਇਹ ਜਾਣਨ ਲਈ ਉਤਸੁਕ ਕਿ ਕੀ ਸੰਭਵ ਹੈ। ਤੁਸੀਂ ਸ਼ਾਨਦਾਰ ਸੰਗਤ ਵਿੱਚ ਹੋ, ਅਤੇ ਇਹ ਸਫ਼ਰ ਅਦਭੁਤ ਹੋਣ ਵਾਲਾ ਹੈ। ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੀ ਸ਼ਾਨਦਾਰ ਦੁਨੀਆ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ! 🎉 +> 🌟 **ਯਾਦ ਰੱਖੋ**: ਹਰ ਮਾਹਿਰ ਇੱਕ ਸਮੇਂ ਬਿਗਿਨਰ ਸੀ। ਹਰ ਇੱਕ ਸੀਨੀਅਰ ਡਿਵੈਲਪਰ ਨੇ ਵੀ ਅਜੇਹੀ ਠਾਹਰੀ ਹੋਈ ਭਾਵਨਾ ਮਹਿਸੂਸ ਕੀਤੀ ਹੈ ਜੋ ਤੁਸੀਂ ਹੁਣ ਕਰ ਰਹੇ ਹੋ – ਉਤਸ਼ਾਹਿਤ, ਸ਼ਾਇਦ ਥੋੜ੍ਹਾ ਘਬਰਾਇਆ ਹੋਇਆ, ਅਤੇ ਪਤਾ ਲਗਾਉਣ ਲਈ ਤਤ્પਰ। ਤੁਸੀਂ ਸ਼ਾਨਦਾਰ ਸਾਥੀ-ਹੰਗਾਮੇ ਵਿੱਚ ਹੋ, ਅਤੇ ਇਹ ਸਫਰ ਬੇਹੱਦ ਅੱਨੰਦਮਯ ਹੋਣ ਵਾਲਾ ਹੈ। ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੀ ਸ਼ਾਨਦਾਰ ਦੁਨੀਆ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ! 🎉 --- -**ਅਸਵੀਕਰਤੀ**: -ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। \ No newline at end of file + +**ਅਸਵੀਕਾਰਨ**: +ਇਹ ਦਸਤਾਵੇਜ਼ [Co-op Translator](https://github.com/Azure/co-op-translator) ਨਾਮਕ AI ਅਨੁਵਾਦ ਸੇਵਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਰੱਖੋ ਕਿ ਸਵੈਚਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸਮਰਥਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਆਪਣੇ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਹੀ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ ਪੇਸ਼ਾਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉੱਪਜਣ ਵਾਲੀਆਂ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀਆਂ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆਵਾਂ ਲਈ ਜੁੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। + \ No newline at end of file diff --git a/translations/pa/AGENTS.md b/translations/pa/AGENTS.md index 6adc0da97..f461b69dd 100644 --- a/translations/pa/AGENTS.md +++ b/translations/pa/AGENTS.md @@ -1,43 +1,43 @@ # AGENTS.md -## ਪ੍ਰੋਜੈਕਟ ਝਲਕ +## ਪ੍ਰੋਜੈਕਟ ਓਵਰਵਿਊ -ਇਹ ਸ਼ੁਰੂਆਤੀਆਂ ਲਈ ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਮੁਢਲੇ ਸਿਧਾਂਤ ਸਿਖਾਉਣ ਲਈ ਇੱਕ ਸਿੱਖਿਆਤਮਕ ਪਾਠਕ੍ਰਮ ਰిపੋਜਿਟਰੀ ਹੈ। ਇਹ ਪਾਠਕ੍ਰਮ ਮਾਈਕ੍ਰੋਸਾਫਟ ਕਲਾਉਡ ਅਡਵੋਕੇਟਸ ਵੱਲੋਂ ਵਿਕਸਿਤ 12 ਹਫ਼ਤਿਆਂ ਦਾ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਕੋਰਸ ਹੈ, ਜਿਸ ਵਿੱਚ 24 ਹੱਥੋਂ-ਹੱਥ ਸਬਕ ਹਨ ਜੋ JavaScript, CSS, ਅਤੇ HTML ਨੂੰ ਕਵਰ ਕਰਦੇ ਹਨ। +ਇਹ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਨੂੰ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਮੁਢਲਾ ਤੱਤ ਸਿਖਾਣ ਲਈ ਇੱਕ ਸਿੱਖਿਆਤਮਕ ਕੋਰਸ-ਪਾਠ ਰੀਪੋਜ਼ਟਰੀ ਹੈ। ਇਸ ਕੋਰਸ-ਪਾਠ ਨੂੰ ਮਾਈਕਰੋਸੌਫਟ ਕਲਾਉਡ ਅਡਵੋਕੇਟਸ ਵੱਲੋਂ ਵਿਕਸਤ ਕੀਤਾ ਗਿਆ ਹੈ ਜੋ 12 ਹਫ਼ਤਿਆਂ ਦਾ ਵਿਸਤ੍ਰਿਤ ਕੋਰਸ ਹੈ, ਜਿਸ ਵਿੱਚ 24 ਹਥਿਆਰਵੰਦ ਸਬਕ ਹਨ ਜੋ ਜਾਵਾਸਕ੍ਰਿਪਟ, CSS ਅਤੇ HTML ਨੂੰ ਕਵਰ ਕਰਦੇ ਹਨ। -### ਮੁੱਖ ਘਟਕ +### ਮੁੱਖ ਹਿੱਸੇ -- **ਸਿੱਖਿਆਤਮਕ ਸਮੱਗਰੀ**: ਪ੍ਰੋਜੈਕਟ-ਆਧਾਰਿਤ ਮੋਡਿਊਲਾਂ ਵਿੱਚ 24 ਸੰਰਚਿਤ ਸਬਕ -- **ਵਿਵਹਾਰਕ ਪ੍ਰੋਜੈਕਟ**: ਟੈਰੀਰੀਅਮ, ਟਾਈਪਿੰਗ ਗੇਮ, ਬਰਾਉਜ਼ਰ ਐਕਸਟੇਂਸ਼ਨ, ਸਪੇਸ ਗੇਮ, ਬੈਂਕਿੰਗ ਐਪ, ਕੋਡ ਐਡੀਟਰ ਅਤੇ AI ਚੈਟ ਸਹਾਇਕ -- **ਇੰਟਰਐਕਟਿਵ ਕਵਿਜ਼**: 48 ਕਵਿਜ਼ ਹਰ ਇੱਕ ਵਿੱਚ 3 ਪ੍ਰਸ਼ਨ (ਪੂਰਵ/ਪ੍ਰਤੀ ਸਬਕ ਮੁਲਾਂਕਣ) -- **ਬਹੁਭਾਸ਼ੀ ਸਮਰਥਨ**: GitHub ਐਕਸ਼ਨਾਂ ਰਾਹੀਂ 50+ ਭਾਸ਼ਾਵਾਂ ਦੇ ਲਿਆ ਅਧਿਕਾਰੀ ਤਰਜਮੇ -- **ਟੈਕਨੋਲੋਜੀਆਂ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI ਪ੍ਰੋਜੈਕਟ ਲਈ) +- **ਸਿੱਖਿਆਤਮਕ ਸਮੱਗਰੀ**: 24 ਸੰਜੋਏ ਹੋਏ ਸਬਕ ਪ੍ਰੋਜੈਕਟ-ਆਧਾਰਿਤ ਮੋਡੀਊਲਾਂ ਵਿੱਚ ਵੰਡੇ ਹੋਏ +- **ਵਿਆਹਰਕ ਪ੍ਰੋਜੈਕਟ**: ਟੈਰੀਅਰੀਅਮ, ਟਾਈਪਿੰਗ ਗੇਮ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ, ਸਪੇਸ ਗੇਮ, ਬੈਂਕਿੰਗ ਐਪ, ਕੋਡ ਐਡੀਟਰ ਅਤੇ AI ਚੈਟ ਸਹਾਇਕ +- **ਇੰਟਰਐਕਟਿਵ ਕਵਿਜ਼**: 48 ਕਵਿਜ਼, ਹਰ ਇੱਕ ਵਿੱਚ 3 ਪ੍ਰਸ਼ਨ (ਪਹਿਲਾਂ ਅਤੇ ਬਾਅਦ ਦੇ ਸਬਕ ਮੁਲਾਂਕਣ) +- **ਬਹੁ-ਭਾਸ਼ਾ ਸਹਾਇਤਾ**: 50+ ਭਾਸ਼ਾਵਾਂ ਲਈ ਗਿਟਹਬ ਐਕਸ਼ਨਾਂ ਰਾਹੀਂ ਆਟੋਮੇਟਿਕ ਅਨੁਵਾਦ +- **ਤਕਨਾਲੋਜੀਜ਼**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI ਪ੍ਰੋਜੈਕਟ ਲਈ) -### ਵਿਸ਼ਲੇਸ਼ਣੀ ਢਾਂਚਾ +### ਆਰਕੀਟੈਕਚਰ -- ਸਿੱਖਣੀ ਰਿਪੋਜਿਟਰੀ ਸਬਕ-ਆਧਾਰਿਤ ਢਾਂਚੇ ਨਾਲ -- ਹਰ ਸਬਕ ਫੋਲਡਰ ਵਿੱਚ README, ਕੋਡ ਉਦਾਹਰਣਾਂ ਅਤੇ ਹੱਲ ਹਨ -- ਅਲੱਗ ਅਲੱਗ ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ ਖੁਦਮੁਖਤਿਆਰ ਪ੍ਰੋਜੈਕਟ (quiz-app, ਵੱਖ ਵੱਖ ਸਬਕ ਪ੍ਰੋਜੈਕਟ) -- GitHub ਐਕਸ਼ਨਾਵਾਂ ਨਾਲ ਤਰਜਮੇ ਲਈ ਸਿਸਟਮ (co-op-translator) -- ਡੌਕਸਿਫਾਈ ਰਾਹੀਂ ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਅਤੇ PDF ਦੇ ਤੌਰ 'ਤੇ ਉਪਲਬਧ +- ਸਿੱਖਿਆਤਮਕ ਰੀਪੋਜ਼ਟਰੀ ਸਬਕ ਅਧਾਰਤ ਢਾਂਚੇ ਨਾਲ +- ਹਰ ਸਬਕ ਫੋਲਡਰ ਵਿੱਚ README, ਕੋਡ ਉਦਾਹਰਨ ਅਤੇ ਸਮਾਧਾਨ ਹਨ +- ਵੱਖ-ਵੱਖ ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ ਅਲੱਗ-ਅਲੱਗ ਪ੍ਰੋਜੈਕਟ (quiz-app, ਵੱਖ-ਵੱਖ ਸਬਕ ਪ੍ਰੋਜੈਕਟ) +- ਅਨੁਵਾਦ ਸਿਸਟਮ ਜੋ ਗਿਟਹਬ ਐਕਸ਼ਨਾਂ (co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ +- ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ Docsify ਰਾਹੀਂ ਪਰੋਵਾਈਡ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਅਤੇ PDF ਵਜੋਂ ਉਪਲਬਧ ਹੈ -## ਸੈਟਅੱਪ ਹੁਕਮ +## ਸੈਟਅਪ ਕਮਾਂਡਾਂ -ਇਹ ਰਿਪੋਜਿਟਰੀ ਮੁੱਖ ਤੌਰ 'ਤੇ ਸਿੱਖਿਆਤਮਕ ਸਮੱਗਰੀ ਦੀ ਖਪਤ ਲਈ ਹੈ। ਖਾਸ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰਨ ਲਈ: +ਇਹ ਰੀਪੋਜ਼ਟਰੀ ਮੁੱਖ ਤੌਰ 'ਤੇ ਸਿੱਖਿਆਤਮਕ ਸਮੱਗਰੀ ਨੂੰ ਵਰਤਣ ਲਈ ਹੈ। ਖਾਸ ਪ੍ਰੋਜੈਕਟਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ: -### ਮੁੱਖ ਰਿਪੋਜਿਟਰੀ ਸੈਟਅੱਪ +### ਮੁੱਖ ਰੀਪੋਜ਼ਟਰੀ ਸੈਟਅਪ ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### ਕਵਿਜ਼ ਐਪ ਸੈਟਅੱਪ (Vue 3 + Vite) +### ਕਵਿਜ਼ ਐਪ ਸੈਟਅਪ (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ -npm run build # ਪ੍ਰੋਡਕਸ਼ਨ ਲਈ ਬਣਾਓ +npm run build # ਉਤਪਾਦਨ ਲਈ ਬਣਾਓ npm run lint # ESLint ਚਲਾਓ ``` @@ -46,17 +46,17 @@ npm run lint # ESLint ਚਲਾਓ ```bash cd 7-bank-project/api npm install -npm start # ਏਪੀਆਈ ਸਰਵਰ ਚਾਲੂ ਕਰੋ +npm start # ਏਪੀਆਈ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ npm run lint # ESLint ਚਲਾਓ -npm run format # Prettier ਨਾਲ ਫਾਰਮੈਟ ਕਰੋ +npm run format # ਪ੍ਰਿਟੀਅਰ ਨਾਲ ਫਾਰਮੈਟ ਕਰੋ ``` -### ਬਰਾਉਜ਼ਰ ਐਕਸਟੇਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ +### ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ```bash cd 5-browser-extension/solution npm install -# ਬ੍ਰਾਊਜ਼ਰ-ਖਾਸ ਐਕਸਟেনਸ਼ਨ ਲੋਡ ਕਰਨ ਦੇ ਹੁਕਮਾਂ ਦਾ ਪਾਲਣ ਕਰੋ +# ਬ੍ਰਾਉਜ਼ਰ-ਖਾਸ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡਿੰਗ ਨਿਰਦੇਸ਼ਾਂ ਦਾ ਪਾਲਣ ਕਰੋ ``` ### ਸਪੇਸ ਗੇਮ ਪ੍ਰੋਜੈਕਟ @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ index.html ਖੋਲ੍ਹੋ ਜਾਂ Live Server ਦੀ ਵਰਤੋਂ ਕਰੋ +# index.html ਨੂੰ ਬ੍ਰਾਉਜ਼ਰ ਵਿਚ ਖੋਲ੍ਹੋ ਜਾਂ ਲਾਈਵ ਸਰਵਰ ਦੀ ਵਰਤੋਂ ਕਰੋ ``` ### ਚੈਟ ਪ੍ਰੋਜੈਕਟ (Python ਬੈਕਐਂਡ) @@ -72,120 +72,120 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# GITHUB_TOKEN ਵਾਤਾਵਰਣ ਚਰ ਨੂੰ ਸੈੱਟ ਕਰੋ +# GITHUB_TOKEN ਵਾਤਾਵਰਨ ਵੈਰੀਏਬਲ ਸੈੱਟ ਕਰੋ python api.py ``` -## ਵਿਕਾਸ ਵਰਕਫ਼ਲੋ +## ਵਿਕਾਸ ਵਰਕਫਲੋ -### ਸਮੱਗਰੀ ਯੋਗਦਾਨਕਰਤਾਵਾਂ ਲਈ +### ਸਮੱਗਰੀ ਯੋਗਦਾਨਕਾਰਾਂ ਲਈ -1. ਆਪਣੀ GitHub ਖਾਤੇ ਵਿੱਚ ਰਿਪੋਜਿਟਰੀ ਨੂੰ ਫੋਰਕ ਕਰੋ -2. ਆਪਣੀ ਫੋਰਕ ਨੂੰ ਲੋਕਲ ਕਲੋਨ ਕਰੋ -3. ਆਪਣੇ ਬਦਲਾਵਾਂ ਲਈ ਨਵੀਂ ਸ਼ਾਖਾ ਬਣਾਓ -4. ਸਬਕ ਸਮੱਗਰੀ ਜਾਂ ਕੋਡ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਬਦਲਾਅ ਕਰੋ -5. ਸੰਬੰਧਤ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ ਕੋਈ ਵੀ ਕੋਡ ਬਦਲਾਅ ਟੈਸਟ ਕਰੋ -6. ਯੋਗਦਾਨ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ ਦੇ ਤਹਿਤ ਪੁਲ ਰਿਕਵੈਸਟ ਭੇਜੋ +1. ਆਪਣੀ GitHub ਖਾਤੇ ਵਿੱਚ ਰੀਪੋਜ਼ਟਰੀ ਨੂੰ ਫੋਰਕ ਕਰੋ +2. ਆਪਣੇ ਫੋਰਕ ਨੂੰ ਲੋਕਲ ਕਲੋਨ ਕਰੋ +3. ਆਪਣੇ ਬਦਲਾਅ ਲਈ ਨਵਾਂ ਬ੍ਰਾਂਚ ਬਣਾਓ +4. ਸਬਕ ਸਮੱਗਰੀ ਜਾਂ ਕੋਡ ਉਦਾਹਰਨਾਂ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਕਰੋ +5. ਸੰਬੰਧਤ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਕੋਈ ਵੀ ਕੋਡ ਤਬਦੀਲੀਆਂ ਟੈਸਟ ਕਰੋ +6. ਯੋਗਦਾਨ ਨਿਯਮਾਂ ਦੇ ਅਨੁਸਾਰ ਪੁਲ ਰਿਕਵੇਸਟ ਭੇਜੋ -### ਸਿਖਿਆਰਥੀਆਂ ਲਈ +### ਸਿੱਖਣ ਵਾਲਿਆਂ ਲਈ -1. ਰਿਪੋਜਿਟਰੀ ਨੂੰ ਫੋਰਕ ਜਾਂ ਕਲੋਨ ਕਰੋ -2. ਸਬਕ ਡਾਇਰੈਕਟਰੀਆਂ ਵਿੱਚ ਕ੍ਰਮਬੱਧ ਤੌਰ 'ਤੇ ਜਾਓ -3. ਹਰ ਸਬਕ ਲਈ README ਫਾਇਲਾਂ ਪੜ੍ਹੋ -4. ਪੂਰਵ-ਸਬਕ ਕਵਿਜ਼ https://ff-quizzes.netlify.app/web/ 'ਤੇ ਪੂਰੇ ਕਰੋ -5. ਸਬਕ ਫੋਲਡਰਾਂ ਵਿੱਚ ਕੋਡ ਉਦਾਹਰਣਾਂ 'ਤੇ ਕੰਮ ਕਰੋ -6. ਅਸਾਈਨਮੈਂਟ ਅਤੇ ਚੈਲੈਂਜ ਪੂਰੇ ਕਰੋ -7. ਪ੍ਰਤੀ ਸਬਕ ਕਵਿਜ਼ ਪੂਰੇ ਕਰੋ +1. ਰੀਪੋਜ਼ਟਰੀ ਨੂੰ ਫੋਰਕ ਜਾਂ ਕਲੋਨ ਕਰੋ +2. ਸਬਕ ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ ਕ੍ਰਮਵਾਰ ਜਾਓ +3. ਹਰ ਸਬਕ ਲਈ README ਫਾਇਲ ਪੜ੍ਹੋ +4. ਪਹਿਲਾਂ ਦੇ ਸਬਕਾਂ ਲਈ ਕਵਿਜ਼ https://ff-quizzes.netlify.app/web/ ਤੇ ਪੂਰੇ ਕਰੋ +5. ਸਬਕ ਫੋਲਡਰਾਂ ਵਿੱਚ ਦਿੱਤੇ ਕੋਡ ਉਦਾਹਰਨਾਂ ਵਿੱਚ ਕੰਮ ਕਰੋ +6. ਅਸਾਈਨਮੈਂਟਾਂ ਅਤੇ ਚੈਲੈਂਜਾਂ ਪੂਰੇ ਕਰੋ +7. ਸਬਕ ਬਾਅਦ ਦੇ ਕਵਿਜ਼ ਕਰ ਲਵੋ -### ਲਾਈਵ ਵਿਕਾਸ +### ਲਾਈਵ ਡਿਵੈਲਪਮੈਂਟ -- **ਡੌਕੂਮੈਂਟੇਸ਼ਨ**: ਰੂਟ ਵਿੱਚ `docsify serve` ਚਲਾਓ (ਪੋਰਟ 3000) -- **ਕਵਿਜ਼ ਐਪ**: `quiz-app` ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ `npm run dev` ਚਲਾਓ -- **ਪ੍ਰੋਜੈਕਟ**: HTML ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ VS ਕੋਡ ਲਾਈਵ ਸਰਵਰ ਐਕਸਟੇਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ -- **API ਪ੍ਰੋਜੈਕਟ**: ਸੰਬੰਧਤ API ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ `npm start` ਚਲਾਓ +- **ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ**: ਮੁੱਖ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ `docsify serve` ਦੌੜਾਓ (ਪੋਰਟ 3000) +- **ਕਵਿਜ਼ ਐਪ**: quiz-app ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ `npm run dev` ਚਲਾਓ +- **ਪ੍ਰੋਜੈਕਟਸ**: VS ਕੋਡ ਲਾਈਵ ਸਰਵਰ ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ HTML ਪ੍ਰੋਜੈਕਟ ਚਲਾਓ +- **API ਪ੍ਰੋਜੈਕਟਸ**: ਸੰਬੰਧਤ API ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ `npm start` ਚਲਾਓ -## ਟੈਸਟਿੰਗ ਨਿਰਦੇਸ਼ +## ਟੈਸਟਿੰਗ ਦੇ ਨਿਰਦੇਸ਼ ### ਕਵਿਜ਼ ਐਪ ਟੈਸਟਿੰਗ ```bash cd quiz-app -npm run lint # ਕੋਡ ਸਟਾਈਲ ਮੁੱਦਿਆਂ ਲਈ ਜਾਂਚ ਕਰੋ -npm run build # ਨਿਰਮਾਣ ਸਫਲਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ +npm run lint # ਕੋਡ ਸਟਾਈਲ ਮੁੱਦੇ ਚੈੱਕ ਕਰੋ +npm run build # ਬਣावट ਸਫਲ ਹੋਣ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ ``` ### ਬੈਂਕ API ਟੈਸਟਿੰਗ ```bash cd 7-bank-project/api -npm run lint # ਕੋਡ ਸਟਾਈਲ ਸਮੱਸਿਆਵਾਂ ਦੀ ਜਾਂਚ ਕਰੋ -node server.js # ਜਾਂਚੋ ਕਿ ਸਰਵਰ ਬਿਨਾਂ ਕਿਸੇ ਗਲਤੀ ਦੇ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ +npm run lint # ਕੋਡ ਸ਼ੈਲੀ ਸਮੱਸਿਆਵਾਂ ਲਈ ਜਾਂਚ ਕਰੋ +node server.js # ਯਕੀਨੀ ਬਣਾਉ ਕਿ ਸਰਵਰ ਬਿਨਾਂ ਗਲਤੀਆਂ ਦੇ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ``` ### ਆਮ ਟੈਸਟਿੰਗ ਪਹੁੰਚ -- ਇਹ ਸਿੱਖਿਆਤਮਕ ਰਿਪੋਜਿਟਰੀ ਹੈ ਜਿਸ ਵਿੱਚ ਵਿਸਤ੍ਰਿਤ ਆਟੋਮੇਟਿਕ ਟੈਸਟ ਨਹੀਂ ਹਨ -- ਮੈਨੂਅਲ ਟੈਸਟਿੰਗ ਉੱਪਰ ਧਿਆਨ: - - ਕੋਡ ਉਦਾਹਰਣਾਂ ਬਿਨਾਂ ਗਲਤੀਆਂ ਚੱਲਦੀਆਂ ਹਨ - - ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਵਿਚ ਲਿੰਕ ਸਹੀ ਕੰਮ ਕਰਦੇ ਹਨ - - ਪ੍ਰੋਜੈਕਟ ਸਫਲਤਾਪੂਰਵਕ ਬਣਦੇ ਹਨ - - ਉਦਾਹਰਣਾਂ ਨੇ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ ਅਨੁਸਰਣ ਕਰਦੇ ਹਨ +- ਇਹ ਸਿੱਖਿਆਤਮਕ ਰੀਪੋਜ਼ਟਰੀ ਹੈ ਜਿਸ ਵਿੱਚ ਵਿਸਤ੍ਰਿਤ ਆਟੋਮੇਟਿਕ ਟੈਸਟ ਨਹੀਂ ਹਨ +- ਹੱਥੋਂ ਟੈਸਟਿੰਗ ਤੇ ਧਿਆਨ: + - ਕੋਡ ਉਦਾਹਰਨ ਬਿਨਾਂ ਗਲਤੀ ਦੇ ਚੱਲਣ + - ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ ਵਿੱਚ ਦਿੱਤੇ ਲਿੰਕ ਸਹੀ ਕੰਮ ਕਰਦੇ ਹਨ + - ਪ੍ਰੋਜੈਕਟ ਬਿਲਡ ਸਫਲ ਰਹਿਣ + - ਉਦਾਹਰਨਾਂ ਵਧੀਆ ਅਮਲਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ -### ਪੇਸ਼ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਚੈੱਕ +### ਪੇਸ਼ਕੀ ਤੱਯਾਰੀ ਜਾਂਚ -- `package.json` ਵਾਲੀਆਂ ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ `npm run lint` ਚਲਾਓ -- ਮਾਰਕਡਾਊਨ ਲਿੰਕ ਸਹੀ ਹਨ ਜਾਂ ਨਹੀਂ ਇਹ ਪੜਤਾਲੋ -- ਕੋਡ ਉਦਾਹਰਣਾਂ ਨੂੰ ਬਰਾਊਜ਼ਰ ਜਾਂ Node.js ਵਿੱਚ ਟੈਸਟ ਕਰੋ -- ਤਰਜਮਿਆਂ ਦੀ ਸੰਰਚਨਾ ਸਹੀ ਰਹਿੰਦੀ ਹੈ ਜਾਂ ਨਹੀਂ ਦੇਖੋ +- ਉਹਨਾਂ ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ ਜਿੱਥੇ package.json ਹੈ, `npm run lint` ਚਲਾਓ +- ਮਾਰਕਡਾਊਨ ਲਿੰਕਾਂ ਦੀ ਜਾਂਚ ਕਰੋ +- ਕੋਡ ਉਦਾਹਰਨਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਜਾਂ Node.js ਵਿੱਚ ਟੈਸਟ ਕਰੋ +- ਅਨੁਵਾਦਾਂ ਦੀ ਸਹੀ ਬਣਤਰ ਨੂੰ ਜਾਂਚੋ -## ਕੋਡ ਅੰਦਾਜ਼ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ +## ਕੋਡ ਸ਼ੈਲੀ ਦੇ ਨਿਰਦੇਸ਼ -### JavaScript +### ਜਾਵਾਸਕ੍ਰਿਪਟ -- ਆਧੁਨਿਕ ES6+ ਸੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰੋ -- ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਮਨਮਾਫਿਕ ESLint ਵਿਵਸਥਾ ਨੂੰ ਫੋਲੋ ਕਰੋ -- ਸਿੱਖਿਆ ਲਈ ਅਰਥਪੂਰਨ ਵੈਰੀਏਬਲ ਅਤੇ ਫੰਕਸ਼ਨ ਨਾਮ ਵਰਤੋ -- ਸਿਖਣ ਵਾਲਿਆਂ ਲਈ ਸੰਕਲਪ ਸਮਝਾਉਂਦੇ ਟਿੱਪਣੀਆਂ ਸ਼ਾਮਿਲ ਕਰੋ -- ਜਿੱਥੇ Prettier ਲਾਗੂ ਹੈ, ਫਾਰਮੇਟਿੰਗ ਕਰੋ +- ਆਧੁਨਿਕ ES6+ ਵਾਕਯਾਂਸ਼ ਵਰਤੋਂ +- ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਦਿੱਤੇ standaard ESLint ਸੰਰਚਨਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ +- ਸਿੱਖਣ ਲਈ ਸਮਝਦਾਰ ਵੈਰੀਏਬਲ ਅਤੇ ਫੰਕਸ਼ਨ ਨਾਮ ਵਰਤੋਂ +- ਸਿੱਖਣ ਵਾਲਿਆਂ ਲਈ ਸਿਧਾਂਤ ਸਮਝਾਉਣ ਵਾਲੇ ਕਮੈਂਟ ਸ਼ਾਮਲ ਕਰੋ +- ਜਿੱਥੇ ਲੋੜ ਹੋਵੇ Prettier ਨਾਲ ਫਾਰਮੈਟ ਕਰੋ ### HTML/CSS -- ਸਮੇਂਟਿਕ HTML5 ਤੱਤ -- ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਦੇ ਸਿਧਾਂਤ -- ਸਾਫ਼ ਕਲਾਸ ਨਾਮਕਰਨ ਕੰਵੇਂਸ਼ਨ -- CSS ਤਕਨੀਕਾਂ ਲਈ ਸਿੱਖਣ-ਯੋਗ ਟਿੱਪਣੀਆਂ +- ਸੈਂਟਮੈਟਿਕ HTML5 ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ +- ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤਾਂ ਦੀ ਪਾਲਣਾ +- ਸਾਫ ਕਲਾਸ ਨਾਂਮਕਰਨ ਪ੍ਰਣਾਲੀ +- CSS ਤਕਨੀਕਾਂ ਨੂੰ ਸਮਝਾਉਂਦੇ ਕਮੈਂਟ -### Python +### ਪਾਇਥਨ -- PEP 8 ਅੰਦਾਜ਼ ਦੇ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ -- ਸਾਫ, ਸਿੱਖਣਯੋਗ ਕੋਡ ਉਦਾਹਰਣ -- ਸਿੱਖਣ ਵਿੱਚ ਸਹਾਇਤਾ ਲਈ ਟਾਈਪ ਹਿੰਟ +- PEP 8 ਸ਼ੈਲੀ ਨਿਰਦੇਸ਼ +- ਸਪਸ਼ਟ ਅਤੇ ਸਿੱਖਿਆਤਮਕ ਕੋਡ ਉਦਾਹਰਨਾਂ +- ਸਿੱਖਣ ਵਿੱਚ ਮਦਦ ਲਈ ਟਾਈਪ ਹਿੰਟਸ -### ਮਾਰਕਡਾਊਨ ਡੌਕੂਮੈਂਟੇਸ਼ਨ +### ਮਾਰਕਡਾਊਨ ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ -- ਸਪਸ਼ਟ ਸਿਰਲੇਖ ਦਰਜਾ -- ਭਾਸ਼ਾ ਵਿਸ਼ੇਸ਼ ਕੋਡ ਬਲਾਕ -- ਵਾਧੂ ਸਾਂਝੇ ਸਾਧਨਾਂ ਲਈ ਲਿੰਕ -- `images/` ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਸਕਰੀਨਸ਼ਾਟ ਅਤੇ ਚਿੱਤਰ -- ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਤਸਵੀਰਾਂ ਲਈ Alt ਟੈਕਸਟ +- ਸਾਫ਼ ਸਿਰਲੇਖ ਅਨੁਕ੍ਰਮ +- ਭਾਸ਼ਾ ਗਿਆਤ ਕੋਡ ਬਲਾਕ +- ਵਾਧੂ ਸਰੋਤਾਂ ਲਈ ਲਿੰਕ +- `images/` ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ ਸਕ੍ਰੀਨਸ਼ਾਟ ਅਤੇ ਚਿੱਤਰ +- ਅਕਸੇਸੀਬਿਲਿਟੀ ਲਈ ਚਿੱਤਰਾਂ ਦਾ Alt ਟੈਕਸਟ -### ਫਾਇਲ ਅਕਠ +### ਫਾਇਲ ਸੰਗਠਨ -- ਸਬਕ ਲਗਾਤਾਰ ਨੰਬਰੀਕ੍ਰਿਤ (1-getting-started-lessons, 2-js-basics ਆਦਿ) -- ਹਰ ਪ੍ਰੋਜੈਕਟ ਕੋਲ `solution/` ਅਤੇ ਕਈ ਵਾਰੀ `start/` ਜਾਂ `your-work/` ਡਾਇਰੈਕਟਰੀਜ਼ -- ਸਾਰੀਆਂ ਤਸਵੀਰਾਂ ਸਬਕ-ਵਿਸ਼ੇਸ਼ `images/` ਫੋਲਡਰਾਂ ਵਿੱਚ ਸਾਂਭੀਆਂ -- ਤਰਜਮੇ `translations/{language-code}/` ਢਾਂਚੇ ਵਿੱਚ +- ਸਬਕਾਂ ਨੂੰ ਲਗਾਤਾਰ ਨੰਬਰ (1-getting-started-lessons, 2-js-basics, ਆਦਿ) +- ਹਰ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ `solution/` ਅਤੇ ਆਮ ਤੌਰ 'ਤੇ `start/` ਜਾਂ `your-work/` ਡਾਇਰੈਕਟਰੀਜ਼ +- ਚਿੱਤਰ ਸਬਕ-ਵਿਸ਼ੇਸ਼ `images/` ਫੋਲਡਰਾਂ ਵਿੱਚ ਸਟੋਰ +- ਅਨੁਵਾਦ `translations/{language-code}/` ਢਾਂਚੇ ਵਿੱਚ -## ਬਿਲਡ ਅਤੇ ਤਾਇਨਾਤ +## ਬਿਲਡ ਅਤੇ ਡਿਪਲੌਇਮੈਂਟ -### ਕਵਿਜ਼ ਐਪ ਤਾਇਨਾਤ (Azure Static Web Apps) +### ਕਵਿਜ਼ ਐਪ ਡਿਪਲੌਇਮੈਂਟ (Azure Static Web Apps) -ਕਵਿਜ਼ ਐਪ Azure Static Web Apps ਲਈ ਸੰਰਚਿਤ ਹੈ: +ਕਵਿਜ਼-ਐਪ ਲਈ Azure Static Web Apps ਡਿਪਲੌਇਮੈਂਟ ਸੰਰਚਤ ਹੈ: ```bash cd quiz-app npm run build # dist/ ਫੋਲਡਰ ਬਣਾਉਂਦਾ ਹੈ -# main 'ਤੇ ਪੁਸ਼ ਕਰਨ 'ਤੇ GitHub Actions ਵਰਕਫਲੋ ਰਾਹੀਂ ਡਿਪਲੋਅ ਕਰਦਾ ਹੈ +# ਮੁੱਖ 'ਤੇ ਪੁਸ਼ ਕਰਨ 'ਤੇ GitHub Actions ਵਰਕਫਲੋ ਰਾਹੀਂ ਡਿਪਲॉय ਕਰਦਾ ਹੈ ``` Azure Static Web Apps ਸੰਰਚਨਾ: @@ -193,90 +193,90 @@ Azure Static Web Apps ਸੰਰਚਨਾ: - **ਆਉਟਪੁੱਟ ਸਥਾਨ**: `dist` - **ਵਰਕਫਲੋ**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ PDF ਬਣਾਣਾ +### ਡੌਕਯੂਮੇਂਟੇਸ਼ਨ PDF ਬਣਾਉਣਾ ```bash -npm install # docsify-to-pdf ਇਨਸਟਾਲ ਕਰੋ +npm install # docsify-to-pdf ਇੰਸਟਾਲ ਕਰੋ npm run convert # docs ਤੋਂ PDF ਬਣਾਓ ``` -### ਡੌਕਸਿਫਾਈ ਡੌਕੂਮੈਂਟੇਸ਼ਨ +### Docsify ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ ```bash npm install -g docsify-cli # ਡੌਕਸਿਫਾਈ ਨੂੰ ਗਲੋਬਲੀ ਇੰਸਟਾਲ ਕਰੋ -docsify serve # localhost:3000 'ਤੇ ਸੇਵਾ ਦਿਓ +docsify serve # ਲੋਕਲਹੋਸਟ:3000 'ਤੇ ਸਰਵ ਕਰੋ ``` -### ਪ੍ਰੋਜੈਕਟ-ਖਾਸ ਬਿਲਡ +### ਪ੍ਰੋਜੈਕਟ-ਵਿਸ਼ੇਸ਼ ਬਿਲਡ -ਹਰ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਦੀ ਆਪਣੀ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਹੋ ਸਕਦੀ ਹੈ: -- Vue ਪ੍ਰੋਜੈਕਟ: `npm run build` ਸੰਗ੍ਰਹਿਤ ਪ੍ਰੋਡਕਸ਼ਨ ਬੰਡਲ ਬਣਾਉਂਦਾ ਹੈ -- ਸਟੈਟਿਕ ਪ੍ਰੋਜੈਕਟ: ਕੋਈ ਬਿਲਡ ਕਦਮ ਨਹੀਂ, ਫਾਇਲਾਂ ਸਿੱਧਾ ਸੇਵਾ ਕਰੋ +ਹਰ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਦਾ ਆਪਣਾ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਹੋ ਸਕਦਾ ਹੈ: +- Vue ਪ੍ਰੋਜੈਕਟ: `npm run build` ਦੁਆਰਾ ਪ੍ਰੋਡਕਸ਼ਨ ਬਣਡਲ ਬਣਦਾ ਹੈ +- ਸਟੈਟਿਕ ਪ੍ਰੋਜੈਕਟ: ਕੋਈ ਬਿਲਡ ਕਦਮ ਨਹੀਂ, ਸਿੱਧੇ ਫਾਇਲ ਸਰਵ ਕਰੋ -## ਪੁਲ ਰਿਕਵੈਸਟ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ +## ਪੁਲ ਰਿਕਵੇਸਟ ਦੇ ਨਿਰਦੇਸ਼ ### ਸਿਰਲੇਖ ਫਾਰਮੈਟ -ਸਾਫ਼, ਵਰਣਨਾਤਮਕ ਟਾਈਟਲ ਵਰਤੋਂ ਜੋ ਬਦਲਾਅ ਖੇਤਰ ਦਰਸਾਉਂਦੇ ਹਨ: -- `[Quiz-app] ਨਵਾਂ ਕਵਿਜ਼ ਸ਼ਾਮਲ ਕਰੋ ਸਬਕ X ਲਈ` -- `[Lesson-3] ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਟਾਇਪੋ ਸਹੀ ਕਰੋ` -- `[Translation] ਸਬਕ 5 ਲਈ ਸਪੇਨੀ ਤਰਜਮਾ ਸ਼ਾਮਲ ਕਰੋ` -- `[Docs] ਸੈਟਅੱਪ ਨਿਰਦੇਸ਼ ਅਪਡੇਟ ਕਰੋ` +ਸੁਥਰੇ ਤੇ ਵੇਰਵੇ ਵਾਲੇ ਸਿਰਲੇਖ ਵਰਤੋ ਜੋ ਬਦਲਾਅ ਦੇ ਖੇਤਰ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ: +- `[Quiz-app] ਨਵਾਂ ਕਵਿਜ਼ ਸਬਕ X ਲਈ ਸ਼ਾਮਲ ਕਰੋ` +- `[Lesson-3] ਟੈਰੀਅਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਟਾਈਪੋ ਠੀਕ ਕਰੋ` +- `[Translation] ਸਬਕ 5 ਲਈ ਸਪੇਨਿਸ਼ ਅਨੁਵਾਦ ਸ਼ਾਮਲ ਕਰੋ` +- `[Docs] ਸੈਟਅਪ ਨਿਰਦੇਸ਼ ਅਪਡੇਟ ਕਰੋ` -### ਜ਼ਰੂਰੀ ਚੈੱਕ +### ਲੋੜੀਂਦੇ ਜਾਂਚ PR ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ: -1. **ਕੋਡ ਦਰੁਸਤਗੀ**: +1. **ਕੋਡ ਗੁਣਵੱਤਾ**: - ਪ੍ਰਭਾਵਿਤ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ `npm run lint` ਚਲਾਓ - - ਸਾਰੀਆਂ ਲਿੰਟਿੰਗ ਗਲਤੀਆਂ ਅਤੇ ਚੇਤਾਵਨੀਆਂ ਸੁਧਾਰੋ + - ਸਾਰੇ ਲਿੰਟਿੰਗ ਗਲਤੀਆਂ ਅਤੇ ਚੇਤਾਵਨੀਆਂ ਠੀਕ ਕਰੋ -2. **ਬਿਲਡ ਜਾਂਚ**: +2. **ਬਿਲਡ ਪੁਸ਼ਟੀਕਰਨ**: - ਜੇ ਲਾਗੂ ਹੋਵੇ ਤਾਂ `npm run build` ਚਲਾਓ - - ਕੋਈ ਬਿਲਡ ਗਲਤੀ ਨਾ ਹੋਵੇ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ + - ਕੋਈ ਬਿਲਡ ਗਲਤੀ ਨਾ ਹੋਵੇ -3. **ਲਿੰਕ ਪ੍ਰਮਾਣਿਕਤਾ**: +3. **ਲਿੰਕ ਜਾਂਚ**: - ਸਾਰੇ ਮਾਰਕਡਾਊਨ ਲਿੰਕ ਟੈਸਟ ਕਰੋ - - ਤਸਵੀਰਾਂ ਦੇ ਹਵਾਲੇ ਚੰਗੇ ਹਨ ਜਾਂ ਨਹੀਂ ਦੇਖੋ + - ਚਿੱਤਰਾਂ ਦੇ ਰਿਫਰੈਂਸਾਂ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ 4. **ਸਮੱਗਰੀ ਸਮੀਖਿਆ**: - - ਸਪੈਲਿੰਗ ਅਤੇ ਗ੍ਰੈਮਰ ਲਈ ਪ੍ਰੂਫਰੀਡ ਕਰੋ - - ਕੋਡ ਉਦਾਹਰਣ ਸਹੀ ਅਤੇ ਸਿੱਖਣਯੋਗ ਹਨ - - ਤਰਜਮੇ ਮੂਲ ਅਰਥ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹਨ + - ਵਿਰਾਮ ਅਤੇ ਵਿਅਾਕਰਣ ਲਈ ਪ੍ਰੂਫਰੀਡ ਕਰੋ + - ਕੋਡ ਉਦਾਹਰਨਾਂ ਦੀ ਸ਼ੁੱਧਤਾ ਅਤੇ ਸਿੱਖਿਆਤਮਕਤਾ ਨਿਸ਼ਚਿਤ ਕਰੋ + - ਅਨੁਵਾਦਾਂ ਦੀ ਮੂਲ ਮਤਲਬ ਦੀ ਸਹੀ ਪਾਲਣਾ ਜਾਚੋ -### ਯੋਗਦਾਨ ਦੀਆਂ ਸ਼ਰਤਾਂ +### ਯੋਗਦਾਨ ਦੀਆਂ ਲੋੜਾਂ -- Microsoft CLA ਸਹਿਮਤੀ (ਪਹਿਲੀ PR 'ਤੇ ਆਟੋਮੈਟਿਕ ਜਾਂਚ) -- [Microsoft ਖੁੱਲ੍ਹਾ ਰੂਪ ਕੋਡ ਆਫ ਕੋਨਡਕਟ](https://opensource.microsoft.com/codeofconduct/) ਦਾ ਪਾਲਣ -- ਵਿਸਥਾਰ ਲਈ [CONTRIBUTING.md](./CONTRIBUTING.md) ਵੇਖੋ -- ਜੇ ਲਾਗੂ ਹੋਵੇ ਤਾਂ PR ਵਰਨਣ ਵਿੱਚ ਆਈਸ਼ੂ ਨੰਬਰ ਸ਼ਾਮਿਲ ਕਰੋ +- Microsoft CLA ਨਾਲ ਸਹਿਮਤੀ (ਪਹਿਲੇ PR ਤੇ ਆਟੋਮੇਟਿਕ ਚੈਕ) +- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) ਦੀ ਪਾਲਣਾ ਕਰੋ +- ਵਿਸਤ੍ਰਿਤ ਨਿਰਦੇਸ਼ਾਂ ਲਈ [CONTRIBUTING.md](./CONTRIBUTING.md) ਵੇਖੋ +- ਜੇ ਲਗੂ ਹੋਵੇ ਤਾਂ PR ਵਿਚ ਇਸ਼ੂ ਨੰਬਰ ਦਰਜ ਕਰੋ ### ਸਮੀਖਿਆ ਪ੍ਰਕਿਰਿਆ -- PRs ਨੂੰ ਵਿੱਚੋ ਲੋਕਾਂ ਅਤੇ ਕਮਿਊਨਿਟੀ ਵੱਲੋਂ ਜਾਂਚ ਕੀਤਾ ਜਾਂਦਾ ਹੈ -- ਸਿੱਖਿਆਤਮਕ ਸਪਸ਼ਟਤਾ ਨੂੰ ਪ੍ਰਾਥਮਿਕਤਾ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ -- ਕੋਡ ਉਦਾਹਰਣਾਂ ਦੌਰਾਨ ਵਧੀਆ ਅਸਲ ਸਿਧਾਂਤਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ -- ਤਰਜਮੇ ਸਹੀ ਅਤੇ ਸੱਭਿਆਚਾਰਕ ਤੌਰ 'ਤੇ ਠੀਕ ਹਨ ਜਾਂ ਨਹੀਂ ਇਸ ਦੀ ਸਮੀਖਿਆ ਹੁੰਦੀ ਹੈ +- PR ਨੂੰ ਮੈਨਟੇਨਰ ਅਤੇ ਸਮੁਦਾਇ ਵੱਲੋਂ ਸਮੀਖਿਆ ਕੀਤਾ ਜਾਂਦਾ ਹੈ +- ਸਿੱਖਿਆਤਮਕ ਸਪਸ਼ਟਤਾ ਨੂੰ ਪ੍ਰਾਥਮਿਕਤਾ +- ਕੋਡ ਉਦਾਹਰਨ ਇਸ ਸਮੇਂ ਦੀਆਂ ਵਧੀਆਂ ਅਮਲਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ +- ਅਨੁਵਾਦਾਂ ਨੂੰ ਸਹੀ ਤੇ ਸੱਭਿਆਚਾਰਕ ਤੌਰ 'ਤੇ ਢੁਕਵੇਂ ਹੋਣ ਲਈ ਸਮੀਖਿਆ -## ਤਰਜਮਾਈ ਸਿਸਟਮ +## ਅਨੁਵਾਦ ਸਿਸਟਮ -### ਆਟੋਮੇਟਿਕ ਤਰਜਮਾ +### ਆਟੋਮੇਟਿਕ ਅਨੁਵਾਦ -- GitHub Actions ਨਾਲ co-op-translator ਵਰਕਫਲੋ ਵਰਤਦਾ ਹੈ -- 50+ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਖੁਦਕਾਰ ਤਰਜਮੇ ਕਰਦਾ ਹੈ -- ਮੁੱਖ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਸਰੋਤ ਫਾਇਲਾਂ -- ਤਰਜਮੇ ਫਾਇਲਾਂ `translations/{language-code}/` ਡਾਇਰੈਕਟਰੀਜ਼ ਵਿੱਚ +- ਗਿਟਹਬ ਐਕਸ਼ਨਾਂ ਤੇ co-op-translator ਵਰਕਫਲੋ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ +- 50+ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਆਟੋਮੈਟਿਕ ਅਨੁਵਾਦ ਕਰਦਾ ਹੈ +- ਮੂਲ ਫਾਇਲਾਂ ਮੁੱਖ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਹਨ +- ਅਨੁਵਾਦਿਤ ਫਾਇਲਾਂ `translations/{language-code}/` ਵਿੱਚ -### ਮੈਨੂਅਲ ਤਰਜਮਾ ਸੁਧਾਰ +### ਮੈਨੁਅਲ ਅਨੁਵਾਦ ਸੁਧਾਰ ਸ਼ਾਮਲ ਕਰਨਾ 1. `translations/{language-code}/` ਵਿੱਚ ਫਾਇਲ ਲੱਭੋ -2. ਬਿਨਾਂ ਢਾਂਚਾ ਤੋੜੇ ਸੁਧਾਰ ਕਰੋ -3. ਕੋਡ ਉਦਾਹਰਣ ਕਾਰਗਰ ਬਣੇ ਰਹਿਣ -4. ਕਿਸੇ ਵੀ ਸਥਾਨਕ ਕਵਿਜ਼ ਸਮੱਗਰੀ ਟੈਸਟ ਕਰੋ +2. ਬਣਤਰ ਨੁਕਸਾਨ ਨਾ ਪੁੱਜਾਉਂਦਿਆਂ ਸੁਧਾਰ ਕਰੋ +3. ਕੋਡ ਉਦਾਹਰਨ ਸਹੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਨ ਯੋਗ ਰੱਖੋ +4. ਸੀਮਤ ਕਵਿਜ਼ ਸਮੱਗਰੀ ਦੀ ਜਾਂਚ ਕਰੋ -### ਤਰਜਮਾਈ ਮੈਟਾਡੇਟਾ +### ਅਨੁਵਾਦ ਮੈਟਾਡੇਟਾ -ਤਰਜਮੇ ਫਾਇਲਾਂ ਵਿੱਚ ਮੈਟਾਡੇਟਾ ਹੈਡਰ ਸ਼ਾਮਿਲ ਹੈ: +ਅਨੁਵਾਦਿਤ ਫਾਇਲਾਂ ਵਿੱਚ ਮੈਟਾਡੇਟਾ ਹੈਡਰ ਸ਼ਾਮਿਲ ਹੁੰਦਾ ਹੈ: ```markdown ``` -## ਡੀਬੱਗਿੰਗ ਅਤੇ ਸਮੱਸਿਆ ਨਿਵਾਰਨ +## ਡੀਬੱਗਿੰਗ ਅਤੇ ਸਮੱਸਿਆ ਨਿਵਾਰਣ ### ਆਮ ਸਮੱਸਿਆਵਾਂ -**ਕਵਿਜ਼ ਐਪ ਸ਼ੁਰੂ ਨਹੀਂ ਹੁੰਦਾ**: -- Node.js ਦਾ ਸੰਸਕਰਣ (v14+ ਸਿਫਾਰਸ਼ੀ) -- `node_modules` ਅਤੇ `package-lock.json` ਹਟਾਓ ਅਤੇ `npm install` ਫੈਰ ਚਲਾਓ -- ਪੋਰਟ ਟਕਰਾਅ ਦੀ ਜਾਂਚ ਕਰੋ (ਮੂਲ: Vite ਪੋਰਟ 5173 ਵਰਤਦਾ ਹੈ) +**ਕਵਿਜ਼ ਐਪ ਸ਼ੁਰੂ ਨਹੀਂ ਹੁੰਦੀ**: +- Node.js ਦਾ ਵਰਜਨ (v14+ ਸੁਝਾਇਆ ਗਿਆ) ਜਾਂਚੋ +- `node_modules` ਅਤੇ `package-lock.json` ਨੂੰ ਹਟਾਓ, ਫੇਰ `npm install` ਚਲਾਓ +- ਪੋਰਟ ਟਕਰਾੜ ਦੀ ਜਾਂਚ ਕਰੋ (ਡਿਫਾਲਟ: Vite 5173 ਪੋਰਟ ਵਰਤਦਾ ਹੈ) -**API ਸਰਵਰ ਚਾਲੂ ਨਹੀਂ ਹੁੰਦਾ**: -- Node.js ਸੰਸਕਰਣ ਚੈੱਕ ਕਰੋ (node >=10) -- ਪੋਰਟ ਪਹਿਲਾਂ ਤੋਂ ਵਰਤੇ ਜਾ ਰਿਹਾ ਹੈ ਜਾਂ ਨਹੀਂ ਦੇਖੋ -- ਸਾਰੀਆਂ ਨਿਰਭਰਤਾਵਾਂ `npm install` ਨਾਲ ਵਧੀਆ ਤਰੀਕੇ ਨਾਲ ਇੰਸਟਾਲ ਹੋਣ +**API ਸਰਵਰ ਸ਼ੁਰੂ ਨਹੀਂ ਹੁੰਦਾ**: +- Node.js ਵਰਜਨ ਘੱਟੋ-ਘੱਟ node >=10 ਜਾਂਚੋ +- ਪੋਰਟ ਜੇ ਪਹਿਲਾਂ ਤੋਂ ਵਰਤਿਆ ਜਾ ਰਿਹਾ ਹੈ ਜਾਂ ਨਹੀਂ ਦੇਖੋ +- ਸਾਰੇ ਡੀਪੈਂਡੇੰਸੀਜ਼ `npm install` ਨਾਲ ਲਾਇਆ ਜਾਣ ਝਾਂਚ ਕਰੋ -**ਬਰਾਉਜ਼ਰ ਐਕਸਟੇਂਸ਼ਨ ਲੋਡ ਨਹੀਂ ਹੁੰਦੀ**: -- manifest.json ਦਾ ਢਾਂਚਾ ਠੀਕ ਹੈ ਜਾਂ ਨਹੀਂ ਦੇਖੋ -- ਬਰਾਉਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਗਲਤੀਆਂ ਚੈੱਕ ਕਰੋ -- ਬਰਾਉਜ਼ਰ ਖਾਸ ਐਕਸਟੇਂਸ਼ਨ ਇੰਸਟਾਲੇਸ਼ਨ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਮੰਨੋ +**ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਨਹੀਂ ਹੁੰਦੀ**: +- manifest.json ਸਹੀ ਫਾਰਮੈਟ ਵਿੱਚ ਹੈ ਜਾਂ ਨਹੀਂ ਵੇਖੋ +- ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਗਲਤੀਆਂ ਦੀ ਜਾਂਚ ਕਰੋ +- ਬ੍ਰਾਊਜ਼ਰ ਦੀਆਂ ਨਿਰਦਿਸ਼ਟ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲੇਸ਼ਨ ਹਦਾਇਤਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ **ਪਾਇਥਨ ਚੈਟ ਪ੍ਰੋਜੈਕਟ ਸਮੱਸਿਆਵਾਂ**: -- OpenAI ਪੈਕੇਜ ਇੰਸਟਾਲ ਕਰੋ: `pip install openai` -- GITHUB_TOKEN ਪਰਿਵੇਸ਼ ਵੈਰੀਏਬਲ ਸੈਟ ਹੈ ਜਾਂ ਨਹੀਂ ਜਾਂਚੋ -- GitHub ਮਾਡਲਾਂ ਦੀ ਐਕਸੈਸ ਪਰਮਿਸ਼ਨ ਵੇਖੋ +- OpenAI ਪੈਕੇਜ ਲਗਾਇਆ ਹੋਵੇ: `pip install openai` +- GITHUB_TOKEN ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਸੈੱਟ ਹੋਵੇ +- GitHub ਮਾਡਲਾਂ ਦੀ ਪਹੁੰਚ ਅਧਿਕਾਰਾਂ ਦੀ ਜਾਂਚ ਕਰੋ -**ਡੌਕਸਿਫਾਈ ਡੌਕਸ ਸੇਵਾ ਨਹੀਂ ਕਰਦਾ**: -- ਗ੍ਰਹਿ ਵਿੱਚ docsify-cli ਇੰਸਟਾਲ ਕਰੋ: `npm install -g docsify-cli` -- ਰਿਪੋਜਿਟਰੀ ਰੂਟ ਡਾਇਰੈਕਟਰੀ ਤੋਂ ਚਲਾਓ -- `docs/_sidebar.md` ਮੌਜੂਦ ਹੈ ਜਾਂ ਨਹੀਂ ਵੇਖੋ +**Docsify ਡੌਕਸ ਸੇਵਾ ਨਹੀਂ ਕਰ ਰਹੇ**: +- docsify-cli ਗਲੋਬਲ ਤੌਰ 'ਤੇ ਇੰਸਟਾਲ ਕਰੋ: `npm install -g docsify-cli` +- ਰੀਪੋਜ਼ਟਰੀ ਰੂਟ ਡਾਇਰੈਕਟਰੀ ਤੋਂ ਚਲਾਓ +- ਜਾਂਚ ਕਰੋ ਕਿ `docs/_sidebar.md` ਮੌਜੂਦ ਹੈ -### ਵਿਕਾਸ ਮੁਹੌਲ ਸਲਾਹਾਂ +### ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਸੁਝਾਅ -- HTML ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ VS ਕੋਡ ਲਾਈਵ ਸਰਵਰ ਐਕਸਟੇਂਸ਼ਨ ਵਰਤੋਂ -- ESLint ਅਤੇ Prettier ਐਕਸਟੇਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰੋ ਵਧੀਆ ਫਾਰਮੇਟਿੰਗ ਲਈ -- ਜਾਵਾਸਕ੍ਰਿਪਟ ਡੀਬੱਗਿੰਗ ਲਈ ਬਰਾਊਜ਼ਰ ਡੈਵਟੂਲ ਵਰਤੋ -- Vue ਪ੍ਰੋਜੈਕਟ ਲਈ Vue DevTools ਬਰਾਊਜ਼ਰ ਐਕਸਟੇਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰੋ +- HTML ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ VS ਕੋਡ ਵਿੱਚ Live Server ਐਕਸਟੈਂਸ਼ਨ ਵਰਤੋਂ +- ESLint ਅਤੇ Prettier ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰੋ +- ਜਾਵਾਸਕ੍ਰਿਪਟ ਡੀਬੱਗ ਲਈ ਬ੍ਰਾਊਜ਼ਰ DevTools ਉਪਯੋਗ ਕਰੋ +- Vue ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ Vue DevTools ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਲਗਾਓ -### ਕਾਰਗੁਜ਼ਾਰੀ ਦੇ ਵਿਚਾਰ +### ਪ੍ਰਦਰਸ਼ਨ ਸਬੰਧੀ ਵਿਚਾਰ -- ਬਹੁਤ ਸਾਰੇ ਤਰਜਮੇ ਫਾਇਲਾਂ (50+ ਭਾਸ਼ਾਵਾਂ) ਕਾਰਨ ਪੂਰਨ ਕਲੋਨ ਵੱਡਾ ਹੁੰਦਾ ਹੈ -- ਕੇਵਲ ਸਮੱਗਰੀ 'ਤੇ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਸ਼ੈਲੋ ਕਲੋਨ ਵਰਤੋਂ: `git clone --depth 1` -- ਅੰਗਰੇਜ਼ੀ ਸਮੱਗਰੀ ਲਈ ਖੋਜੋਂ ਵਿੱਚ ਤਰਜਮੇ ਬਾਹਰ ਰੱਖੋ -- ਪਹਿਲੀ ਵਾਰੀ npm install ਅਤੇ Vite ਬਿਲਡ ਵਿੱਚ ਪ੍ਰਕਿਰਿਆ ਹੌਲੀ ਹੋ ਸਕਦੀ ਹੈ +- 50+ ਭਾਸ਼ਾਵਾਂ ਦੇ ਅਨੁਵਾਦਾਂ ਨਾਲ ਫੁੱਲ ਕਲੋਨ ਵੱਡਾ ਹੋ ਜਾਂਦਾ ਹੈ +- ਕੇਵਲ ਸਮੱਗਰੀ 'ਤੇ ਕੰਮ ਕਰ ਰਹੇ ਹਾਂ ਤਾਂ ਸ਼ੈਲੋ ਕਲੋਨ ਕਰੋ: `git clone --depth 1` +- ਅੰਗਰੇਜ਼ੀ ਸਮੱਗਰੀ 'ਤੇ ਕੰਮ ਦੌਰਾਨ ਅਨੁਵਾਦਾਂ ਨੂੰ ਖੋਜੋਂ ਤੋਂ ਬਾਹਰ ਰੱਖੋ +- ਪਹਿਲੀ ਵਾਰੀ npm install ਅਤੇ Vite build ਦੇ ਸਮੇਂ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਸੁਸਤ ਹੋ ਸਕਦੀ ਹੈ -## ਸੁਰੱਖਿਆ ਦੇ ਵਿਚਾਰ +## ਸੁਰੱਖਿਆ ਵਿਚਾਰ -### ਵਾਤਾਵਰਨ ਵੈਰੀਏਬਲ +### ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ -- API ਕੰਡੀਡੇਟਾਂ ਨੂੰ ਕਦੇ ਵੀ ਰਿਪੋਜਿਟਰੀ ਵਿੱਚ ਨਹੀਂ ਧਕੋ -- `.env` ਫਾਇਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ (ਜੋ `.gitignore` ਵਿੱਚ ਹਨ ਪਹਿਲਾਂ ਤੋਂ) -- ਲੋੜੀਂਦੇ ਵਾਤਾਵਰਨ ਵੈਰੀਏਬਲ ਪ੍ਰੋਜੈਕਟ README ਵਿੱਚ ਦਰਜ ਕਰੋ +- API ਕੀਆਂ ਕਦੇ ਵੀ ਰੀਪੋਜ਼ਟਰੀ ਵਿੱਚ ਸੰਰਕਸ਼ਿਤ ਨਾ ਕਰੋ +- `.env` ਫਾਇਲਾਂ ਵਰਤੋਂ (ਜੋ ਪਹਿਲਾਂ ਹੀ `.gitignore` ਵਿੱਚ ਹਨ) +- ਪ੍ਰੋਜੈਕਟ READMEਜ਼ ਵਿੱਚ ਲੋੜੀਂਦੇ ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਬਿਆਨ ਕਰੋ ### ਪਾਇਥਨ ਪ੍ਰੋਜੈਕਟ -- ਵਰਚੁਅਲ ਵਾਤਾਵਰਨ ਦੀ ਵਰਤੋਂ ਕਰੋ: `python -m venv venv` -- ਨਿਰਭਰਤਾਵਾਂ ਅਪਡੇਟ ਰੱਖੋ -- GitHub ਟੋਕਨ ਦੀ ਘੱਟੋ ਘੱਟ ਲੋੜ ਸੀਮਾ ਵਾਲੇ ਅਧਿਕਾਰ ਹੋਣ +- ਵਰਚੁਅਲ ਵਾਤਾਵਰਣ ਵਰਤੋਂ: `python -m venv venv` +- ਡੀਪੈਂਡੇੰਸੀਜ਼ ਨੂੰ ਹਮੇਸ਼ਾ ਅਪਡੇਟ ਰੱਖੋ +- GitHub ਟੋਕਨ ਨੂੰ ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੇ ਅਧਿਕਾਰ ਦੇ ਨਾਲ ਰੱਖੋ ### GitHub ਮਾਡਲਾਂ ਪਹੁੰਚ -- GitHub ਮਾਡਲਾਂ ਲਈ ਨਿੱਜੀ ਐਕਸੈਸ ਟੋਕਨ (PAT) ਦੀ ਲੋੜ ਹੈ -- ਟੋਕਨ ਵਾਤਾਵਰਨ ਵੈਰੀਏਬਲਾਂ ਦੇ ਤੌਰ 'ਤੇ ਸੁਰੱਖਿਅਤ ਰੱਖੋ -- ਕਦੇ ਵੀ ਟੋਕਨ ਜਾਂ ਪ੍ਰਮਾਣਿਕਤਾ ਜਨਤਾ ਵਿੱਚ ਪ੍ਰਕਾਸ਼ਿਤ ਨਾ ਕਰੋ +- GitHub ਮਾਡਲਾਂ ਲਈ ਨਿੱਜੀ ਪਹੁੰਚ ਟੋਕਨ (PAT) ਜ਼ਰੂਰੀ ਹਨ +- ਟੋਕਨਾਂ ਨੂੰ ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਵਜੋਂ ਰੱਖੋ +- ਕਦੇ ਵੀ ਟੋਕਨਾਂ ਜਾਂ ਪਾਸਵਰਡ ਕਮਿੱਟ ਨਾ ਕਰੋ ## ਵਾਧੂ ਨੋਟਸ -### ਲਕੜੀ ਦਰਸ਼ਕ +### ਲਕੜਾਂ ਦੀ ਟੀਮ -- ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਵੇਂ +- ਪੂਰੇ ਸ਼ੁਰੂਆਤੀ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਲਈ - ਵਿਦਿਆਰਥੀ ਅਤੇ ਖੁਦ ਸਿੱਖਣ ਵਾਲੇ -- ਕਲਾਸਰੂਮ ਵਿਚ ਪਾਠਕ੍ਰਮ ਵਰਤ ਰਹੇ ਅਧਿਆਪਕ -- ਸਮੱਗਰੀ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਕਦਮੀਕ ਉਸਾਰੀ ਵਾਸਤੇ ਬਣਾਈ ਗਈ +- ਵਿਰੋਧੀ ਕਲਾਸਰੂਮ ਵਿੱਚ ਕੋਰਸ ਵਰਤਣ ਵਾਲੇ ਅਧਿਆਪਕ +- ਸਮੱਗਰੀ ਸਹੂਲਤਦਾਇਕ ਅਤੇ ਹੌਲੀ ਹੌਲੀ ਸਿਪਲਾਈ ਕਰਨ ਵਾਲੀ ਹੈ ### ਸਿੱਖਿਆਤਮਕ ਦਰਸ਼ਨ -- ਪ੍ਰੋਜੈਕਟ-ਆਧਾਰਿਤ ਸਿਖਲਾਈ ਅਭਿਗਮ -- ਬਾਰੰਬਾਰ ਗਿਆਨ ਦੀ ਜਾਂਚ (ਕਵਿਜ਼ਾਂ) -- ਹੱਥੋਂ-ਹੱਥ ਕੋਡਿੰਗ ਅਭਿਆਸ -- ਹਕੀਕਤੀ ਜਗਤ ਐਪਲੀਕੇਸ਼ਨ ਉਦਾਹਰਣ -- ਫਰੇਮਵਰਕ ਤੋਂ ਪਹਿਲਾਂ ਮੂਲ ਸਿਧਾਂਤਾਂ 'ਤੇ ਧਿਆਨ +- ਪ੍ਰੋਜੈਕਟ ਅਧਾਰਿਤ ਸਿੱਖਣਾ +- ਯਥਾਰਥ ਕਵਿਜ਼ +- ਹੱਥੋਂ ਕੋਡਿੰਗ ਅਭਿਆਸ +- ਅਸਲੀ ਦੁਨੀਆ ਦੇ ਉਦਾਹਰਨ +- ਫਰੇਮਵਰਕ ਤੋਂ ਪਹਿਲਾਂ ਮੂਢਲੇ ਤੱਤਾਂ ਤੇ ਧਿਆਨ -### ਰਿਪੋਜਿਟਰੀ ਰਖੜਕ +### ਰੀਪੋਜ਼ਟਰੀ ਦੇ ਸੰਭਾਲ -- ਸਿੱਖਣ ਵਾਲਿਆਂ ਅਤੇ ਯੋਗਦਾਨਕਰਤਿਆਂ ਦੀ ਸਰਗਰਮ ਕਮਿਊਨਿਟੀ -- ਨਿਰਭਰਤਾਵਾਂ ਅਤੇ ਸਮੱਗਰੀ ਦੇ ਨਿਯਮਤ ਅਪਡੇਟ -- ਮੈਨੇਜਰਾਂ ਵੱਲੋਂ ਮੁੱਦੇ ਤੇ ਚਰਚਾ ਦੀ ਨਿਗਰਾਨੀ -- GitHub ਐਕਸ਼ਨਾਂ ਨਾਲ ਤਰਜਮਿਆਂ ਦੇ ਅਪਡੇਟ ਆਟੋਮੇਟਿਕ +- ਸਰਗਰਮ ਸਿੱਖਣ ਅਤੇ ਯੋਗਦਾਨ ਦੇਣ ਵਾਲਿਆਂ ਦੀ ਕਮਿਊਨਿਟੀ +- ਨਿਰੀਖਣਯੋਗ ਤਰੀਕੇ ਨਾਲ ਡੀਪੈਂਡੇਂਸੀਜ਼ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ +- ਮੈਨਟੇਨਰਾਂ ਵੱਲੋਂ ਮੁੱਦੇ ਤੇ ਵਿਚਾਰ-ਵਟਾਂਦਰਾ ਬਰਕਰਾਰ +- GitHub ਐਕਸ਼ਨਾਂ ਰਾਹੀਂ ਅਨੁਵਾਦ ਆਟੋਮੇਟਿਕ ਅਪਡੇਟ -### ਸਬੰਧਤ ਸਾਧਨ +### ਜੁੜੇ ਸਰੋਤ -- [Microsoft Learn ਮਾਡਿਊਲ](https://docs.microsoft.com/learn/) -- [ਸਿੱਖਿਆਰਥੀ ਹੱਬ ਸਾਧਨ](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) ਸਿੱਖਿਆਰਥੀਆਂ ਲਈ ਸਿਫਾਰਸ਼ੀ -- ਹੋਰ ਕੋਰਸ: ਜਨਰੇਟਿਵ AI, ਡੇਟਾ ਸਾਇੰਸ, ML, IoT ਪਾਠਕ੍ਰਮ ਉਪਲਬਧ +- [Microsoft Learn modules](https://docs.microsoft.com/learn/) +- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) ਸਿੱਖਣ ਵਾਲਿਆਂ ਲਈ ਸਿਫ਼ਾਰਸ਼ੀ +- ਵਾਧੂ ਕੋਰਸ: ਜੈਨੇਰੇਟਿਵ AI, ਡਾਟਾ ਸਾਇੰਸ, ML, IoT ਕੋਰਸ -### ਖਾਸ ਪ੍ਰੋਜੈਕਟਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ +### ਖਾਸ ਪ੍ਰੋਜੈਕਟਾਂ ਨਾਲ ਕੰਮ -ਵਿਅਕਤੀਗਤ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਵਿਸਥਾਰ ਨਿਰਦੇਸ਼ ਲਈ ਹਵਾਲਾ README ਫਾਇਲਾਂ ਨੂੰ ਦੇਖੋ: +ਵਿਸਤ੍ਰਿਤ ਹਦਾਇਤਾਂ ਲਈ ਹਰ ਪ੍ਰੋਜੈਕਟ ਦੀ README ਵਿੱਚ ਦੇਖੋ: - `quiz-app/README.md` - Vue 3 ਕਵਿਜ਼ ਐਪਲੀਕੇਸ਼ਨ - `7-bank-project/README.md` - ਪ੍ਰਮਾਣੀਕਰਨ ਨਾਲ ਬੈਂਕਿੰਗ ਐਪਲੀਕੇਸ਼ਨ -- `5-browser-extension/README.md` - ਬਰਾਊਜ਼ਰ ਐਕਸਟੇਂਸ਼ਨ ਵਿਕਾਸ -- `6-space-game/README.md` - ਕੈਨਵੱਸ-ਆਧਾਰਿਤ ਗੇਮ ਵਿਕਾਸ +- `5-browser-extension/README.md` - ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਵਿਕਾਸ +- `6-space-game/README.md` - ਕੈਂਵਾਸ-ਆਧਾਰਿਤ ਗੇਮ - `9-chat-project/README.md` - AI ਚੈਟ ਸਹਾਇਕ ਪ੍ਰੋਜੈਕਟ -### ਮੋਨੋਰਿਪੋ ਢਾਂਚਾ +### ਮੋਨੋਰੀਪੋ ਸ਼ੈਲੀ -ਇਹ ਪ੍ਰੰਪਰਾ ਬਰਕਰਾਰ ਮੋਨੋਰਿਪੋ ਨਹੀਂ ਹੈ, ਪਰ ਇਹ ਵਿੱਚ ਕਈ ਸੁਤੰਤਰ ਪ੍ਰੋਜੈਕਟ ਹਨ: -- ਹਰ ਸਬਕ ਆਪਣਾ ਹੈ -- ਪ੍ਰੋਜੈਕਟ ਸਾਂਝੇ ਨਿਰਭਰਤਾ ਨਹੀਂ ਕਰਦੇ -- ਵੱਖ-ਵੱਖ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰੋ ਬਿਨਾਂ ਇੱਕ ਦੂਜੇ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤਾ -- ਪੂਰੇ ਪਾਠਕ੍ਰਮ ਅਨੁਭਵ ਲਈ ਪੂਰੀ ਰਿਪੋ ਕਲੋਨ ਕਰੋ +ਇਹ ਰੀਪੋਜ਼ਟਰੀ ਇੱਕ ਪਰੰਪਰਾਗਤ ਮੋਨੋਰੀਪੋ ਨਹੀਂ, ਪਰ ਇਸ ਵਿੱਚ ਕਈ ਸੁਤੰਤਰ ਪ੍ਰੋਜੈਕਟ ਸ਼ਾਮਿਲ ਹਨ: +- ਹਰ ਸਬਕ ਆਪਣੇ ਆਪ ਵਿੱਚ ਖ਼ਤਮ +- ਪ੍ਰੋਜੈਕਟ_DEPENDENCY_ਸ਼ੇਅਰ ਨਹੀਂ ਕਰਦੇ +- ਇਕੱਲੇ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰੋ ਬਿਨਾ ਹੋਰਾਂ 'ਤੇ ਅਸਰ ਪਾਇਏ +- ਪੂਰੇ ਕੋਰਸ-ਪਾਠ ਲਈ ਪੂਰੇ ਰੀਪੋਜ਼ਟਰੀ ਨੂੰ ਕਲੋਨ ਕਰੋ --- -**ਅਸਵੀਕਾਰੋ изучение**: -ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਅਤਾ ਲਈ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਰੱਖੋ ਕਿ ਆਪਣੇ-ਆਪ ਹੀ ਕੀਤੇ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸਧਾਰਨਤਾ ਹੋ ਸਕਦੀ ਹੈ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਕ ਸਰੋਤ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਜਰੂਰੀ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ਾਵਰੀ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੇ ਉਪਯੋਗ ਤੋਂ ਉਤਪੰਨ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਮੀ ਜਾਂ ਗਲਤ ਸਮਝ ਲਈ ਅਸੀਂ ਜਵਾਬਦੇਹ ਨਹੀਂ ਹਾਂ। +**ਜਾਣਕਾਰੀ ਸੂਚਨਾ**: +ਇਸ ਦਸਤਾਵੇਜ਼ ਦਾ ਅਨੁਵਾਦ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਨਾਲ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਰੱਖੋ ਕਿ ਸਵੈਚਲਿਤ ਅਨੁਵਾਦ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸਹੀਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਆਪਣੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਆਧਿਕਾਰਕ ਸੂਤਰ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਣ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ਾਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਤਪੰਨ ਕਿਸੇ ਵੀ ਗਲਤਫਹਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜਵਾਬਦੇਹ ਨਹੀਂ ਹਾਂ। \ No newline at end of file diff --git a/translations/pa/README.md b/translations/pa/README.md index 40469d631..5d9aef4eb 100644 --- a/translations/pa/README.md +++ b/translations/pa/README.md @@ -10,204 +10,213 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# ਬਿਗਿਨਰਜ਼ ਲਈ ਵੈੱਬ ਵਿਕਾਸ - ਇੱਕ ਕਰਿਕੁਲਮ +# ਬਿਗਿਨਰਾਂ ਲਈ ਵੈੱਬ ਵਿਕਾਸ - ਇੱਕ ਕੋਰਸ -Microsoft Cloud Advocates ਵਲੋਂ ਸਾਡਾ 12 ਹਫ਼ਤੇ ਦਾ ਵਿਸ਼ਤ੍ਰਿਤ ਕੋਰਸ ਨਾਲ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਮੂਲ ਤੱਤ ਸਿੱਖੋ। 24 ਪਾਠਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਜਾਵਾਸਕ੍ਰਿਪਟ, CSS, ਅਤੇ HTML ਨੂੰ ਹੱਥ-ਵਾਲੇ ਪ੍ਰੋਜੈਕਟਸ ਜਿਵੇਂ ਕਿ ਟੈਰੇਰੀਅਮ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ, ਅਤੇ ਸਪੇਸ ਗੇਮਜ਼ ਦੇ ਜ਼ਰੀਏ ਗਹਿਰਾਈ ਨਾਲ ਸਮਝਾਉਂਦਾ ਹੈ। ਕਵਿਜ਼, ਚਰਚਾ ਅਤੇ ਕਾਰਗਰ ਅਸਾਈਨਮੈਂਟਸ ਨਾਲ ਗਤੀਸ਼ੀਲ ਰੁਜ਼ਗਾਰ ਕਰੋ। ਆਪਣੀਆਂ ਹੁਨਰਾਂ ਵਿੱਚ ਸੁਧਾਰ ਕਰੋ ਅਤੇ ਸਾਡੀ ਪ੍ਰਭਾਵਸ਼ালী ਪ੍ਰੋਜੈਕਟ-ਆਧਾਰਿਤ ਪੈਡਾਗੋਜੀ ਨਾਲ ਆਪਣੀ ਜਾਣਕਾਰੀ ਦਾ ਰੀਟੇਂਸ਼ਨ ਵਧਾਓ। ਆਪਣਾ ਕੋਡਿੰਗ ਜ਼ਿੰਦਗੀ ਅੱਜ ਤੋਂ ਸ਼ੁਰੂ ਕਰੋ! +ਮਾਇਕਰੋਸਾਫਟ ਕਲਾਊਡ ਅਡਵੋਕੇਟਸ ਦੀ 12 ਹਫ਼ਤਿਆਂ ਦੀ ਵਿਸਤ੍ਰਿਤ ਕੋਰਸ ਨਾਲ ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਮੂਲ-bੁੱਤਾਂ ਸਿੱਖੋ। 24 ਪਾਠਾਂ ਵਿੱਚੋਂ ਹਰ ਇਕ ਜਾਵਾਸਕ੍ਰਿਪਟ, CSS ਅਤੇ HTML ਦਾ ਹੱਥੋਂ-ਹੱਥ ਪ੍ਰਾਜੈਕਟਾਂ ਜਿਵੇਂ ਟੇਰਾਰਿਯਮ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਅਤੇ ਅਕਾਸ਼ ਖੇਡਾਂ ਰਾਹੀਂ ਸਮਝਾਇਆ ਗਿਆ ਹੈ। ਕੁਇਜ਼, ਚਰਚਾ ਅਤੇ ਵਰਤਮਾਨ ਕਾਰਜਾਂ ਨਾਲ ਸ਼ਾਮਲ ਹੋਵੋ। ਆਪਣੀਆਂ ਕੌਸ਼ਲਾਂ ਨੂੰ ਸੁਧਾਰੋ ਅਤੇ ਸਾਡੀ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਪ੍ਰਾਜੈਕਟ-ਆਧਾਰਤ ਪਾਠ-ਕ੍ਰਮ ਵਿਧੀ ਨਾਲ ਆਪਣੀ ਜਾਣਕਾਰੀ ਨੂੰ ਬਿਹਤਰ ਬਣਾਓ। ਆਪਣੀ ਕੋਡਿੰਗ ਯਾਤਰਾ ਅੱਜ ਹੀ ਸ਼ੁਰੂ ਕਰੋ! -Azure AI Foundry Discord ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ +ਅਜ਼ੂਰ ਏਆਈ ਫਾਊਂਡਰੀ ਡਿਸਕੋਰਡ ਕਮਿਊਨਿਟੀ ਨਾਲ ਜੁੜੋ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -ਇਹ ਸ੍ਰੋਤ ਵਰਤਣ ਲਈ ਇਹ ਕਦਮ ਫੋਲੋ ਕਰੋ: -1. **ਰੀਪੋਜ਼ਟਰੀ ਫੋਰਕ ਕਰੋ**: ਕਲਿੱਕ ਕਰੋ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **ਰੀਪੋਜ਼ਟਰੀ ਕਲੋਨ ਕਰੋ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Azure AI Foundry Discord ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ ਅਤੇ ਮਾਹਿਰਾਂ ਅਤੇ ਹੋਰ ਡਿਵੈਲਪਰਾਂ ਨਾਲ ਮਿਲੋ**](https://discord.com/invite/ByRwuEEgH4) +ਇਹ ਸਾਧਨ ਵਰਤਣਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇਹਨਾਂ ਕਦਮਾਂ ਦਾ ਪਾਲਣ ਕਰੋ: +1. **ਰਿਪੋਜ਼ਟਰੀ ਫੋਰਕ ਕਰੋ**: ਕਲਿੱਕ ਕਰੋ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **ਰਿਪੋਜ਼ਟਰੀ ਕਲੋਨ ਕਰੋ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**ਅਜ਼ੂਰ ਏਆਈ ਫਾਊਂਡਰੀ ਡਿਸਕੋਰਡ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ ਅਤੇ ਮਾਹਿਰਾਂ ਅਤੇ ਹੋਰ ਵਿਕਾਸਕਾਰਾਂ ਨਾਲ ਮਿਲੋ**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 ਬਹੁਭਾਸ਼ੀ ਸਹਾਇਤਾ +### 🌐 ਬਹੁ-ਭਾਸ਼ਾ ਸਮਰਥਨ -#### GitHub Action ਰਾਹੀਂ ਸਮਰਥਿਤ (ਆਟੋਮੈਟਿਕ ਅਤੇ ਹਮੇਸ਼ਾਂ ਅਪ-ਟੂ-ਡੇਟ) +#### GitHub ਐਕਸ਼ਨ ਰਾਹੀਂ ਸਮਰਥਿਤ (ਆਟੋਮੇਟਿਕ ਅਤੇ ਹਮੇਸ਼ਾ ਅੱਪ-ਟੂ-ਡੇਟ) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](./README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **ਕੀ ਤੁਸੀਂ ਲੋਕਲ ਤੌਰ 'ਤੇ ਕਲੋਨ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ?** - -> ਇਸ ਰੀਪੋਜ਼ਟਰੀ ਵਿੱਚ 50+ ਭਾਸ਼ਾਈ ਅਨੁਵਾਦ ਸ਼ਾਮਿਲ ਹਨ ਜੋ ਡਾਊਨਲੋਡ ਆਕਾਰ ਨੂੰ ਕਾਫੀ ਵਧਾ ਦਿੰਦੇ ਹਨ। ਬਿਨਾ ਅਨੁਵਾਦ ਦੇ ਕਲੋਨ ਕਰਨ ਲਈ, sparse checkout ਵਰਤੋਂ ਕਰੋ: +> **ਕੀ ਤੁਸੀਂ ਲੋਕਲੀ ਕਲੋਨ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ?** +> +> ਇਸ ਰਿਪੋਜ਼ਟਰੀ ਵਿੱਚ 50+ ਭਾਸ਼ਾ ਅਨੁਵਾਦ ਸ਼ਾਮਲ ਹਨ ਜੋ ਡਾਊਨਲੋਡ ਸਾਈਜ਼ ਨੂੰ ਬਹੁਤ ਵਧਾ ਦਿੰਦੇ ਹਨ। ਬਿਨਾਂ ਅਨੁਵਾਦਾਂ ਦੇ ਕਲੋਨ ਕਰਨ ਲਈ ਸਪਾਰਸ ਚੈੱਕਆਊਟ ਵਰਤੋ: +> +> **ਬਾਸ਼ / ਮੈਕਓਐਸ / ਲਿਨਕਸ:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> ਇਹ ਤੁਹਾਨੂੰ ਉਹ ਸਾਰਾ ਕੁਝ ਦਿੰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਕੋਰਸ ਪੂਰਾ ਕਰਨ ਲਈ ਚਾਹੀਦਾ ਹੈ, ਬਹੁਤ ਤੇਜ਼ ਡਾਊਨਲੋਡ ਦੇ ਨਾਲ। +> +> **ਕਮਾਂਡ ਪ੍ਰਾਂਪਟ (ਵਿੰਡੋਜ਼):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> ਇਹ ਤੁਹਾਨੂੰ ਇੱਕ ਤੇਜ਼ ਡਾਊਨਲੋਡ ਨਾਲ ਪੂਰਾ ਕੋਰਸ ਮੁਹੱਈਆ ਕਰਵਾਉਂਦਾ ਹੈ। -**ਜੇ ਤੁਸੀਂ ਹੋਰ ਅਨੁਵਾਦ ਭਾਸ਼ਾਵਾਂ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਸਮਰਥਿਤ ਹਨ ਉਹ [ਇੱਥੇ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) ਦਿੱਖਾਈ ਗਈਆਂ ਹਨ** +**ਜੇ ਤੁਸੀਂ ਹੋਰ ਅਨੁਵਾਦ ਭਾਸ਼ਾਵਾਂ ਦਾ ਸਮਰਥਨ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਇਹਥੇ ਲਿਸਟ ਕੀਤਾ ਗਿਆ ਹੈ [https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _ਕੀ ਤੁਸੀਂ ਵਿਦਿਆਰਥੀ ਹੋ?_ -[**Student Hub ਪੇਜ਼**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਜਾਓ ਜਿੱਥੇ ਤੁਸੀਂ ਬਿਗਿਨਰ ਸੰਸਾਧਨ, ਵਿਦਿਆਰਥੀ ਪੈਕ ਅਤੇ ਇੱਥੇ ਤੱਕ ਕਿ ਮੁਫ਼ਤ ਸਰਟੀਫਿਕੇਟ ਵੌਉਚਰ ਪ੍ਰਾਪਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਲੱਭੋਗੇ। ਇਹ ਉਹ ਪੇਜ਼ ਹੈ ਜਿਸਨੂੰ ਤੁਹਾਨੂੰ ਬੁੱਕਮਾਰਕ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਸਮੇਂ-ਸਮੇਂ 'ਤੇ ਵੇਖਦੇ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਹਰ ਮਹੀਨੇ ਸਮੱਗਰੀ ਬਦਲਦੇ ਹਾਂ। +ਜਾਓ [**ਵਿਦਿਆਰਥੀ ਹੱਬ ਪੇਜ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਬਿਗਿਨਰ ਸਰੋਤ, ਵਿਦਿਆਰਥੀ ਪੈਕ ਅਤੇ ਮੁਫ਼ਤ ਸਰਟੀਫਿਕੇਟ ਵਾਊਚਰ ਮਿਲ ਸਕਦੇ ਹਨ। ਇਹ ਉਹ ਪੇਜ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਬੁੱਕਮਾਰਕ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਸਮੇਂ-ਸਮੇਂ ਤੇ ਦੇਖਦੇ ਰਹੋ ਕਿਉਂਕਿ ਅਸੀਂ ਮਹੀਨਾਵਾਰ ਸਮੱਗਰੀ ਬਦਲਦੇ ਹਾਂ। -### 📣 ਐਲਾਨ - ਨਵੇਂ GitHub Copilot Agent ਮੋਡ ਚੈਲੰਜ ਪੂਰੇ ਕਰੋ! +### 📣 ਸੂਚਨਾ - ਨਵੇਂ GitHub Copilot Agent ਮੋਡ ਚੈਲੈਂਜ ਮੁਕੰਮਲ ਕਰਨ ਲਈ! -ਨਵਾਂ ਚੈਲੰਜ ਸ਼ਾਮਿਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਜ਼ਿਆਦਾਤਰ ਅਧਿਆਇਆਂ ਵਿੱਚ "GitHub Copilot Agent Challenge 🚀" ਲੱਭੋ। ਇਹ ਤੁਹਾਡੇ ਲਈ GitHub Copilot ਅਤੇ Agent ਮੋਡ ਵਰਤ ਕੇ ਪੂਰਾ ਕਰਨ ਲਈ ਨਵਾਂ ਚੈਲੰਜ ਹੈ। ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ Agent ਮੋਡ ਨਹੀਂ ਵਰਤਿਆ ਤਾਂ ਇਹ ਸਿਰਫ ਟੈਕਸਟ ਤਿਆਰ ਕਰਨ ਵਾਲਾ ਹੀ ਨਹੀਂ, ਸਗੋਂ ਫਾਈਲਾਂ ਬਣਾਉਣ ਅਤੇ ਸੋਧਣ, ਕਮਾਂਡ ਰਨ ਕਰਨ ਅਤੇ ਹੋਰ ਵੀ ਕਰ ਸਕਦਾ ਹੈ। +ਨਵਾਂ ਚੈਲੈਂਜ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ, ਜ਼ਿਆਦਾਤਰ ਅਧਿਆਇਆਂ ਵਿੱਚ "GitHub Copilot Agent Challenge 🚀" ਖੋਜੋ। ਇਹ ਇੱਕ ਨਵਾਂ ਚੈਲੈਂਜ ਹੈ ਜੋ ਤੁਹਾਨੂੰ GitHub Copilot ਅਤੇ Agent ਮੋਡ ਵਰਤ ਕੇ ਮੁਕੰਮਲ ਕਰਨਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ Agent ਮੋਡ ਨਹੀਂ ਵਰਤੀ, ਇਹ ਕੇਵਲ ਟੈਕਸਟ ਤਿਆਰ ਨਹੀਂ ਕਰਦਾ ਪਰ ਫਾਇਲਾਂ ਬਣਾਉਣ, ਸੋਧਣ, ਕਮਾਂਡ ਚਲਾਉਣ ਅਤੇ ਹੋਰ ਵੀ ਕਰ ਸਕਦਾ ਹੈ। -### 📣 ਐਲਾਨ - _Generative AI ਵਰਤ ਕੇ ਨਵਾਂ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ_ +### 📣 ਸੂਚਨਾ - _ਨਵਾਂ ਪ੍ਰਾਜੈਕਟ Generative AI ਦੀ ਵਰਤੋਂ ਨਾਲ ਬਣਾਉਣ ਲਈ_ -ਨਵਾਂ AI Assistant ਪ੍ਰੋਜੈਕਟ ਅਬ ਸ਼ਾਮਿਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਾਓ ਅਤੇ ਦੇਖੋ [project](./9-chat-project/README.md) +ਨਵਾਂ AI ਸਹਾਇਕ ਪ੍ਰਾਜੈਕਟ ਹਾਲ ਹੀ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ, ਇਸ ਪ੍ਰਾਜੈਕਟ ਨੂੰ ਦੇਖੋ [project](./9-chat-project/README.md) -### 📣 ਐਲਾਨ - _JavaScript ਲਈ ਨਵਾਂ Generative AI ਕਰਿਕੁਲਮ ਜਾਰੀ ਹੋਇਆ ਹੈ_ +### 📣 ਸੂਚਨਾ - _Generative AI ਲਈ ਨਵਾਂ ਕੋਰਸ_ ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਈ ਹੁਣ ਜਾਰੀ -ਸਾਡਾ ਨਵਾਂ Generative AI ਕਰਿਕੁਲਮ ਨਾ ਗਵਾਓ! +ਸਾਡੇ ਨਵੇਂ Generative AI ਕੋਰਸ ਨੂੰ ਨਾ ਗਵਾਓ! ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਜਾਓ [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! -![Background](../../translated_images/pa/background.148a8d43afde5730.webp) +![ਪਿਛੋਕੜ](../../translated_images/pa/background.148a8d43afde5730.webp) -- ਬੇਸਿਕ ਤੋਂ ਲੈ ਕੇ RAG ਤੱਕ ਸਭ ਕੁਝ ਸਮੇਤ ਪਾਠ। -- ਇਤਿਹਾਸਕ ਪਾਤਰਾਂ ਨਾਲ GenAI ਅਤੇ ਸਾਡੇ ਸਾਥੀ ਐਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਗੱਲਬਾਤ ਕਰੋ। -- ਮਜ਼ੇਦਾਰ ਅਤੇ ਮਨੋਹਰ ਕਥਾ, ਤੁਸੀਂ ਸਮਾਂ ਯਾਤਰਾ ਕਰ ਰਹੇ ਹੋਗੇ! +- ਬੁਨਿਆਦੀ ਤੋਂ ਲੈ ਕੇ RAG ਤੱਕ ਹਰ ਗੱਲ ਕਵਰ ਕੀਤੀ ਗਈ ਹੈ। +- ਇਤਿਹਾਸਕ ਪਾਤਰਾਂ ਨਾਲ GenAI ਅਤੇ ਸਾਡੇ ਸਾਥੀ ਐਪ ਰਾਹੀਂ ਇੰਟਰੈਕਟ ਕਰੋ। +- ਮਜ਼ੇਦਾਰ ਅਤੇ ਰੁਚਿਕਰ ਕਥਾਵਾਂ, ਤੁਸੀਂ ਸਮੇਂ ਦੀ ਯਾਤਰਾ ਕਰੋਗੇ! -![character](../../translated_images/pa/character.5c0dd8e067ffd693.webp) +![ਪਾਤਰ](../../translated_images/pa/character.5c0dd8e067ffd693.webp) -ਹਰ ਪਾਠ ਵਿੱਚ ਇੱਕ ਅਸਾਈਨਮੈਂਟ, ਗਿਆਨ ਚੈਕ ਅਤੇ ਚੈਲੰਜ ਸ਼ਾਮਿਲ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਸਿੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ: -- ਪ੍ਰਾਮਪਟਿੰਗ ਅਤੇ ਪ੍ਰਾਮਪਟ ਇੰਜੀਨੀਅਰਿੰਗ +ਹਰ ਪਾਠ ਵਿੱਚ ਇਕ ਅਸਾਈਨਮੈਂਟ, ਗਿਆਨ ਚੈੱਕ ਅਤੇ ਚੈਲੈਂਜ ਸ਼ਾਮਲ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸਿਖਾਉਂਦਾ ਹੈ: +- ਪ੍ਰੰਪਟਿੰਗ ਅਤੇ ਪ੍ਰੰਪਟ ਇੰਜੀਨੀਅਰਿੰਗ - ਟੈਕਸਟ ਅਤੇ ਚਿੱਤਰ ਐਪ ਤਿਆਰ ਕਰਨਾ -- ਖੋਜ ਐਪਸ +- ਖੋਜ ਐਪ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਜਾਓ [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! -## 🌱 ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ +## 🌱 ਸ਼ੁਰੂਆਤ -> **ਅਧਿਆਪਕਾਂ ਲਈ**, ਅਸੀਂ [ਕੁਝ ਸੁਧਾਰ](for-teachers.md) ਸ਼ਾਮਿਲ ਕੀਤੇ ਹਨ ਕਿ ਇਸ ਕਰਿਕੁਲਮ ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ। ਅਸੀਂ ਤੁਹਾਡੇ ਫੀਡਬੈਕ ਦਾ ਇੰਤਜ਼ਾਰ ਕਰਾਂਗੇ [ਸਾਡੇ ਚਰਚਾ ਫੋਰਮ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) ਵਿੱਚ)! +> **ਅਧਿਆਪਕ**, ਅਸੀਂ [ਕੁਝ ਸੁਝਾਵ](for-teachers.md) ਦਿੱਤੇ ਹਨ ਕਿ ਇਸ ਕੋਰਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ। ਤੁਹਾਡੀ ਰਾਇ ਦੀ ਉਡੀਕ ਹੈ [ਸਾਡੇ ਚਰਚਾ ਫੋਰਮ ਵਿੱਚ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[ਸਿੱਖਣ ਵਾਲੇ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ਹਰ ਪਾਠ ਲਈ, ਪਹਿਲਾਂ ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਅਤੇ ਫਿਰ ਲੈਕਚਰ ਸਮੱਗਰੀ ਪੜ੍ਹੋ, ਵੱਖ-ਵੱਖ ਗਤੀਵਿਧੀਆਂ ਪੂਰੀਆਂ ਕਰੋ ਅਤੇ ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼ ਨਾਲ ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ। +**[ਵਿਦਿਆਰਥੀ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ਹਰ ਪਾਠ ਲਈ, ਪਹਿਲਾਂ ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਅਤੇ ਲੈਕਚਰ ਦਿੱਤੀ ਸਮੱਗਰੀ ਪੜ੍ਹੋ, ਵੱਖ-ਵੱਖ ਕਿਰਿਆਵਾਂ ਪੂਰੀਆਂ ਕਰੋ ਅਤੇ ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼ ਨਾਲ ਆਪਣੀ ਸਮਝ ਨੂੰ ਪਰਖੋ। -ਆਪਣੇ ਸਿੱਖਣ ਦੇ ਤਜ਼ਰਬੇ ਨੂੰ ਬਹਿਤਰ ਬਣਾਉਣ ਲਈ, ਆਪਣਿਆਂ ਸਾਥੀਆਂ ਨਾਲ ਮਿਲ ਕੇ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰੋ! ਚਰਚਾ ਲਈ ਸਾਡੇ [ਚਰਚਾ ਫੋਰਮ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ਦਾ ਸਦਕਾ ਲਵੋ ਜਿੱਥੇ ਸਾਡੇ ਮਾਡਰੇਟਰ ਟੀਮ ਤੁਹਾਡੇ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦੇਣ ਲਈ ਉਪਲਬਧ ਹੋਵੇਗੀ। +ਆਪਣੇ ਸਿੱਖਣ ਦੇ ਤਜ਼ੁਰਬੇ ਨੂੰ ਬਿਹਤਰ ਕਰਨ ਲਈ, ਆਪਣੇ ਸਾਥੀਆਂ ਨਾਲ ਮਿਲ ਕੇ ਪ੍ਰਾਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰੋ! ਚਰਚਾ ਲਈ ਸਾਡਾ [ਚਰਚਾ ਫੋਰਮ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ਵਰਤੋ ਜਿੱਥੇ ਸਾਡੇ ਮੋਡਰੇਟਰ ਤੁਹਾਡੇ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦੇਣ ਦੇ ਲਈ ਉਪਲਬਧ ਹੋਣਗੇ। -ਆਪਣੀ ਸਿੱਖਿਆ ਨੂੰ ਅਗੇ ਵਧਾਉਣ ਲਈ, ਅਸੀਂ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਹੋਰ ਅਧਿਐਨ ਸਮੱਗਰੀ ਖੋਜਣ ਦੀ ਬਲੈਕ ਸਿਫ਼ਾਰਸ਼ ਕਰਦੇ ਹਾਂ। +ਆਪਣੀ ਸਿੱਖਿਆ ਨੂੰ ਹੋਰ ਅੱਗੇ ਵਧਾਉਣ ਲਈ, ਅਸੀਂ ਸਿਫਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ਤੋਂ ਵਾਧੂ ਪਾਠ-ਸਮੱਗਰੀ ਖੋਜੋ। -### 📋 ਆਪਣਾ ਵਾਤਾਵਰਣ ਸੈਟ ਅਪ ਕਰਨਾ +### 📋 ਆਪਣੇ ਮਾਹੌਲ ਦੀ ਸੈਟਅਪਿੰਗ -ਇਸ ਕਰਿਕੁਲਮ ਲਈ ਇੱਕ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਤਿਆਰ ਹੈ! ਜਦੋਂ ਤੁਸੀਂ ਸ਼ੁਰੂ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਇਸ ਕਰਿਕੁਲਮ ਨੂੰ [Codespace](https://github.com/features/codespaces/) (ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਿਤ, ਬਿਨਾ ਸਥਾਪਨਾ ਵਾਲਾ ਵਾਤਾਵਰਣ) ਵਿੱਚ ਜਾਂ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਕਿਸੇ ਟੈਕਸਟ ਐਡੀਟਰ ਜਿਵੇਂ ਕਿ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਨਾਲ ਹਲ ਕਰ ਸਕਦੇ ਹੋ। +ਇਸ ਕੋਰਸ ਲਈ ਇੱਕ ਵਿਕਾਸ ਮਾਹੌਲ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ! ਜਦੋਂ ਤੁਸੀਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਕੋਰਸ ਨੂੰ [Codespace](https://github.com/features/codespaces/) ਵਿੱਚ ਚਲਾ ਸਕਦੇ ਹੋ (_ਇੱਕ ਬ੍ਰਾਉਜ਼ਰ-ਆਧਾਰਿਤ, ਕੋਈ ਇੰਸਟਾਲੇਸ਼ਨ ਨਾ ਚਾਹੀਦੀ ਮਾਹੌਲ_), ਜਾਂ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਵਰਗੇ ਟੈਕਸਟ ਐਡੀਟਰ ਨਾਲ ਚਲਾ ਸਕਦੇ ਹੋ। -#### ਆਪਣਾ ਰੀਪੋਜ਼ਟਰੀ ਬਣਾਓ -ਆਪਣਾ ਕੰਮ ਬਚਾਉਣ ਲਈ, ਸਿਫ਼ਾਰਸ਼ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸ ਰੀਪੋਜ਼ਟਰੀ ਦੀ ਆਪਣੀ ਕਾਪੀ ਬਣਾਓ। ਤੁਸੀਂ ਇਹ ਕਰ ਸਕਦੇ ਹੋ ਸਫ਼ੇ ਦੇ ਉੱਪਰ ਦਿੱਖ ਰਹੇ **Use this template** ਬਟਨ ਨੂੰ ਦਬਾ ਕੇ। ਇਸ ਨਾਲ ਤੁਹਾਡੇ GitHub ਖਾਤੇ ਵਿੱਚ ਇਸ ਕਰਿਕੁਲਮ ਦੀ ਕਾਪੀ ਨਾਲ ਇੱਕ ਨਵਾਂ ਰੀਪੋਜ਼ਟਰੀ ਬਣੇਗਾ। +#### ਆਪਣਾ ਰਿਪੋਜ਼ਟਰੀ ਬਣਾਓ +ਆਪਣਾ ਕੰਮ ਬਚਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਲਈ ਇਸ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਆਪਣੀ ਕਾਪੀ ਬਣਾਉਣੀ ਚਾਹੀਦੀ ਹੈ। ਇਹ ਤੁਸੀਂ ਸਫੇ ਦੇ ਉੱਪਰ "Use this template" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰ ਕੇ ਕਰ ਸਕਦੇ ਹੋ। ਇਸ ਨਾਲ ਤੁਹਾਡੇ GitHub ਖਾਤੇ ਵਿੱਚ ਕੋਰਸ ਦੀ ਇੱਕ ਕਾਪੀ ਨਾਲ ਨਵੀਂ ਰਿਪੋਜ਼ਟਰੀ ਬਣ ਜਾਵੇਗੀ। -ਇਹ ਕਦਮ ਫੋਲੋ ਕਰੋ: -1. **ਰੀਪੋਜ਼ਟਰੀ ਫੋਰਕ ਕਰੋ**: ਇੱਥੇ ਸਫ਼ੇ ਦੇ ਸੱਜੇ-ਧਰ ਕੌਨੇ ਵਿੱਚ "Fork" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। -2. **ਰੀਪੋਜ਼ਟਰੀ ਕਲੋਨ ਕਰੋ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ: +1. **ਰਿਪੋਜ਼ਟਰੀ ਫੋਰਕ ਕਰੋ**: ਇਸ ਸਫੇ ਦੇ ਸੱਜੇ-ਉੱਤਰ ਕੋਨੇ 'ਤੇ "Fork" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। +2. **ਰਿਪੋਜ਼ਟਰੀ ਕਲੋਨ ਕਰੋ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Codespace ਵਿੱਚ ਕਰਿਕੁਲਮ ਚਲਾਉਣਾ +#### Codespace ਵਿੱਚ ਕੋਰਸ ਚਲਾਉਣਾ -ਆਪਣੀ ਬਣਾਈ ਹੋਈ ਕਾਪੀ ਵਿੱਚ, **Code** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ **Open with Codespaces** ਚੁਣੋ। ਇਸ ਨਾਲ ਤੁਹਾਡੇ ਲਈ ਇੱਕ ਨਵਾਂ Codespace ਬਣੇਗਾ ਜਿੱਥੇ ਤੁਸੀਂ ਕੰਮ ਕਰ ਸਕੋਗੇ। +ਆਪਣੀ ਬਣਾਈ ਹੋਈ ਕਾਪੀ ਵਿੱਚ **Code** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ **Open with Codespaces** ਚੁਣੋ। ਇਹ ਤੁਹਾਡੇ ਲਈ ਨਵਾਂ Codespace ਬਣਾਏਗਾ। ![Codespace](../../translated_images/pa/createcodespace.0238bbf4d7a8d955.webp) -#### ਆਪਣੇ ਕੰਪਿਊਟਰ ‘ਤੇ ਕਰਿਕੁਲਮ ਚਲਾਉਣਾ - -ਇਸ ਕਰਿਕੁਲਮ ਨੂੰ ਆਪਣੇ ਕੰਪਿਊਟਰ ‘ਤੇ ਚਲਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਇੱਕ ਟੈਕਸਟ ਐਡੀਟਰ, ਇਕ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਇਕ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਸਾਡਾ ਪਹਿਲਾ ਪਾਠ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ਤੁਹਾਡੇ ਲਈ ਹਰ ਕਿਸਮ ਦੇ ਇਸ ਟੂਲ ਦੀਆਂ ਵਿਕਲਪ ਸਪੱਸਟ ਕੀਤਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਚੁਣ ਸਕੋ। +#### ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਕੋਰਸ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਚਲਾਉਣਾ -ਸਾਡੀ ਸਿਫਾਰਸ਼ ਹੈ ਕਿ ਤੁਸੀਂ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਵਰਤੋਂ, ਜਿਸ ਵਿੱਚ ਇੱਕ ਬਿਲਟ-ਇਨ [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ਵੀ ਹੈ। ਤੁਸੀਂ Visual Studio Code ਨੂੰ [ਇੱਥੇ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਤੋਂ ਡਾਊਨਲੋਡ ਕਰ ਸਕਦੇ ਹੋ। +ਇਸ ਕੋਰਸ ਨੂੰ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਚਲਾਉਣ ਲਈ ਤੁਹਾਨੂੰ ਇੱਕ ਟੈਕਸਟ ਐਡੀਟਰ, ਬ੍ਰਾਉਜ਼ਰ ਅਤੇ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਸਾਡੀ ਪਹਿਲੀ ਪਾਠ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਹੜਾ ਸਧਾਰਨ ਅਤੇ ਵਧੀਆ ਹੈ, ਚੁਣਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗੀ। - -1. ਆਪਣਾ ਰੀਪੋਜ਼ਟਰੀ ਆਪਣੇ ਕੰਪਿਊਟਰ ਤੇ ਕਲੋਨ ਕਰੋ। ਤੁਸੀਂ ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਕਰ ਸਕਦੇ ਹੋ ਕਿ **Code** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ URL ਦੀ ਨਕਲ ਕਰੋ: +ਸਾਡੀ ਸਿਫਾਰਿਸ਼ ਹੈ ਕਿ ਤੁਸੀਂ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਵਰਤੋਂ, ਜਿਸ ਵਿੱਚ ਇਕ ਇੱਕीक੍ਰਿਤ [ਟਰਮੀਨਲ](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ਵੀ ਹੈ। ਤੁਸੀਂ Visual Studio Code ਨੂੰ [ਇੱਥੇ ਡਾਊਨਲੋਡ ਕਰ ਸਕਦੇ ਹੋ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)। +1. ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਆਪਣਾ ਰਿਪੋਜ਼ਿਟਰੀ ਕਲੋਨ ਕਰੋ। ਤੁਸੀਂ ਇਹ **Code** ਬਟਨ ਤੇ ਕਲਿਕ ਕਰਕੇ ਅਤੇ URL ਕਾਪੀ ਕਰਕੇ ਕਰ ਸਕਦੇ ਹੋ: [CodeSpace](./images/createcodespace.png) - ਫਿਰ, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਵਿੱਚ [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ਖੋਲ੍ਹੋ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤਾ ਕਮਾਂਡ ਚਲਾਓ, `` ਨੂੰ ਉਸ URL ਨਾਲ ਬਦਲਦੇ ਹੋਏ ਜੋ ਤੁਸੀਂ ਹੁਣੀ ਕਾਪੀ ਕੀਤਾ ਹੈ: + + ਫਿਰ, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਵਿੱਚ [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ਖੋਲ੍ਹੋ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤਾ ਕਮਾਂਡ ਚਲਾਓ, ਆਪਣੀ ਕਾਪੀ ਕੀਤੀ URL, `` ਨਾਲ ਬਦਲਦਿਆਂ: ```bash git clone ``` -2. Visual Studio Code ਵਿੱਚ ਫੋਲਡਰ ਖੋਲ੍ਹੋ। ਤੁਸੀਂ ਇਹ **File** > **Open Folder** 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਅਤੇ ਤੁਸੀਂ ਹੁਣੀ ਕਲੋਨ ਕੀਤਾ ਫੋਲਡਰ ਚੁਣ ਕੇ ਕਰ ਸਕਦੇ ਹੋ। +2. Visual Studio Code ਵਿੱਚ ਫੋਲਡਰ ਖੋਲ੍ਹੋ। ਤੁਸੀਂ ਇਹ **File** > **Open Folder** 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਅਤੇ ਹੁਣੇ ਕਲੋਨ ਕੀਤਾ ਫੋਲਡਰ ਚੁਣ ਕੇ ਕਰ ਸਕਦੇ ਹੋ। -> ਸਿਫਾਰਸ਼ੀ Visual Studio Code ਐਕਸਟੈਂਸ਼ਨ: +> ਸਿਫਾਰਸ਼ ਕੀਤੀਆਂ Visual Studio Code ਏਕਸਟੀੰਸ਼ਨ: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code ਵਿੱਚ HTML ਪੰਨਿਆਂ ਦਾ ਪ੍ਰੀਵਿਊ ਕਰਨ ਲਈ -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਲਿਖਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - ਤੁਹਾਡੀ ਕੋਡ ਲਿਖਣ ਵਿੱਚ ਤੇਜ਼ੀ ਲਈ ਸਹਾਇਤਾ ਕਰਨ ਲਈ -## 📂 ਹਰ ਸਬਕ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ: +## 📂 ਹਰ ਪਾਠ ਵਿੱਚ ਸ਼ਾਮਿਲ ਹੈ: - ਵਿਕਲਪਿਕ ਸਕੈਚਨੋਟ - ਵਿਕਲਪਿਕ ਸਹਾਇਕ ਵੀਡੀਓ -- ਪੂਰਵ ਸਬਕ ਵਾਰਮਅਪ ਕੁਇਜ਼ -- ਲਿਖਤੀ ਸਬਕ -- ਪ੍ਰੋਜੈਕਟ ਅਧਾਰਿਤ ਸਬਕਾਂ ਲਈ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣ ਬਾਰੇ ਕਦਮ-ਦਰ-ਕਦਮ ਗਾਈਡਜ਼ -- ਗਿਆਨ ਜਾਂਚਾਂ -- ਇੱਕ ਚੈਲੈਂਜ -- ਸਹਾਇਕ ਪੜ੍ਹਾਈ +- ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਵਾਲਾ ਵਾਰਮਅਪ ਕਵਿਜ਼ +- ਲਿਖਿਤ ਪਾਠ +- ਪ੍ਰਾਜੈਕਟ-ਅਧਾਰਿਤ ਪਾਠਾਂ ਲਈ, ਪ੍ਰਾਜੈਕਟ ਬਣਾਉਣ ਲਈ ਕਦਮ-ਦਰ-कਦਮ ਮਾਰਗਦਰਸ਼ਿਕਾਵਾਂ +- ਗਿਆਨ ਦੀ ਜਾਂਚ +- ਇੱਕ ਚੁਣੌਤੀ +- ਸਹਾਇਕ ਪਾਠਨ - ਅਸਾਈਨਮੈਂਟ -- [ਪੋਸਟ-ਸਬਕ ਕੁਇਜ਼](https://ff-quizzes.netlify.app/web/) +- [ਪਾਠ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/) -> **ਕੁਇਜ਼ ਬਾਰੇ ਇੱਕ ਨੋਟ**: ਸਾਰੇ ਕੁਇਜ਼ Quiz-app ਫੋਲਡਰ ਵਿੱਚ ਹਨ, ਟੋਟਲ 48 ਕੁਇਜ਼ ਪ੍ਰਤੀ ਕਿੱਸੇ 3 ਸਵਾਲਾਂ ਨਾਲ। ਇਹ [ਇਥੇ](https://ff-quizzes.netlify.app/web/) ਉਪਲਬਧ ਹਨ। ਕੁਇਜ਼ ਐਪ ਨੂੰ ਲੋਕਲੀ ਚਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਜਾਂ Azure 'ਤੇ ਡਿਪਲੌਇ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; `quiz-app` ਫੋਲਡਰ ਵਿੱਚ ਦਿੱਤੀਆਂ ਹਦਾਇਤਾਂ ਦਾ ਪਾਲਣ ਕਰੋ। +> **ਕਵਿਜ਼ ਬਾਰੇ ਇੱਕ ਨੋਟ**: ਸਾਰੇ ਕਵਿਜ਼, Quiz-app ਫੋਲਡਰ ਵਿੱਚ ਹਨ, ਜਿਸ ਵਿੱਚ ਹਰ ਇੱਕ ਵਿੱਚ 3 ਸਵਾਲਾਂ ਦੇ 48 ਕੁੱਲ ਕਵਿਜ਼ ਹਨ। ਉਹ ਉਪਲਬਧ ਹਨ [ਇੱਥੇ](https://ff-quizzes.netlify.app/web/)। ਕਵਿਜ਼ ਐਪ ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਚਲਾਇਆ ਜਾਂ ਸਕਦਾ ਹੈ ਜਾਂ Azure ਤੇ ਤਾਇਨਾਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; `quiz-app` ਫੋਲਡਰ ਵਿੱਚ ਦਿੱਤੇ ਹਿਦਾਇਤਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ। -## 🗃️ ਸਬਕ +## 🗃️ ਪਾਠ -| | ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ | ਸਿੱਖਾਏ ਗਏ ਸਿਧਾਂਤ | ਸਿੱਖਣ ਦੇ ਲਕੜੇ | ਲਿੰਕਡ ਸਬਕ | ਲੇਖਕ | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | ਸ਼ੁਰੂਆਤ ਕਰਨਾ | ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਅਤੇ ਉਪਕਰਣਾਂ ਦਾ ਪਰਚਿਆ | ਜ਼ਿਆਦਾਤਰ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਦੇ ਮੂਲ ਸਿਧਾਂਤ ਅਤੇ ਸਾਫਟਵੇਅਰ ਬਾਰੇ ਸਿੱਖੋ ਜੋ ਪ੍ਰੋਫੈਸ਼ਨਲ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਕੰਮ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ਜੈਸਮੀਨ | -| 02 | ਸ਼ੁਰੂਆਤ ਕਰਨਾ | GitHub ਦਾ ਮੂਲ, ਟੀਮ ਨਾਲ ਕੰਮ ਕਰਨ ਸਮੇਤ | ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ GitHub ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ, ਵੱਖ-ਵੱਖ ਲੋਕਾਂ ਨਾਲ ਕੋਡ ਬੇਸ ਤੇ ਸਹਿਯੋਗ ਕਿਵੇਂ ਕਰਨਾ ਹੈ | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | ਫਲੋਰ | -| 03 | ਸ਼ੁਰੂਆਤ ਕਰਨਾ | ਪਹੁੰਚਯੋਗਤਾ | ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਦੀਆਂ ਬੁਨਿਆਦੀ ਜਾਣਕਾਰੀਆਂ ਸਿੱਖੋ | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | ਕ੍ਰਿਸਟੋਫਰ | -| 04 | JS ਬੁਨਿਆਦੀ | ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਕਿਸਮਾਂ | ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਕਿਸਮਾਂ ਦੀ ਬੁਨਿਆਦ | [Data Types](./2-js-basics/1-data-types/README.md) | ਜੈਸਮੀਨ | -| 05 | JS ਬੁਨਿਆਦੀ | ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡ | ਫੰਕਸ਼ਨਾਂ ਅਤੇ ਮੈਥਡਾਂ ਬਾਰੇ ਸਿੱਖੋ ਜਿਹੜੇ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਲਾਜਿਕ ਫ਼ਲੋ ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | ਜੈਸਮੀਨ ਅਤੇ ਕ੍ਰਿਸਟੋਫਰ | -| 06 | JS ਬੁਨਿਆਦੀ | JS ਨਾਲ ਫੈਸਲੇ ਲੈਣਾ | ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਫੈਸਲੇ ਲੈਣ ਵਾਲੀਆਂ ਸ਼ਰਤਾਂ ਬਣਾਉਣਾ ਸਿੱਖੋ | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | ਜੈਸਮੀਨ | -| 07 | JS ਬੁਨਿਆਦੀ | ਐਰੇ ਅਤੇ ਲੂਪ | ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਐਰੇ ਅਤੇ ਲੂਪ ਵਰਤ ਕੇ ਡਾਟਾ ਨਾਲ ਕੰਮ ਕਰਨਾ | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | ਜੈਸਮੀਨ | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ਦਾ ਅਭਿਆਸ | ਇੱਕ ਔਨਲਾਈਨ ਟੇਰਾਰਿਯਮ ਬਣਾਉਣ ਲਈ HTML ਤਿਆਰ ਕਰੋ, ਖਾਸ ਕਰਕੇ ਲੇਆਊਟ ਬਣਾਉਣ 'ਤੇ ਧਿਆਨ | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | ਜਿਨ | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS ਦਾ ਅਭਿਆਸ | ਔਨਲਾਈਨ ਟੇਰਾਰਿਯਮ ਨੂੰ ਸਜਾਉਣ ਲਈ CSS ਬਣਾਉਣ 'ਤੇ ਧਿਆਨ ਦਿੰਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਸੀਐਸਐਸ ਦੀਆਂ ਮੂਲ ਗੱਲਾਂ ਸ਼ਾਮਲ ਹਨ ਅਤੇ ਪੇਜ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਉਣਾ ਹੁੰਦਾ ਹੈ | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | ਜਿਨ | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ, ਡੋਮ ਮੈਨਿਪੂਲੇਸ਼ਨ | ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਓ ਜੋ ਟੇਰਾਰਿਯਮ ਨੂੰ ਡ੍ਰੈਗ/ਡ੍ਰਾਪ ਇੰਟਰਫੇਸ ਵਾਂਗ ਕੰਮ ਕਰਵਾਏ, ਕਲੋਜ਼ਰ ਅਤੇ ਡੋਮ ਮੈਨਿਪੂਲੇਸ਼ਨ 'ਤੇ ਧਿਆਨ | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | ਜਿਨ | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | ਟਾਇਪਿੰਗ ਗੇਮ ਬਣਾਉਣਾ | ਆਪਣੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਐਪ ਦੀ ਲਾਜਿਕ ਚਲਾਉਣ ਲਈ ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਸਿੱਖੋ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | ਕ੍ਰਿਸਟੋਫਰ | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ਬ੍ਰਾਊਜ਼ਰ ਨਾਲ ਕੰਮ ਕਰਨਾ | ਬ੍ਰਾਊਜ਼ਰ ਕਿਸ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਉਨ੍ਹਾਂ ਦਾ ਇਤਿਹਾਸ ਅਤੇ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਨਸ਼ਨ ਦੇ ਪਹਿਲੇ ਢਾਂਚੇ ਨੂੰ ਬਣਾ ਰਹੇ ਹਨ ਸਿੱਖੋ | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | ਜਿਨ | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ਫਾਰਮ ਬਣਾਉਣਾ, API ਕਾਲ ਕਰਨਾ ਅਤੇ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਵੈਰੀਏਬਲ ਸਟੋਰ ਕਰਨਾ | ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੱਤ ਬਣਾਉ ਜੋ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਵੈਰੀਏਬਲ ਵਰਤ ਕੇ API ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | ਜਿਨ | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ਬ੍ਰਾਊਜ਼ਰ ਵਿਚ ਪਿਛੋਕੜ ਪ੍ਰਕਿਰਿਆਵਾਂ, ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ | ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਆਇਕਨ ਨੂੰ ਮੇਨੇਜ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਪਿਛੋਕੜ ਪ੍ਰਕਿਰਿਆਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ; ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ ਅਤੇ ਕੁਝ ਸੁਧਾਰਾਂ ਬਾਰੇ ਜਾਣੋ | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | ਜਿਨ | -| 15 | [Space Game](./6-space-game/solution/README.md) | ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਹੋਰ ਉੱਨਤ ਗੇਮ ਵਿਕਾਸ | ਕਲਾਸਾਂ ਅਤੇ ਸੰਯੋਜਨ ਦੋਨੋਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਨਹੈਰੀਟੈਂਸ ਅਤੇ ਪਬ/ਸੱਬ ਪੈਟਰਨ ਬਾਰੇ ਸਿੱਖੋ, ਇੱਕ ਗੇਮ ਬਣਾਉਣ ਲਈ ਤਿਆਰੀ म्हणून | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | ਕ੍ਰਿਸ | -| 16 | [Space Game](./6-space-game/solution/README.md) | ਕੈਨਵਸ ਤੇ ਡ੍ਰਾਇੰਗ | ਕੈਨਵਸ API ਬਾਰੇ ਸਿੱਖੋ ਜੋ ਸਕਰੀਨ 'ਤੇ ਤੱਤ ਖਿੱਚਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | ਕ੍ਰਿਸ | -| 17 | [Space Game](./6-space-game/solution/README.md) | ਸਕਰੀਨ 'ਤੇ ਤੱਤਾਂ ਨੂੰ ਹਿਲਾਉਣਾ | ਜਨਕਾਰੀ ਮਿਲਦੀ ਹੈ ਕਿ ਤੱਤ ਕਿਸ ਤਰ੍ਹਾਂ ਕਾਰਟੀਸ਼ੀਅਨ ਕੋਆਰਡੀਨੇਟ ਅਤੇ ਕੈਨਵਸ API ਦੀ ਵਰਤੋਂ ਨਾਲ ਗਤੀ ਕਰ ਸਕਦੇ ਹਨ | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | ਕ੍ਰਿਸ | -| 18 | [Space Game](./6-space-game/solution/README.md) | ਟਕਰਾਉ ਦੀ ਪਛਾਣ | ਤੱਤਾਂ ਨੂੰ ਟਕਰਾਉਂ ਅਤੇ ਕਕੀਪ੍ਰੈੱਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ-ਦੂਜੇ 'ਤੇ ਪ੍ਰਭਾਵਿਤ ਕਰਨ ਲਈ ਬਣਾਓ ਅਤੇ ਗੇਮ ਦੀ ਪ੍ਰਦਰਸ਼ਨ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕੁਲਡਾਊਨ ਫੰਕਸ਼ਨ ਦਿਉ | [Collision Detection](./6-space-game/4-collision-detection/README.md) | ਕ੍ਰਿਸ | -| 19 | [Space Game](./6-space-game/solution/README.md) | ਸਕੋਰ ਰੱਖਣਾ | ਗੇਮ ਦੀ ਸਥਿਤੀ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਅਧਾਰਿਤ ਗਣਿਤੀ ਕਾਰਵਾਈ ਕਰਨਾ | [Keeping Score](./6-space-game/5-keeping-score/README.md) | ਕ੍ਰਿਸ | -| 20 | [Space Game](./6-space-game/solution/README.md) | ਗੇਮ ਖਤਮ ਕਰਨਾ ਅਤੇ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨਾ | ਗੇਮ ਖਤਮ ਕਰਨ ਅਤੇ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਬਾਰੇ ਸਿੱਖੋ, ਸੰਪਤੀ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਅਤੇ ਵੈਰੀਏਬਲ ਮੁੱਲਾਂ ਨੂੰ ਰੀਸੈੱਟ ਕਰਨ ਸਮੇਤ | [The Ending Condition](./6-space-game/6-end-condition/README.md) | ਕ੍ਰਿਸ | -| 21 | [Banking App](./7-bank-project/solution/README.md) | ਵੈੱਬ ਐਪ ਵਿੱਚ HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟ | ਰੂਟਿੰਗ ਅਤੇ HTML ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਬਹੁ-ਪੰਨੇ ਵਾਲੀ ਵੈੱਬਸਾਈਟ ਦੀ ਬਣਤਰ ਬਣਾਉਣਾ ਸਿੱਖੋ | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | ਯੋਹਾਨ | -| 22 | [Banking App](./7-bank-project/solution/README.md) | ਲਾਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਬਣਾਉਣਾ | ਫਾਰਮ ਬਣਾਉਣ ਅਤੇ ਵੈਧਤਾ ਰੂਟੀਨ ਨੂੰ ਸੰਭਾਲਣ ਬਾਰੇ ਸਿੱਖੋ | [Forms](./7-bank-project/2-forms/README.md) | ਯੋਹਾਨ | -| 23 | [Banking App](./7-bank-project/solution/README.md) | ਡਾਟਾ ਪ੍ਰਾਪਤੀ ਅਤੇ ਵਰਤੋਂ ਦੇ ਤਰੀਕੇ | ਤੁਹਾਡੇ ਐਪ ਵਿੱਚ ਡਾਟਾ ਕਿਵੇਂ ਆਉਂਦਾ ਅਤੇ ਜਾਂਦਾ ਹੈ, ਇਸਨੂੰ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨਾ, ਸਟੋਰ ਕਰਨਾ ਅਤੇ ਖ਼ਤਮ ਕਰਨਾ ਹੈ | [Data](./7-bank-project/3-data/README.md) | ਯੋਹਾਨ | -| 24 | [Banking App](./7-bank-project/solution/README.md) | ਸਟੇਟ ਪ੍ਰਬੰਧਨ ਦੇ ਸਿਧਾਂਤ | ਤੁਹਾਡਾ ਐਪ ਕਿਵੇਂ ਸਟੇਟ ਰੱਖਦਾ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ ਸਿੱਖੋ | [State Management](./7-bank-project/4-state-management/README.md) | ਯੋਹਾਨ | -| 25 | [Browser/VScode Code](../../8-code-editor) | VScode ਨਾਲ ਕੰਮ ਕਰਨਾ | ਕੋਡ ਐਡੀਟਰ ਵਰਤਣਾ ਸਿੱਖੋ| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | ਕ੍ਰਿਸ | -| 26 | [AI Assistants](./9-chat-project/README.md) | AI ਨਾਲ ਕੰਮ ਕਰਨਾ | ਆਪਣਾ ਖੁਦ ਦਾ AI ਮਦਦਗਾਰ ਬਣਾਉਣਾ ਸਿੱਖੋ | [AI Assistant project](./9-chat-project/README.md) | ਕ੍ਰਿਸ | +| | ਪ੍ਰਾਜੈਕਟ ਦਾ ਨਾਮ | ਸਿੱਖਾਏ ਗਏ ਸੰਕਲਪ | ਸਿੱਖਣ ਦੇ ਉਦੇਸ਼ | ਲਿੰਕ ਕੀਤਾ ਪਾਠ | ਲੇਖਕ | +| :-: | :---------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ | ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਅਤੇ ਸੰਦਾਂ ਦਾ ਪਾਰਚਾਰਿਕ ਜਾਇਜ਼ਾ | ਜਿਆਦਾਤਰ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਦੇ ਆਧਾਰ ਅਤੇ ਉਹ ਸਾਫਟਵੇਅਰ ਜੋ ਪ੍ਰੋਫੈਸ਼ਨਲ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਆਪਣੇ ਕੰਮ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦੇ ਹਨ, ਸਿੱਖੋ | [ਪਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਸੰਦਾਂ ਦਾ ਪਾਰਚਾਰਿਕ ਜਾਇਜ਼ਾ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ਜੈਸਮੀਨ | +| 02 | ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ | GitHub ਦੇ ਬੁਨਿਆਦੀ ਸਿਧਾਂਤ, ਟੀਮ ਨਾਲ ਕੰਮ ਕਰਨਾ | ਆਪਣੇ ਪ੍ਰਾਜੈਕਟ ਵਿੱਚ GitHub ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ, ਕਿਸੇ ਕੋਡ ਬੇਸ 'ਤੇ ਹੋਰਾਂ ਨਾਲ ਸਹਿਯੋਗ ਕਰਨਾ | [GitHub ਦਾ ਪਾਰਚਾਰਿਕ ਜਾਇਜ਼ਾ](./1-getting-started-lessons/2-github-basics/README.md) | ਫਲੋਰ | +| 03 | ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ | ਐਕਸੇਸਬਿਲਿਟੀ | ਵੈੱਬ ਐਕਸੇਸਬਿਲਿਟੀ ਦੇ ਮੁਢਲੇ ਸਿਧਾਂਤ ਸਿੱਖੋ | [ਐਕਸੇਸਬਿਲਿਟੀ ਮੁਢਲੇ ਬੁਨਿਆਦ](./1-getting-started-lessons/3-accessibility/README.md) | ਕ੍ਰਿਸਟੋਫ਼ਰ | +| 04 | JS ਬੁਨਿਆਦੀਆਂ | ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਕਿਸਮਾਂ | ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਕਿਸਮਾਂ ਦੀਆਂ ਮੁਢਲੀਆਂ ਸਮਝ | [ਡਾਟਾ ਕਿਸਮਾਂ](./2-js-basics/1-data-types/README.md) | ਜੈਸਮੀਨ | +| 05 | JS ਬੁਨਿਆਦੀਆਂ | ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡ | ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਲੋਜਿਕ ਫਲੋ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡ ਬਾਰੇ ਜ਼ਿਆਦਾ ਜਾਣੋ | [ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡ](./2-js-basics/2-functions-methods/README.md) | ਜੈਸਮੀਨ ਅਤੇ ਕ੍ਰਿਸਟੋਫ਼ਰ | +| 06 | JS ਬੁਨਿਆਦੀਆਂ | JS ਨਾਲ ਫੈਸਲੇ ਕਰਨਾ | ਫੈਸਲਾ ਲੈਣ ਵਾਲੇ ਤਰੀਕਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਸ਼ਰਤਾਂ ਕਿਵੇਂ ਬਣਾਉਣੀਆਂ ਹੈ, ਸਿੱਖੋ | [ਫੈਸਲੇ ਕਰਨਾ](./2-js-basics/3-making-decisions/README.md) | ਜੈਸਮੀਨ | +| 07 | JS ਬੁਨਿਆਦੀਆਂ | ਐਰੇ ਅਤੇ ਲੂਪ | ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਡਾਟਾ ਨਾਲ ਐਰੇ ਅਤੇ ਲੂਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ | [ਐਰੇ ਅਤੇ ਲੂਪ](./2-js-basics/4-arrays-loops/README.md) | ਜੈਸਮੀਨ | +| 08 | [ਟੈਰਾਰਿਯਮ](./3-terrarium/solution/README.md) | ਵੇਬ ਪੰਨੇ ਵਿੱਚ HTML | ਇੱਕ ਅਨਲਾਈਨ ਟੈਰਾਰਿਯਮ ਬਣਾਉਣ ਲਈ HTML ਤਿਆਰ ਕਰੋ, ਜਿੱਥੇ ਲੇਆਉਟ ਬਣਾਉਣ 'ਤੇ ਧਿਆਨ ਦਿੱਤਾ ਗਿਆ | [HTML ਦਾ ਪਾਰਚਾਰਿਕ ਜਾਇਜ਼ਾ](./3-terrarium/1-intro-to-html/README.md) | ਜੇਨ | +| 09 | [ਟੈਰਾਰਿਯਮ](./3-terrarium/solution/README.md) | CSS ਦਾ ਪਰਚਾਰ ਪ੍ਰਯੋਗ | ਅਨਲਾਈਨ ਟੈਰਾਰਿਯਮ ਨੂੰ ਸਵੈ-ਰੂਪ ਵਿੱਚ ਬਨਾਉਣ ਲਈ CSS ਬਣਾਉ, CSS ਦੇ ਮੁਢਲੇ ਬੁਨਿਆਦੀ ਤੱਤਾਂ ਸਮੇਤ | [CSS ਦਾ ਪਾਰਚਾਰਿਕ ਜਾਇਜ਼ਾ](./3-terrarium/2-intro-to-css/README.md) | ਜੇਨ | +| 10 | [ਟੈਰਾਰਿਯਮ](./3-terrarium/solution/README.md) | ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ, DOM ਸੋਧ | ਡਰੈਗ/ਡ੍ਰੌਪ ਇੰਟਰਫੇਸ ਵਜੋਂ ਕਾਰਜ ਕਰਨ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਓ, ਜਿੱਥੇ ਕਲੋਜ਼ਰ ਅਤੇ DOM ਸੋਧ 'ਤੇ ਧਿਆਨ ਦਿੱਤਾ ਗਿਆ | [ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ, DOM ਸੋਧ](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | ਜੇਨ | +| 11 | [ਟਾਈਪਿੰਗ ਖੇਡ](./4-typing-game/solution/README.md) | ਟਾਈਪਿੰਗ ਖੇਡ ਬਣਾਉਣਾ | ਆਪਣੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਐਪ ਦੇ ਲੋਜਿਕ ਨੂੰ ਗਤੀਸ਼ੀਲ ਕਰਨ ਲਈ ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਦੀ ਵਰਤੋਂ ਸਿੱਖੋ | [ਈਵੈਂਟ-ਚਾਲਿਤ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ](./4-typing-game/typing-game/README.md) | ਕ੍ਰਿਸਟੋਫ਼ਰ | +| 12 | [ਗ੍ਰੀਨ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ](./5-browser-extension/solution/README.md) | ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੇ ਨਾਲ ਕੰਮ | ਬ੍ਰਾਊਜ਼ਰਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਉਹਨਾਂ ਦਾ ਇਤਿਹਾਸ ਅਤੇ ਪਹਿਲੀ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਤਿਆਰ ਕਰਨ ਦਾ ਢਾਂਚਾ ਸਿੱਖੋ | [ਬ੍ਰਾਊਜ਼ਰ ਬਾਰੇ](./5-browser-extension/1-about-browsers/README.md) | ਜੇਨ | +| 13 | [ਗ੍ਰੀਨ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ](./5-browser-extension/solution/README.md) | ਫੋਰਮ ਬਣਾਉਣਾ, API ਕਾਲ ਕਰਨਾ ਤੇ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਵੈਰੀਏਬਲ ਸਟੋਰ ਕਰਨਾ | API ਕਾਲ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੱਤ ਬਣਾ ਕੇ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਵੈਰੀਏਬਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ | [API, ਫੋਰਮ ਅਤੇ ਲੋਕਲ ਸਟੋਰੇਜ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | ਜੇਨ | +| 14 | [ਗ੍ਰੀਨ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ](./5-browser-extension/solution/README.md) | ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਪ੍ਰਕਿਰਿਆਵਾਂ, ਵੈੱਬ ਦક્ષਤਾ | ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਆਇਕਨ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਬੈਕਗ੍ਰਾਊਂਡ ਪ੍ਰਕਿਰਿਆਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ; ਵੈੱਬ ਦੱਖਤਾ ਅਤੇ ਕੁਝ ਵਿਕਾਸਕਾਰੀ ਤਰੀਕੇ ਸਿੱਖੋ | [ਬੈਕਗ੍ਰਾਊਂਡ ਕੰਮ ਅਤੇ ਦੱਖਤਾ](./5-browser-extension/3-background-tasks-and-performance/README.md) | ਜੇਨ | +| 15 | [ਸਪੇਸ ਖੇਡ](./6-space-game/solution/README.md) | ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਪ੍ਰਗਟੀ ਖੇਡ ਵਿਕਾਸ ਦਾ ਅਗਲਾ ਪੜਾਅ | ਕਲਾਸਾਂ ਅਤੇ ਕੰਪੋਜ਼ੀਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵਿਰਾਸਤ ਅਤੇ ਪਬ/ਸਬ ਪੈਟਰਨ ਬਾਰੇ ਜਾਣੋ, ਖੇਡ ਬਣਾਉਣ ਦੀ ਤਿਆਰੀ ਲਈ | [ਪ੍ਰਗਟੀ ਖੇਡ ਵਿਕਾਸ ਦਾ ਪਾਰਚਾਰਿਕ ਜਾਇਜ਼ਾ](./6-space-game/1-introduction/README.md) | ਕ੍ਰਿਸ | +| 16 | [ਸਪੇਸ ਖੇਡ](./6-space-game/solution/README.md) | ਕੈਨਵਾਸ 'ਤੇ ਡਰਾਇੰਗ | ਕੈਨਵਾਸ API ਬਾਰੇ ਜਾਣੋ, ਜੋ ਸਕ੍ਰੀਨ ਉੱਤੇ ਤੱਤ ਡਰਾਇੰਗ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ | [ਕੈਨਵਾਸ 'ਤੇ ਡਰਾਇੰਗ](./6-space-game/2-drawing-to-canvas/README.md) | ਕ੍ਰਿਸ | +| 17 | [ਸਪੇਸ ਖੇਡ](./6-space-game/solution/README.md) | ਸਕ੍ਰੀਨ 'ਤੇ ਤੱਤਾਂ ਦੀ ਹਿਲਚਲ | ਕਾਰਟੇਸ਼ੀਅਨ ਕੋਆਰਡੀਨੇਟਸ ਅਤੇ ਕੈਨਵਾਸ API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਤਾ ਲਗਾਓ ਕਿ ਤੱਤ ਕਿਸ ਤਰ੍ਹਾਂ ਗਤੀਸ਼ੀਲ ਹੋ ਸਕਦੇ ਹਨ | [ਤੱਤਾਂ ਨੂੰ ਹਿਲਾਉਣਾ](./6-space-game/3-moving-elements-around/README.md) | ਕ੍ਰਿਸ | +| 18 | [ਸਪੇਸ ਖੇਡ](./6-space-game/solution/README.md) | ਟੱਕਰ ਦੀ ਪਹਿਚਾਨ | ਕੀਪ੍ਰੈਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੱਤਾਂ ਨੂੰ ਇੱਕ ਦੂਜੇ ਨਾਲ ਟੱਕਰ ਕਰਨ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦੇਣ ਨਾਲ ਖੇਡ ਦੀ ਕਾਰਕਿਰਦਗੀ ਯਕੀਨੀ ਬਣਾਓ | [ਟੱਕਰ ਦੀ ਪਹਿਚਾਨ](./6-space-game/4-collision-detection/README.md) | ਕ੍ਰਿਸ | +| 19 | [ਸਪੇਸ ਖੇਡ](./6-space-game/solution/README.md) | ਸਕੋਰ ਰੱਖਣਾ | ਖੇਡ ਦੀ ਸਥਿਤੀ ਅਤੇ ਕੰਮਕਾਜ ਦੇ ਆਧਾਰ 'ਤੇ ਗਣਿਤ ਧਾਰਣਾ ਕਰੋ | [ਸਕੋਰ ਰੱਖਣਾ](./6-space-game/5-keeping-score/README.md) | ਕ੍ਰਿਸ | +| 20 | [ਸਪੇਸ ਖੇਡ](./6-space-game/solution/README.md) | ਖੇਡ ਖਤਮ ਤੇ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨਾ | ਖੇਡ ਦੇ ਖਤਮ ਹੋਣ ਅਤੇ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਬਾਰੇ ਜਾਣੋ, ਜਿਸ ਵਿੱਚ ਸਾਮੱਗਰੀ ਸਾਫ ਕਰਨ ਅਤੇ ਵੈਰੀਏਬਲ ਮੁੱਲਾਂ ਨੂੰ ਰੀਸੈਟ ਕਰਨਾ ਸ਼ਾਮਿਲ ਹੈ | [ਖੇਡ ਦਾ ਖਤਮ ਹੋਣ ਵਾਲਾ ਹਾਲਤ](./6-space-game/6-end-condition/README.md) | ਕ੍ਰਿਸ | +| 21 | [ਬੈਂਕਿੰਗ ਐਪ](./7-bank-project/solution/README.md) | ਵੈੱਬ ਐਪ ਵਿੱਚ HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟਸ | ਰੂਟਿੰਗ ਅਤੇ HTML ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ-ਪੰਨੇ ਦੀ ਵੈੱਬਸਾਈਟ ਦੀ ਸੰਰਚਨਾ ਬਣਾਉਣ ਬਾਰੇ ਸਿੱਖੋ | [HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟਸ](./7-bank-project/1-template-route/README.md) | ਯੋਹਾਨ | +| 22 | [ਬੈਂਕਿੰਗ ਐਪ](./7-bank-project/solution/README.md) | ਲਾਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਬਣਾਉਣਾ | ਫਾਰਮ ਬਣਾਉਣ ਅਤੇ ਵੈਧਤਾ ਪ੍ਰਕਿਰਿਆਵਾਂ ਨੂੰ ਹੈਂਡਲ ਕਰਨ ਬਾਰੇ ਜਾਣੋ | [ਫਾਰਮ](./7-bank-project/2-forms/README.md) | ਯੋਹਾਨ | +| 23 | [ਬੈਂਕਿੰਗ ਐਪ](./7-bank-project/solution/README.md) | ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਵਰਤਣ ਦੇ ਤਰੀਕੇ | ਕਿਵੇਂ ਤੁਹਾਡੀ ਐਪ ਵਿੱਚ ਡਾਟਾ ਆਉਂਦੀ ਅਤੇ ਜਾਂਦੀ ਹੈ, ਇਹ ਕਿਵੇਂ ਲਿਆਉਣਾ, ਸਟੋਰ ਕਰਨਾ ਅਤੇ ਨਿਕਾਲਣਾ ਹੈ | [ਡਾਟਾ](./7-bank-project/3-data/README.md) | ਯੋਹਾਨ | +| 24 | [ਬੈਂਕਿੰਗ ਐਪ](./7-bank-project/solution/README.md) | ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਸੰਕਲਪ | ਆਪਣੀ ਐਪ ਸਟੇਟ ਨੂੰ ਕਿਵੇਂ ਧਾਰਨ ਕਰਦੀ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਪ੍ਰੋਗਰਾਮਾਤਮਕ ਤਰ੍ਹਾਂ ਕਿਵੇਂ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ ਹੈ | [ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ](./7-bank-project/4-state-management/README.md) | ਯੋਹਾਨ | +| 25 | [Browser/VScode Code](../../8-code-editor) | VScode ਨਾਲ ਕੰਮ ਕਰਨਾ | ਕੋਡ ਐਡੀਟਰ ਦੀ ਵਰਤੋਂ ਸਿੱਖੋ | [VScode ਕੋਡ ਐਡੀਟਰ ਦੀ ਵਰਤੋਂ](./8-code-editor/1-using-a-code-editor/README.md) | ਕ੍ਰਿਸ | +| 26 | [AI ਸਹਾਇਕ](./9-chat-project/README.md) | AI ਨਾਲ ਕੰਮ ਕਰਨਾ | ਆਪਣਾ ਖੁਦ ਦਾ AI ਸਹਾਇਕ ਬਣਾਉਣਾ ਸਿੱਖੋ | [AI ਸਹਾਇਕ ਪ੍ਰਾਜੈਕਟ](./9-chat-project/README.md) | ਕ੍ਰਿਸ | -## 🏫 ਪੈਡਾਗੋਗੀ +## 🏫 ਸਿੱਖਣ ਦੀ ਵਿਧੀ -ਸਾਡਾ ਪਾਠਕ੍ਰਮ ਦੋ ਮੁੱਖ ਪੈਡਾਗੋਗੀਕਲ ਸਿਧਾਂਤਾਂ ਤੇ ਆਧਾਰਿਤ ਹੈ: -* ਪ੍ਰੋਜੈਕਟ-ਅਧਾਰਿਤ ਸਿੱਖਿਆ -* ਬਾਰੰਬਾਰ ਕੁਇਜ਼ +ਸਾਡਾ ਕਰਿਕੁਲਮ ਦੋ ਪ੍ਰਮੁੱਖ ਸਿੱਖਣ-ਸੰਬੰਧੀ ਸਿਧਾਂਤਾਂ ਦੇ ਨਾਲ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ: +* ਪ੍ਰਾਜੈਕਟ-ਅਧਾਰਿਤ ਸਿੱਖਣ +* ਬਾਰੰਬਾਰ ਕਵਿਜ਼ -ਇਹ ਪ੍ਰੋਗਰਾਮ ਜਾਵਾਸਕ੍ਰਿਪਟ, HTML ਅਤੇ CSS ਦੇ ਬੁਨਿਆਦੀ ਸਿਧਾਂਤ ਸਿਖਾਉਂਦਾ ਹੈ, ਨਾਲ ਹੀ ਅੱਜ ਦੇ ਵੈੱਬ ਵਿਕਾਸਕਾਰਾਂ ਵੱਲੋਂ ਵਰਤੇ ਜਾਂਦੇ ਨਵੇਂ ਉਪਕਰਣ ਅਤੇ ਤਕਨੀਕਾਂ। ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਹੱਥਾਂ-ਹੱਥ ਤਜ਼ਰਬਾ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਮੌਕਾ ਮਿਲੇਗਾ ਜਿਵੇਂ ਕਿ ਟਾਈਪਿੰਗ ਗੇਮ, ਵਰਚੂਅਲ ਟੇਰਾਰਿਯਮ, ਪਰਿਆਵਰਣ-ਦੋਸਤ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ, ਸਪੇਸ-ਇਨਵੇਡਰ-ਸਟਾਈਲ ਗੇਮ ਅਤੇ ਕਾਰੋਬਾਰ ਲਈ ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਉਣਾ। ਲੜੀ ਦੇ ਅੰਤ ਤੱਕ, ਵਿਦਿਆਰਥੀਆਂ ਕੋਲ ਵੈੱਬ ਵਿਕਾਸ ਦੀ ਪਕੜ ਹੋ ਜਾਵੇਗੀ। +ਇਹ ਪ੍ਰੋਗਰਾਮ ਜਾਵਾਸਕ੍ਰਿਪਟ, HTML ਅਤੇ CSS ਦੇ ਮੂਲ ਭਾਗ ਸਿੱਖਾਉਂਦਾ ਹੈ, ਨਾਲ ਹੀ ਅੱਜ ਦੇ ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਵੱਲੋਂ ਵਰਤੇ ਜਾਂਦੇ ਸਾਬਕਾ ਸੰਦ ਤੇ ਤਕਨੀਕਾਂ। ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਟਾਈਪਿੰਗ ਖੇਡ, ਵਰਚੁਅਲ ਟੈਰਾਰਿਯਮ, ਇੰਨੀ-ਮਿਤ੍ਰ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ, ਸਪੇਸ-ਇਨਵੇਡਰ-ਸ਼ੈਲੀ ਖੇਡ ਅਤੇ ਕਾਰੋਬਾਰ ਲਈ ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਉਣ ਦੇ ਜ਼ਰੀਏ ਹੱਥ-ਅਨੁਭਵ ਦੇਣ ਦਾ ਮੌਕਾ ਮਿਲੇਗਾ। ਸੀਰੀਜ਼ ਦੇ ਅੰਤ ਤੱਕ, ਵਿਦਿਆਰਥੀ ਵੈੱਬ ਵਿਕਾਸ ਦਾ ਇੱਕ ਮਜ਼ਬੂਤ ਸਮਝ ਪ੍ਰਾਪਤ ਕਰ ਲੈਣਗੇ। -> 🎓 ਤੁਸੀਂ ਇਸ ਪਾਠਕ੍ਰਮ ਦੇ ਪਹਿਲੇ ਕੁਝ ਸਬਕਾਂ ਨੂੰ ਮਾਈਕ੍ਰੋਸਾਫਟ ਲਰਨ ਉੱਤੇ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ਵਜੋਂ ਕਰ ਸਕਦੇ ਹੋ! +> 🎓 ਤੁਸੀਂ ਇਸ ਕਰਿਕੁਲਮ ਵਿੱਚ ਪਹਿਲੇ ਕੁਝ ਪਾਠ https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ਵਜੋਂ ਲੈ ਸਕਦੇ ਹੋ! -ਜਦੋਂ ਸਮੱਗਰੀ ਪ੍ਰੋਜੈਕਟਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ ਤਾਂ ਵਿਦਿਆਰਥੀਆਂ ਲਈ ਸਿਖਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਰੁਚਿਕਰ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ ਸਿਧਾਂਤਾਂ ਦੀ ਪਕੜ ਵਧਦੀ ਹੈ। ਅਸੀਂ ਕੁਝ ਸ਼ੁਰੂਆਤੀ ਸਬਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀ ਵਿੱਚ ਲਿਖੇ ਹਨ ਜਿਹਨਾਂ ਨਾਲ "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ਵੀਡੀਓ ਟਿਊਟੋਰਿਯਲ ਸੀਰੀਜ਼ ਦੇ ਇੱਕ ਵੀਡੀਓ ਨਾਲ ਜੋੜਿਆ ਗਿਆ ਹੈ, ਜਿਸ ਦੇ ਲੇਖਕਾਂ ਨੇ ਵੀ ਇਸ ਪਾਠਕ੍ਰਮ ਵਿੱਚ ਯੋਗਦਾਨ ਦਿੱਤਾ ਹੈ। +ਇਸ ਗੱਲ ਨੂੰ ਯਕੀਨ ਬਣਾਕੇ ਕਿ ਸਮੱਗਰੀ ਪ੍ਰਾਜੈਕਟਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ, ਇਹ ਪ੍ਰਕਿਰਿਆ ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਜ਼ਿਆਦਾ ਰੁਚਿਕਰ ਬਣਾਈ ਜਾਂਦੀ ਹੈ ਅਤੇ ਸੰਕਲਪਾਂ ਦੀ ਯਾਦਗਾਰੀ ਵਧਾਏਗੀ। ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ ਵਿੱਚ ਕੁਝ ਸ਼ੁਰੂਆਤੀ ਪਾਠ ਵੀ ਲਿਖੇ ਹਨ ਜੋ ਸੰਕਲਪਾਂ ਨੂੰ ਜਾਣੂ ਕਰਵਾਉਂਦੇ ਹਨ, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ਵੀਡੀਓ ਟਿਊਟੋਰਿਯਲ ਕਲੇਕਸ਼ਨ ਦੇ ਨਾਲ, ਜਿਸ ਵਿੱਚ ਕੁਝ ਲੇਖਕਾਂ ਨੇ ਇਸ ਕਰਿਕੁਲਮ ਵਿੱਚ ਯੋਗਦਾਨ ਦਿੱਤਾ ਹੈ। -ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਕ ਘੱਟ-ਦਬਾਅ ਵਾਲਾ ਕੁਇਜ਼ ਕਲਾਸ ਤੋਂ ਪਹਿਲਾਂ ਵਿਦਿਆਰਥੀ ਦੀ ਮਨਸਾ ਸੈੱਟ ਕਰਦਾ ਹੈ, ਜਦਕਿ ਦੂਜਾ ਕੁਇਜ਼ ਕਲਾਸ ਤੋਂ ਬਾਦ ਸਿੱਖਣ ਦੀ ਪਕੜ ਨੂੰ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ। ਇਹ ਪਾਠਕ੍ਰਮ ਲਚਕੀਲਾ ਅਤੇ ਮਨੋਰੰਜਕ ਬਣਾਉਣ ਲਈ ਡਿਜ਼ਾਇਨ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਾਂ ਹਿੱਸੇ ਵਜੋਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਪ੍ਰੋਜੈਕਟ ਛੋਟੇ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਿਆਂ 12 ਹਫਤਿਆਂ ਦੀ ਚੱਕਰ ਦੇ ਅੰਤ ਤੱਕ ਵੱਧ-ਵੱਧ ਜਟਿਲ ਹੋ ਜਾਂਦੇ ਹਨ। +ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇੱਕ ਨੀਵਣ-ਦਰਜੇ ਦਾ ਕਵਿਜ਼ ਕਲਾਸ ਤੋਂ ਪਹਿਲਾਂ ਵਿਦਿਆਰਥੀ ਦੀ ਇੱਕ ਟਾਪਿਕ ਵੱਲ ਇਰਾਦਾ ਬਣਾਉਂਦਾ ਹੈ, ਜਦਕਿ ਦੂਜਾ ਕਵਿਜ਼ ਕਲਾਸ ਤੋਂ ਬਾਅਦ ਹੋਰ ਯਾਦਦਾਸ਼ਤ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਕਰਿਕੁਲਮ ਨੂੰ ਲਚਕੀਲਾ ਅਤੇ ਮਨੋਰੰਜਕ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਪੂਰੇ ਜਾਂ ਹਿੱਸਾ ਵਜੋਂ ਲਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਪ੍ਰਾਜੈਕਟ ਛੋਟੇ ਹੁੰਦੇ ਹਨ ਅਤੇ 12 ਹਫ਼ਤੇ ਦੀ ਸਾਈਕਲ ਦੇ ਅੰਤ ਤੱਕ ਵੱਧ ਕੇ ਪੇਚੀਦਾ ਹੁੰਦੇ ਜਾਂਦੇ ਹਨ। -ਜਦੋਂ ਕਿ ਅਸੀਂ ਜਾਣਬੂਝ ਕੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਰੇਮਵਰਕ ਜਾਣੂ ਕਰਨ ਤੋਂ ਗੁਰੇਜ਼ ਕੀਤਾ ਹੈ ਤਾਂ ਜੋ ਵੈੱਬ ਡਿਵੈਲਪਰ ਬਣਨ ਲਈ ਬੁਨਿਆਦੀ ਹੁਨਰਾਂ 'ਤੇ ਧਿਆਨ ਦਿੱਤਾ ਜਾਵੇ, ਇਸ ਪਾਠਕ੍ਰਮ ਨੂੰ ਪੂਰਾ ਕਰਨ ਦਾ ਅਗਲਾ ਵਧੀਆ ਕਦਮ Node.js ਬਾਰੇ ਸਿੱਖਣਾ ਹੋਵੇਗਾ, ਜੋ ਇਨ੍ਹਾਂ ਵੀਡੀਓ ਸੰਗ੍ਰਹਿ ਵੱਲੋਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +ਜਦ ਕਿ ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਰੇਮਵਰਕਾਂ ਨੂੰ ਬੁਨਿਆਦੀ ਹੁਨਰਾਂ 'ਤੇ ਫੋਕਸ ਕਰਨ ਲਈ ਇੱਛਾ ਸਹਿਤ ਨਹੀਂ ਸ਼ਾਮਿਲ ਕੀਤਾ ਹੈ, ਪਰ ਇਸ ਕਰਿਕੁਲਮ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਅਗਲਾ ਚੰਗਾ ਕਦਮ ਹੋਵੇਗਾ Node.js ਬਾਰੇ ਹੋਰ ਵੀਡੀਓਜ਼ ਦੀ ਇੱਕ ਕਲੈਕਸ਼ਨ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" ਰਾਹੀਂ ਸਿੱਖਣਾ। -> ਸਾਡੀ [Code of Conduct](CODE_OF_CONDUCT.md) ਅਤੇ [Contributing](CONTRIBUTING.md) ਹਦਾਇਤਾਂ ਦਾ ਪਠਨ ਕਰੋ। ਅਸੀਂ ਤੁਹਾਡੇ ਸੰਰਚਨਾਤਮਕ ਪ੍ਰਤੀਕਰਮ ਦੀ ਸਵਾਗਤ ਕਰਦੇ ਹਾਂ！ +> ਸਾਡੇ [ਸੰਚਾਲਨ ਕੋਡ](CODE_OF_CONDUCT.md) ਅਤੇ [ਯੋਗਦਾਨ ਦੇਣ ਵਾਲੇ](CONTRIBUTING.md) ਸੂਚਕਾਂਕਾਂ 'ਤੇ ਜਾਓ। ਅਸੀਂ ਤੁਹਾਡੇ ਸਹਿਯੋਗੀ ਫੀਡਬੈਕ ਦਾ ਸਵਾਗਤ ਕਰਦੇ ਹਾਂ! ## 🧭 ਆਫਲਾਈਨ ਪਹੁੰਚ -ਤੁਸੀਂ [Docsify](https://docsify.js.org/#/) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਹ ਦਸਤਾਵੇਜ਼ ਆਫਲਾਈਨ ਚਲਾ ਸਕਦੇ ਹੋ। ਇਸ ਰਿਪੋ ਨੂੰ ਫੋਰਕ ਕਰੋ, ਆਪਣੇ ਸਥਾਨੀ ਮਸ਼ੀਨ 'ਤੇ [Docsify ਇੰਸਟਾਲ ਕਰੋ](https://docsify.js.org/#/quickstart), ਅਤੇ ਇਸ ਰਿਪੋ ਦੇ ਰੂਟ ਫੋਲਡਰ ਵਿੱਚ ਟਾਈਪ ਕਰੋ `docsify serve`। ਵੈੱਬਸਾਈਟ ਤੁਹਾਡੇ ਲੋਕਲ ਹੋਸਟ ਦੇ ਪੋਰਟ 3000 'ਤੇ ਸਰਵ ਹੋਏਗੀ: `localhost:3000`। +ਤੁਸੀਂ [Docsify](https://docsify.js.org/#/) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਨੂੰ ਆਫਲਾਈਨ ਚਲਾ ਸਕਦੇ ਹੋ। ਇਸ ਰਿਪੋ ਨੂੰ ਫੋਰਕ ਕਰੋ, ਆਪਣੇ ਸਥਾਨਕ ਮਸ਼ੀਨ 'ਤੇ [Docsify ਇੰਸਟਾਲ](https://docsify.js.org/#/quickstart) ਕਰੋ, ਅਤੇ ਫਿਰ ਇਸ ਰਿਪੋ ਦੇ ਰੂਟ ਫੋਲਡਰ ਵਿੱਚ `docsify serve` ਟਾਈਪ ਕਰੋ। ਵੈੱਬਸਾਈਟ ਤੁਹਾਡੇ ਲੋਕਲਹੋਸਟ ਦੇ ਪੋਰਟ 3000 'ਤੇ ਸਰਵ ਕੀਤੀ ਜਾਵੇਗੀ: `localhost:3000`। ## 📘 PDF +ਸਭ ਪਾਠਾਂ ਦੀ ਇੱਕ PDF [ਇਥੇ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ਮਿਲ ਸਕਦੀ ਹੈ। -ਸਾਰੇ ਸਬਕਾਂ ਦੀ ਇੱਕ PDF [ਇਥੇ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ਮਿਲ ਸਕਦੀ ਹੈ। +## 🎒 ਹੋਰ ਕੋਰਸ -## 🎒 ਹੋਰ ਕੋਰਸز -ਸਾਡੀ ਟੀਮ ਹੋਰ ਕੋਰਸ ਵੀ ਤਿਆਰ ਕਰਦੀ ਹੈ! ਵੇਖੋ: +ਸਾਡੀ ਟੀਮ ਹੋਰ ਕੋਰਸ ਤਿਆਰ ਕਰਦੀ ਹੈ! ਦੇਖੋ: ### LangChain @@ -249,23 +258,23 @@ Azure AI Foundry Discord ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## ਮਦਦ ਪ੍ਰਾਪਤ ਕਰਨਾ +## ਸਹਾਇਤਾ ਪ੍ਰਾਪਤ ਕਰਨਾ -ਜੇ ਤੁਸੀਂ ਫਸ ਜਾਂਦੇ ਹੋ ਜਾਂ AI ਐਪਸ ਬਣਾਉਣ ਬਾਰੇ ਕੋਈ ਸਵਾਲ ਹੋਵੇ। MCP ਬਾਰੇ ਚਰਚਾ ਵਿਚ ਸਾਥੀ ਸਿੱਖਣ ਵਾਲਿਆਂ ਅਤੇ ਅਨੁਭਵੀ ਵਿਕਾਸਕਾਰਾਂ ਨਾਲ ਜੁੜੋ। ਇਹ ਇੱਕ ਸਮਰਥਕ ਕਮਿਊਨਿਟੀ ਹੈ ਜਿੱਥੇ ਸਵਾਲ ਸੁਆਗਤਯੋਗ ਹਨ ਅਤੇ ਗਿਆਨ ਆਜ਼ਾਦੀ ਨਾਲ ਸਾਂਝਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। +ਜੇ ਤੁਸੀਂ ਅਟਕੇ ਹੋ ਜਾਂ AI ਐਪ ਬਣਾਉਣ ਬਾਰੇ ਕੋਈ ਸਵਾਲ ਹੈ। MCP ਬਾਰੇ ਵਿਚਾਰ-ਵਟਾਂਦਰਾ ਕਰਨ ਲਈ ਸਾਥੀ ਸਿੱਖਣ ਵਾਲੇ ਅਤੇ ਤਜਰਬੇਕਾਰ ਡਿਵੈਲਪਰਾਂ ਨਾਲ ਜੁੜੋ। ਇਹ ਇੱਕ ਸਮਰਥਕ ਭਾਈਚਾਰਾ ਹੈ ਜਿੱਥੇ ਸਵਾਲਾਂ ਦਾ ਸਵਾਗਤ ਹੈ ਅਤੇ ਗਿਆਨ ਖੁੱਲ੍ਹ ਕੇ ਸਾਂਝਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਕਿਸੇ ਉਤਪਾਦ ਬਾਰੇ ਫੀਡਬੈਕ ਜਾਂ ਗਲਤੀਆਂ ਹਨ ਤਾਂ ਇੱਥੇ ਜਾਓ: +ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਉਤਪਾਦ ਫੀਡਬੈਕ ਜਾਂ ਗਲਤੀਆਂ ਹਨ ਤਾਂ: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) -## ਲਾਇਸੰਸ +## ਲਾਇਸੈਂਸ -ਇਹ ਰਿਪੋਜ਼ਟਰੀ MIT ਲਾਇਸੰਸ ਤਹਿਤ ਲਾਇਸੰਸ ਪ੍ਰਾਪਤ ਹੈ। ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ [LICENSE](../../LICENSE) ਫਾਇਲ ਵੇਖੋ। +ਇਹ ਰਿਪੋਜ਼ਿਟਰੀ MIT ਲਾਇਸੈਂਸ ਅਧੀਨ ਹੈ। ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ [LICENSE](../../LICENSE) ਫਾਈਲ ਵੇਖੋ। --- -**ਅਸਵੀਕਾਰਿਆ ਗਿਆ**: -ਇਹ ਦਸਤਾਵੇਜ਼ ਏਆਈ ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤ ਲਈ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਰੱਖੋ ਕਿ ਆਪਣੇ ਆਪ ਹੋਣ ਵਾਲੇ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਣਸਹੀਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਆਪਣੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਪ੍ਰਮੁੱਖ ਸਰੋਤ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਜ਼ਰੂਰੀ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਸਿਫਾਰਸ਼ੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੈਦਾ ਹੋਣ ਵਾਲੀਆਂ ਕਿਸੇ ਵੀ ਗਲਤ ਸਮਝ ਜਾਂ ਭ੍ਰਮ ਲਈ ਜਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। +**ਅਸਵੀਕਾਰੋਪਣ**: +ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸ਼ੁੱਧਤਾ ਲਈ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਇਹ ਜਾਣੋ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸਟੀਕਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਉਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਥਾਰਟੀਟੇਟ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਜ਼ਰੂਰੀ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਿਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੇ ਉਪਯੋਗ ਤੋਂ ਉਤਪੰਨ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਭ੍ਰਮ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। \ No newline at end of file diff --git a/translations/pt-BR/.co-op-translator.json b/translations/pt-BR/.co-op-translator.json index cc0f94bd1..b15508f3d 100644 --- a/translations/pt-BR/.co-op-translator.json +++ b/translations/pt-BR/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-04T00:01:01+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T12:41:10+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "pt-BR" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:59:18+00:00", + "translation_date": "2026-03-06T12:44:44+00:00", "source_file": "AGENTS.md", "language_code": "pt-BR" }, @@ -516,8 +516,8 @@ "language_code": "pt-BR" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:54:39+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T12:37:46+00:00", "source_file": "README.md", "language_code": "pt-BR" }, diff --git a/translations/pt-BR/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/pt-BR/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 4a4f52ac9..1c17a19c8 100644 --- a/translations/pt-BR/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/pt-BR/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ -# Introdução às Linguagens de Programação e Ferramentas Modernas para Desenvolvedores +# Introdução a Linguagens de Programação e Ferramentas Modernas para Desenvolvedores -Olá, futuro desenvolvedor! 👋 Posso te contar algo que ainda me dá arrepios todos os dias? Você está prestes a descobrir que programar não é apenas sobre computadores – é sobre ter superpoderes reais para dar vida às suas ideias mais malucas! +Ei, futuro desenvolvedor! 👋 Posso te contar uma coisa que ainda me arrepia todos os dias? Você está prestes a descobrir que programar não é apenas sobre computadores – é sobre ter superpoderes reais para transformar suas ideias mais loucas em realidade! -Sabe aquele momento em que você está usando seu aplicativo favorito e tudo simplesmente funciona perfeitamente? Quando você toca em um botão e algo absolutamente mágico acontece, fazendo você pensar "uau, como eles fizeram isso?" Bem, alguém como você – provavelmente sentado em sua cafeteria favorita às 2 da manhã com seu terceiro espresso – escreveu o código que criou essa mágica. E aqui está o que vai te surpreender: até o final desta lição, você não apenas entenderá como eles fizeram isso, mas estará ansioso para tentar você mesmo! +Sabe aquele momento em que você está usando seu app favorito e tudo simplesmente funciona perfeitamente? Quando você toca em um botão e algo absolutamente mágico acontece que te faz pensar "uau, como eles FIZERAM isso?" Bem, alguém muito parecido com você – provavelmente sentado na sua cafeteria favorita às 2 da manhã tomando o terceiro espresso – escreveu o código que criou essa magia. E aqui vai algo que vai explodir sua mente: até o final desta aula, você não só vai entender como eles fizeram isso, mas vai estar morrendo de vontade de tentar você mesmo! -Olha, eu entendo totalmente se programar parece intimidante agora. Quando comecei, honestamente pensei que você precisava ser algum tipo de gênio da matemática ou ter programado desde os cinco anos de idade. Mas aqui está o que mudou completamente minha perspectiva: programar é exatamente como aprender a conversar em um novo idioma. Você começa com "olá" e "obrigado", depois aprende a pedir um café, e antes que perceba, está tendo discussões filosóficas profundas! Exceto que, neste caso, você está conversando com computadores, e honestamente? Eles são os parceiros de conversa mais pacientes que você já teve – nunca julgam seus erros e estão sempre prontos para tentar de novo! +Olha, eu entendo perfeitamente se programação parecer intimidadora agora. Quando comecei, eu honestamente pensei que você precisava ser um gênio da matemática ou estar codando desde os cinco anos de idade. Mas aqui está o que mudou completamente minha perspectiva: programar é exatamente como aprender a ter conversas em uma nova língua. Você começa com "olá" e "obrigado", depois evolui para pedir um café, e antes que perceba, está tendo discussões filosóficas profundas! Só que, neste caso, você está conversando com computadores, e sinceramente? Eles são os interlocutores mais pacientes que você vai ter – nunca julgam seus erros e estão sempre animados para tentar de novo! -Hoje, vamos explorar as ferramentas incríveis que tornam o desenvolvimento web moderno não apenas possível, mas seriamente viciante. Estou falando dos mesmos editores, navegadores e fluxos de trabalho que os desenvolvedores da Netflix, Spotify e do seu estúdio indie favorito usam todos os dias. E aqui está a parte que vai te fazer dançar de felicidade: a maioria dessas ferramentas profissionais e padrão da indústria são completamente gratuitas! +Hoje, vamos explorar as ferramentas incríveis que tornam o desenvolvimento web moderno não só possível, mas seriamente viciante. Estou falando dos mesmos editores, navegadores e fluxos de trabalho que desenvolvedores da Netflix, Spotify e seu estúdio indie favorito usam todos os dias. E aqui está a parte que vai fazer você querer dançar de alegria: a maioria dessas ferramentas profissionais, padrão da indústria, é totalmente gratuita! -![Introdução à Programação](../../../../translated_images/pt-BR/webdev101-programming.d6e3f98e61ac4bff.webp) +![Intro Programming](../../../../translated_images/pt-BR/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title Sua Jornada de Programação Hoje + section Descobrir + O que é Programação: 5: You + Linguagens de Programação: 4: You + Visão Geral das Ferramentas: 5: You + section Explorar + Editores de Código: 4: You + Navegadores & DevTools: 5: You + Linha de Comando: 3: You + section Praticar + Detetive de Linguagem: 4: You + Exploração de Ferramentas: 5: You + Conexão com a Comunidade: 5: You ``` +## Vamos Ver o Que Você Já Sabe! -## Vamos ver o que você já sabe! +Antes de pular para as coisas divertidas, estou curioso – o que você já sabe sobre esse mundo da programação? E escuta, se ao olhar essas perguntas você está pensando "eu literalmente não faço ideia de nada disso," isso não é só ok, é perfeito! Isso significa que você está no lugar exato. Pense neste quiz como um alongamento antes do treino – estamos apenas aquecendo esses músculos do cérebro! -Antes de mergulharmos na parte divertida, estou curioso – o que você já sabe sobre esse mundo da programação? E olha, se você está olhando para essas perguntas pensando "Eu literalmente não faço ideia de nada disso", isso não é apenas ok, é perfeito! Isso significa que você está exatamente no lugar certo. Pense neste quiz como um aquecimento antes de começar – estamos apenas preparando os músculos do cérebro! +[Faça o quiz pré-aula](https://ff-quizzes.netlify.app/web/) -[Faça o quiz pré-aula](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## A aventura que vamos embarcar juntos +## A Aventura Que Vamos Fazer Juntos -Ok, estou genuinamente empolgado com o que vamos explorar hoje! Sério, eu gostaria de ver sua reação quando alguns desses conceitos fizerem sentido. Aqui está a jornada incrível que vamos fazer juntos: +Ok, estou realmente ansioso com o que vamos explorar hoje! Sério, queria poder ver sua cara quando alguns desses conceitos fizerem sentido. Aqui está a jornada incrível que vamos fazer juntos: -- **O que é programação (e por que é a coisa mais incrível de todas!)** – Vamos descobrir como o código é literalmente a mágica invisível que alimenta tudo ao seu redor, desde aquele alarme que de alguma forma sabe que é segunda-feira até o algoritmo que escolhe as recomendações perfeitas para você no Netflix. -- **Linguagens de programação e suas personalidades incríveis** – Imagine entrar em uma festa onde cada pessoa tem superpoderes completamente diferentes e maneiras únicas de resolver problemas. É assim que o mundo das linguagens de programação é, e você vai adorar conhecê-las! -- **Os blocos fundamentais que fazem a mágica digital acontecer** – Pense nisso como o conjunto definitivo de LEGO criativo. Quando você entender como essas peças se encaixam, perceberá que pode literalmente construir qualquer coisa que sua imaginação sonhar. -- **Ferramentas profissionais que vão fazer você se sentir como se tivesse recebido uma varinha mágica** – Não estou sendo dramático aqui – essas ferramentas realmente vão fazer você se sentir como se tivesse superpoderes, e o melhor de tudo? São as mesmas que os profissionais usam! +- **O que programação realmente é (e por que é a coisa mais legal do mundo!)** – Vamos descobrir como código é literalmente a mágica invisível que faz tudo ao seu redor funcionar, desde aquele despertador que de alguma forma sabe que é segunda-feira de manhã até o algoritmo que cria suas recomendações perfeitas na Netflix +- **Linguagens de programação e suas personalidades incríveis** – Imagine chegar numa festa onde cada pessoa tem superpoderes completamente diferentes e jeitos únicos de resolver problemas. É assim que é o mundo das linguagens de programação, e você vai amar conhecê-las! +- **Os blocos fundamentais que fazem a mágica digital acontecer** – Pense neles como o kit LEGO criativo definitivo. Depois que você entender como essas peças se encaixam, vai perceber que pode literalmente construir qualquer coisa que sua imaginação sonhar +- **Ferramentas profissionais que vão fazer você sentir que ganhou uma varinha de mágico** – Não estou exagerando – essas ferramentas vão mesmo fazer você se sentir com superpoderes, e o melhor? São as mesmas que os profissionais usam! -> 💡 **Aqui está o ponto**: Nem pense em tentar memorizar tudo hoje! Por enquanto, eu só quero que você sinta aquela faísca de empolgação sobre o que é possível. Os detalhes vão grudar naturalmente enquanto praticamos juntos – é assim que o aprendizado real acontece! +> 💡 **Aqui vai o segredo**: Não pense nem em tentar memorizar tudo hoje! Agora, eu só quero que você sinta aquela faísca de empolgação sobre o que é possível. Os detalhes vão fixar naturalmente à medida que praticarmos juntos – é assim que o aprendizado de verdade acontece! -> Você pode fazer esta lição no [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Você pode fazer esta aula no [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Então, o que exatamente *é* programação? +## Então, O Que Realmente *É* Programação? -Certo, vamos abordar a pergunta de um milhão de dólares: o que é programação, afinal? +Certo, vamos encarar a pergunta de um milhão de dólares: o que é programação, afinal? -Vou te contar uma história que mudou completamente minha forma de pensar sobre isso. Semana passada, eu estava tentando explicar para minha mãe como usar o controle remoto da nossa nova TV inteligente. Me peguei dizendo coisas como "Pressione o botão vermelho, mas não o botão vermelho grande, o botão vermelho pequeno à esquerda... não, sua outra esquerda... ok, agora segure por dois segundos, não um, não três..." Parece familiar? 😅 +Vou te contar uma história que mudou completamente a maneira como eu penso sobre isso. Semana passada, tentei explicar para minha mãe como usar o controle remoto inteligente da nossa nova TV. Me peguei dizendo coisas tipo "Aperte o botão vermelho, mas não o botão vermelho grande, o botão vermelho pequeno do lado esquerdo... não, o seu outro lado esquerdo... ok, agora segure por dois segundos, não um, não três..." Soa familiar? 😅 -Isso é programação! É a arte de dar instruções incrivelmente detalhadas e passo a passo para algo que é muito poderoso, mas precisa que tudo seja explicado perfeitamente. Exceto que, em vez de explicar para sua mãe (que pode perguntar "qual botão vermelho?!"), você está explicando para um computador (que faz exatamente o que você diz, mesmo que o que você disse não seja exatamente o que você quis dizer). +Isso é programação! É a arte de dar instruções incrivelmente detalhadas, passo a passo, para algo muito poderoso, mas que precisa que tudo seja explicado perfeitamente. Só que, em vez de explicar pra sua mãe (que pode perguntar "qual botão vermelho?!"), você está explicando para um computador (que faz exatamente o que você diz, mesmo que o que você disse não seja exatamente o que você quis dizer). -Aqui está o que me surpreendeu quando aprendi isso: computadores são, na verdade, bem simples no fundo. Eles literalmente só entendem duas coisas – 1 e 0, que basicamente é "sim" e "não" ou "ligado" e "desligado". É isso! Mas aqui é onde fica mágico – não precisamos falar em 1s e 0s como se estivéssemos em Matrix. É aí que as **linguagens de programação** entram em cena. Elas são como ter o melhor tradutor do mundo que pega seus pensamentos perfeitamente normais de humano e os converte em linguagem de computador. +O que me surpreendeu quando aprendi isso: computadores, na verdade, são bastante simples em seu núcleo. Eles só entendem duas coisas – 1 e 0, que basicamente significam "sim" e "não" ou "ligado" e "desligado". Só isso! Mas aqui é onde fica mágico – não precisamos falar em 1s e 0s como se estivéssemos na Matrix. É aí que entram as **linguagens de programação**. Elas são como ter o melhor tradutor do mundo, que pega seus pensamentos humanos perfeitamente normais e os converte para a linguagem do computador. -E aqui está o que ainda me dá arrepios todas as manhãs quando acordo: literalmente *tudo* digital na sua vida começou com alguém como você, provavelmente sentado de pijama com uma xícara de café, digitando código no laptop. Aquele filtro do Instagram que te deixa impecável? Alguém codificou isso. A recomendação que te levou à sua nova música favorita? Um desenvolvedor criou esse algoritmo. O aplicativo que ajuda você a dividir a conta do jantar com os amigos? Sim, alguém pensou "isso é chato, aposto que consigo resolver" e então... resolveu! +E aqui está o que ainda me arrepia todas as manhãs quando acordo: literalmente *tudo* digital na sua vida começou com alguém como você, provavelmente de pijama, com uma xícara de café, digitando código no laptop. Aquele filtro do Instagram que te deixa impecável? Alguém codificou isso. A recomendação que te levou à sua música nova favorita? Um desenvolvedor criou aquele algoritmo. O app que ajuda você a dividir a conta do jantar com os amigos? Sim, alguém pensou "isso é chato, aposto que posso consertar isso" e então... fez! -Quando você aprende a programar, não está apenas adquirindo uma nova habilidade – está se tornando parte dessa comunidade incrível de solucionadores de problemas que passam os dias pensando: "E se eu pudesse construir algo que tornasse o dia de alguém um pouco melhor?" Honestamente, existe algo mais legal do que isso? +Quando você aprende a programar, não está só adquirindo uma nova habilidade – está entrando para uma comunidade incrível de solucionadores de problemas que passam o dia pensando, "E se eu pudesse construir algo que deixasse o dia de alguém um pouco melhor?" Sério, existe coisa mais legal que isso? -✅ **Caça ao Fato Divertido**: Aqui está algo super legal para pesquisar quando tiver um momento livre – quem você acha que foi o primeiro programador de computadores do mundo? Vou te dar uma dica: pode não ser quem você está esperando! A história por trás dessa pessoa é absolutamente fascinante e mostra que programar sempre foi sobre resolver problemas criativos e pensar fora da caixa. +✅ **Caça ao Fato Curioso**: Aqui vai algo super legal para pesquisar quando tiver um tempinho livre – quem você acha que foi o primeiro programador de computadores do mundo? Vou te dar uma dica: pode não ser quem você espera! A história dessa pessoa é absolutamente fascinante e mostra que programação sempre foi sobre criatividade, solucionar problemas e pensar fora da caixa. -### 🧠 **Hora de Checar: Como Você Está Se Sentindo?** +### 🧠 **Hora do Check-in: Como Você Está Se Sentindo?** -**Tire um momento para refletir:** -- A ideia de "dar instruções para computadores" faz sentido para você agora? -- Consegue pensar em uma tarefa diária que gostaria de automatizar com programação? -- Quais perguntas estão surgindo na sua mente sobre esse mundo da programação? +**Reserve um momento para refletir:** +- A ideia de "dar instruções a computadores" faz sentido para você agora? +- Você consegue pensar em uma tarefa diária que gostaria de automatizar com programação? +- Quais perguntas estão surgindo na sua cabeça sobre essa coisa toda de programação? -> **Lembre-se**: É totalmente normal se alguns conceitos ainda parecerem confusos agora. Aprender a programar é como aprender um novo idioma – leva tempo para o cérebro construir essas conexões neurais. Você está indo muito bem! +> **Lembre-se**: É totalmente normal se alguns conceitos parecerem confusos agora. Aprender programação é como aprender uma nova língua – leva tempo para seu cérebro criar essas conexões neurais. Você está indo muito bem! ## Linguagens de Programação São Como Diferentes Sabores de Magia -Ok, isso vai soar estranho, mas fique comigo – linguagens de programação são muito parecidas com diferentes tipos de música. Pense nisso: você tem jazz, que é suave e improvisado, rock que é poderoso e direto, clássico que é elegante e estruturado, e hip-hop que é criativo e expressivo. Cada estilo tem sua própria vibe, sua própria comunidade de fãs apaixonados, e cada um é perfeito para diferentes momentos e ocasiões. +Ok, isso vai parecer estranho, mas fique comigo – linguagens de programação são muito parecidas com diferentes estilos de música. Pense nisso: você tem jazz, que é suave e improvisado; rock, que é poderoso e direto; clássico, elegante e estruturado; e hip-hop, criativo e expressivo. Cada estilo tem sua vibe, sua comunidade de fãs apaixonados, e cada um é perfeito para diferentes humores e ocasiões. -As linguagens de programação funcionam exatamente da mesma forma! Você não usaria a mesma linguagem para criar um jogo divertido para celular que usaria para analisar grandes quantidades de dados climáticos, assim como você não tocaria death metal em uma aula de yoga (bem, na maioria das aulas de yoga! 😄). +Linguagens de programação funcionam exatamente assim! Você não usaria a mesma língua para criar um jogo mobile divertido e para processar massa enorme de dados climáticos, assim como você não tocaria death metal numa aula de yoga (bem, na maioria delas pelo menos! 😄). -Mas aqui está o que absolutamente me surpreende toda vez que penso nisso: essas linguagens são como ter o intérprete mais paciente e brilhante do mundo sentado ao seu lado. Você pode expressar suas ideias de uma forma que parece natural para o seu cérebro humano, e elas lidam com todo o trabalho incrivelmente complexo de traduzir isso para os 1s e 0s que os computadores realmente entendem. É como ter um amigo que é perfeitamente fluente em "criatividade humana" e "lógica de computador" – e eles nunca se cansam, nunca precisam de pausas para café e nunca te julgam por fazer a mesma pergunta duas vezes! +Mas aqui está o que me impressiona toda vez que penso nisso: essas linguagens são como ter o intérprete mais paciente e brilhante do mundo sentado bem do seu lado. Você pode expressar suas ideias de um jeito que faça sentido para seu cérebro humano, e elas cuidam de todo o trabalho incrivelmente complexo de traduzir isso para os 1s e 0s que os computadores realmente falam. É como ter um amigo fluente em "criatividade humana" e "lógica computacional" – e ele nunca se cansa, nunca precisa de pausas para café, e nunca te julga por perguntar a mesma coisa duas vezes! ### Linguagens de Programação Populares e Seus Usos ```mermaid mindmap - root((Programming Languages)) - Web Development + root((Linguagens de Programação)) + Desenvolvimento Web JavaScript - Frontend Magic - Interactive Websites + Mágica Frontend + Sites Interativos TypeScript - JavaScript + Types - Enterprise Apps - Data & AI + JavaScript + Tipos + Apps Corporativos + Dados & IA Python - Data Science - Machine Learning - Automation + Ciência de Dados + Aprendizado de Máquina + Automação R - Statistics - Research - Mobile Apps + Estatística + Pesquisa + Aplicativos Móveis Java Android - Enterprise + Corporativo Swift iOS - Apple Ecosystem + Ecossistema Apple Kotlin - Modern Android - Cross-platform - Systems & Performance + Android Moderno + Multiplataforma + Sistemas & Performance C++ - Games - Performance Critical + Jogos + Crítico para Performance Rust - Memory Safety - System Programming + Segurança de Memória + Programação de Sistemas Go - Cloud Services - Scalable Backend + Serviços na Nuvem + Backend Escalável ``` - | Linguagem | Melhor Para | Por Que É Popular | -|-----------|-------------|-------------------| +|----------|----------|------------------| | **JavaScript** | Desenvolvimento web, interfaces de usuário | Roda em navegadores e alimenta sites interativos | | **Python** | Ciência de dados, automação, IA | Fácil de ler e aprender, bibliotecas poderosas | | **Java** | Aplicações empresariais, apps Android | Independente de plataforma, robusto para sistemas grandes | -| **C#** | Aplicações Windows, desenvolvimento de jogos | Forte suporte ao ecossistema Microsoft | +| **C#** | Aplicações Windows, desenvolvimento de jogos | Forte suporte do ecossistema Microsoft | | **Go** | Serviços em nuvem, sistemas backend | Rápido, simples, projetado para computação moderna | -### Linguagens de Alto Nível vs. Baixo Nível +### Linguagens de Alto e Baixo Nível -Ok, este foi honestamente o conceito que me deixou confuso quando comecei a aprender, então vou compartilhar a analogia que finalmente fez sentido para mim – e espero que ajude você também! +Ok, esse foi sinceramente o conceito que me deixou confuso quando comecei a aprender, então vou compartilhar a analogia que finalmente fez tudo fazer sentido pra mim – e espero que ajude você também! -Imagine que você está visitando um país onde não fala o idioma, e precisa desesperadamente encontrar o banheiro mais próximo (todos já passamos por isso, certo? 😅): +Imagine que você está visitando um país onde não fala o idioma e precisa desesperadamente achar o banheiro mais próximo (todos nós já passamos por isso, né? 😅): -- **Programação de baixo nível** é como aprender o dialeto local tão bem que você pode conversar com a avó vendendo frutas na esquina usando referências culturais, gírias locais e piadas internas que só alguém que cresceu lá entenderia. Super impressionante e incrivelmente eficiente... se você for fluente! Mas bastante esmagador quando você só está tentando encontrar um banheiro. +- **Programação de baixo nível** é como aprender o dialeto local tão bem que você consegue conversar com a avó que vende frutas na esquina usando referências culturais, gírias locais e piadas internas que só quem cresceu lá entenderia. Super impressionante e muito eficiente... se você for fluente! Mas bem complicado quando só quer achar um banheiro. -- **Programação de alto nível** é como ter aquele amigo local incrível que simplesmente entende você. Você pode dizer "Eu realmente preciso encontrar um banheiro" em português, e eles lidam com toda a tradução cultural e te dão direções de uma forma que faz sentido para sua mente não nativa. +- **Programação de alto nível** é como ter aquele amigo local incrível que simplesmente te entende. Você pode dizer "Preciso muito encontrar um banheiro" em inglês simples, e ele faz toda a tradução cultural e te dá as direções de um jeito que seu cérebro não local entende perfeitamente. Em termos de programação: -- **Linguagens de baixo nível** (como Assembly ou C) permitem que você tenha conversas incrivelmente detalhadas com o hardware real do computador, mas você precisa pensar como uma máquina, o que é... bem, digamos que é uma mudança mental bem grande! -- **Linguagens de alto nível** (como JavaScript, Python ou C#) permitem que você pense como um humano enquanto elas lidam com toda a linguagem da máquina nos bastidores. Além disso, elas têm comunidades incrivelmente acolhedoras cheias de pessoas que lembram como foi ser novo e realmente querem ajudar! +- **Linguagens de baixo nível** (como Assembly ou C) deixam você falar com o hardware do computador em detalhes incrivelmente precisos, mas você precisa pensar como uma máquina, o que é... digamos que é uma mudança mental enorme! +- **Linguagens de alto nível** (como JavaScript, Python ou C#) deixam você pensar como um humano enquanto elas cuidam da linguagem da máquina nos bastidores. Além disso, essas linguagens têm comunidades super acolhedoras, cheias de gente que lembra como era ser iniciante e que realmente quer ajudar! -Adivinha quais eu vou sugerir que você comece? 😉 Linguagens de alto nível são como ter rodinhas de treinamento que você nunca realmente quer tirar porque tornam toda a experiência muito mais agradável! +Adivinha por quais eu vou sugerir que você comece? 😉 Linguagens de alto nível são como rodinhas de treinamento que você nunca vai querer tirar porque deixam toda a experiência muito mais agradável! ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 Pensamento Humano:
'Quero calcular números de Fibonacci'"] --> B{Escolher Nível de Linguagem} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|Alto Nível| C["🌟 JavaScript/Python
Fácil de ler e escrever"] + B -->|Baixo Nível| D["⚙️ Assembly/C
Controle direto do hardware"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Escrever: fibonacci(10)"] + D --> F["📝 Escrever: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 Entendimento do Computador:
O tradutor lida com a complexidade"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Mesmo Resultado:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` - ### Deixe-me Mostrar Por Que Linguagens de Alto Nível São Muito Mais Amigáveis -Certo, estou prestes a mostrar algo que demonstra perfeitamente por que me apaixonei pelas linguagens de alto nível, mas primeiro – preciso que você me prometa uma coisa. Quando você vir o primeiro exemplo de código, não entre em pânico! É para parecer intimidante. Esse é exatamente o ponto que estou fazendo! +Certo, vou te mostrar algo que demonstra perfeitamente por que me apaixonei pelas linguagens de alto nível, mas antes – preciso que me prometa uma coisa. Quando você ver esse primeiro exemplo de código, não entre em pânico! Ele é para parecer intimidador. Esse é exatamente o ponto! -Vamos olhar para a mesma tarefa escrita em dois estilos completamente diferentes. Ambos criam o que é chamado de sequência de Fibonacci – é esse padrão matemático lindo onde cada número é a soma dos dois anteriores: 0, 1, 1, 2, 3, 5, 8, 13... (Curiosidade: você encontrará esse padrão literalmente em toda parte na natureza – espirais de sementes de girassol, padrões de pinhas, até na forma como as galáxias se formam!) +Vamos ver a mesma tarefa escrita em dois estilos completamente diferentes. Ambas criam a chamada sequência de Fibonacci – um padrão matemático lindo onde cada número é a soma dos dois anteriores: 0, 1, 1, 2, 3, 5, 8, 13... (Curiosidade: você encontra esse padrão literalmente em toda a natureza – espirais de sementes de girassol, padrões de pinhas, até a forma como as galáxias se formam!) Pronto para ver a diferença? Vamos lá! **Linguagem de alto nível (JavaScript) – Amigável para humanos:** ```javascript -// Step 1: Basic Fibonacci setup +// Passo 1: Configuração básica de Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**O que este código faz:** -- **Declara** uma constante para especificar quantos números de Fibonacci queremos gerar -- **Inicializa** duas variáveis para acompanhar os números atuais e próximos na sequência -- **Define** os valores iniciais (0 e 1) que definem o padrão Fibonacci +**Veja o que esse código faz:** +- **Declara** uma constante para especificar quantos números da sequência Fibonacci queremos gerar +- **Inicializa** duas variáveis para acompanhar o número atual e o próximo na sequência +- **Configura** os valores iniciais (0 e 1) que definem o padrão de Fibonacci - **Exibe** uma mensagem de cabeçalho para identificar nossa saída ```javascript -// Step 2: Generate the sequence with a loop +// Passo 2: Gere a sequência com um loop for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Calcule o próximo número na sequência const sum = current + next; current = next; next = sum; } ``` -**Desmembrando o que acontece aqui:** -- **Percorre** cada posição na sequência usando um `for` loop -- **Exibe** cada número com sua posição usando formatação de template literal -- **Calcula** o próximo número de Fibonacci somando os valores atuais e próximos -- **Atualiza** nossas variáveis de acompanhamento para passar para a próxima iteração +**Entendendo o que acontece aqui:** +- **Percorre** cada posição da sequência usando um loop `for` +- **Mostra** cada número com sua posição usando formatação de template literals +- **Calcula** o próximo número Fibonacci somando os valores atual e próximo +- **Atualiza** as variáveis de acompanhamento para passar à próxima iteração ```javascript -// Step 3: Modern functional approach +// Passo 3: Abordagem funcional moderna const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Exemplo de uso const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` **No código acima, nós:** -- **Criamos** uma função reutilizável usando sintaxe moderna de função de seta -- **Construímos** um array para armazenar a sequência completa em vez de exibir um por um -- **Usamos** indexação de array para calcular cada novo número a partir dos valores anteriores +- **Criamos** uma função reutilizável usando a sintaxe moderna de arrow function +- **Construímos** um array para armazenar a sequência completa em vez de mostrar número por número +- **Usamos** indexação de array para calcular cada novo número a partir dos anteriores - **Retornamos** a sequência completa para uso flexível em outras partes do programa -**Linguagem de baixo nível (ARM Assembly) – Amigável para computadores:** +**Linguagem de baixo nível (Assembly ARM) – Amigável para computadores:** ```assembly area ascen,code,readonly @@ -259,63 +257,63 @@ back add r0,r1 end ``` -Perceba como a versão em JavaScript se lê quase como instruções em inglês, enquanto a versão em Assembly usa comandos criptográficos que controlam diretamente o processador do computador. Ambos realizam exatamente a mesma tarefa, mas a linguagem de alto nível é muito mais fácil para humanos entenderem, escreverem e manterem. +Repare como a versão em JavaScript parece quase uma instrução em inglês, enquanto a versão em Assembly usa comandos criptografados que controlam diretamente o processador do computador. Ambos realizam exatamente a mesma tarefa, mas a linguagem de alto nível é muito mais fácil para humanos entenderem, escreverem e manterem. -**Diferenças principais que você notará:** -- **Legibilidade**: JavaScript usa nomes descritivos como `fibonacciCount`, enquanto Assembly usa rótulos criptográficos como `r0`, `r1` -- **Comentários**: Linguagens de alto nível incentivam comentários explicativos que tornam o código autoexplicativo. -- **Estrutura**: O fluxo lógico do JavaScript combina com a forma como os humanos pensam sobre problemas passo a passo. -- **Manutenção**: Atualizar a versão do JavaScript para diferentes requisitos é simples e direto. +**Diferenças chave que você vai notar:** +- **Legibilidade**: JavaScript usa nomes descritivos como `fibonacciCount`, enquanto Assembly usa rótulos criptografados como `r0`, `r1` +- **Comentários**: Linguagens de alto nível incentivam comentários explicativos que tornam o código auto-documentado +- **Estrutura**: O fluxo lógico do JavaScript corresponde a como os humanos pensam sobre problemas passo a passo +- **Manutenção**: Atualizar a versão JavaScript para diferentes requisitos é direto e claro -✅ **Sobre a sequência de Fibonacci**: Esse padrão numérico absolutamente incrível (onde cada número é a soma dos dois anteriores: 0, 1, 1, 2, 3, 5, 8...) aparece literalmente *em todos os lugares* na natureza! Você o encontra nas espirais dos girassóis, nos padrões das pinhas, na curvatura das conchas de náutilo e até na forma como os galhos das árvores crescem. É impressionante como a matemática e o código podem nos ajudar a entender e recriar os padrões que a natureza usa para criar beleza! +✅ **Sobre a sequência de Fibonacci**: Este padrão de números absolutamente lindo (onde cada número é a soma dos dois anteriores: 0, 1, 1, 2, 3, 5, 8...) aparece literalmente *em todo lugar* na natureza! Você o encontrará nas espirais dos girassóis, nos padrões das pinhas, na forma como as conchas de náutilos se curvam e até mesmo no crescimento dos galhos das árvores. É realmente impressionante como a matemática e o código podem nos ajudar a entender e recriar os padrões que a natureza usa para criar beleza! -## Os Blocos de Construção Que Fazem a Mágica Acontecer +## Os Blocos de Construção Que Fazem a Magia Acontecer -Certo, agora que você viu como as linguagens de programação funcionam na prática, vamos analisar as peças fundamentais que compõem literalmente todos os programas já escritos. Pense nisso como os ingredientes essenciais da sua receita favorita – uma vez que você entender o que cada um faz, será capaz de ler e escrever código em praticamente qualquer linguagem! +Certo, agora que você viu como as linguagens de programação funcionam na prática, vamos dividir as peças fundamentais que compõem literalmente todo programa já escrito. Pense nelas como os ingredientes essenciais da sua receita favorita – uma vez que você entender o que cada um faz, poderá ler e escrever código em praticamente qualquer linguagem! -Isso é como aprender a gramática da programação. Lembra quando você aprendeu na escola sobre substantivos, verbos e como formar frases? A programação tem sua própria versão de gramática e, honestamente, é muito mais lógica e indulgente do que a gramática do português! 😄 +Isso é meio que aprender a gramática da programação. Lembra quando na escola você aprendeu sobre substantivos, verbos e como montar frases? Programação tem sua própria versão de gramática e, honestamente, é muito mais lógica e tolerante do que a gramática do inglês já foi! 😄 ### Declarações: As Instruções Passo a Passo -Vamos começar com **declarações** – elas são como frases individuais em uma conversa com o seu computador. Cada declaração diz ao computador para fazer uma coisa específica, como dar instruções: "Vire à esquerda aqui", "Pare no semáforo vermelho", "Estacione naquele lugar." +Vamos começar com **declarações** – elas são como frases individuais em uma conversa com seu computador. Cada declaração diz ao computador para fazer uma coisa específica, tipo dar instruções: "Vire à esquerda aqui", "Pare no sinal vermelho", "Estacione naquele lugar." -O que eu adoro nas declarações é como elas geralmente são fáceis de ler. Veja só: +O que eu adoro nas declarações é o quão legíveis elas geralmente são. Veja só: ```javascript -// Basic statements that perform single actions +// Declarações básicas que realizam ações únicas const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**O que este código faz:** -- **Declara** uma variável constante para armazenar o nome de um usuário -- **Exibe** uma mensagem de saudação no console -- **Calcula** e armazena o resultado de uma operação matemática +**Isto é o que este código faz:** +- **Declarar** uma variável constante para armazenar o nome de um usuário +- **Exibir** uma mensagem de saudação no console +- **Calcular** e armazenar o resultado de uma operação matemática ```javascript -// Statements that interact with web pages +// Declarações que interagem com páginas web document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Passo a passo, o que está acontecendo:** -- **Modifica** o título da página que aparece na aba do navegador -- **Altera** a cor de fundo de todo o corpo da página +**Passo a passo, veja o que está acontecendo:** +- **Modificar** o título da página que aparece na aba do navegador +- **Alterar** a cor de fundo de todo o corpo da página ### Variáveis: O Sistema de Memória do Seu Programa -Ok, **variáveis** são, honestamente, um dos meus conceitos favoritos para ensinar porque elas são muito parecidas com coisas que você já usa todos os dias! +Beleza, **variáveis** são honestamente um dos meus conceitos favoritos de ensinar porque são muito parecidas com coisas que você já usa todo dia! -Pense na lista de contatos do seu celular por um momento. Você não memoriza o número de todo mundo – em vez disso, salva "Mãe", "Melhor Amigo" ou "Pizzaria Que Entrega Até 2h" e deixa o celular lembrar os números reais. Variáveis funcionam exatamente da mesma forma! Elas são como recipientes rotulados onde seu programa pode armazenar informações e recuperá-las mais tarde usando um nome que realmente faz sentido. +Pense na sua lista de contatos do telefone por um segundo. Você não memoriza o número de telefone de todo mundo – ao invés disso, você salva "Mamãe", "Melhor Amigo" ou "Pizzaria que Entrega Até 2 da Manhã" e deixa o telefone lembrar os números reais. Variáveis funcionam exatamente da mesma forma! São como recipientes rotulados onde seu programa pode armazenar informações e recuperá-las depois usando um nome que realmente faz sentido. -Aqui está o que é realmente legal: variáveis podem mudar enquanto seu programa está sendo executado (daí o nome "variável" – entendeu?). Assim como você pode atualizar o contato da pizzaria quando descobre um lugar ainda melhor, as variáveis podem ser atualizadas conforme seu programa aprende novas informações ou conforme as situações mudam! +Aqui está o que é realmente legal: as variáveis podem mudar conforme seu programa roda (daí o nome "variável" – sacou?). Assim como você atualiza o contato da pizzaria quando descobre um lugar melhor, as variáveis podem ser atualizadas conforme seu programa aprende novas informações ou quando as situações mudam! -Deixe-me mostrar como isso pode ser incrivelmente simples: +Deixe eu te mostrar como isso pode ser lindamente simples: ```javascript -// Step 1: Creating basic variables +// Passo 1: Criando variáveis básicas const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -323,13 +321,13 @@ let isRaining = false; ``` **Entendendo esses conceitos:** -- **Armazene** valores imutáveis em variáveis `const` (como o nome do site) -- **Use** `let` para valores que podem mudar ao longo do programa -- **Atribua** diferentes tipos de dados: strings (texto), números e booleanos (verdadeiro/falso) -- **Escolha** nomes descritivos que expliquem o que cada variável contém +- **Armazenar** valores constantes em variáveis `const` (como o nome do site) +- **Usar** `let` para valores que podem mudar durante o programa +- **Atribuir** diferentes tipos de dados: strings (texto), números e booleanos (verdadeiro/falso) +- **Escolher** nomes descritivos que expliquem o que cada variável contém ```javascript -// Step 2: Working with objects to group related data +// Etapa 2: Trabalhando com objetos para agrupar dados relacionados const weatherData = { location: "San Francisco", humidity: 65, @@ -339,48 +337,48 @@ const weatherData = { **No exemplo acima, nós:** - **Criamos** um objeto para agrupar informações relacionadas ao clima -- **Organizamos** vários dados sob um único nome de variável -- **Usamos** pares chave-valor para rotular claramente cada informação +- **Organizamos** vários dados sob um nome de variável +- **Usamos** pares de chave-valor para rotular claramente cada informação ```javascript -// Step 3: Using and updating variables +// Etapa 3: Usando e atualizando variáveis console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Atualizando variáveis mutáveis currentWeather = "cloudy"; temperature = 68; ``` **Vamos entender cada parte:** -- **Exibe** informações usando literais de template com a sintaxe `${}` -- **Acessa** propriedades de objetos usando notação de ponto (`weatherData.windSpeed`) -- **Atualiza** variáveis declaradas com `let` para refletir condições em mudança -- **Combina** várias variáveis para criar mensagens significativas +- **Exibir** informações usando template literals com a sintaxe `${}` +- **Acessar** propriedades do objeto usando a notação de ponto (`weatherData.windSpeed`) +- **Atualizar** variáveis declaradas com `let` para refletir condições que mudam +- **Combinar** múltiplas variáveis para criar mensagens significativas ```javascript -// Step 4: Modern destructuring for cleaner code +// Etapa 4: Desestruturação moderna para um código mais limpo const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **O que você precisa saber:** -- **Extrai** propriedades específicas de objetos usando atribuição por desestruturação -- **Cria** novas variáveis automaticamente com os mesmos nomes das chaves do objeto -- **Simplifica** o código evitando notação de ponto repetitiva +- **Extrair** propriedades específicas de objetos usando desestruturação +- **Criar** variáveis novas automaticamente com os mesmos nomes das chaves do objeto +- **Simplificar** o código evitando repetir a notação de ponto ### Fluxo de Controle: Ensinando Seu Programa a Pensar -Ok, aqui é onde a programação fica absolutamente fascinante! **Fluxo de controle** é basicamente ensinar seu programa a tomar decisões inteligentes, exatamente como você faz todos os dias sem nem pensar nisso. +Beleza, aqui é onde a programação fica absolutamente impressionante! **Fluxo de controle** é basicamente ensinar seu programa a tomar decisões inteligentes, exatamente como você faz todo dia sem nem pensar. -Imagine isso: hoje de manhã você provavelmente passou por algo como "Se estiver chovendo, vou pegar um guarda-chuva. Se estiver frio, vou vestir um casaco. Se eu estiver atrasado, vou pular o café da manhã e pegar um café no caminho." Seu cérebro naturalmente segue essa lógica de "se-então" dezenas de vezes por dia! +Imagine isso: hoje de manhã você provavelmente fez algo como "Se estiver chovendo, eu pego um guarda-chuva. Se estiver frio, eu visto um casaco. Se estiver atrasado, pulo o café da manhã e pego um café no caminho." Seu cérebro segue essa lógica if-then dezenas de vezes todos os dias! -Isso é o que faz os programas parecerem inteligentes e vivos, em vez de apenas seguir um roteiro chato e previsível. Eles podem realmente olhar para uma situação, avaliar o que está acontecendo e responder de forma apropriada. É como dar ao seu programa um cérebro que pode se adaptar e fazer escolhas! +É isso que faz os programas parecerem inteligentes e vivos em vez de apenas seguirem um script chato e previsível. Eles podem realmente olhar a situação, avaliar o que está acontecendo e responder adequadamente. É como dar um cérebro para seu programa que pode se adaptar e fazer escolhas! -Quer ver como isso funciona lindamente? Deixe-me mostrar: +Quer ver como isso funciona lindamente? Deixe eu te mostrar: ```javascript -// Step 1: Basic conditional logic +// Etapa 1: Lógica condicional básica const userAge = 17; if (userAge >= 18) { @@ -391,14 +389,14 @@ if (userAge >= 18) { } ``` -**O que este código faz:** +**Este código faz o seguinte:** - **Verifica** se a idade do usuário atende ao requisito para votar -- **Executa** diferentes blocos de código com base no resultado da condição -- **Calcula** e exibe quanto tempo falta para a elegibilidade de voto, se menor de 18 anos +- **Executa** blocos de código diferentes com base no resultado da condição +- **Calcula** e exibe quanto tempo falta para a elegibilidade ao voto caso seja menor de 18 - **Fornece** feedback específico e útil para cada cenário ```javascript -// Step 2: Multiple conditions with logical operators +// Passo 2: Múltiplas condições com operadores lógicos const userAge = 17; const hasPermission = true; @@ -411,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Desmembrando o que acontece aqui:** -- **Combina** várias condições usando o operador `&&` (e) -- **Cria** uma hierarquia de condições usando `else if` para múltiplos cenários -- **Lida** com todos os casos possíveis com uma declaração final `else` -- **Fornece** feedback claro e acionável para cada situação diferente +**Analisando o que acontece aqui:** +- **Combina** múltiplas condições usando o operador `&&` (e) +- **Cria** uma hierarquia de condições usando `else if` para vários cenários +- **Trata** todos os casos possíveis com uma declaração `else` final +- **Oferece** feedback claro e prático para cada situação diferente ```javascript -// Step 3: Concise conditional with ternary operator +// Passo 3: Condicional concisa com operador ternário const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **O que você precisa lembrar:** -- **Use** o operador ternário (`? :`) para condições simples de duas opções -- **Escreva** a condição primeiro, seguida por `?`, depois o resultado verdadeiro, depois `:`, e então o resultado falso -- **Aplique** esse padrão quando precisar atribuir valores com base em condições +- **Use** o operador ternário (`? :`) para condições simples com duas opções +- **Escreva** a condição primeiro, seguida de `?`, depois o resultado verdadeiro, em seguida `:`, e por fim o resultado falso +- **Aplique** esse padrão quando precisar atribuir valores conforme condições ```javascript -// Step 4: Handling multiple specific cases +// Passo 4: Lidando com múltiplos casos específicos const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -451,55 +449,54 @@ switch (dayOfWeek) { **Este código realiza o seguinte:** - **Compara** o valor da variável com vários casos específicos -- **Agrupa** casos semelhantes (dias úteis vs. finais de semana) -- **Executa** o bloco de código apropriado quando um caso é encontrado +- **Agrupa** casos semelhantes (dias de semana vs. finais de semana) +- **Executa** o bloco de código apropriado quando encontra uma correspondência - **Inclui** um caso `default` para lidar com valores inesperados -- **Usa** declarações `break` para evitar que o código continue para o próximo caso +- **Usa** instruções `break` para evitar que o código continue para o próximo caso -> 💡 **Analogia do mundo real**: Pense no fluxo de controle como ter o GPS mais paciente do mundo te dando direções. Ele pode dizer "Se houver trânsito na Rua Principal, pegue a rodovia. Se houver obras na rodovia, tente a rota panorâmica." Os programas usam exatamente o mesmo tipo de lógica condicional para responder inteligentemente a diferentes situações e sempre oferecer aos usuários a melhor experiência possível. +> 💡 **Analogia no mundo real**: Pense no fluxo de controle como ter o GPS mais paciente do mundo te dando instruções. Ele pode dizer "Se houver trânsito na Rua Principal, pegue a rodovia. Se a construção bloquear a rodovia, tente o caminho cênico." Programas usam exatamente esse tipo de lógica condicional para responder de forma inteligente a diferentes situações e sempre oferecer a melhor experiência aos usuários. ### 🎯 **Verificação de Conceitos: Domínio dos Blocos de Construção** **Vamos ver como você está indo com os fundamentos:** -- Você consegue explicar a diferença entre uma variável e uma declaração com suas próprias palavras? -- Pense em um cenário do mundo real onde você usaria uma decisão "se-então" (como o exemplo de votação). -- Qual é uma coisa sobre lógica de programação que te surpreendeu? +- Consegue explicar, com suas próprias palavras, a diferença entre uma variável e uma declaração? +- Pense em um cenário do mundo real onde você usaria uma decisão if-then (como no nosso exemplo de votação) +- Qual foi uma coisa sobre a lógica de programação que te surpreendeu? -**Rápido incentivo de confiança:** +**Pequeno impulso de confiança:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 Declarações
(Instruções)"] --> B["📦 Variáveis
(Armazenamento)"] --> C["🔀 Fluxo de Controle
(Decisões)"] --> D["🎉 Programa Funcionando!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` - -✅ **O que vem a seguir**: Vamos nos divertir muito mergulhando mais fundo nesses conceitos enquanto continuamos essa jornada incrível juntos! Por enquanto, concentre-se em sentir a empolgação sobre todas as possibilidades incríveis que estão à sua frente. As habilidades e técnicas específicas vão se fixar naturalmente enquanto praticamos juntos – prometo que isso vai ser muito mais divertido do que você imagina! +✅ **O que vem a seguir**: Vamos nos divertir muito mergulhando mais fundo nesses conceitos enquanto continuamos essa incrível jornada juntos! Por enquanto, foque em sentir essa empolgação sobre todas as possibilidades incríveis à sua frente. As habilidades e técnicas específicas vão surgir naturalmente conforme praticamos juntos – prometo que vai ser muito mais divertido do que você imagina! ## Ferramentas do Ofício -Certo, aqui é onde eu fico tão empolgado que mal consigo me conter! 🚀 Vamos falar sobre as ferramentas incríveis que vão fazer você se sentir como se tivesse acabado de receber as chaves de uma nave espacial digital. +Certo, aqui é onde eu fico tão empolgado que mal consigo me controlar! 🚀 Vamos falar sobre as ferramentas incríveis que vão fazer você se sentir como se tivesse acabado de receber as chaves de uma nave espacial digital. -Sabe como um chef tem aquelas facas perfeitamente equilibradas que parecem extensões de suas mãos? Ou como um músico tem aquele violão que parece cantar no momento em que o toca? Bem, os desenvolvedores têm nossa própria versão dessas ferramentas mágicas, e aqui está o que vai te deixar de queixo caído – a maioria delas é completamente gratuita! +Sabe como um chef tem aquelas facas perfeitamente equilibradas que parecem extensões das mãos dele? Ou como um músico tem aquela guitarra que parece cantar no instante que ele a toca? Bem, desenvolvedores têm nossa própria versão dessas ferramentas mágicas, e aqui vai o que vai te impressionar de verdade – a maioria delas é completamente gratuita! -Estou praticamente pulando na cadeira pensando em compartilhar isso com você porque elas revolucionaram completamente a forma como construímos software. Estamos falando de assistentes de codificação com inteligência artificial que podem ajudar a escrever seu código (não estou brincando!), ambientes na nuvem onde você pode construir aplicativos inteiros de literalmente qualquer lugar com Wi-Fi, e ferramentas de depuração tão sofisticadas que são como ter visão de raio-X para seus programas. +Estou praticamente pulando na cadeira pensando em compartilhar isso com você porque elas revolucionaram completamente a forma como construímos software. Estamos falando de assistentes de codificação com inteligência artificial que ajudam a escrever seu código (não estou brincando!), ambientes em nuvem onde você pode construir apps inteiros de literalmente qualquer lugar com Wi-Fi, e ferramentas de depuração tão sofisticadas que são como ter visão de raio-x para seus programas. -E aqui está a parte que ainda me dá arrepios: essas não são "ferramentas para iniciantes" que você vai superar. Estas são exatamente as mesmas ferramentas de nível profissional que desenvolvedores do Google, Netflix e daquele estúdio indie de aplicativos que você adora estão usando neste exato momento. Você vai se sentir como um verdadeiro profissional usando elas! +E aqui está a parte que ainda me arrepia: essas não são ferramentas "para iniciantes" que você vai superar rápido. São exatamente as mesmas ferramentas profissionais que desenvolvedores do Google, Netflix e daquele estúdio indie de apps que você adora estão usando neste exato momento. Você vai se sentir um fera usando elas! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 Sua Ideia"] --> B["⌨️ Editor de Código
(VS Code)"] + B --> C["🌐 Ferramentas do Navegador
(Testes & Depuração)"] + C --> D["⚡ Linha de Comando
(Automação & Ferramentas)"] + D --> E["📚 Documentação
(Aprendizado & Referência)"] + E --> F["🚀 Aplicativo Web Incrível!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 Assistente de IA
(GitHub Copilot)"] + C -.-> H["📱 Teste em Dispositivos
(Design Responsivo)"] + D -.-> I["📦 Gerenciadores de Pacotes
(npm, yarn)"] + E -.-> J["👥 Comunidade
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -508,152 +505,151 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` - ### Editores de Código e IDEs: Seus Novos Melhores Amigos Digitais -Vamos falar sobre editores de código – eles estão prestes a se tornar seus novos lugares favoritos para passar o tempo! Pense neles como seu santuário pessoal de codificação, onde você passará a maior parte do tempo criando e aperfeiçoando suas criações digitais. +Vamos falar sobre editores de código – eles estão prestes a se tornar seus lugares favoritos para passar o tempo! Pense neles como seu santuário pessoal de programação onde você vai passar a maior parte do tempo criando e aprimorando suas criações digitais. -Mas aqui está o que é absolutamente mágico sobre os editores modernos: eles não são apenas editores de texto sofisticados. Eles são como ter o mentor de codificação mais brilhante e solidário sentado ao seu lado 24 horas por dia, 7 dias por semana. Eles corrigem seus erros de digitação antes mesmo de você perceber, sugerem melhorias que fazem você parecer um gênio, ajudam você a entender o que cada pedaço de código faz, e alguns deles podem até prever o que você está prestes a digitar e oferecer para terminar seus pensamentos! +Mas aqui está o que é absolutamente mágico nos editores modernos: eles não são apenas editores de texto sofisticados. São como ter o mentor de codificação mais brilhante e solidário sentado ao seu lado 24/7. Eles capturam seus erros de digitação antes que você os perceba, sugerem melhorias que fazem você parecer um gênio, ajudam você a entender o que cada pedaço de código faz e alguns até conseguem prever o que você vai digitar e oferecer para terminar seus pensamentos! -Eu me lembro quando descobri o auto-completar pela primeira vez – literalmente me senti vivendo no futuro. Você começa a digitar algo, e seu editor diz: "Ei, você estava pensando nesta função que faz exatamente o que você precisa?" É como ter um leitor de mentes como seu parceiro de codificação! +Lembro da primeira vez que descobri a auto-completação – me senti vivendo no futuro. Você começa a digitar algo, e seu editor fala: "Ei, você estava pensando nesta função que faz exatamente o que você precisa?" É como ter um leitor de mentes como seu parceiro de programação! -**O que torna esses editores tão incríveis?** +**O que faz esses editores serem tão incríveis?** -Os editores de código modernos oferecem uma impressionante variedade de recursos projetados para aumentar sua produtividade: +Editores de código modernos oferecem uma variedade impressionante de recursos para aumentar sua produtividade: | Recurso | O que Faz | Por que Ajuda | |---------|-----------|--------------| -| **Realce de Sintaxe** | Colore diferentes partes do código | Facilita a leitura e a identificação de erros | -| **Auto-completar** | Sugere código enquanto você digita | Acelera a codificação e reduz erros de digitação | +| **Realce de Sintaxe** | Colore diferentes partes do seu código | Facilita a leitura do código e a identificação de erros | +| **Auto-completação** | Sugere código enquanto você digita | Acelera a codificação e reduz erros de digitação | | **Ferramentas de Depuração** | Ajuda a encontrar e corrigir erros | Economiza horas de solução de problemas | -| **Extensões** | Adiciona recursos especializados | Personaliza o editor para qualquer tecnologia | -| **Assistentes de IA** | Sugere código e explicações | Acelera o aprendizado e a produtividade | +| **Extensões** | Adicionam funcionalidades especializadas | Personalize seu editor para qualquer tecnologia | +| **Assistentes de IA** | Sugerem código e explicações | Acelera o aprendizado e a produtividade | -> 🎥 **Recurso em Vídeo**: Quer ver essas ferramentas em ação? Confira este [vídeo sobre Ferramentas do Ofício](https://youtube.com/watch?v=69WJeXGBdxg) para uma visão geral completa. +> 🎥 **Recurso em Vídeo**: Quer ver essas ferramentas em ação? Confira este [vídeo Ferramentas do Ofício](https://youtube.com/watch?v=69WJeXGBdxg) para uma visão abrangente. #### Editores Recomendados para Desenvolvimento Web **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratuito) -- O mais popular entre os desenvolvedores web +- O mais popular entre desenvolvedores web - Excelente ecossistema de extensões -- Terminal integrado e integração com Git -- **Extensões indispensáveis**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Sugestões de código com IA - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Colaboração em tempo real - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Formatação automática de código - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Detecta erros de digitação no código +- Terminal embutido e integração com Git +- **Extensões essenciais**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - sugestões de código com IA + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - colaboração em tempo real + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - formatação automática de código + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - detecta erros de digitação no código **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Pago, gratuito para estudantes) -- Ferramentas avançadas de depuração e teste +- Ferramentas avançadas de depuração e testes - Auto-completar inteligente -- Controle de versão integrado +- Controle de versão embutido -**IDEs Baseados na Nuvem** (Preços variados) +**IDEs Baseadas em Nuvem** (Diferentes preços) - [GitHub Codespaces](https://github.com/features/codespaces) - VS Code completo no navegador -- [Replit](https://replit.com/) - Ótimo para aprender e compartilhar código -- [StackBlitz](https://stackblitz.com/) - Desenvolvimento web full-stack instantâneo +- [Replit](https://replit.com/) - ótimo para aprender e compartilhar código +- [StackBlitz](https://stackblitz.com/) - desenvolvimento web full-stack instantâneo -> 💡 **Dica para Começar**: Comece com o Visual Studio Code – é gratuito, amplamente utilizado na indústria e tem uma enorme comunidade criando tutoriais e extensões úteis. +> 💡 **Dica para Começar**: Comece com o Visual Studio Code – é gratuito, amplamente usado na indústria e tem uma comunidade enorme criando tutoriais e extensões úteis. ### Navegadores Web: Seu Laboratório Secreto de Desenvolvimento -Ok, prepare-se para ter sua mente completamente explodida! Sabe como você tem usado navegadores para rolar pelas redes sociais e assistir vídeos? Bem, acontece que eles têm escondido este incrível laboratório secreto de desenvolvimento o tempo todo, apenas esperando que você o descubra! +Ok, prepare-se para ficar de queixo caído! Sabe como você tem usado os navegadores para passar pelas redes sociais e assistir vídeos? Bem, eles estavam escondendo esse laboratório secreto de desenvolvimento o tempo todo, só esperando você descobrir! -Toda vez que você clica com o botão direito em uma página da web e seleciona "Inspecionar Elemento", está abrindo um mundo oculto de ferramentas de desenvolvedor que são honestamente mais poderosas do que alguns softwares caros que eu costumava pagar centenas de reais. É como descobrir que sua cozinha comum estava escondendo um laboratório de chef profissional atrás de um painel secreto! -A primeira vez que alguém me mostrou as DevTools do navegador, eu passei umas três horas clicando em tudo e pensando "ESPERA, ELE FAZ ISSO TAMBÉM?!" Você literalmente pode editar qualquer site em tempo real, ver exatamente a velocidade de carregamento de tudo, testar como seu site fica em diferentes dispositivos e até depurar JavaScript como um verdadeiro profissional. É absolutamente incrível! +Toda vez que você clica com o botão direito em uma página e seleciona "Inspecionar Elemento," você abre um mundo oculto de ferramentas de desenvolvedor que são honestamente mais poderosas do que alguns softwares caros pelos quais eu costumava pagar centenas de dólares. É como descobrir que sua cozinha comum estava escondendo um laboratório de chef profissional atrás de um painel secreto! +A primeira vez que alguém me mostrou as DevTools do navegador, passei tipo três horas clicando em tudo e dizendo "ESPERA, ISSO TAMBÉM PODE?!" Você pode literalmente editar qualquer site em tempo real, ver exatamente a velocidade de carregamento de tudo, testar como seu site aparece em diferentes dispositivos e até debugar JavaScript como um profissional de verdade. É absolutamente impressionante! -**Por que os navegadores são sua arma secreta:** +**Aqui está o porquê dos navegadores serem sua arma secreta:** -Quando você cria um site ou aplicativo web, precisa ver como ele se parece e se comporta no mundo real. Os navegadores não apenas exibem seu trabalho, mas também fornecem feedback detalhado sobre desempenho, acessibilidade e possíveis problemas. +Quando você cria um site ou uma aplicação web, precisa ver como ele se parece e se comporta no mundo real. Os navegadores não só exibem seu trabalho, como também fornecem feedback detalhado sobre desempenho, acessibilidade e possíveis problemas. -#### Ferramentas de Desenvolvimento do Navegador (DevTools) +#### Ferramentas de Desenvolvedor do Navegador (DevTools) -Os navegadores modernos incluem suítes de desenvolvimento completas: +Navegadores modernos incluem suítes de desenvolvimento completas: -| Categoria de Ferramenta | O que Faz | Exemplo de Uso | -|--------------------------|-----------|----------------| -| **Inspector de Elementos** | Visualizar e editar HTML/CSS em tempo real | Ajustar estilos e ver resultados imediatos | -| **Console** | Ver mensagens de erro e testar JavaScript | Depurar problemas e experimentar código | +| Categoria da Ferramenta | O Que Ela Faz | Exemplo de Uso | +|---------------|--------------|------------------| +| **Inspetor de Elementos** | Ver e editar HTML/CSS em tempo real | Ajustar estilos para ver resultados imediatos | +| **Console** | Visualizar mensagens de erro e testar JavaScript | Depurar problemas e experimentar com código | | **Monitor de Rede** | Acompanhar o carregamento de recursos | Otimizar desempenho e tempos de carregamento | | **Verificador de Acessibilidade** | Testar design inclusivo | Garantir que seu site funcione para todos os usuários | -| **Simulador de Dispositivos** | Visualizar em diferentes tamanhos de tela | Testar design responsivo sem vários dispositivos | +| **Simulador de Dispositivo** | Visualizar em diferentes tamanhos de tela | Testar design responsivo sem múltiplos dispositivos | #### Navegadores Recomendados para Desenvolvimento - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools padrão da indústria com documentação extensa - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Excelentes ferramentas para CSS Grid e acessibilidade -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Baseado no Chromium com recursos de desenvolvimento da Microsoft +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Baseado no Chromium com recursos para desenvolvedores da Microsoft -> ⚠️ **Dica Importante de Teste**: Sempre teste seus sites em vários navegadores! O que funciona perfeitamente no Chrome pode parecer diferente no Safari ou Firefox. Desenvolvedores profissionais testam em todos os navegadores principais para garantir experiências consistentes para os usuários. +> ⚠️ **Dica Importante para Testes:** Sempre teste seus sites em múltiplos navegadores! O que funciona perfeitamente no Chrome pode parecer diferente no Safari ou Firefox. Desenvolvedores profissionais testam em todos os principais navegadores para garantir experiências consistentes. -### Ferramentas de Linha de Comando: Seu Portal para Superpoderes de Desenvolvedor +### Ferramentas de Linha de Comando: Sua Porta para Superpoderes de Desenvolvedor -Ok, vamos ter um momento completamente honesto sobre a linha de comando, porque quero que você ouça isso de alguém que realmente entende. Quando eu vi pela primeira vez – aquela tela preta assustadora com texto piscando – eu literalmente pensei: "Não, de jeito nenhum! Isso parece algo de um filme de hacker dos anos 80, e eu definitivamente não sou inteligente o suficiente para isso!" 😅 +Beleza, vamos ter um momento totalmente honesto sobre a linha de comando, porque eu quero que você ouça isso de alguém que realmente entende. Quando eu a vi pela primeira vez – só aquela tela preta assustadora com texto piscando – eu literalmente pensei: "Não, de jeito nenhum! Isso parece coisa de filme de hacker dos anos 80, e eu definitivamente não sou inteligente o suficiente para isso!" 😅 -Mas aqui está o que eu gostaria que alguém tivesse me dito naquela época, e o que estou te dizendo agora: a linha de comando não é assustadora – na verdade, é como ter uma conversa direta com seu computador. Pense nisso como a diferença entre pedir comida por um aplicativo sofisticado com fotos e menus (que é legal e fácil) versus entrar no seu restaurante local favorito onde o chef sabe exatamente o que você gosta e pode preparar algo perfeito só com você dizendo "me surpreenda com algo incrível." +Mas aqui está o que eu gostaria que alguém tivesse me dito naquela época, e estou te dizendo agora: a linha de comando não é assustadora – é como ter uma conversa direta com seu computador. Pense nisso como a diferença entre pedir comida por um app sofisticado com fotos e menus (que é legal e fácil) versus entrar no seu restaurante favorito onde o chef sabe exatamente o que você gosta e prepara algo perfeito só porque você disse "surpreenda-me com algo incrível." -A linha de comando é onde os desenvolvedores vão para se sentir como verdadeiros magos. Você digita algumas palavras aparentemente mágicas (ok, são apenas comandos, mas parecem mágicos!), aperta enter, e BOOM – você criou estruturas inteiras de projetos, instalou ferramentas poderosas de todo o mundo ou implantou seu aplicativo na internet para milhões de pessoas verem. Depois que você experimenta esse poder pela primeira vez, é realmente viciante! +A linha de comando é onde os desenvolvedores se sentem como verdadeiros magos. Você digita algumas palavras que parecem mágicas (ok, são apenas comandos, mas parecem mágicas!), aperta enter, e PAH – você criou toda a estrutura de um projeto, instalou ferramentas poderosas do mundo todo ou lançou seu app na internet para milhões verem. Quando você experimenta esse poder pela primeira vez, é sinceramente viciante! **Por que a linha de comando vai se tornar sua ferramenta favorita:** -Embora as interfaces gráficas sejam ótimas para muitas tarefas, a linha de comando se destaca em automação, precisão e velocidade. Muitas ferramentas de desenvolvimento funcionam principalmente por meio de interfaces de linha de comando, e aprender a usá-las de forma eficiente pode melhorar drasticamente sua produtividade. +Enquanto interfaces gráficas são ótimas para muitas tarefas, a linha de comando se destaca em automação, precisão e velocidade. Muitas ferramentas de desenvolvimento funcionam principalmente via linha de comando, e aprender a usá-las eficientemente pode melhorar muito sua produtividade. ```bash -# Step 1: Create and navigate to project directory +# Etapa 1: Crie e navegue até o diretório do projeto mkdir my-awesome-website cd my-awesome-website ``` -**O que este código faz:** +**Aqui está o que esse código faz:** - **Cria** um novo diretório chamado "my-awesome-website" para seu projeto -- **Navega** para o diretório recém-criado para começar a trabalhar +- **Navega** para dentro do diretório recém-criado para começar a trabalhar ```bash -# Step 2: Initialize project with package.json +# Etapa 2: Inicialize o projeto com package.json npm init -y -# Install modern development tools +# Instale ferramentas modernas de desenvolvimento npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Passo a passo, aqui está o que está acontecendo:** -- **Inicializa** um novo projeto Node.js com configurações padrão usando `npm init -y` +**Passo a passo, veja o que está acontecendo:** +- **Inicializa** um novo projeto Node.js com as configurações padrão usando `npm init -y` - **Instala** o Vite como uma ferramenta moderna de build para desenvolvimento rápido e builds de produção -- **Adiciona** o Prettier para formatação automática de código e o ESLint para verificação de qualidade de código -- **Usa** a flag `--save-dev` para marcar essas dependências como exclusivas de desenvolvimento +- **Adiciona** o Prettier para formatação automática de código e o ESLint para verificações de qualidade +- **Usa** a flag `--save-dev` para marcar essas dependências como apenas para desenvolvimento ```bash -# Step 3: Create project structure and files +# Etapa 3: Crie a estrutura e os arquivos do projeto mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Iniciar servidor de desenvolvimento npx vite ``` **No exemplo acima, nós:** - **Organizamos** nosso projeto criando pastas separadas para código-fonte e recursos -- **Geramos** um arquivo HTML básico com estrutura de documento adequada -- **Iniciamos** o servidor de desenvolvimento do Vite para recarregamento ao vivo e substituição de módulos em tempo real +- **Geramos** um arquivo HTML básico com a estrutura correta do documento +- **Iniciamos** o servidor de desenvolvimento do Vite para recarga ao vivo e substituição a quente de módulos #### Ferramentas Essenciais de Linha de Comando para Desenvolvimento Web -| Ferramenta | Propósito | Por que Você Precisa | -|------------|-----------|----------------------| -| **[Git](https://git-scm.com/)** | Controle de versão | Acompanhar mudanças, colaborar com outros, fazer backup do seu trabalho | -| **[Node.js & npm](https://nodejs.org/)** | Runtime de JavaScript & gerenciamento de pacotes | Executar JavaScript fora dos navegadores, instalar ferramentas modernas de desenvolvimento | -| **[Vite](https://vitejs.dev/)** | Ferramenta de build & servidor de desenvolvimento | Desenvolvimento super rápido com substituição de módulos em tempo real | -| **[ESLint](https://eslint.org/)** | Qualidade de código | Encontrar e corrigir problemas automaticamente no seu JavaScript | -| **[Prettier](https://prettier.io/)** | Formatação de código | Manter seu código consistentemente formatado e legível | +| Ferramenta | Propósito | Por Que Você Precisa | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | Controle de versão | Rastrear mudanças, colaborar, fazer backup do seu trabalho | +| **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript & gerenciador de pacotes | Executar JavaScript fora do navegador, instalar ferramentas modernas | +| **[Vite](https://vitejs.dev/)** | Ferramenta de build & servidor de desenvolvimento | Desenvolvimento super-rápido com hot module replacement | +| **[ESLint](https://eslint.org/)** | Qualidade de código | Encontrar e corrigir problemas automaticamente no JavaScript | +| **[Prettier](https://prettier.io/)** | Formatação de código | Manter o código consistente e legível | -#### Opções Específicas para Cada Plataforma +#### Opções Específicas para Plataformas **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal moderno e rico em recursos -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Ambiente de script poderoso -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Linha de comando tradicional do Windows +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal moderno com muitos recursos +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Ambiente poderoso para scripts +- **[Prompt de Comando](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Linha de comando tradicional do Windows **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Aplicativo de terminal embutido @@ -665,194 +661,194 @@ npx vite > 💻 = Pré-instalado no sistema operacional -> 🎯 **Caminho de Aprendizado**: Comece com comandos básicos como `cd` (mudar diretório), `ls` ou `dir` (listar arquivos) e `mkdir` (criar pasta). Pratique com comandos de fluxo de trabalho modernos como `npm install`, `git status` e `code .` (abre o diretório atual no VS Code). Conforme você se sentir mais confortável, naturalmente aprenderá comandos mais avançados e técnicas de automação. +> 🎯 **Caminho de Aprendizagem:** Comece com comandos básicos como `cd` (mudar diretório), `ls` ou `dir` (listar arquivos) e `mkdir` (criar pasta). Pratique com comandos modernos de fluxo de trabalho como `npm install`, `git status` e `code .` (abre o diretório atual no VS Code). À medida que ganhar confiança, você naturalmente aprenderá comandos avançados e técnicas de automação. ### Documentação: Seu Mentor de Aprendizado Sempre Disponível -Ok, vou compartilhar um pequeno segredo que vai te fazer sentir muito melhor sobre ser iniciante: até os desenvolvedores mais experientes passam uma grande parte do tempo lendo documentação. E isso não é porque eles não sabem o que estão fazendo – na verdade, é um sinal de sabedoria! +Ok, deixe eu contar um segredinho que vai te fazer se sentir muito melhor por ser iniciante: até os desenvolvedores mais experientes gastam uma boa parte do tempo lendo documentação. E não é porque eles não sabem o que estão fazendo – na verdade, isso é sinal de sabedoria! -Pense na documentação como ter acesso aos professores mais pacientes e experientes do mundo, disponíveis 24 horas por dia, 7 dias por semana. Está com um problema às 2 da manhã? A documentação está lá com um abraço virtual caloroso e exatamente a resposta que você precisa. Quer aprender sobre algum recurso novo e legal que todo mundo está comentando? A documentação está lá com exemplos passo a passo. Tentando entender por que algo funciona do jeito que funciona? Isso mesmo – a documentação está pronta para explicar de uma forma que finalmente faz sentido! +Pense na documentação como ter acesso aos professores mais pacientes e conhecedores do mundo, disponíveis 24 horas por dia. Travado num problema às 2 da manhã? A documentação está lá com um abraço virtual e exatamente a resposta que você precisa. Quer aprender sobre algum recurso novo que todo mundo está comentando? A documentação te ajuda com exemplos passo a passo. Tentando entender por que algo funciona de determinada forma? Você já sabe – a documentação está pronta para explicar de um jeito que finalmente faça sentido! -Aqui está algo que mudou completamente minha perspectiva: o mundo do desenvolvimento web avança incrivelmente rápido, e ninguém (eu quero dizer absolutamente ninguém!) mantém tudo memorizado. Já vi desenvolvedores seniores com mais de 15 anos de experiência pesquisarem sintaxes básicas, e sabe de uma coisa? Isso não é vergonhoso – é inteligente! Não se trata de ter uma memória perfeita; trata-se de saber onde encontrar respostas confiáveis rapidamente e entender como aplicá-las. +Aqui vai algo que mudou completamente minha visão: o mundo do desenvolvimento web se move muito rápido, e ninguém (absolutamente ninguém!) decorou tudo. Já vi desenvolvedores seniores com mais de 15 anos de experiência consultar a sintaxe básica, e quer saber? Isso não é vergonhoso – é inteligente! Não é sobre ter memória perfeita; é sobre saber onde achar respostas confiáveis rapidamente e entender como aplicá-las. -**Aqui está onde a verdadeira mágica acontece:** +**É aqui que a verdadeira mágica acontece:** -Desenvolvedores profissionais passam uma parte significativa do tempo lendo documentação – não porque não sabem o que estão fazendo, mas porque o cenário do desenvolvimento web evolui tão rapidamente que se manter atualizado exige aprendizado contínuo. Uma boa documentação ajuda você a entender não apenas *como* usar algo, mas *por que* e *quando* usá-lo. +Desenvolvedores profissionais gastam uma parte significativa do tempo lendo documentação – não porque não sabem o que estão fazendo, mas porque o cenário do desenvolvimento web evolui tão rápido que se manter atualizado exige aprendizado contínuo. Uma boa documentação ajuda a entender não apenas *como* usar algo, mas *por que* e *quando* usá-lo. #### Recursos Essenciais de Documentação -**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- O padrão ouro para documentação de tecnologias web -- Guias abrangentes para HTML, CSS e JavaScript -- Inclui informações de compatibilidade entre navegadores -- Apresenta exemplos práticos e demos interativas +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- O padrão ouro para documentação de tecnologias web +- Guias completos para HTML, CSS e JavaScript +- Inclui informações sobre compatibilidade com navegadores +- Oferece exemplos práticos e demos interativas -**[Web.dev](https://web.dev)** (por Google) -- Melhores práticas modernas de desenvolvimento web -- Guias de otimização de desempenho -- Princípios de acessibilidade e design inclusivo -- Estudos de caso de projetos reais +**[Web.dev](https://web.dev)** (do Google) +- Melhores práticas modernas de desenvolvimento web +- Guias de otimização de desempenho +- Princípios de acessibilidade e design inclusivo +- Estudos de caso de projetos reais -**[Documentação da Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Recursos de desenvolvimento para o navegador Edge -- Guias de Progressive Web Apps -- Insights sobre desenvolvimento multiplataforma +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Recursos para desenvolvimento no navegador Edge +- Guias de Progressive Web Apps +- Insights para desenvolvimento multiplataforma -**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Currículos de aprendizado estruturados -- Cursos em vídeo com especialistas da indústria -- Exercícios práticos de codificação +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- Currículos estruturados de aprendizagem +- Cursos em vídeo com especialistas do setor +- Exercícios práticos de programação -> 📚 **Estratégia de Estudo**: Não tente memorizar a documentação – em vez disso, aprenda a navegar por ela de forma eficiente. Salve nos favoritos as referências mais usadas e pratique usar as funções de busca para encontrar informações específicas rapidamente. +> 📚 **Estratégia de Estudo:** Não tente decorar a documentação – em vez disso, aprenda a navegar nela eficientemente. Salve referências usadas com frequência e pratique usar a função de busca para encontrar informações específicas rapidamente. -### 🔧 **Verificação de Domínio de Ferramentas: O que te interessa?** +### 🔧 **Cheque de Domínio das Ferramentas: Com o Que Você Se Identifica?** -**Tire um momento para refletir:** -- Qual ferramenta você está mais animado para experimentar primeiro? (Não há resposta errada!) -- A linha de comando ainda parece intimidante ou você está curioso sobre ela? -- Você consegue imaginar usar as DevTools do navegador para explorar os bastidores dos seus sites favoritos? +**Tire um momento para pensar:** +- Qual ferramenta você está mais animado para experimentar primeiro? (Não existe resposta errada!) +- A linha de comando ainda parece intimidante, ou você está curioso para ela? +- Você consegue imaginar usar as DevTools do navegador para espiar por trás da cortina dos seus sites favoritos? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "Tempo do Desenvolvedor Gasto com Ferramentas" + "Editor de Código" : 40 + "Teste no Navegador" : 25 + "Linha de Comando" : 15 + "Lendo Documentação" : 15 + "Depuração" : 5 ``` +> **Curiosidade divertida**: A maioria dos desenvolvedores passa cerca de 40% do tempo no editor de código, mas repare quanto tempo vai para testes, aprendizado e resolução de problemas. Programar não é só escrever código – é criar experiências! -> **Insight divertido**: A maioria dos desenvolvedores passa cerca de 40% do tempo no editor de código, mas perceba quanto tempo é dedicado a testes, aprendizado e resolução de problemas. Programar não é apenas escrever código – é criar experiências! - -✅ **Para pensar**: Aqui está algo interessante para refletir – como você acha que as ferramentas para construir sites (desenvolvimento) podem ser diferentes das ferramentas para projetar como eles se parecem (design)? É como a diferença entre ser um arquiteto que projeta uma casa bonita e o construtor que realmente a constrói. Ambos são cruciais, mas precisam de caixas de ferramentas diferentes! Esse tipo de pensamento realmente ajuda a ver o panorama geral de como os sites ganham vida. +✅ **Para refletir**: Aqui vai uma questão interessante – como você acha que as ferramentas para construir sites (desenvolvimento) podem ser diferentes das ferramentas para projetar sua aparência (design)? É como a diferença entre um arquiteto que projeta uma casa bonita e o empreiteiro que realmente a constrói. Ambos são cruciais, mas precisam de caixas de ferramentas diferentes! Esse tipo de pensamento vai te ajudar a enxergar o panorama geral de como os sites ganham vida. -## Desafio do Agente GitHub Copilot 🚀 +## Desafio Agente GitHub Copilot 🚀 -Use o modo Agent para completar o seguinte desafio: +Use o modo Agente para completar o seguinte desafio: -**Descrição:** Explore os recursos de um editor de código moderno ou IDE e demonstre como ele pode melhorar seu fluxo de trabalho como desenvolvedor web. +**Descrição:** Explore as funcionalidades de um editor de código moderno ou IDE e demonstre como ele pode melhorar seu fluxo de trabalho como desenvolvedor web. -**Prompt:** Escolha um editor de código ou IDE (como Visual Studio Code, WebStorm ou um IDE baseado em nuvem). Liste três recursos ou extensões que ajudam você a escrever, depurar ou manter o código de forma mais eficiente. Para cada um, forneça uma breve explicação de como ele beneficia seu fluxo de trabalho. +**Prompt:** Escolha um editor de código ou IDE (como Visual Studio Code, WebStorm ou um IDE baseado na nuvem). Liste três recursos ou extensões que te ajudam a escrever, depurar ou manter código com mais eficiência. Para cada um, forneça uma breve explicação de como beneficia seu fluxo de trabalho. --- ## 🚀 Desafio -**Pronto para o seu primeiro caso, detetive?** +**Beleza, detetive, pronto para seu primeiro caso?** -Agora que você tem essa base incrível, tenho uma aventura que vai te ajudar a ver como o mundo da programação é incrivelmente diverso e fascinante. E ouça – isso não é sobre escrever código ainda, então sem pressão! Pense em si mesmo como um detetive de linguagens de programação em seu primeiro caso emocionante! +Agora que você tem essa base incrível, tenho uma aventura que vai te ajudar a ver o quão incrivelmente diverso e fascinante o mundo da programação realmente é. E escute – isso não é sobre escrever código ainda, então nada de pressão! Pense em você como um detetive de linguagens de programação no seu primeiro caso emocionante! -**Sua missão, caso decida aceitá-la:** -1. **Torne-se um explorador de linguagens**: Escolha três linguagens de programação de universos completamente diferentes – talvez uma que construa sites, outra que crie aplicativos móveis e outra que analise dados para cientistas. Encontre exemplos da mesma tarefa simples escrita em cada linguagem. Prometo que você vai ficar absolutamente impressionado com o quão diferentes elas podem parecer enquanto fazem exatamente a mesma coisa! +**Sua missão, caso aceite:** +1. **Se torne um explorador de linguagens**: Escolha três linguagens de programação de universos completamente diferentes – talvez uma para construir sites, outra para criar apps móveis e outra para analisar dados para cientistas. Encontre exemplos da mesma tarefa simples escritos em cada linguagem. Eu prometo que você vai ficar absolutamente impressionado como podem ser tão diferentes e ainda fazer exatamente a mesma coisa! -2. **Descubra suas histórias de origem**: O que torna cada linguagem especial? Aqui está um fato interessante – cada linguagem de programação foi criada porque alguém pensou: "Sabe de uma coisa? Deve haver uma maneira melhor de resolver este problema específico." Você consegue descobrir quais eram esses problemas? Algumas dessas histórias são genuinamente fascinantes! +2. **Descubra suas histórias de origem**: O que torna cada linguagem especial? Aqui vai um fato legal – toda linguagem de programação foi criada porque alguém pensou, "Sabe de uma coisa? Precisa haver uma forma melhor de resolver esse problema específico." Consegue descobrir quais eram esses problemas? Algumas dessas histórias são realmente fascinantes! -3. **Conheça as comunidades**: Veja como cada comunidade de linguagem é acolhedora e apaixonada. Algumas têm milhões de desenvolvedores compartilhando conhecimento e ajudando uns aos outros, outras são menores, mas incrivelmente unidas e solidárias. Você vai adorar ver as diferentes personalidades dessas comunidades! +3. **Conheça as comunidades**: Confira como é a recepção e o entusiasmo das comunidades de cada linguagem. Algumas têm milhões de desenvolvedores compartilhando conhecimento e ajudando uns aos outros, outras são menores mas super unidas e apoiadoras. Você vai adorar conhecer as diferentes personalidades dessas comunidades! -4. **Siga sua intuição**: Qual linguagem parece mais acessível para você agora? Não se preocupe em fazer a escolha "perfeita" – apenas ouça seus instintos! Não há resposta errada aqui, e você sempre pode explorar outras mais tarde. +4. **Siga seu instinto**: Qual linguagem parece mais acessível para você agora? Não se preocupe em fazer a escolha "perfeita" – ouça seu feeling! Não existe resposta errada aqui, e você sempre pode explorar outras depois. -**Trabalho de detetive bônus**: Veja se consegue descobrir quais grandes sites ou aplicativos são construídos com cada linguagem. Garanto que você ficará surpreso ao saber o que alimenta o Instagram, Netflix ou aquele jogo móvel que você não consegue parar de jogar! +**Trabalho extra do detetive:** Veja se consegue descobrir quais grandes sites ou apps são construídos com cada linguagem. Garanto que vai se surpreender ao saber o que move Instagram, Netflix ou aquele jogo mobile que você não para de jogar! -> 💡 **Lembre-se**: Você não está tentando se tornar um especialista em nenhuma dessas linguagens hoje. Você está apenas conhecendo o bairro antes de decidir onde quer se estabelecer. Vá com calma, divirta-se e deixe sua curiosidade te guiar! +> 💡 **Lembre-se**: Você não está tentando se tornar um expert em nenhuma dessas linguagens hoje. Você está apenas conhecendo a vizinhança antes de decidir onde quer se estabelecer. Vá com calma, divirta-se e deixe sua curiosidade te guiar! -## Vamos Celebrar o que Você Descobriu! +## Vamos Celebrar Tudo o Que Você Descobriu! -Uau, você absorveu tanta informação incrível hoje! Estou genuinamente animado para ver o quanto dessa jornada incrível ficou com você. E lembre-se – isso não é um teste onde você precisa acertar tudo. É mais como uma celebração de todas as coisas legais que você aprendeu sobre esse mundo fascinante no qual está prestes a mergulhar! +Nossa, você absorveu tanta informação incrível hoje! Estou genuinamente animado para ver quanto dessa jornada maravilhosa ficou com você. E lembre-se – isso não é uma prova em que você precisa acertar tudo. É mais uma celebração de tudo o que você aprendeu sobre esse mundo fascinante que está prestes a explorar! -[Faça o quiz pós-aula](https://ff-quizzes.netlify.app/web/) -## Revisão e Autoestudo +[Faça o quiz após a aula](https://ff-quizzes.netlify.app/web/) -**Tire um tempo para explorar e se divertir com isso!** +## Revisão & Autoestudo -Você cobriu muita coisa hoje, e isso é algo para se orgulhar! Agora vem a parte divertida – explorar os tópicos que despertaram sua curiosidade. Lembre-se, isso não é tarefa de casa – é uma aventura! +**Tire seu tempo para explorar e se divertir!** +Você percorreu um longo caminho hoje, e isso é algo para se orgulhar! Agora vem a parte divertida – explorar os tópicos que despertaram sua curiosidade. Lembre-se, isso não é dever de casa – é uma aventura! -**Aprofunde-se no que te empolga:** +**Aprofunde-se no que te anima:** -**Coloque a mão na massa com linguagens de programação:** +**Comece a usar as linguagens de programação:** - Visite os sites oficiais de 2-3 linguagens que chamaram sua atenção. Cada uma tem sua própria personalidade e história! -- Experimente alguns playgrounds de código online como [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Replit](https://replit.com/). Não tenha medo de experimentar – você não vai quebrar nada! -- Leia sobre como sua linguagem favorita surgiu. Sério, algumas dessas histórias de origem são fascinantes e vão te ajudar a entender por que as linguagens funcionam do jeito que funcionam. +- Experimente alguns playgrounds de código online como [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ou [Replit](https://replit.com/). Não tenha medo de experimentar – você não vai quebrar nada! +- Leia sobre como sua linguagem favorita surgiu. Sério, algumas dessas histórias de origem são fascinantes e vão ajudar você a entender por que as linguagens funcionam do jeito que funcionam. -**Fique confortável com suas novas ferramentas:** -- Baixe o Visual Studio Code, se ainda não fez isso – é gratuito e você vai adorar! -- Passe alguns minutos navegando no marketplace de Extensões. É como uma loja de aplicativos para seu editor de código! -- Abra as Ferramentas de Desenvolvedor do seu navegador e clique por aí. Não se preocupe em entender tudo – apenas familiarize-se com o que está lá. +**Fique familiarizado com suas novas ferramentas:** +- Baixe o Visual Studio Code se ainda não o fez – é gratuito e você vai adorar! +- Passe alguns minutos navegando pelo marketplace de Extensões. É como uma loja de apps para seu editor de código! +- Abra as Ferramentas de Desenvolvedor do seu navegador e explore um pouco. Não se preocupe em entender tudo – apenas familiarize-se com o que está lá. -**Participe da comunidade:** -- Siga algumas comunidades de desenvolvedores no [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ou [GitHub](https://github.com/). A comunidade de programação é incrivelmente acolhedora para iniciantes! -- Assista a alguns vídeos de programação para iniciantes no YouTube. Há muitos criadores incríveis que se lembram de como é estar começando. -- Considere participar de encontros locais ou comunidades online. Acredite, desenvolvedores adoram ajudar iniciantes! +**Junte-se à comunidade:** +- Siga algumas comunidades de desenvolvedores no [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ou [GitHub](https://github.com/). A comunidade de programação é extremamente receptiva a iniciantes! +- Assista a vídeos de programação para iniciantes no YouTube. Existem muitos criadores excelentes que lembram como é começar do zero. +- Considere participar de meetups locais ou comunidades online. Acredite, desenvolvedores adoram ajudar quem está começando! -> 🎯 **Ouça, aqui está o que eu quero que você lembre**: Não se espera que você se torne um mestre em programação da noite para o dia! Agora, você está apenas conhecendo este mundo incrível do qual está prestes a fazer parte. Vá com calma, aproveite a jornada e lembre-se – todo desenvolvedor que você admira já esteve exatamente onde você está agora, sentindo-se empolgado e talvez um pouco sobrecarregado. Isso é totalmente normal e significa que você está no caminho certo! +> 🎯 **Ouça, aqui está o que quero que você lembre**: Você não precisa se tornar um mago da programação da noite para o dia! Agora, você está apenas conhecendo esse mundo incrível que está prestes a fazer parte. Vá com calma, aproveite a jornada e lembre-se – todo desenvolvedor que você admira já esteve exatamente onde você está agora, sentindo-se empolgado e talvez um pouco sobrecarregado. Isso é totalmente normal, e significa que você está no caminho certo! -## Tarefa +## Assignment [Reading the Docs](assignment.md) -> 💡 **Um pequeno empurrão para sua tarefa**: Eu adoraria ver você explorar algumas ferramentas que ainda não abordamos! Pule os editores, navegadores e ferramentas de linha de comando que já discutimos – existe todo um universo incrível de ferramentas de desenvolvimento esperando para ser descoberto. Procure por aquelas que são ativamente mantidas e têm comunidades vibrantes e úteis (essas tendem a ter os melhores tutoriais e as pessoas mais solidárias quando você inevitavelmente ficar preso e precisar de uma mão amiga). +> 💡 **Um pequeno empurrão para sua tarefa**: Eu adoraria ver você explorar algumas ferramentas que ainda não cobrimos! Pule os editores, navegadores e ferramentas de linha de comando de que já falamos – existe um universo incrível de ferramentas de desenvolvimento esperando para ser descoberto. Procure aquelas que são ativamente mantidas e têm comunidades vibrantes e prestativas (essas tendem a ter os melhores tutoriais e as pessoas mais solidárias quando você inevitavelmente ficar travado e precisar de uma ajuda amigável). --- -## 🚀 Sua Linha do Tempo na Jornada de Programação +## 🚀 Seu Cronograma de Jornada na Programação ### ⚡ **O que você pode fazer nos próximos 5 minutos** -- [ ] Adicione aos favoritos os sites de 2-3 linguagens de programação que chamaram sua atenção -- [ ] Baixe o Visual Studio Code, se ainda não fez isso -- [ ] Abra as DevTools do seu navegador (F12) e clique por aí em qualquer site -- [ ] Participe de uma comunidade de programação (Dev.to, Reddit r/webdev ou Stack Overflow) +- [ ] Salvar nos favoritos 2-3 sites de linguagens de programação que chamaram sua atenção +- [ ] Baixar o Visual Studio Code se ainda não fez +- [ ] Abrir as DevTools do navegador (F12) e clicar por qualquer site +- [ ] Entrar em uma comunidade de programação (Dev.to, Reddit r/webdev, ou Stack Overflow) ### ⏰ **O que você pode realizar nesta hora** -- [ ] Complete o quiz pós-aula e reflita sobre suas respostas -- [ ] Configure o VS Code com a extensão GitHub Copilot -- [ ] Experimente um exemplo de "Hello World" em 2 linguagens de programação diferentes online -- [ ] Assista a um vídeo "Um dia na vida de um desenvolvedor" no YouTube -- [ ] Comece sua investigação sobre linguagens de programação (do desafio) +- [ ] Completar o quiz pós-aula e refletir sobre suas respostas +- [ ] Configurar o VS Code com a extensão GitHub Copilot +- [ ] Experimentar um exemplo "Hello World" em 2 linguagens de programação online +- [ ] Assistir a um vídeo "Um dia na vida de um desenvolvedor" no YouTube +- [ ] Começar sua investigação sobre linguagens de programação (do desafio) ### 📅 **Sua aventura de uma semana** -- [ ] Complete a tarefa e explore 3 novas ferramentas de desenvolvimento -- [ ] Siga 5 desenvolvedores ou contas de programação nas redes sociais -- [ ] Experimente criar algo pequeno no CodePen ou Replit (mesmo que seja só "Olá, [Seu Nome]!") -- [ ] Leia um post de blog de um desenvolvedor sobre a jornada dele na programação -- [ ] Participe de um encontro virtual ou assista a uma palestra sobre programação -- [ ] Comece a aprender a linguagem escolhida com tutoriais online - -### 🗓️ **Sua transformação de um mês** -- [ ] Construa seu primeiro projeto pequeno (mesmo uma página simples conta!) -- [ ] Contribua para um projeto de código aberto (comece com correções de documentação) -- [ ] Mentore alguém que está começando sua jornada de programação -- [ ] Crie seu site de portfólio de desenvolvedor -- [ ] Conecte-se com comunidades locais de desenvolvedores ou grupos de estudo -- [ ] Comece a planejar seu próximo marco de aprendizado - -### 🎯 **Reflexão Final** - -**Antes de seguir em frente, tire um momento para celebrar:** +- [ ] Completar a tarefa e explorar 3 novas ferramentas de desenvolvimento +- [ ] Seguir 5 desenvolvedores ou contas de programação nas redes sociais +- [ ] Tentar criar algo pequeno no CodePen ou Replit (mesmo que seja só "Olá, [Seu Nome]!") +- [ ] Ler um post de blog de um desenvolvedor sobre a jornada de codificação dele +- [ ] Participar de um meetup virtual ou assistir a uma palestra sobre programação +- [ ] Começar a aprender sua linguagem escolhida com tutoriais online + +### 🗓️ **Sua transformação em um mês** +- [ ] Construir seu primeiro projeto pequeno (mesmo uma página web simples conta!) +- [ ] Contribuir para um projeto open-source (comece com correções na documentação) +- [ ] Mentorar alguém que está começando a jornada de programação +- [ ] Criar seu site portfólio de desenvolvedor +- [ ] Conectar-se com comunidades locais de desenvolvedores ou grupos de estudo +- [ ] Começar a planejar seu próximo marco de aprendizado + +### 🎯 **Checagem final de reflexão** + +**Antes de continuar, reserve um momento para celebrar:** - Qual foi uma coisa sobre programação que te empolgou hoje? - Qual ferramenta ou conceito você quer explorar primeiro? -- Como você se sente ao começar essa jornada de programação? -- Qual pergunta você gostaria de fazer a um desenvolvedor agora? +- Como você se sente ao começar essa jornada na programação? +- Qual é uma pergunta que você gostaria de fazer a um desenvolvedor agora? ```mermaid journey - title Your Confidence Building Journey - section Today - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You - section This Week - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Next Month - Building: 5: You - Confident: 5: You - Helping Others: 5: You + title Sua Jornada de Construção de Confiança + section Hoje + Curioso: 3: Você + Sobrecarregado: 4: Você + Animado: 5: Você + section Esta Semana + Explorando: 4: Você + Aprendendo: 5: Você + Conectando: 4: Você + section Próximo Mês + Construindo: 5: Você + Confiante: 5: Você + Ajudando os Outros: 5: Você ``` - -> 🌟 **Lembre-se**: Todo especialista já foi um iniciante. Todo desenvolvedor sênior já se sentiu exatamente como você agora – empolgado, talvez um pouco sobrecarregado, e definitivamente curioso sobre o que é possível. Você está em ótima companhia, e essa jornada vai ser incrível. Bem-vindo ao maravilhoso mundo da programação! 🎉 +> 🌟 **Lembre-se**: Todo especialista já foi um iniciante. Todo desenvolvedor sênior já sentiu exatamente o que você sente agora – empolgado, talvez um pouco sobrecarregado, e definitivamente curioso sobre o que é possível. Você está em uma companhia incrível, e essa jornada vai ser sensacional. Bem-vindo ao maravilhoso mundo da programação! 🎉 --- + **Aviso Legal**: -Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. \ No newline at end of file +Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. + \ No newline at end of file diff --git a/translations/pt-BR/AGENTS.md b/translations/pt-BR/AGENTS.md index 19223ad5a..30203ec52 100644 --- a/translations/pt-BR/AGENTS.md +++ b/translations/pt-BR/AGENTS.md @@ -2,27 +2,27 @@ ## Visão Geral do Projeto -Este é um repositório curricular educacional para ensinar os fundamentos do desenvolvimento web para iniciantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas cobrindo JavaScript, CSS e HTML. +Este é um repositório de currículo educacional para ensinar fundamentos de desenvolvimento web para iniciantes. O currículo é um curso completo de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas cobrindo JavaScript, CSS e HTML. ### Componentes Principais -- **Conteúdo Educacional**: 24 aulas estruturadas organizadas em módulos baseados em projetos -- **Projetos Práticos**: Terrarium, Typing Game, Extensão de Navegador, Space Game, Aplicativo Bancário, Editor de Código e Assistente de Chat com IA -- **Quizzes Interativos**: 48 quizzes com 3 perguntas cada (avaliações pré/pós-aula) -- **Suporte Multilíngue**: Traduções automáticas para 50+ idiomas via GitHub Actions -- **Tecnologias**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para projetos de IA) +- **Conteúdo Educacional**: 24 lições estruturadas organizadas em módulos baseados em projetos +- **Projetos Práticos**: Terrário, Jogo de Digitação, Extensão de Navegador, Jogo Espacial, Aplicativo Bancário, Editor de Código e Assistente de Chat com IA +- **Questionários Interativos**: 48 questionários com 3 perguntas cada (avaliações pré e pós-lição) +- **Suporte Multilíngue**: Traduções automáticas para mais de 50 idiomas via GitHub Actions +- **Tecnologias**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para projetos de IA) ### Arquitetura -- Repositório educacional com estrutura baseada em aulas -- Cada pasta de aula contém README, exemplos de código e soluções -- Projetos independentes em diretórios separados (quiz-app, vários projetos de aula) -- Sistema de tradução usando GitHub Actions (co-op-translator) -- Documentação servida via Docsify e disponível em PDF +- Repositório educacional com estrutura baseada em lições +- Cada pasta de lição contém README, exemplos de código e soluções +- Projetos independentes em diretórios separados (quiz-app, vários projetos de lição) +- Sistema de tradução usando GitHub Actions (co-op-translator) +- Documentação servida via Docsify e disponível em PDF ## Comandos de Configuração -Este repositório é destinado principalmente para consumo de conteúdo educacional. Para trabalhar com projetos específicos: +Este repositório é destinado principalmente ao consumo de conteúdo educacional. Para trabalhar com projetos específicos: ### Configuração Principal do Repositório @@ -37,7 +37,7 @@ cd Web-Dev-For-Beginners cd quiz-app npm install npm run dev # Iniciar servidor de desenvolvimento -npm run build # Compilar para produção +npm run build # Construir para produção npm run lint # Executar ESLint ``` @@ -59,7 +59,7 @@ npm install # Siga as instruções específicas do navegador para carregar extensões ``` -### Projetos de Space Game +### Projetos de Jogo Espacial ```bash cd 6-space-game/solution @@ -67,7 +67,7 @@ npm install # Abra index.html no navegador ou use o Live Server ``` -### Projeto de Chat (Backend Python) +### Projeto de Chat (Backend em Python) ```bash cd 9-chat-project/solution/backend/python @@ -78,31 +78,31 @@ python api.py ## Fluxo de Desenvolvimento -### Para Colaboradores de Conteúdo +### Para Contribuidores de Conteúdo -1. **Faça um fork** do repositório para sua conta no GitHub -2. **Clone seu fork** localmente -3. **Crie uma nova branch** para suas alterações -4. Faça mudanças no conteúdo das aulas ou exemplos de código -5. Teste qualquer alteração de código nos diretórios dos projetos relevantes -6. Envie pull requests seguindo as diretrizes de contribuição +1. **Faça um fork do repositório** para sua conta do GitHub +2. **Clone seu fork** localmente +3. **Crie uma nova branch** para suas alterações +4. Faça mudanças no conteúdo das lições ou exemplos de código +5. Teste quaisquer alterações de código nos diretórios dos projetos relevantes +6. Envie pull requests seguindo as diretrizes de contribuição -### Para Aprendizes +### Para Estudantes -1. Faça fork ou clone o repositório -2. Navegue sequencialmente pelas pastas das aulas -3. Leia os arquivos README de cada aula -4. Complete os quizzes pré-aula em https://ff-quizzes.netlify.app/web/ -5. Trabalhe nos exemplos de código nas pastas das aulas -6. Complete tarefas e desafios -7. Realize os quizzes pós-aula +1. Faça fork ou clone o repositório +2. Navegue pelas pastas das lições sequencialmente +3. Leia os arquivos README de cada lição +4. Complete os questionários pré-lição em https://ff-quizzes.netlify.app/web/ +5. Trabalhe nos exemplos de código nas pastas das lições +6. Complete tarefas e desafios +7. Faça os questionários pós-lição -### Desenvolvimento Ao Vivo +### Desenvolvimento ao Vivo -- **Documentação**: Execute `docsify serve` na raiz (porta 3000) -- **Quiz App**: Execute `npm run dev` no diretório quiz-app -- **Projetos**: Use a extensão Live Server do VS Code para projetos HTML -- **Projetos API**: Execute `npm start` nos diretórios das APIs respectivas +- **Documentação**: Execute `docsify serve` na raiz (porta 3000) +- **Quiz App**: Execute `npm run dev` no diretório quiz-app +- **Projetos**: Use a extensão Live Server do VS Code para projetos HTML +- **Projetos de API**: Execute `npm start` nos respectivos diretórios de API ## Instruções de Teste @@ -110,71 +110,71 @@ python api.py ```bash cd quiz-app -npm run lint # Verificar problemas de estilo de código -npm run build # Verificar se a compilação foi bem-sucedida +npm run lint # Verifique problemas no estilo do código +npm run build # Verifique se a compilação foi bem-sucedida ``` ### Teste da API Bancária ```bash cd 7-bank-project/api -npm run lint # Verificar problemas no estilo do código -node server.js # Verificar se o servidor inicia sem erros +npm run lint # Verifique problemas de estilo de código +node server.js # Verifique se o servidor inicia sem erros ``` ### Abordagem Geral de Testes -- Este é um repositório educacional sem testes automatizados abrangentes -- Testes manuais focam em: - - Exemplos de código executando sem erros - - Links na documentação funcionando corretamente - - Builds dos projetos completando com sucesso - - Exemplos seguindo boas práticas +- Este é um repositório educacional sem testes automatizados abrangentes +- Os testes manuais focam em: + - Exemplos de código executam sem erros + - Links na documentação funcionam corretamente + - Builds dos projetos completam com sucesso + - Exemplos seguem boas práticas -### Verificações Pré-envio +### Verificações Antes de Enviar -- Execute `npm run lint` nos diretórios com package.json -- Verifique se os links markdown são válidos -- Teste exemplos de código no navegador ou Node.js -- Confira se as traduções mantêm a estrutura adequada +- Execute `npm run lint` em diretórios com package.json +- Verifique se os links markdown são válidos +- Teste exemplos de código no navegador ou Node.js +- Confira se as traduções mantêm estrutura adequada ## Diretrizes de Estilo de Código ### JavaScript -- Use sintaxe moderna ES6+ -- Siga as configurações padrão do ESLint fornecidas nos projetos -- Use nomes significativos para variáveis e funções para clareza educacional -- Adicione comentários explicando conceitos para os aprendizes -- Formate usando Prettier onde configurado +- Use sintaxe moderna ES6+ +- Siga as configurações padrão do ESLint fornecidas nos projetos +- Use nomes de variáveis e funções significativos para clareza educacional +- Adicione comentários explicando conceitos para os estudantes +- Formate usando Prettier onde configurado ### HTML/CSS -- Elementos semânticos HTML5 -- Princípios de design responsivo -- Convenções claras de nomes de classes -- Comentários explicando técnicas de CSS para os aprendizes +- Elementos semânticos HTML5 +- Princípios de design responsivo +- Convenções claras para nomes de classes +- Comentários explicando técnicas CSS para os estudantes ### Python -- Diretrizes de estilo PEP 8 -- Exemplos claros e educacionais de código -- Dicas de tipo onde forem úteis para o aprendizado +- Diretrizes de estilo PEP 8 +- Exemplos de código claros e educativos +- Anotações de tipo onde forem úteis para aprendizagem ### Documentação Markdown -- Hierarquia clara de títulos -- Blocos de código com especificação de linguagem -- Links para recursos adicionais -- Capturas de tela e imagens nas pastas `images/` -- Texto alternativo para imagens para acessibilidade +- Hierarquia clara de títulos +- Blocos de código com especificação de linguagem +- Links para recursos adicionais +- Capturas de tela e imagens em diretórios `images/` +- Texto alternativo para imagens para acessibilidade ### Organização de Arquivos -- Aulas numeradas sequencialmente (1-getting-started-lessons, 2-js-basics, etc.) -- Cada projeto tem diretórios `solution/` e frequentemente `start/` ou `your-work/` -- Imagens armazenadas em pastas `images/` específicas da aula -- Traduções em estrutura `translations/{language-code}/` +- Lições numeradas sequencialmente (1-getting-started-lessons, 2-js-basics, etc.) +- Cada projeto tem diretórios `solution/` e frequentemente `start/` ou `your-work/` +- Imagens armazenadas em pastas `images/` específicas das lições +- Traduções na estrutura `translations/{language-code}/` ## Build e Implantação @@ -185,13 +185,13 @@ O quiz-app está configurado para implantação no Azure Static Web Apps: ```bash cd quiz-app npm run build # Cria a pasta dist/ -# Faz o deploy via workflow do GitHub Actions ao fazer push na branch main +# Faz o deploy via workflow do GitHub Actions em push para main ``` - -Configuração do Azure Static Web Apps: -- **Localização do app**: `/quiz-app` -- **Localização do output**: `dist` -- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` + +Configuração do Azure Static Web Apps: +- **Localização do app**: `/quiz-app` +- **Localização de output**: `dist` +- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Geração de PDF da Documentação @@ -207,76 +207,76 @@ npm install -g docsify-cli # Instalar Docsify globalmente docsify serve # Servir em localhost:3000 ``` -### Builds Específicos de Projeto +### Builds Específicos de Projetos -Cada diretório de projeto pode ter seu próprio processo de build: -- Projetos Vue: `npm run build` cria pacotes de produção -- Projetos estáticos: Sem etapa de build, servir arquivos diretamente +Cada diretório de projeto pode ter seu próprio processo de build: +- Projetos Vue: `npm run build` cria bundles de produção +- Projetos estáticos: Nenhuma etapa de build, sirva arquivos diretamente ## Diretrizes para Pull Requests ### Formato do Título -Use títulos claros e descritivos indicando a área da mudança: -- `[Quiz-app] Adiciona novo quiz para aula X` -- `[Lesson-3] Corrige erro de digitação no projeto terrarium` -- `[Translation] Adiciona tradução para espanhol na aula 5` -- `[Docs] Atualiza instruções de configuração` +Use títulos claros e descritivos indicando a área da alteração: +- `[Quiz-app] Adicionar novo quiz para a lição X` +- `[Lesson-3] Corrigir erro de digitação no projeto terrarium` +- `[Translation] Adicionar tradução para espanhol da lição 5` +- `[Docs] Atualizar instruções de configuração` -### Verificações Necessárias +### Verificações Obrigatórias Antes de enviar um PR: -1. **Qualidade do Código**: - - Execute `npm run lint` nos diretórios dos projetos afetados - - Corrija todos os erros e avisos do lint +1. **Qualidade do Código**: + - Execute `npm run lint` nos diretórios dos projetos afetados + - Corrija todos os erros e avisos de lint -2. **Verificação do Build**: - - Execute `npm run build` se aplicável - - Garanta que não haja erros no build +2. **Verificação de Build**: + - Execute `npm run build`, se aplicável + - Garanta que não haja erros no build -3. **Validação de Links**: - - Teste todos os links markdown - - Verifique se referências de imagens funcionam +3. **Validação de Links**: + - Teste todos os links markdown + - Verifique referências de imagens funcionando -4. **Revisão de Conteúdo**: - - Revise ortografia e gramática - - Garanta que exemplos de código estão corretos e educativos - - Verifique se as traduções mantêm o significado original +4. **Revisão de Conteúdo**: + - Faça revisão ortográfica e gramatical + - Confirme que exemplos de código estão corretos e educativos + - Verifique se traduções mantêm o significado original -### Requisitos de Contribuição +### Requisitos para Contribuição -- Aceitar o Microsoft CLA (verificação automática no primeiro PR) -- Seguir o [Código de Conduta de Código Aberto da Microsoft](https://opensource.microsoft.com/codeofconduct/) -- Consulte [CONTRIBUTING.md](./CONTRIBUTING.md) para diretrizes detalhadas -- Referencie números de issues na descrição do PR se aplicável +- Aceitar o Microsoft CLA (verificação automática no primeiro PR) +- Seguir o [Código de Conduta de Código Aberto da Microsoft](https://opensource.microsoft.com/codeofconduct/) +- Ver [CONTRIBUTING.md](./CONTRIBUTING.md) para diretrizes detalhadas +- Referenciar números de issues na descrição do PR se aplicável ### Processo de Revisão -- PRs são revisados por mantenedores e comunidade -- Clareza educacional é priorizada -- Exemplos de código devem seguir as melhores práticas atuais -- Traduções são revisadas para precisão e adequação cultural +- PRs revisados por mantenedores e comunidade +- Clareza educacional é prioridade +- Exemplos de código devem seguir as melhores práticas atuais +- Traduções são revisadas para precisão e adequação cultural ## Sistema de Tradução -### Tradução Automática +### Tradução Automatizada -- Utiliza GitHub Actions com workflow co-op-translator -- Tradução automática para 50+ idiomas -- Arquivos fonte nos diretórios principais -- Arquivos traduzidos em diretórios `translations/{language-code}/` +- Usa GitHub Actions com workflow co-op-translator +- Tradução para mais de 50 idiomas automaticamente +- Arquivos fonte nos diretórios principais +- Arquivos traduzidos em diretórios `translations/{language-code}/` -### Adicionando Melhorias Manuais à Tradução +### Adicionando Melhorias Manuais de Tradução -1. Localize o arquivo em `translations/{language-code}/` -2. Faça melhorias preservando a estrutura -3. Assegure que exemplos de código continuem funcionais -4. Teste qualquer conteúdo de quiz localizado +1. Encontre o arquivo em `translations/{language-code}/` +2. Faça melhorias preservando a estrutura +3. Garanta que exemplos de código permaneçam funcionais +4. Teste qualquer conteúdo localizado de quizzes ### Metadados da Tradução -Arquivos traduzidos incluem cabeçalho de metadados: +Arquivos traduzidos incluem cabeçalho metadata: ```markdown ``` - + ## Depuração e Solução de Problemas ### Problemas Comuns -**Quiz app não inicia**: -- Verifique a versão do Node.js (recomendado v14+) -- Exclua `node_modules` e `package-lock.json`, rode `npm install` novamente -- Verifique conflitos de porta (padrão: Vite usa porta 5173) +**Quiz app não inicia**: +- Verifique a versão do Node.js (recomendado v14+) +- Delete `node_modules` e `package-lock.json`, execute `npm install` novamente +- Cheque conflitos de porta (padrão: Vite usa porta 5173) -**Servidor API não inicia**: -- Confirme que a versão do Node.js atende o mínimo (node >=10) -- Verifique se a porta já está em uso -- Garanta que todas as dependências estejam instaladas com `npm install` +**Servidor API não inicia**: +- Verifique se versão do Node.js é mínima (node >=10) +- Verifique se a porta já está em uso +- Confirme todas as dependências instaladas com `npm install` -**Extensão de navegador não carrega**: -- Verifique se o manifest.json está formatado corretamente -- Cheque o console do navegador para erros -- Siga instruções específicas para instalação da extensão no navegador +**Extensão do navegador não carrega**: +- Verifique se manifest.json está formatado corretamente +- Cheque console do navegador para erros +- Siga instruções específicas do navegador para instalação da extensão -**Problemas no projeto de chat Python**: -- Certifique-se que o pacote OpenAI esteja instalado: `pip install openai` -- Verifique se a variável de ambiente GITHUB_TOKEN está configurada -- Confira permissões de acesso ao GitHub Models +**Problemas no projeto de chat em Python**: +- Certifique-se que o pacote OpenAI está instalado: `pip install openai` +- Verifique se a variável de ambiente GITHUB_TOKEN está configurada +- Cheque permissões de acesso ao GitHub Models -**Docsify não serve a documentação**: -- Instale docsify-cli globalmente: `npm install -g docsify-cli` -- Execute a partir do diretório raiz do repositório -- Verifique se `docs/_sidebar.md` existe +**Docsify não serve documentação**: +- Instale docsify-cli globalmente: `npm install -g docsify-cli` +- Rode a partir do diretório raiz do repositório +- Verifique se `docs/_sidebar.md` existe ### Dicas para Ambiente de Desenvolvimento -- Use VS Code com extensão Live Server para projetos HTML -- Instale as extensões ESLint e Prettier para formatação consistente -- Use DevTools do navegador para depuração de JavaScript -- Para projetos Vue, instale a extensão Vue DevTools no navegador +- Use VS Code com extensão Live Server para projetos HTML +- Instale extensões ESLint e Prettier para formatação consistente +- Use DevTools do navegador para depurar JavaScript +- Para projetos Vue, instale extensão Vue DevTools no navegador ### Considerações de Performance -- Grande número de arquivos traduzidos (50+ idiomas) torna clones completos grandes -- Use clone superficial se trabalhar apenas com conteúdo: `git clone --depth 1` -- Exclua traduções das buscas ao trabalhar com conteúdo em inglês -- Processos de build podem ser lentos na primeira execução (npm install, build do Vite) +- Grande número de arquivos traduzidos (50+ idiomas) torna clones completos grandes +- Use clone superficial se trabalhar só com conteúdo: `git clone --depth 1` +- Exclua traduções de buscas ao trabalhar com conteúdo em inglês +- Processos de build podem ser lentos na primeira execução (npm install, build Vite) ## Considerações de Segurança ### Variáveis de Ambiente -- Chaves API nunca devem ser commitadas no repositório -- Use arquivos `.env` (já no `.gitignore`) -- Documente variáveis de ambiente necessárias nos READMEs dos projetos +- Chaves de API nunca devem ser commitadas no repositório +- Use arquivos `.env` (já no `.gitignore`) +- Documente variáveis de ambiente necessárias nos READMEs dos projetos ### Projetos Python -- Use ambientes virtuais: `python -m venv venv` -- Mantenha dependências atualizadas -- Tokens GitHub devem ter permissões mínimas necessárias +- Use ambientes virtuais: `python -m venv venv` +- Mantenha dependências atualizadas +- Tokens do GitHub devem ter permissões mínimas necessárias ### Acesso aos GitHub Models -- Tokens de Acesso Pessoal (PAT) são necessários para GitHub Models -- Tokens devem ser armazenados como variáveis de ambiente -- Nunca commit tokens ou credenciais +- Tokens de acesso pessoal (PAT) são necessários para GitHub Models +- Tokens devem ser armazenados como variáveis de ambiente +- Nunca commit tokens ou credenciais ## Notas Adicionais -### Público-Alvo +### Público Alvo -- Começantes completos em desenvolvimento web -- Estudantes e autodidatas -- Professores usando o currículo em salas de aula -- Conteúdo projetado para acessibilidade e desenvolvimento gradual de habilidades +- Iniciantes completos em desenvolvimento web +- Estudantes e autodidatas +- Professores usando o currículo em salas de aula +- Conteúdo projetado para acessibilidade e aprendizado gradual ### Filosofia Educacional -- Aprendizado baseado em projetos -- Verificações frequentes de conhecimento (quizzes) -- Exercícios práticos de codificação -- Exemplos de aplicações do mundo real -- Foco em fundamentos antes de frameworks +- Abordagem baseada em projetos +- Verificações frequentes de conhecimento (quizzes) +- Exercícios práticos de codificação +- Exemplos de aplicação reais +- Foco em fundamentos antes de frameworks ### Manutenção do Repositório -- Comunidade ativa de aprendizes e colaboradores -- Atualizações regulares em dependências e conteúdo -- Issues e discussões monitoradas por mantenedores -- Atualizações de tradução automatizadas via GitHub Actions +- Comunidade ativa de estudantes e contribuidores +- Atualizações regulares de dependências e conteúdo +- Issues e discussões monitoradas por mantenedores +- Atualizações de tradução automatizadas via GitHub Actions ### Recursos Relacionados -- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/) -- [Recursos do Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes -- Cursos adicionais: Currículos de IA Generativa, Ciência de Dados, ML, IoT disponíveis +- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/) +- [Recursos do Student Hub](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para estudantes +- Cursos adicionais: IA Generativa, Ciência de Dados, ML, currículos de IoT disponíveis ### Trabalhando com Projetos Específicos -Para instruções detalhadas sobre projetos individuais, veja os arquivos README em: -- `quiz-app/README.md` - Aplicação quiz Vue 3 -- `7-bank-project/README.md` - Aplicativo bancário com autenticação -- `5-browser-extension/README.md` - Desenvolvimento de extensão de navegador -- `6-space-game/README.md` - Desenvolvimento de jogo baseado em canvas -- `9-chat-project/README.md` - Projeto de assistente de chat AI +Para instruções detalhadas sobre projetos individuais, consulte os arquivos README em: +- `quiz-app/README.md` - Aplicativo de quiz Vue 3 +- `7-bank-project/README.md` - Aplicativo bancário com autenticação +- `5-browser-extension/README.md` - Desenvolvimento de extensão de navegador +- `6-space-game/README.md` - Desenvolvimento de jogo em canvas +- `9-chat-project/README.md` - Projeto de assistente de chat com IA -### Estrutura do Monorepo +### Estrutura Monorepo -Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes: -- Cada aula é autônoma -- Projetos não compartilham dependências -- Trabalhe em projetos individuais sem afetar os outros -- Clone o repositório completo para a experiência curricular completa +Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes: +- Cada lição é autocontida +- Projetos não compartilham dependências +- Trabalhe em projetos individuais sem afetar os outros +- Clone o repositório inteiro para a experiência completa do currículo --- -**Aviso Legal**: -Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, por favor, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução. +**Aviso Legal**: +Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional realizada por um tradutor humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução. \ No newline at end of file diff --git a/translations/pt-BR/README.md b/translations/pt-BR/README.md index ead0442d0..0f88146bf 100644 --- a/translations/pt-BR/README.md +++ b/translations/pt-BR/README.md @@ -1,8 +1,8 @@ [![Licença GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) [![Contribuidores GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [![Issues GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![Pull-requests GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![Pull requests GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Bem-vindos](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Observadores GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![Forks GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) @@ -12,70 +12,80 @@ # Desenvolvimento Web para Iniciantes - Um Currículo -Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 lições aprofunda-se em JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos no espaço. Participe de quizzes, discussões e tarefas práticas. Melhore suas habilidades e otimize sua retenção de conhecimento com nossa pedagogia eficaz baseada em projetos. Comece sua jornada de programação hoje! +Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas ministrado pelos Microsoft Cloud Advocates. Cada uma das 24 aulas mergulha em JavaScript, CSS e HTML por meio de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Aprimore suas habilidades e otimize a retenção do conhecimento com nossa eficaz pedagogia baseada em projetos. Comece sua jornada de programação hoje! -Junte-se à Comunidade Azure AI Foundry no Discord +Participe da Comunidade Azure AI Foundry no Discord [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Siga estes passos para começar a usar esses recursos: +Siga estas etapas para começar a usar esses recursos: 1. **Faça um Fork do Repositório**: Clique em [![Forks GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Junte-se ao Azure AI Foundry Discord e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4) +3. [**Junte-se ao Azure AI Foundry no Discord e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 Suporte Multilíngue +### 🌐 Suporte a Múltiplos Idiomas -#### Suportado via GitHub Action (Automatizado e Sempre Atualizado) +#### Suportado via GitHub Action (Automatizado & Sempre Atualizado) -[Árabe](../ar/README.md) | [Bengali](../bn/README.md) | [Búlgaro](../bg/README.md) | [Burmês (Myanmar)](../my/README.md) | [Chinês (Simplificado)](../zh-CN/README.md) | [Chinês (Tradicional, Hong Kong)](../zh-HK/README.md) | [Chinês (Tradicional, Macau)](../zh-MO/README.md) | [Chinês (Tradicional, Taiwan)](../zh-TW/README.md) | [Croata](../hr/README.md) | [Tcheco](../cs/README.md) | [Dinamarquês](../da/README.md) | [Holandês](../nl/README.md) | [Estoniano](../et/README.md) | [Finlandês](../fi/README.md) | [Francês](../fr/README.md) | [Alemão](../de/README.md) | [Grego](../el/README.md) | [Hebraico](../he/README.md) | [Hindi](../hi/README.md) | [Húngaro](../hu/README.md) | [Indonésio](../id/README.md) | [Italiano](../it/README.md) | [Japonês](../ja/README.md) | [Kannada](../kn/README.md) | [Coreano](../ko/README.md) | [Lituano](../lt/README.md) | [Malaio](../ms/README.md) | [Malaiala](../ml/README.md) | [Marati](../mr/README.md) | [Nepali](../ne/README.md) | [Pidgin Nigeriano](../pcm/README.md) | [Norueguês](../no/README.md) | [Persa (Farsi)](../fa/README.md) | [Polonês](../pl/README.md) | [Português (Brasil)](./README.md) | [Português (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romeno](../ro/README.md) | [Russo](../ru/README.md) | [Sérvio (Cirílico)](../sr/README.md) | [Eslovaco](../sk/README.md) | [Esloveno](../sl/README.md) | [Espanhol](../es/README.md) | [Suaíli](../sw/README.md) | [Sueco](../sv/README.md) | [Tagalo (Filipino)](../tl/README.md) | [Tâmil](../ta/README.md) | [Telugu](../te/README.md) | [Tailandês](../th/README.md) | [Turco](../tr/README.md) | [Ucraniano](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamita](../vi/README.md) +[Árabe](../ar/README.md) | [Bengali](../bn/README.md) | [Búlgaro](../bg/README.md) | [Birmanês (Myanmar)](../my/README.md) | [Chinês (Simplificado)](../zh-CN/README.md) | [Chinês (Tradicional, Hong Kong)](../zh-HK/README.md) | [Chinês (Tradicional, Macau)](../zh-MO/README.md) | [Chinês (Tradicional, Taiwan)](../zh-TW/README.md) | [Croata](../hr/README.md) | [Tcheco](../cs/README.md) | [Dinamarquês](../da/README.md) | [Holandês](../nl/README.md) | [Estoniano](../et/README.md) | [Finlandês](../fi/README.md) | [Francês](../fr/README.md) | [Alemão](../de/README.md) | [Grego](../el/README.md) | [Hebraico](../he/README.md) | [Hindi](../hi/README.md) | [Húngaro](../hu/README.md) | [Indonésio](../id/README.md) | [Italiano](../it/README.md) | [Japonês](../ja/README.md) | [Kannada](../kn/README.md) | [Coreano](../ko/README.md) | [Lituano](../lt/README.md) | [Malaio](../ms/README.md) | [Malaiala](../ml/README.md) | [Marata](../mr/README.md) | [Nepali](../ne/README.md) | [Pidgin Nigeriano](../pcm/README.md) | [Norueguês](../no/README.md) | [Persa (Farsi)](../fa/README.md) | [Polonês](../pl/README.md) | [Português (Brasil)](./README.md) | [Português (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romeno](../ro/README.md) | [Russo](../ru/README.md) | [Sérvio (Cirílico)](../sr/README.md) | [Eslovaco](../sk/README.md) | [Esloveno](../sl/README.md) | [Espanhol](../es/README.md) | [Suaíli](../sw/README.md) | [Sueco](../sv/README.md) | [Tagalo (Filipino)](../tl/README.md) | [Tâmil](../ta/README.md) | [Telugu](../te/README.md) | [Tailandês](../th/README.md) | [Turco](../tr/README.md) | [Ucraniano](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamita](../vi/README.md) > **Prefere Clonar Localmente?** - -> Este repositório inclui mais de 50 traduções de idiomas, o que aumenta significativamente o tamanho do download. Para clonar sem traduções, use o sparse checkout: +> +> Este repositório contém mais de 50 traduções de idiomas que aumentam significativamente o tamanho do download. Para clonar sem traduções, use sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Isso te dá tudo o que precisa para completar o curso com um download muito mais rápido. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> Isso fornece tudo o que você precisa para completar o curso com um download muito mais rápido. -**Se desejar que idiomas adicionais de tradução sejam suportados, eles estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Se você deseja que línguas adicionais sejam suportadas, elas estão listadas [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Abrir no Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Abrir%20no%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Abrir no Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Você é estudante?_ -Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até maneiras de obter um voucher de certificado gratuito. Esta é a página que você vai querer adicionar aos favoritos e visitar de tempos em tempos, pois atualizamos o conteúdo mensalmente. +Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher de certificado gratuito. Esta é a página que você deve adicionar aos favoritos e consultar de tempos em tempos, pois atualizamos o conteúdo mensalmente. -### 📣 Anúncio - Novos desafios com modo Agente do GitHub Copilot para completar! +### 📣 Anúncio - Novos desafios no modo GitHub Copilot Agent para completar! -Novo desafio adicionado, procure por "Desafio GitHub Copilot Agent 🚀" na maioria dos capítulos. É um novo desafio para você completar usando o GitHub Copilot e o modo Agente. Se você nunca usou o modo Agente antes, ele é capaz não só de gerar texto, mas também criar e editar arquivos, executar comandos e mais. +Novo desafio adicionado, procure por "GitHub Copilot Agent Challenge 🚀" na maioria dos capítulos. Este é um novo desafio para você completar usando GitHub Copilot e o modo Agent. Se você nunca usou o modo Agent, ele é capaz não apenas de gerar texto, mas também criar e editar arquivos, executar comandos e muito mais. ### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_ -Novo projeto Assistente AI acaba de ser adicionado, confira o [projeto](./9-chat-project/README.md) +Novo projeto de Assistente de IA adicionado, confira o [projeto](./9-chat-project/README.md) -### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acaba de ser lançado +### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript foi lançado -Não perca nosso novo currículo sobre IA Generativa! +Não perca nosso novo currículo de IA Generativa! Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar! ![Fundo](../../translated_images/pt-BR/background.148a8d43afde5730.webp) -- Lições cobrindo tudo, do básico até RAG. -- Interaja com personagens históricos usando GenAI e nosso aplicativo acompanhante. +- Aulas cobrindo desde os fundamentos até RAG. +- Interaja com personagens históricos usando GenAI e nosso app companion. - Narrativa divertida e envolvente, você vai viajar no tempo! ![personagem](../../translated_images/pt-BR/character.5c0dd8e067ffd693.webp) -Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiar seu aprendizado em tópicos como: +Cada aula inclui uma tarefa para completar, um teste de conhecimento e um desafio para guiar você em temas como: - Prompting e engenharia de prompt -- Geração de aplicativos de texto e imagem -- Aplicativos de busca +- Geração de apps de texto e imagem +- Apps de busca Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar! @@ -83,20 +93,20 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com ## 🌱 Começando -> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos receber seu feedback [em nosso fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Professores**, incluímos [algumas sugestões](for-teachers.md) de como usar este currículo. Adoraríamos seu feedback [em nosso fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-aula e siga lendo o material da aula, completando as diversas atividades e verifique sua compreensão com o quiz pós-aula. +**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada aula, comece com um quiz pré-aula e siga com a leitura do material da aula, completando as diversas atividades e verifique seu entendimento com o quiz pós-aula. -Para aprimorar sua experiência de aprendizado, conecte-se com seus colegas para trabalhar nos projetos juntos! Discussões são incentivadas em nosso [fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde nossa equipe de moderadores estará disponível para responder às suas perguntas. +Para aprimorar sua experiência de aprendizado, conecte-se com seus colegas para trabalhar nos projetos juntos! Discussões são incentivadas em nosso [fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde nossa equipe de moderadores estará disponível para responder suas perguntas. -Para aprofundar sua educação, recomendamos fortemente explorar o [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais adicionais de estudo. +Para avançar em seus estudos, recomendamos fortemente explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais. ### 📋 Configurando seu ambiente -Este currículo já tem o ambiente de desenvolvimento pronto para uso! Ao começar, você pode escolher executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Este currículo já possui um ambiente de desenvolvimento pronto para usar! Ao começar, você pode optar por executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalação_), ou localmente em seu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Crie seu repositório -Para facilitar salvar seu trabalho, recomenda-se que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Usar este modelo** no topo da página. Isso criará um novo repositório na sua conta do GitHub com uma cópia do currículo. +Para que você possa salvar seu trabalho facilmente, é recomendado que crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório em sua conta do GitHub com uma cópia do currículo. Siga estes passos: 1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página. @@ -104,158 +114,156 @@ Siga estes passos: #### Executando o currículo em um Codespace -Na sua cópia deste repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isto criará um novo Codespace para você trabalhar. +Na sua cópia deste repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para você trabalhar. ![Codespace](../../translated_images/pt-BR/createcodespace.0238bbf4d7a8d955.webp) #### Executando o currículo localmente no seu computador -Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira lição, [Introdução a Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), mostrará várias opções para cada uma dessas ferramentas para você escolher o que funciona melhor. +Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira aula, [Introdução a Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), orientará você por várias opções para cada uma dessas ferramentas para você escolher o que melhor funciona para você. Nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também possui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) embutido. Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). - - -1. Clone seu repositório para seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL: +1. Clone o seu repositório para o seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL: [CodeSpace](./images/createcodespace.png) - Então, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `` pela URL que você acabou de copiar: + + Em seguida, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `` pela URL que você acabou de copiar: ```bash git clone ``` -2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que você acabou de clonar. +2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que acabou de clonar. -> Extensões recomendadas para o Visual Studio Code: +> Extensões recomendadas para Visual Studio Code: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para visualizar páginas HTML dentro do Visual Studio Code +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para pré-visualizar páginas HTML dentro do Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar você a escrever código mais rápido -## 📂 Cada lição inclui: +## 📂 Cada aula inclui: - sketchnote opcional - vídeo suplementar opcional -- quiz de aquecimento pré-lição -- lição escrita -- para lições baseadas em projetos, guias passo a passo sobre como construir o projeto +- quiz de aquecimento pré-aula +- aula escrita +- para aulas baseadas em projeto, guias passo a passo sobre como construir o projeto - verificações de conhecimento - um desafio - leitura suplementar - tarefa -- [quiz pós-lição](https://ff-quizzes.netlify.app/web/) - -> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes com três perguntas cada. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`. - -## 🗃️ Lições - -| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Lição Vinculada | Autor | -| :-: | :--------------------------------------------------------: | :-----------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Começando | Introdução à Programação e Ferramentas do Ofício | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais | [Intro às Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Começando | Noções básicas do GitHub, inclui trabalho em equipe | Como usar o GitHub em seu projeto, como colaborar com outros em uma base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Começando | Acessibilidade | Aprenda o básico sobre acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Fundamentos JS | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Fundamentos JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher | -| 06 | Fundamentos JS | Tomando Decisões com JS | Aprenda a criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Fundamentos JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico do CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface drag/drop, com foco em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construindo um Jogo de Digitação | Aprenda a usar eventos de teclado para dirigir a lógica do seu app JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprenda como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Avançado com JavaScript | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, preparando-se para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenho no canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenho no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos na tela | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisão | Faça elementos colidirem e reagirem uns aos outros usando pressionamento de teclas e forneça uma função de cooldown para garantir o desempenho do jogo | [Detecção de Colisão](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Mantendo a pontuação | Realize cálculos matemáticos baseados no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizando e reiniciando o jogo | Aprenda sobre como finalizar e reiniciar o jogo, incluindo limpar ativos e redefinir valores de variáveis | [A Condição de Termino](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um App Web | Aprenda a criar a estrutura arquitetônica de um site multipágina usando rotas e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construindo um Formulário de Login e Registro | Aprenda a construir formulários e lidar com rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos para Buscar e Usar Dados | Como os dados fluem dentro e fora do seu app, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu app mantém estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Trabalhando com VScode | Aprenda a usar um editor de código | [Uso do Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda a construir seu próprio assistente de IA | [Projeto de Assistente de IA](./9-chat-project/README.md) | Chris | +- [quiz pós-aula](https://ff-quizzes.netlify.app/web/) + +> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes com três perguntas cada. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/). O aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`. + +## 🗃️ Aulas + +| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Correspondente | Autor | +| :-: | :---------------------------------------------------------: | :------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Começando | Introdução à Programação e Ferramentas da Área | Aprender os fundamentos básicos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais | [Introdução a Linguagens de Programação e Ferramentas da Área](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Começando | Noções básicas de GitHub, incluindo trabalho em equipe | Como usar o GitHub em seu projeto, como colaborar com outros em uma base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Começando | Acessibilidade | Aprender o básico sobre acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | O básico sobre tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Fundamentos de JS | Funções e Métodos | Aprender sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher | +| 06 | Fundamentos de JS | Tomando Decisões com JS | Aprender como criar condições no código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Fundamentos de JS | Arrays e Loops | Trabalhar com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construir o HTML para criar um terrário online, com foco em construção de layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construir o CSS para estilizar o terrário online, focando no básico do CSS, incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construir o JavaScript para fazer o terrário funcionar como uma interface drag/drop, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construindo um Jogo de Digitação | Aprender a usar eventos de teclado para controlar a lógica do seu aplicativo em JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprender como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Construir os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no armazenamento local | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho da web | Usar os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprender sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos mais Avançado com JavaScript | Aprender sobre Herança usando Classes e Composição e o padrão Pub/Sub, em preparação para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhando na tela | Aprender sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando na Tela](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos na tela | Descobrir como elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos na Tela](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisões | Fazer elementos colidirem e reagirem uns aos outros usando pressionamentos de tecla e fornecer uma função cooldown para garantir desempenho | [Detecção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Manter a pontuação | Realizar cálculos matemáticos com base no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Encerrar e reiniciar o jogo | Aprender sobre encerrar e reiniciar o jogo, incluindo limpeza de ativos e reinicialização de valores das variáveis | [Condição de Encerramento](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um Aplicativo Web | Aprender a criar a estrutura arquitetônica de um site multipágina usando roteamento e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Construir Formulário de Login e Registro | Aprender sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Métodos de Obtenção e Uso de Dados | Como os dados fluem dentro e fora do seu app, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprender como seu aplicativo retém o estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Código Browser/VScode](../../8-code-editor) | Trabalhando com VScode | Aprender a usar um editor de código | [Usar Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprender a construir seu próprio assistente de IA | [Projeto Assistente de IA](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogia -Nosso currículo foi projetado com dois princípios pedagógicos-chave em mente: -* aprendizado baseado em projetos +Nosso currículo é projetado com dois princípios pedagógicos-chave: +* aprendizagem baseada em projetos * quizzes frequentes -O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os estudantes terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo no estilo Space Invader e um aplicativo bancário para empresas. Ao final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web. +O programa ensina os fundamentos de JavaScript, HTML e CSS, assim como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web hoje. Os estudantes terão a oportunidade de adquirir experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo invasores espaciais e um aplicativo bancário para negócios. Ao final da série, os alunos terão uma compreensão sólida do desenvolvimento web. -> 🎓 Você pode fazer as primeiras lições deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn! +> 🎓 Você pode realizar as primeiras aulas deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn! -Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os estudantes e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias sobre fundamentos do JavaScript para apresentar conceitos, combinadas com um vídeo da coleção "[Série para Iniciantes em: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos autores da qual contribuíram para este currículo. +Ao garantir que o conteúdo esteja alinhado a projetos, o processo se torna mais envolvente para os alunos e a retenção de conceitos será aprimorada. Também escrevemos várias aulas iniciais sobre os fundamentos de JavaScript para introduzir conceitos, acompanhadas de um vídeo da coleção "[Série para Iniciantes em: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos quais tiveram autores que contribuíram com este currículo. -Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido, podendo ser realizado no todo ou em parte. Os projetos começam pequenos e tornam-se cada vez mais complexos até o final do ciclo de 12 semanas. +Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula assegura retenção adicional. Este currículo foi projetado para ser flexível e divertido, podendo ser realizado na íntegra ou em partes. Os projetos começam pequenos e se tornam progressivamente mais complexos ao longo do ciclo de 12 semanas. -Embora tenhamos evitado intencionalmente introduzir frameworks JavaScript para nos concentrarmos nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, uma boa próxima etapa para completar este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". - -> Visite nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Agradecemos seu feedback construtivo! +Embora tenhamos evitado propositalmente introduzir frameworks JavaScript para concentrar nas habilidades básicas necessárias para um desenvolvedor web antes de adotar um framework, um próximo passo adequado para completar este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +> Visite nosso [Código de Conduta](CODE_OF_CONDUCT.md) e as diretrizes de [Contribuição](CONTRIBUTING.md). Agradecemos seu feedback construtivo! ## 🧭 Acesso offline -Você pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) em sua máquina local e então, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 em seu localhost: `localhost:3000`. +Você pode executar esta documentação offline usando [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) em sua máquina local e então na pasta raiz deste repositório digite `docsify serve`. O site será servido na porta 3000 no seu localhost: `localhost:3000`. ## 📘 PDF - Um PDF de todas as lições pode ser encontrado [aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Outros Cursos + Nossa equipe produz outros cursos! Confira: ### LangChain -[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) -[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j para Iniciantes](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js para Iniciantes](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain para Iniciantes](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agents -[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AZD para Iniciantes](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI para Iniciantes](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP para Iniciantes](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Agentes de IA para Iniciantes](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Série de IA Generativa -[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) +[![IA Generativa para Iniciantes](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![IA Generativa (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![IA Generativa (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![IA Generativa (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- ### Aprendizado Básico -[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) +[![ML para Iniciantes](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Ciência de Dados para Iniciantes](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![IA para Iniciantes](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cibersegurança para Iniciantes](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Desenvolvimento Web para Iniciantes](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT para Iniciantes](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![Desenvolvimento XR para Iniciantes](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Série Copilot -[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +[![Copilot para Programação em Par com IA](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot para C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Aventura Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## Obtenha Ajuda +## Obter Ajuda -Se você ficar preso ou tiver alguma dúvida sobre como criar aplicativos de IA. Participe de discussões com outros alunos e desenvolvedores experientes sobre MCP. É uma comunidade acolhedora onde perguntas são bem-vindas e o conhecimento é compartilhado livremente. +Se você ficar travado ou tiver alguma dúvida sobre como criar aplicativos de IA, junte-se a outros alunos e desenvolvedores experientes em discussões sobre MCP. É uma comunidade acolhedora onde perguntas são bem-vindas e o conhecimento é compartilhado livremente. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Se você tiver feedback sobre o produto ou erros durante a criação, visite: +Se você tiver feedback sobre o produto ou erros durante o desenvolvimento, visite: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) @@ -267,5 +275,5 @@ Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE]( **Aviso Legal**: -Este documento foi traduzido usando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional por um tradutor humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. +Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original, em sua língua nativa, deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. \ No newline at end of file diff --git a/translations/pt-PT/.co-op-translator.json b/translations/pt-PT/.co-op-translator.json index 23faefcb7..ce3b4e666 100644 --- a/translations/pt-PT/.co-op-translator.json +++ b/translations/pt-PT/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T18:31:44+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T12:35:48+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "pt-PT" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:58:13+00:00", + "translation_date": "2026-03-06T12:43:50+00:00", "source_file": "AGENTS.md", "language_code": "pt-PT" }, @@ -516,8 +516,8 @@ "language_code": "pt-PT" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:52:32+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T12:32:31+00:00", "source_file": "README.md", "language_code": "pt-PT" }, diff --git a/translations/pt-PT/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/pt-PT/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 1b6d17064..879cc67a8 100644 --- a/translations/pt-PT/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/pt-PT/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,12 +1,12 @@ # Introdução às Linguagens de Programação e Ferramentas Modernas para Desenvolvedores + +Olá, futuro desenvolvedor! 👋 Posso contar-te algo que ainda me dá arrepios todos os dias? Estás prestes a descobrir que programar não é só sobre computadores – é sobre ter superpoderes para dar vida às tuas ideias mais loucas! -Olá, futuro programador! 👋 Posso contar-te algo que ainda me arrepia todos os dias? Estás prestes a descobrir que programar não é só sobre computadores – é sobre ter superpoderes reais para dar vida às tuas ideias mais malucas! +Conheces aquele momento em que estás a usar a tua app favorita e tudo encaixa na perfeição? Quando tocas num botão e acontece algo absolutamente mágico que te faz pensar "uau, como é que eles fizeram ISTO?" Pois bem, alguém exatamente como tu – provavelmente sentado no seu café preferido às 2 da manhã com o seu terceiro expresso – escreveu o código que criou essa magia. E aqui está algo que vai explodir a tua mente: no final desta lição, não só vais entender como eles fizeram isso, mas vais querer experimentar por ti mesmo! -Sabes aquele momento em que estás a usar a tua app favorita e tudo se encaixa na perfeição? Quando tocas num botão e acontece algo absolutamente mágico que te faz pensar "uau, como é que fizeram ISTO?" Bem, alguém exatamente como tu – provavelmente a trabalhar no seu café preferido às 2 da manhã com o seu terceiro espresso – escreveu o código que criou essa magia. E aqui está algo que vai arrebatar-te a mente: no final desta lição, não só vais entender como o fizeram, mas vais estar ansioso para tentar por ti próprio! +Olha, percebo perfeitamente se programar te parece intimidante agora. Quando comecei, pensei honestamente que precisavas de ser algum génio da matemática ou estar a programar desde os cinco anos. Mas aqui está o que mudou completamente a minha perspetiva: programar é exatamente como aprender a ter conversas numa nova língua. Começas com "olá" e "obrigado", depois vais até pedir café, e antes que percebas, estás a ter discussões filosóficas profundas! Exceto que, neste caso, estás a conversar com computadores, e sabes? Eles são os interlocutores mais pacientes de sempre – nunca julgam os teus erros e estão sempre entusiasmados para tentares novamente! -Olha, eu entendo perfeitamente se a programação te parecer intimidante neste momento. Quando comecei, pensava honestamente que precisavas de ser um génio da matemática ou de programar desde os cinco anos. Mas aqui está o que mudou completamente a minha perspetiva: programar é exatamente como aprender a ter conversas numa nova língua. Começas com "olá" e "obrigado," depois passas a pedir café, e antes que percebas, estás a discutir filosofia profundamente! Só que neste caso, estás a conversar com computadores, e honestamente? São os parceiros de conversa mais pacientes que alguma vez vais ter – nunca julgam os teus erros e estão sempre entusiasmados para tentar de novo! - -Hoje, vamos explorar as ferramentas incríveis que tornam o desenvolvimento web moderno não só possível, mas mesmo viciante. Estou a falar dos mesmos editores, browsers e fluxos de trabalho que os programadores da Netflix, Spotify e do teu estúdio indie favorito usam todos os dias. E aqui está a parte que te vai fazer dançar de alegria: a maioria destas ferramentas profissionais e padrão na indústria é completamente gratuita! +Hoje, vamos explorar as ferramentas incríveis que fazem o desenvolvimento web moderno não só possível, mas mesmo viciante. Estou a falar dos mesmos editores, navegadores e fluxos de trabalho que os programadores da Netflix, Spotify e do teu estúdio de apps indie favorito usam todos os dias. E aqui está a parte que vai fazer-te dançar de alegria: a maioria destas ferramentas profissionais, padrão da indústria, são completamente gratuitas! ![Intro Programming](../../../../translated_images/pt-PT/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) @@ -15,69 +15,70 @@ Hoje, vamos explorar as ferramentas incríveis que tornam o desenvolvimento web journey title A Sua Jornada de Programação Hoje section Descobrir - O Que é Programação: 5: You + O que é Programação: 5: You Linguagens de Programação: 4: You Visão Geral das Ferramentas: 5: You section Explorar Editores de Código: 4: You - Navegadores & Ferramentas de Desenvolvimento: 5: You - Linha de Comandos: 3: You + Navegadores & Ferramentas de Dev: 5: You + Linha de Comando: 3: You section Praticar - Detetive da Linguagem: 4: You + Detetive de Linguagens: 4: You Exploração de Ferramentas: 5: You Conexão com a Comunidade: 5: You ``` -## Vamos Ver O Que Já Sabes! +## Vamos Ver o Que Já Sabes! + +Antes de entrarmos nas coisas divertidas, estou curioso – o que é que já sabes sobre este mundo da programação? E olha, se estás a olhar para estas perguntas a pensar "eu literalmente não faço a mínima ideia disto tudo," isso não é só aceitável, é perfeito! Isso significa que estás exatamente no sítio certo. Pensa neste quiz como o aquecimento antes de um treino – estamos só a preparar os músculos do cérebro! -Antes de começarmos com a parte divertida, estou curioso – o que já sabes sobre este mundo da programação? E olha, se estás a olhar para estas perguntas a pensar "Eu literalmente não faço a mínima ideia sobre isto," isso não é só aceitável, é perfeito! Isso significa que estás exatamente no lugar certo. Pensa neste quiz como um alongamento antes de um treino – estamos só a aquecer esses músculos cerebrais! +[Faz o quiz pré-lição](https://ff-quizzes.netlify.app/web/) -[Faz o quiz pré-lição](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) ## A Aventura Que Vamos Fazer Juntos -Ok, estou genuinamente empolgado com o que vamos explorar hoje! A sério, gostava mesmo de ver a tua cara quando alguns destes conceitos fizerem sentido. Aqui está a incrível viagem que vamos fazer juntos: +Ok, estou mesmo entusiasmado com o que vamos explorar hoje! A sério, adorava poder ver a tua cara quando alguns destes conceitos fizerem sentido. Aqui está a incrível jornada que vamos fazer juntos: -- **O que é realmente programação (e porque é a coisa mais fixe de sempre!)** – Vamos descobrir como o código é literalmente a magia invisível que alimenta tudo à tua volta, desde o alarme que de algum modo sabe que é segunda-feira de manhã até ao algoritmo que cria as recomendações perfeitas da Netflix -- **Linguagens de programação e as suas personalidades incríveis** – Imagina entrar numa festa onde cada pessoa tem superpoderes completamente diferentes e formas distintas de resolver problemas. É assim o mundo das linguagens de programação, e vais adorar conhecê-las! -- **Os blocos fundamentais que fazem a magia digital acontecer** – Pensa nisto como o conjunto de peças LEGO criativas supremo. Quando perceberes como estas peças se encaixam, vais perceber que podes literalmente construir tudo o que a tua imaginação sonhar -- **Ferramentas profissionais que te vão fazer sentir como se te tivessem dado a varinha de um feiticeiro** – Não estou a exagerar – estas ferramentas vão genuinamente fazer-te sentir que tens superpoderes, e a melhor parte? São as mesmas que os profissionais usam! +- **O que é realmente a programação (e porque é a coisa mais fixe de sempre!)** – Vamos descobrir como o código é literalmente a magia invisível que alimenta tudo à tua volta, desde o alarme que sabe que é segunda-feira de manhã até ao algoritmo que seleciona perfeitamente as tuas recomendações na Netflix +- **Linguagens de programação e as suas personalidades incríveis** – Imagina entrares numa festa onde cada pessoa tem superpoderes completamente diferentes e formas únicas de resolver problemas. É assim o mundo das linguagens de programação, e vais adorar conhecê-las! +- **Os blocos fundamentais que fazem a magia digital acontecer** – Pensa neles como o LEGO criativo supremo. Quando perceberes como estas peças se encaixam, vais entender que podes literalmente construir tudo o que a tua imaginação sonhar +- **Ferramentas profissionais que vão fazer-te sentir como se te tivessem dado a varinha de um feiticeiro** – Não estou a dramatizar aqui – estas ferramentas vão realmente fazer-te sentir superpoderoso, e o melhor? São as mesmas que os profissionais usam! -> 💡 **Eis a verdade**: Não tentes memorizar tudo hoje! Agora, só quero que sintas essa faísca de entusiasmo sobre o que é possível. Os detalhes vão ficar naturalmente enquanto praticamos juntos – é assim que a aprendizagem real acontece! +> 💡 **Aqui está a coisa**: Não penses sequer em decorar tudo hoje! Agora, quero só que sintas essa faísca de entusiasmo sobre o que é possível. Os detalhes vão ficar naturalmente enquanto praticamos juntos – é assim que se aprende mesmo! -> Podes fazer esta lição no [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Podes fazer esta lição no [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Então, O Que É Exatamente *Programação*? +## Então, O Que É *Realmente* Programar? -Ok, vamos abordar a pergunta milionária: o que é mesmo programação? +Ora bem, vamos enfrentar a questão do milhão: o que é realmente programar? -Vou contar-te uma história que mudou completamente a minha forma de pensar sobre isto. Na semana passada, estava a tentar explicar à minha mãe como usar o nosso novo comando de TV inteligente. Apanhei-me a dizer coisas como "Carrega no botão vermelho, mas não no botão vermelho grande, no botão vermelho pequeno à esquerda... não, no teu outro lado esquerdo... está bem, agora segura por dois segundos, não um, não três..." Soa-te familiar? 😅 +Vou contar-te uma história que mudou completamente a minha forma de pensar sobre isto. Na semana passada, estava a tentar explicar à minha mãe como usar o telecomando da nossa nova smart TV. Apanhei-me a dizer coisas como "Carrega no botão vermelho, mas não no botão vermelho grande, no botão vermelho pequeno à esquerda... não, na tua outra esquerda... ok, agora mantém carregado durante dois segundos, não um, não três..." Soa familiar? 😅 -Isso é programação! É a arte de dar instruções incrivelmente detalhadas, passo a passo, a algo que é muito poderoso mas que precisa que tudo seja explicado perfeitamente. Só que em vez de explicares à tua mãe (que pode perguntar "qual botão vermelho?!"), estás a explicar a um computador (que faz exatamente o que dizes, mesmo que o que disseste não seja exatamente o que querias dizer). +Isto é programação! É a arte de dar instruções incrivelmente detalhadas, passo a passo, a algo que é muito poderoso mas que precisa que tudo esteja perfeitamente explicado. Exceto que, em vez de explicar à tua mãe (que pode perguntar "qual botão vermelho?!"), estás a explicar a um computador (que simplesmente faz exatamente o que lhe dizes, mesmo que o que disseste não seja bem o que querias). -Aqui está o que me deixou de boca aberta quando aprendi isto pela primeira vez: os computadores são na verdade bastante simples no seu núcleo. Eles literalmente só entendem duas coisas – 1 e 0, que é basicamente "sim" e "não" ou "ligado" e "desligado." É tudo! Mas aqui está onde fica mágico – não precisamos de falar em 1s e 0s como se estivéssemos no The Matrix. É aqui que as **linguagens de programação** entram em ação. São como ter o melhor tradutor do mundo que pega nos teus pensamentos perfeitamente normais de humano e os converte para linguagem de computador. +Isto é o que me deixou arrepiado quando aprendi pela primeira vez: os computadores são na verdade bastante simples na essência. Eles literalmente só entendem duas coisas – 1 e 0, que basicamente significa "sim" e "não" ou "ligado" e "desligado." É só isso! Mas aqui é onde a magia acontece – não precisamos de falar em 1s e 0s como se estivéssemos no Matrix. É para isso que existem as **linguagens de programação**. Elas são como ter o melhor tradutor do mundo que pega nos teus pensamentos perfeitamente humanos e converte-os para a linguagem do computador. -E aqui está algo que ainda me arrepia todas as manhãs quando acordo: literalmente *tudo* o que há de digital na tua vida começou com alguém exatamente como tu, provavelmente sentado de pijama com uma chávena de café, a escrever código no portátil. Aquele filtro do Instagram que te deixa impecável? Alguém o programou. A recomendação que te levou à tua nova música favorita? Um programador criou esse algoritmo. A app que te ajuda a dividir as contas do jantar com amigos? Sim, alguém pensou "isto é chato, aposto que posso resolver isto" e depois... resolveu! +E aqui está o que ainda me dá arrepios todas as manhãs quando acordo: literalmente *tudo* o que é digital na tua vida começou com alguém exatamente como tu, provavelmente sentado de pijama com uma chávena de café, a escrever código no portátil. Esse filtro do Instagram que te faz parecer impecável? Alguém o programou. A recomendação que te levou à tua nova música favorita? Um programador criou esse algoritmo. A app que te ajuda a dividir contas com os amigos? Pois, alguém pensou "isto é chato, posso resolver isto" e depois... resolveu! -Quando aprendes a programar, não estás só a adquirir uma nova competência – estás a tornar-te parte desta comunidade incrível de solucionadores de problemas que passam os dias a pensar: "E se eu pudesse criar algo que torna o dia de alguém um bocadinho melhor?" Honestamente, existe coisa mais fixe do que isso? +Quando aprendes a programar, não estás só a adquirir uma nova competência – estás a tornar-te parte de uma comunidade incrível de solucionadores de problemas que passam os dias a pensar, "E se eu pudesse criar algo que tornasse o dia de alguém um bocadinho melhor?" Honestamente, existe algo mais fixe do que isso? -✅ **Caça ao Facto Divertido**: Aqui está algo super giro para procurares quando tiveres um momento livre – quem achas que foi o primeiro programador do mundo? Dou-te uma pista: talvez não seja quem esperas! A história desta pessoa é absolutamente fascinante e mostra que a programação sempre foi sobre resolução criativa de problemas e pensar fora da caixa. +✅ **Caça ao Facto Divertido**: Aqui vai algo super fixe para pesquisares quando tiveres um momento livre – quem achas que foi o primeiro programador do mundo? Dou-te uma pista: pode não ser quem estás à espera! A história dessa pessoa é absolutamente fascinante e mostra que programar tem sempre sido sobre criatividade na resolução de problemas e pensar fora da caixa. -### 🧠 **Hora da Reflexão: Como Te Sentes?** +### 🧠 **Momento de Reflexão: Como Estás a Sentir-te?** **Tira um momento para refletir:** -- Faz sentido para ti agora a ideia de "dar instruções aos computadores"? -- Consegues pensar numa tarefa diária que gostarias de automatizar com programação? -- Que perguntas é que te estão a surgir sobre toda esta coisa da programação? +- Faz sentido agora a ideia de "dar instruções a computadores"? +- Consegues pensar numa tarefa do dia a dia que gostarias de automatizar com programação? +- Que perguntas é que te estão a ocorrer sobre tudo isto da programação? -> **Lembra-te**: É totalmente normal que alguns conceitos pareçam confusos agora. Aprender a programar é como aprender uma nova língua – o teu cérebro precisa de tempo para criar essas vias neurais. Estás a fazer um ótimo trabalho! +> **Lembra-te**: É completamente normal se alguns conceitos parecerem confusos agora. Aprender programação é como aprender uma nova língua – o cérebro precisa de tempo para formar esses caminhos neurais. Estás a ir muito bem! -## Linguagens de Programação São Como Diferentes Sabores de Magia +## As Linguagens de Programação São Como Diferentes Sabores de Magia -Ok, isto vaia soar estranho, mas fica comigo – as linguagens de programação são muito parecidas com diferentes tipos de música. Pensa nisso: tens o jazz, que é suave e improvisado, o rock que é poderoso e direto, a música clássica que é elegante e estruturada, e o hip-hop que é criativo e expressivo. Cada estilo tem a sua vibe, a sua comunidade de fãs apaixonados, e cada um é perfeito para diferentes estados de espírito e ocasiões. +Ok, isto vai parecer estranho, mas fica comigo – as linguagens de programação são muito como diferentes tipos de música. Pensa nisto: tens jazz, que é suave e improvisado, rock que é poderoso e direto, clássico que é elegante e estruturado, e hip-hop que é criativo e expressivo. Cada estilo tem a sua vibe, a sua comunidade apaixonada, e cada um é perfeito para diferentes estados de espírito e ocasiões. -As linguagens de programação funcionam exatamente da mesma maneira! Não usarias a mesma linguagem para criar um jogo móvel divertido que usarias para processar enormes quantidades de dados climáticos, tal como não ias ouvir death metal numa aula de yoga (bem, na maioria das aulas de yoga pelo menos! 😄). +As linguagens de programação funcionam exatamente da mesma maneira! Não irias usar a mesma linguagem para criar um jogo móvel divertido que para processar enormes quantidades de dados climáticos, assim como não ias tocar death metal numa aula de yoga (bem, na maioria das aulas de yoga! 😄). -Mas aqui está o que me surpreende sempre que penso nisso: estas linguagens são como ter o intérprete mais paciente e brilhante do mundo sentado mesmo ao teu lado. Podes expressar as tuas ideias de uma forma que faz sentido ao teu cérebro humano, e eles tratam de todo o trabalho incrivelmente complexo de traduzir isso para os 1s e 0s que os computadores realmente falam. É como ter um amigo que é perfeitamente fluente em "criatividade humana" e "lógica computacional" – e que nunca se cansa, nunca precisa de pausas para café, e nunca te julga por repetires a mesma pergunta! +Mas aqui está algo que me deixa de boca aberta sempre que penso nisso: estas linguagens são como ter o intérprete mais paciente e brilhante do mundo sentado mesmo ao teu lado. Podes expressar as tuas ideias de um modo que é natural para o teu cérebro humano, e elas tratam de todo o trabalho incrivelmente complexo de traduzir isso para os 1s e 0s que os computadores realmente entendem. É como ter um amigo que domina perfeitamente tanto a "criatividade humana" como a "lógica do computador" – e que nunca se cansa, nunca precisa de pausas para café, e nunca te julga por perguntar a mesma coisa duas vezes! ### Linguagens de Programação Populares e os Seus Usos @@ -90,19 +91,19 @@ mindmap Websites Interativos TypeScript JavaScript + Tipos - Apps Empresariais + Aplicações Empresariais Dados & IA Python Ciência de Dados Aprendizagem Automática Automação R - Estatísticas + Estatística Investigação - Apps Móveis + Aplicações Móveis Java Android - Empresa + Empresarial Swift iOS Ecossistema Apple @@ -120,33 +121,33 @@ mindmap Serviços Cloud Backend Escalável ``` -| Linguagem | Melhor Para | Por que É Popular | -|-----------|-------------|-------------------| -| **JavaScript** | Desenvolvimento web, interfaces de utilizador | Corre em navegadores e alimenta sites interativos | +| Language | Best For | Why It's Popular | +|----------|----------|------------------| +| **JavaScript** | Desenvolvimento web, interfaces de utilizador | Corre em navegadores e alimenta websites interativos | | **Python** | Ciência de dados, automação, IA | Fácil de ler e aprender, bibliotecas poderosas | -| **Java** | Aplicações empresariais, apps Android | Independente de plataforma, robusta para sistemas grandes | +| **Java** | Aplicações empresariais, apps Android | Independente de plataforma, robusto para sistemas grandes | | **C#** | Aplicações Windows, desenvolvimento de jogos | Forte suporte no ecossistema Microsoft | -| **Go** | Serviços de cloud, sistemas backend | Rápida, simples, desenhada para computação moderna | +| **Go** | Serviços na cloud, sistemas backend | Rápido, simples, desenhado para computação moderna | ### Linguagens de Alto Nível vs. Baixo Nível -Ok, este foi honestamente o conceito que me partiu o cérebro quando comecei, por isso vou partilhar a analogia que finalmente me fez perceber – e espero que te ajude também! +Ok, este foi honestamente o conceito que me deixou confuso quando comecei, por isso vou partilhar a analogia que finalmente me fez perceber – e espero mesmo que te ajude também! Imagina que estás a visitar um país onde não falas a língua e precisas desesperadamente de encontrar a casa de banho mais próxima (todos já passámos por isso, certo? 😅): -- **Programação de baixo nível** é como aprender tão bem o dialeto local que consegues conversar com a avó a vender fruta na esquina usando referências culturais, gírias locais e piadas internas que só quem cresceu ali entende. Muito impressionante e incrivelmente eficiente... se por acaso fores fluente! Mas bastante assustador quando só queres achar a casa de banho. +- **Programação de baixo nível** é como aprender o dialeto local tão bem que consegues conversar com a avó que vende fruta na esquina usando referências culturais, calão local e piadas internas que só quem cresceu ali entende. Super impressionante e incrivelmente eficiente... se fores fluente! Mas bastante esmagador quando só queres encontrar uma casa de banho. -- **Programação de alto nível** é como ter aquele amigo local incrível que simplesmente te entende. Podes dizer "Preciso mesmo de encontrar uma casa de banho" em inglês simples, e ele trata de toda a tradução cultural e dá-te direções que fazem perfeito sentido para o teu cérebro de forasteiro. +- **Programação de alto nível** é como ter aquele amigo local incrível que te entende perfeitamente. Podes dizer "Preciso mesmo de encontrar uma casa de banho" em inglês simples, e ele cuida de toda a tradução cultural e dá-te indicações que fazem perfeito sentido para o teu cérebro não local. Em termos de programação: -- **Linguagens de baixo nível** (como Assembly ou C) permitem-te ter conversas extremamente detalhadas com o hardware real do computador, mas tens que pensar como uma máquina, o que é... bem, digamos que é uma mudança mental grande! -- **Linguagens de alto nível** (como JavaScript, Python ou C#) deixam-te pensar como humano enquanto elas se responsabilizam por toda a linguagem da máquina nos bastidores. Além disso, têm comunidades incrivelmente acolhedoras cheias de pessoas que se lembram como é ser novato e querem genuinamente ajudar! +- **Linguagens de baixo nível** (como Assembly ou C) permitem-te ter conversas incrivelmente detalhadas com o hardware real do computador, mas precisas pensar como uma máquina, o que é... bem, digamos que é uma grande mudança mental! +- **Linguagens de alto nível** (como JavaScript, Python ou C#) deixam-te pensar como um humano enquanto elas cuidam de toda a linguagem da máquina nos bastidores. Além disso, têm comunidades extremamente acolhedoras cheias de pessoas que se lembram como era ser novato e genuinamente querem ajudar! -Adivinha com quais vou sugerir que comeces? 😉 As linguagens de alto nível são como rodinhas de treino que nem queres tirar porque tornam toda a experiência tão mais agradável! +Adivinha com quais vou sugerir que comeces? 😉 As linguagens de alto nível são como rodinhas de treino que nunca na vida vais querer tirar porque tornam toda a experiência muito mais agradável! ```mermaid flowchart TB - A["👤 Pensamento Humano:
'Quero calcular números de Fibonacci'"] --> B{Escolher Nível de Linguagem} + A["👤 Pensamento Humano:
'Quero calcular números de Fibonacci'"] --> B{Escolher Nível da Linguagem} B -->|Alto Nível| C["🌟 JavaScript/Python
Fácil de ler e escrever"] B -->|Baixo Nível| D["⚙️ Assembly/C
Controlo direto do hardware"] @@ -154,7 +155,7 @@ flowchart TB C --> E["📝 Escrever: fibonacci(10)"] D --> F["📝 Escrever: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Compreensão do Computador:
O tradutor lida com a complexidade"] + E --> G["🤖 Compreensão do Computador:
O tradutor trata da complexidade"] F --> G G --> H["💻 Mesmo Resultado:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -163,18 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Deixa-me Mostrar-te Por Que as Linguagens de Alto Nível São Tão Mais Amigáveis +### Deixa-me Mostrar Por Que as Linguagens de Alto Nível São Muito Mais Amigáveis -Ok, vou mostrar-te algo que demonstra na perfeição por que me apaixonei pelas linguagens de alto nível, mas primeiro – preciso que me prometas uma coisa. Quando vires esse primeiro exemplo de código, não entres em pânico! É suposto parecer intimidante. Esse é exatamente o ponto que quero mostrar! +Ok, vou mostrar-te algo que demonstra na perfeição porque me apaixonei pelas linguagens de alto nível, mas primeiro – preciso que me prometas uma coisa. Quando vires esse primeiro exemplo de código, não penses em pânico! Supõe-se que ele pareça intimidante. É mesmo esse o ponto que quero mostrar! -Vamos ver a mesma tarefa escrita em dois estilos completamente diferentes. Ambos criam o que se chama a sequência de Fibonacci – é um padrão matemático lindo onde cada número é a soma dos dois anteriores: 0, 1, 1, 2, 3, 5, 8, 13... (Curiosidade: vais encontrar este padrão literalmente em toda a natureza – nos espirais das sementes de girassol, nos padrões dos pinheiros, até na formação das galáxias!) +Vamos olhar para a mesma tarefa escrita em dois estilos completamente diferentes. Ambos criam o que se chama a sequência de Fibonacci – é um padrão matemático lindo onde cada número é a soma dos dois anteriores: 0, 1, 1, 2, 3, 5, 8, 13... (Curiosidade: vais encontrar este padrão literalmente em toda a natureza – espirais das sementes do girassol, padrões de pinhas, até a forma como as galáxias se formam!) -Pronto para ver a diferença? Vamos lá! +Pronto para ver a diferença? Vamos a isso! **Linguagem de alto nível (JavaScript) – Amigável para humanos:** ```javascript -// Passo 1: Configuração básica de Fibonacci +// Passo 1: Configuração básica do Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,10 +184,10 @@ console.log('Fibonacci sequence:'); ``` **Isto é o que este código faz:** -- **Declara** uma constante para especificar quantos números Fibonacci queremos gerar -- **Inicializa** duas variáveis para controlar o número atual e o próximo na sequência -- **Define** os valores iniciais (0 e 1) que definem o padrão Fibonacci -- **Mostra** uma mensagem de cabeçalho para identificar o output +- **Declara** uma constante para especificar quantos números de Fibonacci queremos gerar +- **Inicializa** duas variáveis para acompanhar o número atual e o próximo da sequência +- **Define** os valores iniciais (0 e 1) que estabelecem o padrão Fibonacci +- **Mostra** uma mensagem de cabeçalho para identificar a nossa saída ```javascript // Passo 2: Gerar a sequência com um ciclo @@ -200,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**Analisando o que acontece aqui:** +**Explicando o que acontece aqui:** - **Percorre** cada posição na nossa sequência usando um ciclo `for` -- **Exibe** cada número com a sua posição usando formatação de template literals -- **Calcula** o próximo número Fibonacci somando os valores atual e próximo -- **Atualiza** as variáveis para passar à próxima iteração +- **Mostra** cada número com a sua posição usando formatação com template literals +- **Calcula** o próximo número de Fibonacci somando os valores atual e seguinte +- **Atualiza** as variáveis para avançar para a próxima iteração ```javascript // Passo 3: Abordagem funcional moderna @@ -223,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**No exemplo acima, nós:** -- **Criámos** uma função reutilizável usando sintaxe moderna de arrow function +**No código acima, nós:** +- **Criámos** uma função reutilizável usando a sintaxe moderna de arrow functions - **Construímos** um array para guardar a sequência completa em vez de mostrar número a número -- **Usámos** indexação de array para calcular cada novo número a partir dos anteriores -- **Devolvemos** a sequência completa para uso flexível noutras partes do programa +- **Usámos** indexação de array para calcular cada novo número a partir dos valores anteriores +- **Retornámos** a sequência completa para permitir uso flexível noutras partes do programa -**Linguagem de baixo nível (ARM Assembly) – Amigável para computadores:** +**Linguagem de baixo nível (ARM Assembly) – Amiga do computador:** ```assembly area ascen,code,readonly @@ -256,28 +257,28 @@ back add r0,r1 end ``` -Repara como a versão em JavaScript lê quase como instruções em inglês, enquanto a versão em Assembly usa comandos crípticos que controlam diretamente o processador do computador. Ambas fazem exatamente a mesma tarefa, mas a linguagem de alto nível é muito mais fácil para os humanos compreenderem, escreverem e manterem. +Repara como a versão em JavaScript lê quase como instruções em inglês, enquanto a versão Assembly usa comandos crípticos que controlam diretamente o processador do computador. Ambos fazem exatamente a mesma tarefa, mas a linguagem de alto nível é muito mais fácil para humanos compreenderem, escreverem e manterem. **Diferenças chave que vais notar:** -- **Legibilidade**: JavaScript usa nomes descritivos como `fibonacciCount` enquanto Assembly usa rótulos enigmáticos como `r0`, `r1` -- **Comentários**: Linguagens de alto nível incentivam comentários explicativos que tornam o código autoexplicativo -- **Estrutura**: O fluxo lógico do JavaScript corresponde a como os humanos pensam sobre problemas passo a passo -- **Manutenção**: Atualizar a versão JavaScript para diferentes requisitos é simples e claro +- **Legibilidade**: JavaScript usa nomes descritivos como `fibonacciCount` enquanto Assembly usa rótulos crípticos como `r0`, `r1` +- **Comentários**: Linguagens de alto nível incentivam comentários explicativos que tornam o código auto-documentado +- **Estrutura**: O fluxo lógico do JavaScript corresponde à forma como os humanos pensam em problemas passo a passo +- **Manutenção**: Atualizar a versão JavaScript para diferentes requisitos é direto e claro -✅ **Sobre a sequência de Fibonacci**: Este padrão numérico absolutamente lindo (onde cada número é a soma dos dois anteriores: 0, 1, 1, 2, 3, 5, 8...) aparece literalmente *por toda a parte* na natureza! Vai encontrá-lo nas espirais das flores de girassol, nos padrões dos pinhões, na forma como as conchas dos náutilos se curvam, e até no crescimento dos ramos das árvores. É impressionante como a matemática e o código podem ajudar-nos a entender e recriar os padrões que a natureza usa para criar beleza! +✅ **Sobre a sequência de Fibonacci**: Este padrão numérico absolutamente lindo (onde cada número é igual à soma dos dois anteriores: 0, 1, 1, 2, 3, 5, 8...) aparece literalmente *por toda a parte* na natureza! Você vai encontrá-lo nas espirais dos girassóis, nos padrões dos pinhas, na forma como as conchas de náutilo se curvam, e até na forma como os ramos das árvores crescem. É realmente impressionante como a matemática e o código podem ajudar-nos a entender e recriar os padrões que a natureza usa para criar a beleza! -## Os Blocos de Construção que Fazem a Magia Acontecer +## Os Blocos de Construção Que Fazem a Magia Acontecer -Ok, agora que viu como as linguagens de programação funcionam na prática, vamos descrever as peças fundamentais que compõem literalmente todos os programas já escritos. Pense neles como os ingredientes essenciais na sua receita favorita – uma vez que entenda o que cada um faz, será capaz de ler e escrever código em praticamente qualquer linguagem! +Certo, agora que viste como as linguagens de programação funcionam na prática, vamos decompor as peças fundamentais que compõem literalmente todos os programas já escritos. Pensa neles como os ingredientes essenciais da tua receita favorita – uma vez que entendas o que cada um faz, vais conseguir ler e escrever código em praticamente qualquer linguagem! -Isto é como aprender a gramática da programação. Lembra-se de quando estava na escola e aprendeu sobre substantivos, verbos e como construir frases? A programação tem a sua própria versão de gramática, e honestamente, é muito mais lógica e permissiva do que a gramática do inglês alguma vez foi! 😄 +Isto é tipo aprender a gramática da programação. Lembras-te de quando na escola aprendeste sobre substantivos, verbos e como construir frases? A programação tem a sua própria versão de gramática, e honestamente, é muito mais lógica e perdoadora do que a gramática inglesa alguma vez foi! 😄 -### Instruções: Os Passos a Passo +### Sentenças: As Instruções Passo a Passo -Vamos começar com **instruções** – são como frases individuais numa conversa com o seu computador. Cada instrução diz ao computador para fazer uma coisa específica, como dar direções: "Vira à esquerda aqui", "Para no semáforo vermelho", "Estaciona naquele lugar". +Vamos começar com **sentenças** – são como frases individuais numa conversa com o teu computador. Cada sentença diz ao computador para fazer uma coisa específica, tipo dar instruções: "Vira à esquerda aqui," "Para no semáforo vermelho," "Estaciona naquele lugar." -O que adoro nas instruções é a forma como normalmente são legíveis. Veja isto: +O que adoro nas sentenças é como normalmente são fáceis de ler. Vê isto: ```javascript // Declarações básicas que executam ações únicas @@ -286,30 +287,30 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**Isto é o que este código faz:** -- **Declara** uma variável constante para guardar o nome do utilizador -- **Exibe** uma mensagem de saudação na consola de saída -- **Calcula** e guarda o resultado de uma operação matemática +**Isto é o que este código faz:** +- **Declara** uma variável constante para guardar o nome de um utilizador +- **Exibe** uma mensagem de saudação na consola +- **Calcula** e guarda o resultado de uma operação matemática ```javascript -// Declarações que interagem com páginas web +// Instruções que interagem com páginas web document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Passo a passo, isto é o que está a acontecer:** -- **Modifica** o título da página que aparece no separador do navegador -- **Muda** a cor de fundo de todo o corpo da página +**Passo a passo, isto é o que está a acontecer:** +- **Modifica** o título da página que aparece no separador do navegador +- **Muda** a cor de fundo de todo o corpo da página -### Variáveis: O Sistema de Memória do Seu Programa +### Variáveis: O Sistema de Memória do Teu Programa -Ok, **variáveis** são, honestamente, um dos meus conceitos favoritos para ensinar porque são tão parecidas com coisas que já usa todos os dias! +Ok, as **variáveis** são honestamente um dos meus conceitos favoritos para ensinar porque são tão parecidas com coisas que já usas todos os dias! -Pense na sua lista de contactos do telefone por um momento. Não decoras o número de telefone de toda a gente – em vez disso, guardas "Mãe", "Melhor Amiga" ou "Pizzaria que entrega até às 2 da manhã" e deixas o telefone lembrar-se dos números reais. As variáveis funcionam exatamente da mesma forma! São como recipientes com etiquetas onde o seu programa pode guardar informação e recuperá-la mais tarde usando um nome que realmente faça sentido. +Pensa na tua lista de contactos do telemóvel por um segundo. Não decoras o número de telefone de toda a gente – em vez disso, guardas "Mãe," "Melhor Amiga," ou "Pizzaria Que Entrega Até Às 2 da Manhã" e deixas o teu telemóvel lembrar os números reais. As variáveis funcionam exatamente da mesma forma! São como recipientes rotulados onde o teu programa pode guardar informação e recuperá-la mais tarde usando um nome que realmente faça sentido. -Aqui está o que é realmente fixe: as variáveis podem mudar enquanto o seu programa corre (daí o nome "variável" – percebeu a brincadeira?). Tal como pode atualizar o contacto da pizzaria quando descobre um sítio ainda melhor, as variáveis podem ser atualizadas à medida que o seu programa aprende nova informação ou conforme as situações mudam! +O que é realmente fixe: as variáveis podem mudar enquanto o teu programa está a correr (daí o nome "variável" – percebes a brincadeira?). Tal como atualizas o contacto da pizzaria quando descobres um sítio ainda melhor, as variáveis podem ser atualizadas à medida que o teu programa aprende novas informações ou as situações mudam! -Deixe-me mostrar como isto pode ser maravilhosamente simples: +Deixa-me mostrar-te como isto pode ser lindamente simples: ```javascript // Passo 1: Criar variáveis básicas @@ -319,11 +320,11 @@ let temperature = 75; let isRaining = false; ``` -**Compreender estes conceitos:** -- **Guardar** valores imutáveis em variáveis `const` (como o nome do site) -- **Usar** `let` para valores que podem mudar ao longo do programa -- **Atribuir** diferentes tipos de dados: strings (texto), números e booleanos (verdadeiro/falso) -- **Escolher** nomes descritivos que expliquem o que cada variável contém +**Compreender estes conceitos:** +- **Guardar** valores imutáveis em variáveis `const` (como o nome do site) +- **Usar** `let` para valores que podem mudar ao longo do programa +- **Atribuir** diferentes tipos de dados: strings (texto), números e booleanos (verdadeiro/falso) +- **Escolher** nomes descritivos que expliquem o conteúdo de cada variável ```javascript // Passo 2: Trabalhar com objetos para agrupar dados relacionados @@ -334,13 +335,13 @@ const weatherData = { }; ``` -**No exemplo acima, nós:** -- **Criámos** um objeto para agrupar informações meteorológicas relacionadas -- **Organizámos** múltiplos dados sob um único nome de variável -- **Usámos** pares chave-valor para etiquetar claramente cada dado +**No exemplo acima, nós:** +- **Criámos** um objeto para agrupar informações relacionadas com o tempo +- **Organizámos** múltiplos dados sob um só nome de variável +- **Usámos** pares chave-valor para rotular claramente cada informação ```javascript -// Passo 3: Usar e atualizar variáveis +// Passo 3: Utilizar e atualizar variáveis console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); @@ -349,32 +350,32 @@ currentWeather = "cloudy"; temperature = 68; ``` -**Vamos entender cada parte:** -- **Exibir** informação usando template literals com a sintaxe `${}` -- **Aceder** às propriedades do objeto usando notação de ponto (`weatherData.windSpeed`) -- **Atualizar** variáveis declaradas com `let` para refletir condições em mudança -- **Combinar** múltiplas variáveis para criar mensagens significativas +**Vamos entender cada parte:** +- **Exibir** informação usando template literals com a sintaxe `${}` +- **Aceder** às propriedades do objeto usando notação de ponto (`weatherData.windSpeed`) +- **Atualizar** variáveis declaradas com `let` para refletir condições mutáveis +- **Combinar** múltiplas variáveis para criar mensagens significativas ```javascript -// Passo 4: Destruturação moderna para código mais limpo +// Passo 4: Desestruturação moderna para código mais limpo const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**O que precisa de saber:** -- **Extrair** propriedades específicas de objetos usando atribuição por destruturação -- **Criar** novas variáveis automaticamente com os mesmos nomes das chaves do objeto -- **Simplificar** o código evitando notação repetitiva de ponto +**O que precisas de saber:** +- **Extrair** propriedades específicas de objetos usando atribuição por desestruturação +- **Criar** novas variáveis automaticamente com os mesmos nomes das chaves do objeto +- **Simplificar** o código evitando repetição da notação de ponto -### Fluxo de Controlo: Ensinar o Seu Programa a Pensar +### Fluxo de Controlo: Ensinando o Teu Programa a Pensar -Ok, aqui é onde a programação fica absolutamente fascinante! **Fluxo de controlo** é basicamente ensinar o seu programa a tomar decisões inteligentes, exatamente como você faz todos os dias sem sequer pensar. +Ok, aqui é onde a programação fica completamente incrível! **Fluxo de controlo** é basicamente ensinar o teu programa a tomar decisões inteligentes, exatamente como tu fazes todos os dias sem sequer pensar. -Imagine isto: esta manhã provavelmente seguiu algo como "Se está a chover, pego no guarda-chuva. Se está frio, visto um casaco. Se estou atrasado, salto o pequeno-almoço e pego num café pelo caminho." O seu cérebro naturalmente segue esta lógica if-then dezenas de vezes por dia! +Imagina isto: esta manhã provavelmente passaste por algo tipo "Se estiver a chover, vou levar um guarda-chuva. Se estiver frio, vou usar um casaco. Se estiver atrasado, vou saltar o pequeno-almoço e apanhar café pelo caminho." O teu cérebro segue naturalmente esta lógica if-então dezenas de vezes por dia! -Isto é o que faz os programas parecerem inteligentes e vivos em vez de simplesmente seguirem um guião chato e previsível. Eles podem realmente observar uma situação, avaliar o que está a acontecer, e responder de forma adequada. É como dar ao seu programa um cérebro que pode adaptar-se e fazer escolhas! +Isto é o que faz com que os programas pareçam inteligentes e vivos em vez de apenas seguir um guião aborrecido e previsível. Eles podem realmente olhar para uma situação, avaliar o que está a acontecer e responder apropriadamente. É como dar um cérebro ao teu programa que pode adaptar-se e fazer escolhas! -Quer ver como isto funciona lindamente? Deixe-me mostrar-lhe: +Queres ver como isto funciona lindamente? Deixa-me mostrar-te: ```javascript // Passo 1: Lógica condicional básica @@ -388,14 +389,14 @@ if (userAge >= 18) { } ``` -**Isto é o que este código faz:** -- **Verifica** se a idade do utilizador cumpre o requisito para votar -- **Executa** diferentes blocos de código com base no resultado da condição -- **Calcula** e exibe quanto tempo falta até poder votar se tiver menos de 18 anos -- **Fornece** feedback específico e útil para cada cenário +**Isto é o que este código faz:** +- **Verifica** se a idade do utilizador cumpre o requisito para votar +- **Executa** blocos de código diferentes com base no resultado da condição +- **Calcula** e exibe quanto tempo falta para ser elegível para votar se for menor de 18 +- **Fornece** feedback específico e útil para cada cenário ```javascript -// Passo 2: Múltiplas condições com operadores lógicos +// Passo 2: Várias condições com operadores lógicos const userAge = 17; const hasPermission = true; @@ -408,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Analisando o que acontece aqui:** -- **Combina** múltiplas condições usando o operador `&&` (e) -- **Cria** uma hierarquia de condições usando `else if` para múltiplos cenários -- **Trata** todos os casos possíveis com uma última instrução `else` -- **Oferece** feedback claro e acionável para cada situação diferente +**A decompor o que acontece aqui:** +- **Combina** várias condições usando o operador `&&` (e) +- **Cria** uma hierarquia de condições usando `else if` para vários cenários +- **Lida** com todos os casos possíveis com uma última instrução `else` +- **Fornece** feedback claro e prático para cada situação diferente ```javascript -// Passo 3: Condicional conciso com operador ternário +// Passo 3: Condicional concisa com operador ternário const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**O que precisa de lembrar:** -- **Usar** o operador ternário (`? :`) para condições simples com duas opções -- **Escrever** a condição primeiro, seguida por `?`, depois o resultado verdadeiro, depois `:`, e depois o resultado falso -- **Aplicar** este padrão quando precisar de atribuir valores com base em condições +**O que precisas de lembrar:** +- **Usa** o operador ternário (`? :`) para condições simples com duas opções +- **Escreve** a condição primeiro, seguida de `?`, depois o resultado verdadeiro, depois `:`, e finalmente o resultado falso +- **Aplica** este padrão quando precisas de atribuir valores baseados em condições ```javascript -// Passo 4: Tratamento de vários casos específicos +// Passo 4: Tratamento de múltiplos casos específicos const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -446,53 +447,53 @@ switch (dayOfWeek) { } ``` -**Este código realiza o seguinte:** -- **Compara** o valor da variável com múltiplos casos específicos -- **Agrupa** casos semelhantes (dias úteis vs fins de semana) -- **Executa** o bloco de código apropriado quando encontra uma correspondência -- **Inclui** um caso `default` para tratar valores inesperados -- **Usa** declarações `break` para evitar que o código continue para o próximo caso +**Este código realiza o seguinte:** +- **Compara** o valor da variável com múltiplos casos específicos +- **Agrupa** casos semelhantes juntos (dias úteis versus fins de semana) +- **Executa** o bloco de código apropriado quando encontra correspondência +- **Inclui** um caso `default` para lidar com valores inesperados +- **Usa** instruções `break` para impedir o código de continuar para o próximo caso -> 💡 **Analogia do mundo real**: Pense no fluxo de controlo como ter o GPS mais paciente do mundo a dar-lhe direções. Pode dizer "Se houver trânsito na Rua Principal, vá pela autoestrada. Se a construção bloquear a autoestrada, tente o percurso panorâmico." Os programas usam exatamente o mesmo tipo de lógica condicional para responder inteligentemente a situações diferentes e sempre oferecer aos utilizadores a melhor experiência possível. +> 💡 **Analogia do mundo real**: Pensa no fluxo de controlo como ter o GPS mais paciente do mundo a dar-te direções. Pode dizer "Se houver trânsito na Rua Principal, pega na autoestrada em vez disso. Se a construção bloquear a autoestrada, tenta a rota panorâmica." Os programas usam exatamente este tipo de lógica condicional para responder inteligentemente a diferentes situações e dar sempre aos utilizadores a melhor experiência possível. -### 🎯 **Verificação de Conceitos: Domínio dos Blocos de Construção** +### 🎯 **Verificação do Conceito: Domínio dos Blocos de Construção** -**Vamos ver como está com os fundamentos:** -- Consegue explicar a diferença entre uma variável e uma instrução com as suas próprias palavras? -- Pense num cenário real em que usaria uma decisão if-then (como o nosso exemplo do voto) -- Qual é uma coisa na lógica de programação que o surpreendeu? +**Vamos ver como estás a ir com os fundamentos:** +- Consegues explicar a diferença entre uma variável e uma sentença com as tuas próprias palavras? +- Pensa num cenário do mundo real onde usarias uma decisão if-then (como no exemplo do voto) +- Qual é uma coisa sobre a lógica de programação que te surpreendeu? -**Impulso rápido de confiança:** +**Impulso rápido de confiança:** ```mermaid flowchart LR - A["📝 Instruções
(Instruções)"] --> B["📦 Variáveis
(Armazenamento)"] --> C["🔀 Fluxo de Controlo
(Decisões)"] --> D["🎉 Programa a Funcionar!"] + A["📝 Declarações
(Instruções)"] --> B["📦 Variáveis
(Armazenamento)"] --> C["🔀 Fluxo de Controlo
(Decisões)"] --> D["🎉 Programa a Funcionar!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **O que vem a seguir**: Vamos divertir-nos imenso ao mergulhar mais a fundo nestes conceitos enquanto continuamos esta incrível jornada juntos! Por agora, concentre-se em sentir a excitação sobre todas as possibilidades incríveis que tem pela frente. As competências e técnicas específicas vão fixar-se naturalmente à medida que praticarmos juntos – prometo que vai ser muito mais divertido do que possa imaginar! +✅ **O que vem a seguir**: Vamos divertir-nos imenso a aprofundar estes conceitos enquanto continuamos esta viagem incrível juntos! Por agora, concentra-te só em sentir esse entusiasmo por todas as possibilidades incríveis que tens pela frente. As competências e técnicas específicas vão entrar naturalmente à medida que praticamos juntos – prometo que vai ser muito mais divertido do que possas imaginar! ## Ferramentas do Ofício -Ok, sinceramente aqui é onde fico tão entusiasmado que mal me consigo conter! 🚀 Vamos falar sobre as ferramentas incríveis que vão fazer com que se sinta como se lhe tivessem acabado de entregar as chaves de uma nave espacial digital. +Certo, esta é honestamente a parte onde fico tão entusiasmado que mal me consigo conter! 🚀 Vamos falar das ferramentas incríveis que vão fazer-te sentir como se acabasses de receber as chaves de uma nave espacial digital. -Sabe como um chef tem aquelas facas perfeitamente equilibradas que parecem extensões das suas mãos? Ou como um músico tem aquela guitarra que parece cantar no momento em que a toca? Pois bem, os programadores têm a nossa própria versão destas ferramentas mágicas, e aqui está algo que vai ficar absolutamente maravilhado – a maioria delas é totalmente grátis! +Sabes como um chef tem aquelas facas perfeitamente equilibradas que parecem extensões das suas mãos? Ou como um músico tem aquela guitarra que parece cantar no momento em que a toca? Bem, os programadores têm a sua própria versão destas ferramentas mágicas, e aqui está algo que vai impressionar-te – a maioria delas é completamente gratuita! -Estou quase a saltar na cadeira a pensar em partilhar isto consigo porque revolucionaram completamente a forma como construímos software. Estamos a falar de assistentes de codificação com IA que ajudam a escrever código (não estou a brincar!), ambientes na nuvem onde pode criar aplicações completas literalmente de qualquer lugar com Wi-Fi, e ferramentas de depuração tão sofisticadas que são como ter visão de raio-x para os seus programas. +Estou praticamente a saltar na cadeira a pensar em partilhar isto contigo porque revolucionaram completamente a forma como construímos software. Estamos a falar de assistentes de codificação movidos a IA que podem ajudar a escrever o teu código (não estou a brincar!), ambientes cloud onde podes construir aplicações inteiras literalmente de qualquer lugar com Wi-Fi, e ferramentas de depuração tão sofisticadas que são como ter visão raio-X para os teus programas. -E aqui está a parte que ainda me arrepia: estas não são ferramentas "para iniciantes" que vai ultrapassar rapidamente. São exatamente as mesmas ferramentas de nível profissional que programadores do Google, Netflix, e aquele estúdio indie de apps que tanto gosta estão a usar neste preciso momento. Vai sentir-se um verdadeiro profissional a usá-las! +E aqui está a parte que ainda me arrepia: estas não são "ferramentas para iniciantes" que vais ultrapassar rapidamente. São exatamente as ferramentas profissionais que os programadores do Google, Netflix e daquele estúdio indie de apps que adoras estão a usar neste preciso momento. Vais sentir-te um verdadeiro profissional a usá-las! ```mermaid graph TD A["💡 A Sua Ideia"] --> B["⌨️ Editor de Código
(VS Code)"] - B --> C["🌐 Ferramentas de Desenvolvimento do Navegador
(Testar & Depurar)"] + B --> C["🌐 DevTools do Navegador
(Testes & Depuração)"] C --> D["⚡ Linha de Comando
(Automação & Ferramentas)"] D --> E["📚 Documentação
(Aprendizagem & Referência)"] E --> F["🚀 Aplicação Web Incrível!"] - B -.-> G["🤖 Assistente AI
(GitHub Copilot)"] + B -.-> G["🤖 Assistente IA
(GitHub Copilot)"] C -.-> H["📱 Teste de Dispositivos
(Design Responsivo)"] D -.-> I["📦 Gestores de Pacotes
(npm, yarn)"] E -.-> J["👥 Comunidade
(Stack Overflow)"] @@ -504,106 +505,106 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Editores de Código e IDEs: Os Seus Novos Melhores Amigos Digitais +### Editores de Código e IDEs: Os Teus Novos Melhores Amigos Digitais -Vamos falar sobre editores de código – estes vão mesmo tornar-se os seus novos lugares favoritos para passar tempo! Pense neles como o seu santuário pessoal de programação onde vai passar a maior parte do tempo a criar e aperfeiçoar as suas criações digitais. +Vamos falar sobre editores de código – estes estão mesmo prestes a tornar-se os teus novos locais favoritos para passar tempo! Pensa neles como o teu santuário pessoal de programação onde vais passar a maior parte do tempo a criar e aperfeiçoar as tuas criações digitais. -Mas aqui está o que é absolutamente mágico nos editores modernos: eles não são apenas editores de texto sofisticados. São como ter o mentor de programação mais brilhante e apoiador sentado ao seu lado 24/7. Detetam os seus erros de digitação antes de os notar, sugerem melhorias que o fazem parecer um génio, ajudam-no a perceber o que cada pedaço de código faz, e alguns até conseguem prever o que vai escrever e oferecem-se para terminar os seus pensamentos! +Mas aqui está o que é absolutamente mágico nos editores modernos: eles não são apenas editores de texto sofisticados. São como ter o mentor de programação mais brilhante e prestável sentado ao teu lado 24/7. Apanham os teus erros de digitação antes mesmo de os notares, sugerem melhorias que te fazem parecer um génio, ajudam-te a entender o que cada pedaço de código faz, e alguns até conseguem prever o que estás para digitar e oferecem-se para completar os teus pensamentos! -Lembro-me quando descobri a auto-completação pela primeira vez – senti literalmente que estava a viver no futuro. Começa a escrever algo e o editor diz: "Ei, estavas a pensar nesta função que faz exatamente o que precisas?" É como ter um adivinho da mente como seu companheiro de programação! +Lembro-me da primeira vez que descobri a autocompletação – senti literalmente que estava a viver no futuro. Começas a digitar algo, e o teu editor diz, "Ei, estavas a pensar nesta função que faz exatamente o que precisas?" É como ter um leitor de pensamentos como parceiro de codificação! **O que torna estes editores tão incríveis?** -Os editores de código modernos oferecem um impressionante conjunto de funcionalidades pensadas para aumentar a sua produtividade: +Os editores modernos oferecem um impressionante conjunto de funcionalidades desenhadas para aumentar a tua produtividade: -| Funcionalidade | O que Faz | Porquê Ser Útil | -|----------------|-----------|----------------| -| **Realce de Sintaxe** | Colore diferentes partes do código | Facilita a leitura e a deteção de erros | -| **Auto-completação** | Sugere código enquanto escreve | Acelera a programação e reduz erros de digitação | -| **Ferramentas de Depuração** | Ajuda a encontrar e corrigir erros | Poupa horas de resolução de problemas | +| Funcionalidade | O Que Faz | Porquê Que Ajuda | +|---------|--------------|--------------| +| **Destaque de Sintaxe** | Colore diferentes partes do teu código | Facilita a leitura do código e a deteção de erros | +| **Autocompletação** | Sugere código enquanto digitamos | Acelera a codificação e reduz erros de digitação | +| **Ferramentas de Depuração** | Ajuda a encontrar e corrigir erros | Poupa horas de tempo em resolução de problemas | | **Extensões** | Adiciona funcionalidades especializadas | Personaliza o editor para qualquer tecnologia | | **Assistentes de IA** | Sugere código e explicações | Acelera o aprendizado e a produtividade | -> 🎥 **Recurso em Vídeo**: Quer ver estas ferramentas em ação? Veja este [vídeo Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) para uma visão geral completa. +> 🎥 **Recurso em Vídeo**: Quer ver estas ferramentas em ação? Vê este [vídeo Ferramentas do Ofício](https://youtube.com/watch?v=69WJeXGBdxg) para uma visão geral completa. #### Editores Recomendados para Desenvolvimento Web -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Grátis) -- O mais popular entre os programadores web -- Excelente ecossistema de extensões -- Terminal incorporado e integração com Git -- **Extensões obrigatórias**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Sugestões de código com IA - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Colaboração em tempo real - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Formatação automática de código - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Detetar erros de ortografia no código +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Grátis) +- O mais popular entre programadores web +- Excelente ecossistema de extensões +- Terminal integrado e integração com Git +- **Extensões imperdíveis**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Sugestões de código movidas a IA + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Colaboração em tempo real + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Formatação automática de código + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Deteta erros ortográficos no código -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Pago, grátis para estudantes) -- Ferramentas avançadas de depuração e testes -- Auto-completação inteligente -- Controlo de versão incorporado +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Pago, grátis para estudantes) +- Ferramentas avançadas de depuração e testes +- Autocompletação inteligente de código +- Controlo de versões integrado -**IDEs Baseadas na Nuvem** (Vários preços) -- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code completo no seu navegador -- [Replit](https://replit.com/) - Excelente para aprender e partilhar código -- [StackBlitz](https://stackblitz.com/) - Desenvolvimento web full-stack instantâneo +**IDEs Baseadas em Cloud** (Vários preços) +- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code completo no teu navegador +- [Replit](https://replit.com/) - Ótimo para aprender e partilhar código +- [StackBlitz](https://stackblitz.com/) - Desenvolvimento web full-stack instantâneo -> 💡 **Dica para Começar**: Comece com o Visual Studio Code – é gratuito, amplamente usado na indústria, e tem uma enorme comunidade a criar tutoriais e extensões úteis. +> 💡 **Dica para Começar**: Começa com o Visual Studio Code – é grátis, amplamente usado na indústria, e tem uma comunidade enorme a criar tutoriais e extensões úteis. -### Navegadores Web: O Seu Laboratório Secreto de Desenvolvimento +### Navegadores Web: O Teu Laboratório Secreto de Desenvolvimento -Ok, prepare-se para ficar completamente maravilhado! Sabe como tem usado os navegadores para navegar nas redes sociais e ver vídeos? Pois, eles têm estado a esconder este incrível laboratório secreto de desenvolvimento o tempo todo, só à espera de ser descoberto por si! +Ok, prepara-te para ficar completamente maravilhado! Sabes como tens usado os navegadores para navegar nas redes sociais e ver vídeos? Pois afinal eles têm estado a esconder este incrível laboratório secreto de desenvolvimento o tempo todo, só à espera que o descubras! -Cada vez que clica com o botão direito numa página web e seleciona "Inspecionar Elemento", está a abrir um mundo oculto de ferramentas de desenvolvimento que são honestamente mais poderosas do que algum software caro que eu costumava pagar centenas de euros antes. É como descobrir que a sua cozinha comum esconde um laboratório profissional de chef atrás de um painel secreto! -A primeira vez que alguém me mostrou as DevTools do navegador, passei tipo três horas só a clicar por todo o lado e a pensar "ESPERA, ISTO TAMBÉM FAZ ISSO?!" Literalmente podes editar qualquer site em tempo real, ver exatamente a velocidade de carregamento de tudo, testar como o teu site aparece em dispositivos diferentes, e até fazer debug de JavaScript como um verdadeiro profissional. É absolutamente incrível! +Cada vez que clicas com o botão direito numa página web e selecionas "Inspecionar Elemento", estás a abrir um mundo escondido de ferramentas para desenvolvedores que são honestamente mais poderosas do que algum software caro que eu antigamente pagava centenas de euros para usar. É como descobrir que a tua velha cozinha tem um laboratório de chef profissional escondido atrás de um painel secreto! +A primeira vez que alguém me mostrou as DevTools do navegador, passei cerca de três horas só a clicar por tudo e a dizer "ESPERA, ISTO TAMBÉM FAZ ISSO?!" Literalmente, podes editar qualquer site em tempo real, ver exatamente a velocidade de carregamento de tudo, testar como o teu site fica em diferentes dispositivos, e até depurar JavaScript como um verdadeiro profissional. É absolutamente incrível! -**Aqui está o motivo pelo qual os navegadores são a tua arma secreta:** +**Aqui está porque os navegadores são a tua arma secreta:** -Quando crias um site ou aplicação web, precisas de ver como ele fica e se comporta no mundo real. Os navegadores não só mostram o teu trabalho como também fornecem feedback detalhado sobre desempenho, acessibilidade e possíveis problemas. +Quando crias um site ou aplicação web, precisas de ver como ele fica e se comporta no mundo real. Os navegadores não só exibem o teu trabalho, como também fornecem feedback detalhado sobre desempenho, acessibilidade e potenciais problemas. #### Ferramentas de Desenvolvimento do Navegador (DevTools) -Os navegadores modernos incluem suítes de desenvolvimento completas: +Navegadores modernos incluem suítes completas de desenvolvimento: -| Categoria da Ferramenta | O que faz | Exemplo de uso | +| Categoria da Ferramenta | O que faz | Exemplo de Uso | |------------------------|-----------|----------------| | **Inspetor de Elementos** | Ver e editar HTML/CSS em tempo real | Ajustar estilos para ver resultados imediatos | -| **Console** | Ver mensagens de erro e testar JavaScript | Debug de problemas e experimentar código | -| **Monitor de Rede** | Acompanhar o carregamento de recursos | Otimizar desempenho e tempos de carregamento | +| **Console** | Ver mensagens de erro e testar JavaScript | Depurar problemas e experimentar código | +| **Monitor de Rede** | Acompanhar o carregamento dos recursos | Otimizar desempenho e tempos de carregamento | | **Verificador de Acessibilidade** | Testar design inclusivo | Garantir que o site funciona para todos os utilizadores | -| **Simulador de Dispositivo** | Pré-visualizar em diferentes tamanhos de ecrã | Testar design responsivo sem múltiplos dispositivos | +| **Simulador de Dispositivos** | Pré-visualizar em diferentes tamanhos de ecrã | Testar design responsivo sem múltiplos dispositivos | #### Navegadores Recomendados para Desenvolvimento - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools padrão da indústria com documentação extensa - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Excelentes ferramentas para CSS Grid e acessibilidade -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Baseado no Chromium com recursos da Microsoft para desenvolvedores +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Construído sobre Chromium com recursos para desenvolvedores da Microsoft -> ⚠️ **Dica Importante para Testes**: Testa sempre os teus sites em vários navegadores! O que funciona na perfeição no Chrome pode apresentar diferenças no Safari ou Firefox. Programadores profissionais testam em todos os principais browsers para garantir experiências de utilizador consistentes. +> ⚠️ **Dica Importante de Testes**: Testa sempre os teus sites em vários browsers! O que funciona perfeitamente no Chrome pode parecer diferente no Safari ou Firefox. Desenvolvedores profissionais testam em todos os browsers principais para garantir experiências de utilizador consistentes. -### Ferramentas de Linha de Comando: A tua Porta para Superpoderes de Desenvolvedor +### Ferramentas de Linha de Comando: A tua Porta de Entrada para Superpoderes de Desenvolvedor -Ok, vamos ter um momento completamente honesto sobre a linha de comando, porque quero que escuches isto de alguém que realmente percebe. Quando a vi pela primeira vez – só aquela tela preta assustadora com texto a piscar – pensei literalmente, "Não, absolutamente não! Isto parece algo de um filme de hackers dos anos 80 e definitivamente não sou suficientemente inteligente para isto!" 😅 +Ok, vamos ter um momento completamente honesto sobre a linha de comando, porque quero que ouças isto de alguém que realmente percebe. Quando a vi pela primeira vez – só aquela assustadora tela preta com texto a piscar – pensei literalmente: "Nem pensar, absolutamente não! Isto parece coisa de filme de hackers dos anos 80, e eu definitivamente não sou suficientemente inteligente para isto!" 😅 -Mas aqui está o que gostaria que alguém me tivesse dito naquela altura, e o que te digo agora: a linha de comando não é assustadora – é na verdade como ter uma conversa direta com o teu computador. Pensa nisso como a diferença entre pedir comida através de uma app elegante com fotos e menus (o que é fácil e confortável) versus entrar no teu restaurante local preferido onde o chef sabe exatamente o que gostas e prepara algo perfeito só com um "surpreende-me com algo incrível." +Mas aqui está o que gostava que alguém me tivesse dito na altura, e que agora te estou a dizer: a linha de comando não é assustadora – é na verdade como ter uma conversa direta com o teu computador. Pensa nisso como a diferença entre encomendar comida numa app chique com imagens e menus (que é agradável e fácil) e entrar no teu restaurante local favorito onde o chef sabe exatamente o que gostas e pode preparar algo perfeito só por ouvires dizer "surpreende-me com algo incrível." -A linha de comando é onde os desenvolvedores se sentem verdadeiros magos. Escreves algumas palavras que parecem mágicas (ok, são só comandos, mas parecem mágicas!), carregas Enter, e PÁ – criaste estruturas inteiras de projetos, instalaste ferramentas poderosas do mundo inteiro, ou puseste a tua app na internet para milhões verem. Quando provas esse poder pela primeira vez, é simplesmente viciante! +A linha de comando é onde os desenvolvedores se sentem verdadeiros magos. Digitas umas palavras que parecem mágicas (ok, são só comandos, mas sentem-se mágicos!), carregas enter, e PÁ – criaste estruturas inteiras de projeto, instalaste ferramentas poderosas de todo o mundo, ou colocaste a tua app na internet para milhões de pessoas verem. Depois de provas esse poder pela primeira vez, é sinceramente viciante! -**Por que a linha de comando vai tornar-se a tua ferramenta favorita:** +**Por que a linha de comando será a tua ferramenta favorita:** -Embora interfaces gráficas sejam ótimas para muitas tarefas, a linha de comando destaca-se em automatização, precisão e velocidade. Muitas ferramentas de desenvolvimento funcionam principalmente através da linha de comando, e aprender a usá-las eficientemente pode melhorar muito a tua produtividade. +Enquanto interfaces gráficas são ótimas para muitas tarefas, a linha de comando destaca-se na automação, precisão e velocidade. Muitas ferramentas de desenvolvimento funcionam principalmente por interfaces de linha de comando, e aprender a usá-las eficientemente pode melhorar dramaticamente a tua produtividade. ```bash -# Passo 1: Criar e navegar até ao diretório do projeto +# Passo 1: Criar e navegar para o diretório do projeto mkdir my-awesome-website cd my-awesome-website ``` **Isto é o que este código faz:** -- **Criar** uma nova diretoria chamada "my-awesome-website" para o teu projeto -- **Navegar** para dentro da diretoria criada para começares a trabalhar +- **Criar** uma nova pasta chamada "my-awesome-website" para o teu projeto +- **Navegar** para dentro da pasta recém-criada para começar a trabalhar ```bash # Passo 2: Inicializar o projeto com package.json @@ -614,11 +615,11 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Passo a passo, isto está a acontecer:** -- **Inicializar** um novo projeto Node.js com as definições padrão usando `npm init -y` -- **Instalar** o Vite como uma ferramenta moderna de build para desenvolvimento rápido e builds de produção -- **Adicionar** Prettier para formatação automática do código e ESLint para verificar a qualidade do código -- **Usar** o flag `--save-dev` para marcar estas dependências como apenas para desenvolvimento +**Passo a passo, isto é o que está a acontecer:** +- **Inicializar** um novo projeto Node.js com configurações padrão usando `npm init -y` +- **Instalar** o Vite como ferramenta moderna de build para desenvolvimento rápido e builds de produção +- **Adicionar** Prettier para formatação automática e ESLint para verificações de qualidade de código +- **Usar** a flag `--save-dev` para marcar estas dependências como apenas para desenvolvimento ```bash # Passo 3: Criar estrutura e ficheiros do projeto @@ -629,31 +630,31 @@ echo 'My Site

Hello Wo npx vite ``` -**No exemplo acima, fizemos:** -- **Organizámos** o projeto criando pastas separadas para código fonte e assets -- **Gerámos** um ficheiro HTML básico com estrutura documental apropriada -- **Iniciámos** o servidor de desenvolvimento Vite para recarregamento ao vivo e substituição de módulos em quente +**No exemplo acima, nós:** +- **Organizámos** o projeto criando pastas separadas para código-fonte e assets +- **Gerámos** um ficheiro HTML básico com estrutura adequada +- **Iniciámos** o servidor de desenvolvimento do Vite para recarregamentos ao vivo e hot module replacement #### Ferramentas Essenciais de Linha de Comando para Desenvolvimento Web | Ferramenta | Propósito | Porquê que precisas | |------------|-----------|---------------------| -| **[Git](https://git-scm.com/)** | Controlo de versões | Rastrear alterações, colaborar com outros, fazer backups do trabalho | -| **[Node.js & npm](https://nodejs.org/)** | Ambiente de execução JavaScript & gestão de pacotes | Executar JavaScript fora dos navegadores, instalar ferramentas modernas de desenvolvimento | -| **[Vite](https://vitejs.dev/)** | Ferramenta de build & servidor de desenvolvimento | Desenvolvimento super rápido com substituição de módulos em quente | -| **[ESLint](https://eslint.org/)** | Qualidade do código | Encontrar e corrigir automaticamente problemas no JavaScript | -| **[Prettier](https://prettier.io/)** | Formatação de código | Manter o código consistentemente formatado e legível | +| **[Git](https://git-scm.com/)** | Controlo de versões | Rastrear alterações, colaborar com outros, fazer backup do trabalho | +| **[Node.js & npm](https://nodejs.org/)** | Ambiente de execução JavaScript & gestão de pacotes | Executar JavaScript fora dos browsers, instalar ferramentas modernas | +| **[Vite](https://vitejs.dev/)** | Ferramenta de build & servidor de dev | Desenvolvimento ultrarrápido com hot module replacement | +| **[ESLint](https://eslint.org/)** | Qualidade de código | Encontrar e corrigir automaticamente problemas no JavaScript | +| **[Prettier](https://prettier.io/)** | Formatação de código | Manter o código formatado de forma consistente e legível | -#### Opções Específicas de Plataforma +#### Opções Específicas por Plataforma **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal moderno e completo +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal moderno e rico em funcionalidades - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Ambiente de scripting poderoso - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Linha de comando tradicional do Windows **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Aplicação de terminal integrada -- **[iTerm2](https://iterm2.com/)** - Terminal avançado com funcionalidades melhoradas +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Aplicação terminal integrada +- **[iTerm2](https://iterm2.com/)** - Terminal avançado com funcionalidades adicionais **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Shell padrão do Linux @@ -661,195 +662,195 @@ npx vite > 💻 = Pré-instalado no sistema operativo -> 🎯 **Caminho de Aprendizagem**: Começa com comandos básicos como `cd` (mudar diretoria), `ls` ou `dir` (listar ficheiros), e `mkdir` (criar pasta). Pratica comandos do fluxo de trabalho moderno como `npm install`, `git status`, e `code .` (abre a diretoria atual no VS Code). À medida que te conseguires familiarizar, vais naturalmente aprender comandos mais avançados e técnicas de automatização. +> 🎯 **Caminho de Aprendizagem**: Começa com comandos básicos como `cd` (mudar diretório), `ls` ou `dir` (listar ficheiros), e `mkdir` (criar pasta). Pratica com comandos do fluxo de trabalho moderno como `npm install`, `git status`, e `code .` (abre a pasta atual no VS Code). À medida que fica mais confortável, irás naturalmente aprender comandos mais avançados e técnicas de automação. ### Documentação: O teu Mentor de Aprendizagem Sempre Disponível -Ok, deixa-me partilhar um pequeno segredo que vai fazer com que te sintas muito melhor por seres um principiante: até os programadores mais experientes passam uma grande parte do tempo a ler documentação. E não é porque não sabem o que estão a fazer – é na verdade um sinal de sabedoria! +Ok, vou partilhar um pequeno segredo que vai fazer-te sentir muito melhor sobre seres principiante: até os desenvolvedores mais experientes passam uma grande parte do seu tempo a ler documentação. E isso não é porque eles não sabem o que estão a fazer – na verdade, é um sinal de sabedoria! -Pensa na documentação como ter acesso aos professores mais pacientes e experientes do mundo 24/7. Atolado num problema às 2 da manhã? A documentação está lá, com um abraço virtual caloroso e exatamente a resposta que precisas. Quer aprender sobre uma funcionalidade nova e popular? A documentação apoia-te com exemplos passo a passo. Estás a tentar perceber porque é que algo funciona de certa forma? Adivinha – a documentação está pronta para explicar isso de uma maneira que finalmente faz sentido! +Pensa na documentação como ter acesso aos professores mais pacientes e conhecedores do mundo, disponíveis 24/7. Preso num problema às 2 da manhã? A documentação está lá com um abraço virtual quente e a resposta exata que precisas. Queres aprender sobre alguma funcionalidade nova da qual toda a gente fala? A documentação está do teu lado com exemplos passo a passo. Tentando perceber porque é que algo funciona daquela maneira? Acertaste – a documentação está pronta a explicar de forma que finalmente faz sentido! -Aqui está algo que mudou completamente a minha perspetiva: o mundo do desenvolvimento web evolui incrivelmente rápido, e ninguém (repito, ninguém mesmo!) sabe tudo de cor. Já vi programadores seniores com mais de 15 anos de experiência a consultar sintaxe básica, e sabes o quê? Isso não é embaraçoso – é inteligente! Não se trata de ter uma memória perfeita; trata-se de saber onde encontrar respostas confiáveis rapidamente e entender como aplicá-las. +Aqui está algo que mudou completamente a minha perspetiva: o mundo do desenvolvimento web move-se incrivelmente rápido e ninguém (digo, absolutamente ninguém!) decorou tudo. Já vi desenvolvedores séniores com mais de 15 anos de experiência a consultar sintaxe básica e sabes o quê? Isto não é embaraçoso – é inteligente! Não é sobre ter uma memória perfeita; é sobre saber onde encontrar respostas confiáveis rapidamente e como aplicá-las. -**É aqui que a verdadeira magia acontece:** +**Aqui é onde a verdadeira magia acontece:** -Programadores profissionais passam uma parte significativa do tempo a ler documentação – não porque não saibam o que fazem, mas porque o universo do desenvolvimento web muda tão depressa que estar a par das novidades requer aprendizagem contínua. Uma boa documentação ajuda-te a perceber não só *como* usar algo, mas *porquê* e *quando* o deves usar. +Desenvolvedores profissionais passam uma porção significativa do seu tempo a ler documentação – não porque não saibam o que fazem, mas porque o panorama do desenvolvimento web evolui tão rápido que manter-se atualizado requer aprendizagem contínua. A boa documentação ajuda-te a perceber não só *como* usar algo, mas *porque* e *quando* usar. #### Recursos Essenciais de Documentação **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - O padrão ouro para documentação de tecnologias web -- Guias abrangentes para HTML, CSS e JavaScript -- Inclui informações de compatibilidade entre navegadores -- Traz exemplos práticos e demos interativos +- Guias completos para HTML, CSS e JavaScript +- Inclui informações sobre compatibilidade entre navegadores +- Traz exemplos práticos e demos interativas **[Web.dev](https://web.dev)** (da Google) -- Melhores práticas modernas para desenvolvimento web -- Guias para otimização de desempenho +- Melhores práticas modernas de desenvolvimento web +- Guias de otimização de desempenho - Princípios de acessibilidade e design inclusivo -- Estudo de casos de projetos reais +- Estudos de caso de projetos reais -**[Documentação para Desenvolvedores Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Recursos para desenvolvimento no browser Edge -- Guias para Progressive Web Apps -- Insights para desenvolvimento multiplataforma +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Recursos para desenvolvimento no navegador Edge +- Guias de Progressive Web Apps +- Insights sobre desenvolvimento multiplataforma **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Currículos de aprendizagem estruturados -- Cursos em vídeo com especialistas da indústria +- Currículos estruturados de aprendizagem +- Cursos em vídeo por especialistas da indústria - Exercícios práticos de codificação -> 📚 **Estratégia de Estudo**: Não tentes memorizar a documentação – aprende sim a navegar nela de forma eficiente. Marca como favoritos as referências mais usadas e pratica usar as funções de pesquisa para encontrares informação específica rapidamente. +> 📚 **Estratégia de Estudo**: Não tentes decorar a documentação – em vez disso, aprende a navegar eficazmente por ela. Coloca nos favoritos referências usadas frequentemente e pratica usar as funções de pesquisa para encontrar rapidamente o que precisas. -### 🔧 **Verificação de Maestria nas Ferramentas: O que mais te interessa?** +### 🔧 **Verificação do Domínio da Ferramenta: O que mais te atrai?** -**Tira um momento para considerar:** -- Qual a ferramenta que estás mais entusiasmado para experimentar primeiro? (Não há resposta errada!) -- Continua a linha de comando a parecer intimidante ou já estás curioso? -- Consegues imaginar-te a usar as DevTools do navegador para espreitares atrás do ecrã dos teus sites favoritos? +**Pensa um pouco sobre:** +- Qual ferramenta tens mais vontade de experimentar primeiro? (Não há resposta errada!) +- A linha de comando ainda te assusta, ou estás curioso sobre ela? +- Consegues imaginar usar as DevTools para espreitar por trás da cortina dos teus sites favoritos? ```mermaid -pie title "Tempo de Desenvolvedor Despendido com Ferramentas" +pie title "Tempo de Desenvolvedor Gasto com Ferramentas" "Editor de Código" : 40 - "Testes no Navegador" : 25 + "Teste no Navegador" : 25 "Linha de Comandos" : 15 "Leitura de Documentação" : 15 "Depuração" : 5 ``` -> **Curiosidade divertida**: A maioria dos programadores passa cerca de 40% do seu tempo no editor de código, mas repara no tempo que gastam em testes, aprendizagem e resolução de problemas. Programar não é só escrever código – é criar experiências! +> **Curiosidade divertida**: A maioria dos desenvolvedores passa cerca de 40% do tempo no editor de código, mas repara quanto tempo vai para testes, aprendizagem e resolução de problemas. Programar não é só escrever código – é criar experiências! -✅ **Para refletir**: Aqui vai algo interessante para ponderares – como achas que as ferramentas para construir websites (desenvolvimento) podem ser diferentes das ferramentas para desenhar a sua aparência (design)? É como a diferença entre ser um arquiteto que projeta uma casa bonita e o empreiteiro que de facto a constrói. Ambos são cruciais, mas precisam de caixas de ferramentas diferentes! Este tipo de pensamento vai ajudar-te a ver o quadro completo de como os sites ganham vida. +✅ **Ponto para refletir**: Aqui está algo interessante para pensar – como achas que as ferramentas para construir sites (desenvolvimento) podem ser diferentes das ferramentas para desenhar como eles ficam (design)? É como a diferença entre ser um arquiteto que desenha uma casa bonita e o empreiteiro que realmente a constrói. Ambos são cruciais, mas precisam de diferentes conjuntos de ferramentas! Este tipo de pensamento vai ajudar-te mesmo a ver o quadro geral de como os sites ganham vida. -## Desafio do Agente GitHub Copilot 🚀 +## Desafio GitHub Copilot Agent 🚀 -Usa o modo Agente para completar o desafio seguinte: +Usa o modo Agent para completar o seguinte desafio: **Descrição:** Explora as funcionalidades de um editor de código moderno ou IDE e demonstra como pode melhorar o teu fluxo de trabalho como desenvolvedor web. -**Prompt:** Escolhe um editor de código ou IDE (como Visual Studio Code, WebStorm, ou um IDE baseado na cloud). Lista três funcionalidades ou extensões que te ajudam a escrever, depurar ou manter o código mais eficientemente. Para cada uma, dá uma breve explicação de como beneficia o teu fluxo de trabalho. +**Prompt:** Escolhe um editor de código ou IDE (como Visual Studio Code, WebStorm, ou um IDE baseado na cloud). Lista três funcionalidades ou extensões que ajudam a escrever, depurar ou manter código de forma mais eficiente. Para cada uma, fornece uma breve explicação de como beneficia o teu fluxo de trabalho. --- ## 🚀 Desafio -**Ok, detetive, pronto para o teu primeiro caso?** +**Então, detetive, pronto para o teu primeiro caso?** -Agora que tens esta base fantástica, tenho uma aventura que te vai ajudar a ver quão incrivelmente diversa e fascinante é realmente a programação. E ouve bem – isto não é ainda para escrever código, por isso sem pressão! Imagina-te a ser um detetive de linguagens de programação no teu primeiro caso emocionante! +Agora que tens esta base incrível, tenho uma aventura que vai ajudar-te a ver o quão incrivelmente diversa e fascinante é a programação. E ouve bem – isto ainda não é sobre escrever código, portanto não te sintas pressionado! Pensa em ti como um detetive de linguagens de programação no teu primeiro caso excitante! -**A tua missão, caso aceites:** -1. **Torna-te um explorador de linguagens**: Escolhe três linguagens de programação de universos completamente diferentes – talvez uma que constrói websites, outra que cria apps móveis, e outra que analisa dados para cientistas. Encontra exemplos da mesma tarefa simples escrita em cada linguagem. Prometo que vais ficar tão surpreendido com as diferenças, mesmo fazendo exatamente a mesma coisa! +**A tua missão, se decidires aceitá-la:** +1. **Torna-te explorador de linguagens**: Escolhe três linguagens de programação de universos completamente diferentes – talvez uma que construa websites, outra que crie apps móveis, e uma que processe dados para cientistas. Encontra exemplos da mesma tarefa simples escrita em cada linguagem. Prometo que vais ficar absolutamente maravilhado com o quão diferentes podem ser enquanto fazem exatamente a mesma coisa! -2. **Descobre as histórias de origem**: O que torna cada linguagem especial? Aqui vai um facto interessante – cada linguagem de programação foi criada porque alguém pensou, "Sabes que mais? Deve haver uma forma melhor de resolver este problema específico." Consegues perceber quais eram esses problemas? Algumas destas histórias são mesmo fascinantes! +2. **Descobre as suas histórias de origem**: O que torna cada linguagem especial? Aqui vai um facto giro – todas as linguagens de programação foram criadas porque alguém pensou: "Sabes que mais? Tem de haver uma melhor forma de resolver este problema específico." Consegues perceber quais eram esses problemas? Algumas destas histórias são realmente fascinantes! -3. **Conhece as comunidades**: Vê quão acolhedora e apaixonada é a comunidade de cada linguagem. Algumas têm milhões de desenvolvedores a partilharem conhecimento e a ajudarem-se, outras são mais pequenas mas extremamente unidas e de apoio. Vais adorar perceber as diferentes personalidades destas comunidades! +3. **Conhece as comunidades**: Vê como é a receção e a paixão de cada comunidade de linguagens. Algumas têm milhões de desenvolvedores a partilhar conhecimento e ajudar-se uns aos outros, outras são mais pequenas mas incrivelmente unidas e solidárias. Vais adorar ver as diferentes personalidades destas comunidades! -4. **Segue o teu instinto**: Qual linguagem te parece mais acessível agora? Não stresses em fazer a “escolha perfeita” – apenas ouve os teus instintos! Honestamente, não existe resposta errada aqui, e podes sempre explorar outras depois. +4. **Segue a tua intuição**: Qual linguagem te parece mais acessível agora? Não te preocupes em fazer a escolha "perfeita" – só ouve os teus instintos! Honestamente, não há resposta errada, e podes sempre explorar outras mais tarde. -**Bónus de detetive**: Se conseguires, descobre com que linguagens são construídos grandes sites ou apps. Garanto que vais ficar chocado ao saber o que está por trás do Instagram, Netflix, ou daquele jogo móvel que não consegues parar de jogar! +**Trabalho de detetive extra**: Vê se consegues descobrir que grandes websites ou apps são construídos com cada linguagem. Garanto que vais ficar chocado ao saber o que move o Instagram, Netflix, ou aquele jogo móvel do qual não te consegues desligar! -> 💡 **Lembra-te**: Não estás a tentar tornar-te expert em nenhuma destas linguagens hoje. Estás só a conhecer o bairro antes de decidir onde queres instalar-te. Vai com calma, diverte-te, e deixa a tua curiosidade guiar-te! +> 💡 **Lembra-te**: Não estás a tentar tornar-te um especialista em nenhuma destas linguagens hoje. Estás só a conhecer a vizinhança antes de decidires onde queres estabelecer-te. Vai com calma, diverte-te, e deixa a tua curiosidade guiar-te! -## Vamos Celebrar o que Descobriste! +## Vamos Celebrar o que Descobristes! -Por amor de Deus, absorveste tanto conhecimento incrível hoje! Estou mesmo entusiasmado para ver o quanto desta viagem fantástica ficou contigo. E lembra-te – isto não é um teste onde precisas de acertar tudo. É mais uma celebração de todas as coisas fixe que aprendeste sobre o fascinante mundo onde estás prestes a mergulhar! +Caramba, absorveste tanta informação incrível hoje! Estou genuinamente entusiasmado para ver quanto deste incrível percurso ficou contigo. E lembra-te – isto não é um teste onde tens de acertar em tudo. Isto é mais uma celebração de todas as coisas fixes que aprendeste sobre este fascinante mundo para onde estás a caminhar! [Faz o quiz pós-aula](https://ff-quizzes.netlify.app/web/) -## Revisão & Autoestudo -**Leve o seu tempo para explorar e divertir-se com isto!** +## Revisão & Autoestudo -Hoje já percorreu muito caminho, e isso é motivo de orgulho! Agora vem a parte divertida – explorar os tópicos que despertaram a sua curiosidade. Lembre-se, isto não é trabalho de casa – é uma aventura! +**Toma o teu tempo para explorar e diverte-te com isso!** +Cobriste muito terreno hoje, e isso é algo de que deves orgulhar-te! Agora vem a parte divertida – explorar os tópicos que despertaram a tua curiosidade. Lembra-te, isto não é trabalho de casa – é uma aventura! -**Aprofunde-se naquilo que mais o entusiasma:** +**Mergulha mais fundo no que te entusiasma:** -**Experimente na prática as linguagens de programação:** -- Visite os sites oficiais de 2-3 linguagens que chamaram a sua atenção. Cada uma tem a sua própria personalidade e história! -- Experimente alguns playgrounds de código online como [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Replit](https://replit.com/). Não tenha medo de experimentar – não vai partir nada! -- Leia sobre como surgiu a sua linguagem favorita. A sério, algumas dessas histórias de origem são fascinantes e vão ajudá-lo a entender porque é que as linguagens funcionam da forma como funcionam. +**Experimenta linguagens de programação:** +- Visita os sites oficiais de 2-3 linguagens que te chamaram a atenção. Cada uma tem a sua própria personalidade e história! +- Experimenta alguns playgrounds de código online como [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ou [Replit](https://replit.com/). Não tenhas medo de experimentar – não vais estragar nada! +- Lê sobre como a tua linguagem favorita foi criada. A sério, algumas destas histórias de origem são fascinantes e vão ajudar-te a perceber por que as linguagens funcionam da forma como funcionam. -**Familiarize-se com as suas novas ferramentas:** -- Descarregue o Visual Studio Code se ainda não o fez – é grátis e vai adorar! -- Passe alguns minutos a explorar o mercado de Extensões. É como uma loja de aplicações para o seu editor de código! -- Abra as Ferramentas de Desenvolvedor do seu navegador e vá clicando por aí. Não se preocupe em entender tudo – apenas familiarize-se com o que está lá. +**Fica confortável com as tuas novas ferramentas:** +- Descarrega o Visual Studio Code se ainda não o fizeste – é grátis e vais adorar! +- Passa alguns minutos a explorar o marketplace de Extensões. É como uma loja de apps para o teu editor de código! +- Abre as Ferramentas de Desenvolvedor do teu browser e explora. Não te preocupes em perceber tudo – apenas familiariza-te com o que lá está. -**Junte-se à comunidade:** -- Siga algumas comunidades de programadores em [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ou [GitHub](https://github.com/). A comunidade de programação é incrivelmente acolhedora para os novos membros! -- Veja alguns vídeos de programação para iniciantes no YouTube. Há tantos criadores excelentes que se lembram de como é começar do zero. -- Considere participar em encontros locais ou comunidades online. Acredite, os programadores adoram ajudar quem está a começar! +**Junta-te à comunidade:** +- Segue algumas comunidades de programadores em [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ou [GitHub](https://github.com/). A comunidade de programação é incrivelmente acolhedora para novatos! +- Vê vídeos de programação para iniciantes no YouTube. Há tantos grandes criadores que se lembram de como é começar do zero. +- Considera juntar-te a encontros locais ou comunidades online. Confia em mim, os programadores adoram ajudar quem está a começar! -> 🎯 **Ouça, quero que se lembre disto**: Não se espera que se torne num especialista em programação da noite para o dia! Agora, está apenas a conhecer este mundo incrível de que vai passar a fazer parte. Leve o seu tempo, desfrute da jornada, e lembre-se – todos os programadores que admira já estiveram exatamente onde está agora, entusiasmados e talvez um pouco sobrecarregados. Isso é totalmente normal, e significa que está a fazer tudo bem! +> 🎯 **Escuta, aqui está o que quero que lembres**: Não se espera que te tornes num mago da programação da noite para o dia! Neste momento, estás só a conhecer este mundo incrível de que vais passar a fazer parte. Vai com calma, desfruta a viagem, e lembra-te – todos os programadores que admiras estiveram exatamente onde tu estás agora, entusiasmados e talvez um pouco sobrecarregados. Isso é totalmente normal, e significa que estás a fazer bem! ## Tarefa -[Reading the Docs](assignment.md) +[Ler a Documentação](assignment.md) -> 💡 **Um pequeno incentivo para a sua tarefa**: Gostaria muito de ver você explorar algumas ferramentas que ainda não abordámos! Ignore os editores, navegadores e ferramentas de linha de comando que já mencionámos – existe todo um universo incrível de ferramentas de desenvolvimento à espera de ser descoberto. Procure aquelas que são mantidas ativamente e têm comunidades vibrantes e prestativas (essas tendem a ter os melhores tutoriais e as pessoas mais solidárias quando inevitavelmente ficar preso e precisar de uma ajuda amiga). +> 💡 **Um pequeno incentivo para a tua tarefa**: Adoraria ver-te explorar algumas ferramentas que ainda não abordámos! Pula os editores, browsers e ferramentas de linha de comando de que já falámos – existe todo um universo incrível de ferramentas de desenvolvimento à espera de seres descobertas. Procura aquelas que são ativamente mantidas e têm comunidades vibrantes e prestáveis (estas tendem a ter os melhores tutoriais e as pessoas mais disponíveis para ajudar quando ficares bloqueado e precisares de uma mão amiga). --- -## 🚀 A Sua Linha Temporal de Aprendizagem em Programação +## 🚀 O Teu Roteiro de Programação -### ⚡ **O que pode fazer nos próximos 5 minutos** -- [ ] Guardar nos favoritos 2-3 sites de linguagens de programação que lhe chamaram a atenção -- [ ] Descarregar o Visual Studio Code se ainda não o fez -- [ ] Abrir as DevTools do navegador (F12) e clicar em qualquer site -- [ ] Entrar numa comunidade de programação (Dev.to, Reddit r/webdev, ou Stack Overflow) +### ⚡ **O que podes fazer nos próximos 5 minutos** +- [ ] Guardar nos favoritos 2-3 websites de linguagens de programação que chamaram a tua atenção +- [ ] Descarregar o Visual Studio Code se ainda não o fizeste +- [ ] Abrir as Ferramentas de Desenvolvedor do browser (F12) e clicar em qualquer website +- [ ] Juntar-te a uma comunidade de programadores (Dev.to, Reddit r/webdev, ou Stack Overflow) -### ⏰ **O que pode concretizar nesta hora** -- [ ] Completar o quiz pós-aula e refletir sobre as suas respostas +### ⏰ **O que podes realizar nesta hora** +- [ ] Completar o quiz pós-aula e refletir sobre as tuas respostas - [ ] Configurar o VS Code com a extensão GitHub Copilot -- [ ] Experimentar um exemplo "Hello World" em 2 linguagens de programação diferentes online -- [ ] Ver um vídeo "Um dia na vida de um programador" no YouTube -- [ ] Começar a investigar as linguagens de programação escolhidas (desafio) +- [ ] Experimentar um exemplo "Hello World" em 2 linguagens diferentes online +- [ ] Ver um vídeo “Um Dia na Vida de um Programador” no YouTube +- [ ] Começar a tua investigação sobre linguagens de programação (do desafio) -### 📅 **A sua aventura de uma semana** +### 📅 **A tua aventura semanal** - [ ] Completar a tarefa e explorar 3 novas ferramentas de desenvolvimento -- [ ] Seguir 5 programadores ou contas relacionadas em redes sociais -- [ ] Tentar construir algo pequeno no CodePen ou Replit (mesmo que seja só "Hola, [O Seu Nome]!") -- [ ] Ler um artigo de blog de um programador sobre a sua trajetória em programação -- [ ] Participar num meetup virtual ou assistir a uma palestra de programação -- [ ] Começar a aprender a sua linguagem escolhida com tutoriais online - -### 🗓️ **A sua transformação de um mês** -- [ ] Construir o seu primeiro projeto pequeno (até uma página web simples conta!) -- [ ] Contribuir para um projeto open-source (começar por corrigir documentação) +- [ ] Seguir 5 programadores ou contas de programação nas redes sociais +- [ ] Tentar criar algo pequeno no CodePen ou Replit (mesmo que seja só "Olá, [O Teu Nome]!") +- [ ] Ler um post de blog de programador sobre a sua jornada de codificação +- [ ] Participar numa meetup virtual ou ver uma palestra sobre programação +- [ ] Começar a aprender a tua linguagem escolhida com tutoriais online + +### 🗓️ **A tua transformação mensal** +- [ ] Construir o teu primeiro pequeno projeto (mesmo uma página web simples conta!) +- [ ] Contribuir para um projeto open-source (começa por corrigir documentação) - [ ] Ser mentor de alguém que está a iniciar-se na programação -- [ ] Criar o seu website de portfólio de programador -- [ ] Conectar-se a comunidades locais de programadores ou grupos de estudo -- [ ] Começar a planear o seu próximo marco de aprendizagem +- [ ] Criar o teu website de portfólio de programador +- [ ] Ligar-te a comunidades locais de programadores ou grupos de estudo +- [ ] Começar a planear o teu próximo desafio de aprendizagem -### 🎯 **Reflexão Final** +### 🎯 **Reflexão final** -**Antes de avançar, reserve um momento para celebrar:** -- O que foi a coisa que mais o entusiasmou hoje na programação? -- Qual ferramenta ou conceito quer explorar primeiro? -- Como se sente ao começar esta jornada em programação? -- Qual é a pergunta que gostaria de fazer a um programador neste momento? +**Antes de continuares, tira um momento para celebrar:** +- Qual foi uma coisa sobre programação que te entusiasmou hoje? +- Qual ferramenta ou conceito queres explorar primeiro? +- Como te sentes ao começares esta jornada de programação? +- Qual é uma pergunta que gostarias de fazer a um programador agora? ```mermaid journey title A Sua Jornada de Construção de Confiança section Hoje - Curioso: 3: You - Sobrecarregado: 4: You - Entusiasmado: 5: You + Curious: 3: You + Overwhelmed: 4: You + Excited: 5: You section Esta Semana - A Explorar: 4: You - A Aprender: 5: You - A Conectar: 4: You + Exploring: 4: You + Learning: 5: You + Connecting: 4: You section Próximo Mês - A Construir: 5: You - Confiante: 5: You - A Ajudar os Outros: 5: You + Building: 5: You + Confident: 5: You + Helping Others: 5: You ``` -> 🌟 **Lembre-se**: Todo especialista já foi um principiante. Todo programador sénior já se sentiu exatamente como você se sente agora – entusiasmado, talvez um pouco sobrecarregado, e definitivamente curioso sobre o que é possível. Está em excelente companhia, e esta jornada vai ser incrível. Bem-vindo ao maravilhoso mundo da programação! 🎉 +> 🌟 **Lembra-te**: Todo especialista já foi um principiante. Todo programador sénior já se sentiu exatamente como tu te sentes agora – entusiasmado, talvez um pouco sobrecarregado, e definitivamente curioso sobre o que é possível. Estás em excelente companhia, e esta jornada vai ser incrível. Bem-vindo ao maravilhoso mundo da programação! 🎉 --- **Aviso Legal**: -Este documento foi traduzido usando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se tradução profissional por um ser humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas decorrentes do uso desta tradução. +Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos por garantir a precisão, esteja ciente de que as traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional feita por um humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. \ No newline at end of file diff --git a/translations/pt-PT/AGENTS.md b/translations/pt-PT/AGENTS.md index 71541cfd6..4f1661dda 100644 --- a/translations/pt-PT/AGENTS.md +++ b/translations/pt-PT/AGENTS.md @@ -1,24 +1,24 @@ -# AGENTS.md +# AGENTES.md ## Visão Geral do Projeto -Este é um repositório de currículo educativo para o ensino dos fundamentos do desenvolvimento web a principiantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas cobrindo JavaScript, CSS e HTML. +Este é um repositório curricular educativo para o ensino dos fundamentos do desenvolvimento web a principiantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, contendo 24 aulas práticas que abrangem JavaScript, CSS e HTML. ### Componentes Principais -- **Conteúdo Educativo**: 24 lições estruturadas organizadas em módulos baseados em projetos -- **Projetos Práticos**: Terrarium, Jogo de Digitação, Extensão de Navegador, Jogo Espacial, Aplicação Bancária, Editor de Código e Assistente de Chat AI -- **Questionários Interativos**: 48 questionários com 3 perguntas cada (avaliações pré/pós-aula) -- **Suporte Multilíngue**: Traduções automáticas para 50+ idiomas via GitHub Actions -- **Tecnologias**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para projetos AI) +- **Conteúdo Educativo**: 24 lições estruturadas organizadas em módulos baseados em projetos +- **Projetos Práticos**: Terrário, Jogo de Digitação, Extensão de Browser, Jogo Espacial, Aplicação Bancária, Editor de Código e Assistente de Chat IA +- **Questionários Interativos**: 48 questionários com 3 perguntas cada (avaliações pré/pós-aula) +- **Suporte Multilíngue**: Traduções automáticas para 50+ idiomas via GitHub Actions +- **Tecnologias**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para projetos de IA) ### Arquitetura -- Repositório educativo com estrutura baseada em aulas -- Cada pasta de aula contém README, exemplos de código e soluções -- Projetos independentes em diretórios separados (quiz-app, vários projetos de aulas) -- Sistema de tradução usando GitHub Actions (co-op-translator) -- Documentação servida via Docsify e disponível em PDF +- Repositório educativo com estrutura baseada em aulas +- Cada pasta de aula contém README, exemplos de código e soluções +- Projetos independentes em diretórios separados (quiz-app, vários projetos das aulas) +- Sistema de tradução usando GitHub Actions (co-op-translator) +- Documentação servida via Docsify e disponível em PDF ## Comandos de Configuração @@ -30,7 +30,7 @@ Este repositório é principalmente para consumo de conteúdo educativo. Para tr git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - + ### Configuração do Quiz App (Vue 3 + Vite) ```bash @@ -40,7 +40,7 @@ npm run dev # Iniciar servidor de desenvolvimento npm run build # Construir para produção npm run lint # Executar ESLint ``` - + ### API do Projeto Bancário (Node.js + Express) ```bash @@ -50,23 +50,23 @@ npm start # Iniciar servidor API npm run lint # Executar ESLint npm run format # Formatar com Prettier ``` - -### Projetos de Extensão de Navegador + +### Projetos de Extensão de Browser ```bash cd 5-browser-extension/solution npm install -# Siga as instruções específicas do navegador para carregar extensões +# Siga as instruções específicas do navegador para carregar a extensão ``` - -### Projetos de Jogo Espacial + +### Projetos do Jogo Espacial ```bash cd 6-space-game/solution npm install -# Abra o index.html no navegador ou use o Live Server +# Abra index.html no navegador ou use o Live Server ``` - + ### Projeto de Chat (Backend Python) ```bash @@ -75,208 +75,208 @@ pip install openai # Definir a variável de ambiente GITHUB_TOKEN python api.py ``` - -## Fluxo de Trabalho em Desenvolvimento -### Para Contribuintes de Conteúdo +## Fluxo de Desenvolvimento + +### Para Contribuidores de Conteúdo -1. **Faça fork do repositório** para a sua conta GitHub -2. **Clone o seu fork** localmente -3. **Crie uma nova branch** para as suas alterações -4. Faça alterações no conteúdo da aula ou exemplos de código -5. Teste quaisquer alterações de código nos diretórios dos projetos relevantes -6. Submeta pull requests seguindo as diretrizes de contribuição +1. **Faça fork do repositório** para a sua conta GitHub +2. **Clone seu fork** localmente +3. **Crie uma nova branch** para suas alterações +4. Faça alterações no conteúdo das aulas ou exemplos de código +5. Teste quaisquer alterações de código nas pastas dos projetos relevantes +6. Submeta pull requests seguindo as diretrizes de contribuição -### Para Estudantes +### Para Aprendizes -1. Faça fork ou clone do repositório -2. Navegue pelos diretórios das aulas sequencialmente -3. Leia os ficheiros README de cada aula -4. Complete os questionários pré-aula em https://ff-quizzes.netlify.app/web/ -5. Execute os exemplos de código nas pastas das aulas -6. Complete tarefas e desafios -7. Realize os questionários pós-aula +1. Faça fork ou clone o repositório +2. Navegue sequencialmente pelas pastas das aulas +3. Leia os ficheiros README de cada aula +4. Complete os questionários pré-aula em https://ff-quizzes.netlify.app/web/ +5. Trabalhe nos exemplos de código nas pastas das aulas +6. Complete os trabalhos e desafios +7. Realize os questionários pós-aula -### Desenvolvimento ao Vivo +### Desenvolvimento em Tempo Real -- **Documentação**: Execute `docsify serve` na raiz (porta 3000) -- **Quiz App**: Execute `npm run dev` no diretório quiz-app -- **Projetos**: Use a extensão Live Server do VS Code para projetos HTML -- **Projetos API**: Execute `npm start` nos respetivos diretórios das APIs +- **Documentação**: Execute `docsify serve` na raiz (porta 3000) +- **Quiz App**: Execute `npm run dev` na pasta quiz-app +- **Projetos**: Utilize a extensão VS Code Live Server para projetos HTML +- **Projetos API**: Execute `npm start` nas respetivas pastas API -## Instruções de Teste +## Instruções para Testes -### Teste do Quiz App +### Testes do Quiz App ```bash cd quiz-app npm run lint # Verificar problemas de estilo de código npm run build # Verificar se a compilação é bem-sucedida ``` - -### Teste da API Bancária + +### Testes da API Bancária ```bash cd 7-bank-project/api npm run lint # Verificar problemas de estilo de código node server.js # Verificar se o servidor inicia sem erros ``` - -### Abordagem Geral de Teste -- Este é um repositório educativo sem testes automáticos completos -- Testes manuais focam em: - - Exemplos de código executarem sem erros - - Links na documentação funcionarem corretamente - - Builds dos projetos concluírem com sucesso - - Exemplos seguirem boas práticas +### Abordagem Geral de Testes + +- Este é um repositório educativo sem testes automatizados completos +- Testes manuais focam em: + - Exemplos de código executados sem erros + - Links na documentação funcionam corretamente + - Builds dos projetos completam sem falhas + - Exemplos seguem as melhores práticas ### Verificações Antes da Submissão -- Execute `npm run lint` em diretórios com package.json -- Verifique se os links markdown são válidos -- Teste exemplos de código no navegador ou Node.js -- Confirme que as traduções mantêm a estrutura correta +- Execute `npm run lint` nas pastas com package.json +- Verifique se os links markdown são válidos +- Teste exemplos de código no navegador ou Node.js +- Confira se as traduções mantêm a estrutura correta -## Guia de Estilo de Código +## Diretrizes de Estilo de Código ### JavaScript -- Use sintaxe moderna ES6+ -- Siga configurações padrão ESLint fornecidas nos projetos -- Use nomes de variáveis e funções significativos para clareza educativa -- Adicione comentários explicando conceitos para os estudantes -- Utilize Prettier para formatação onde configurado +- Utilize sintaxe moderna ES6+ +- Siga as configurações padrão de ESLint fornecidas nos projetos +- Use nomes de variáveis e funções significativos para clareza educativa +- Adicione comentários explicativos para os aprendizes +- Formate com Prettier onde configurado ### HTML/CSS -- Elementos semânticos HTML5 -- Princípios de design responsivo -- Convenções claras de nomenclatura de classes -- Comentários explicativos para técnicas CSS voltados para aprendizes +- Utilize elementos semânticos HTML5 +- Princípios de design responsivo +- Convenções claras de nomenclatura de classes +- Comentários explicando técnicas CSS para aprendizes ### Python -- Diretrizes de estilo PEP 8 -- Exemplos claros e educativos -- Anotações de tipo para ajudar na aprendizagem +- Diretrizes de estilo PEP 8 +- Código claro e educativo +- Anotações de tipo quando úteis para aprendizado ### Documentação Markdown -- Hierarquia clara de títulos -- Blocos de código com especificação da linguagem -- Links para recursos adicionais -- Capturas de ecrã e imagens nas pastas `images/` -- Texto alternativo para imagens visando acessibilidade +- Hierarquia clara de cabeçalhos +- Blocos de código com especificação de linguagem +- Links para recursos adicionais +- Capturas de ecrã e imagens nas pastas `images/` +- Texto alternativo para imagens para acessibilidade -### Organização dos Ficheiros +### Organização de Ficheiros -- Lições numeradas sequencialmente (1-getting-started-lessons, 2-js-basics, etc.) -- Cada projeto tem pastas `solution/` e frequentemente `start/` ou `your-work/` -- Imagens armazenadas em pastas `images/` específicas das aulas -- Traduções em estrutura `translations/{language-code}/` +- Lições numeradas sequencialmente (1-getting-started-lessons, 2-js-basics, etc.) +- Cada projeto tem diretórios `solution/` e frequentemente `start/` ou `your-work/` +- Imagens guardadas em pastas `images/` específicas das lições +- Traduções na estrutura `translations/{language-code}/` ## Construção e Implementação ### Implementação do Quiz App (Azure Static Web Apps) -O quiz-app está configurado para implementação em Azure Static Web Apps: +O quiz-app está configurado para implementação no Azure Static Web Apps: ```bash cd quiz-app npm run build # Cria a pasta dist/ -# Faz deploy através do fluxo de trabalho GitHub Actions ao enviar para main +# Faz deploy via workflow do GitHub Actions ao fazer push para o main ``` - -Configuração Azure Static Web Apps: -- **Localização da App**: `/quiz-app` -- **Localização da saída**: `dist` -- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Geração de PDF para Documentação +Configuração do Azure Static Web Apps: +- **Local da app**: `/quiz-app` +- **Local de saída**: `dist` +- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` + +### Geração de PDF da Documentação ```bash npm install # Instalar docsify-to-pdf -npm run convert # Gerar PDF a partir de docs +npm run convert # Gerar PDF a partir do docs ``` - + ### Documentação Docsify ```bash -npm install -g docsify-cli # Instalar o Docsify globalmente +npm install -g docsify-cli # Instalar Docsify globalmente docsify serve # Servir em localhost:3000 ``` - -### Builds Específicos de Cada Projeto -Cada diretório de projeto pode ter o seu próprio processo de build: -- Projetos Vue: `npm run build` cria bundles para produção -- Projetos estáticos: Sem etapa de build, servir ficheiros diretamente +### Builds Específicos de Projetos + +Cada diretório de projeto pode ter seu próprio processo de build: +- Projetos Vue: `npm run build` cria bundles para produção +- Projetos estáticos: Sem etapa de build, servem ficheiros diretamente ## Diretrizes para Pull Requests ### Formato do Título -Use títulos claros e descritivos indicando a área da alteração: -- `[Quiz-app] Adicionar novo quiz para a lição X` -- `[Lesson-3] Corrigir erro tipográfico no projeto terrarium` -- `[Translation] Adicionar tradução em espanhol para a lição 5` -- `[Docs] Atualizar instruções de configuração` +Use títulos claros e descritivos indicando a área da alteração: +- `[Quiz-app] Adicionar novo quiz para a lição X` +- `[Lesson-3] Corrigir erro tipográfico no projeto terrarium` +- `[Translation] Adicionar tradução em Espanhol para a lição 5` +- `[Docs] Atualizar instruções de configuração` -### Verificações Obrigatórias +### Verificações Necessárias Antes de submeter um PR: -1. **Qualidade do Código**: - - Execute `npm run lint` nos diretórios dos projetos afetados - - Corrija todos os erros e avisos de lint +1. **Qualidade do Código**: + - Execute `npm run lint` nas pastas dos projetos afetados + - Corrija todos os erros e avisos reportados -2. **Verificação de Build**: - - Execute `npm run build` se aplicável - - Garanta que não há erros no build +2. **Verificação do Build**: + - Execute `npm run build` se aplicável + - Certifique-se que não haja erros de build -3. **Validação de Links**: - - Teste todos os links markdown - - Verifique referências a imagens +3. **Validação de Links**: + - Teste todos os links markdown + - Verifique se referências de imagens funcionam -4. **Revisão de Conteúdo**: - - Revise ortografia e gramática - - Assegure que exemplos de código estão corretos e educativos - - Verifique traduções para manter sentido original +4. **Revisão de Conteúdo**: + - Revise ortografia e gramática + - Garanta que os exemplos de código estão corretos e educativos + - Verifique se traduções mantêm o significado original ### Requisitos para Contribuição -- Aceitar o CLA da Microsoft (verificação automática no primeiro PR) -- Seguir o [Código de Conduta Open Source da Microsoft](https://opensource.microsoft.com/codeofconduct/) -- Ver [CONTRIBUTING.md](./CONTRIBUTING.md) para diretrizes detalhadas -- Referenciar números de issues na descrição do PR quando aplicável +- Aceitar o CLA da Microsoft (verificação automática no primeiro PR) +- Seguir o [Código de Conduta Open Source da Microsoft](https://opensource.microsoft.com/codeofconduct/) +- Consulte o [CONTRIBUTING.md](./CONTRIBUTING.md) para diretrizes detalhadas +- Referencie números de issues na descrição do PR se aplicável ### Processo de Revisão -- PRs revistos por mantenedores e comunidade -- Clareza educativa é prioritária -- Exemplos de código devem seguir as melhores práticas atuais -- Traduções são revistas para precisão e adequação cultural +- PRs são revistos por mantenedores e comunidade +- Clareza educativa é priorizada +- Exemplos de código devem seguir as melhores práticas atuais +- Traduções são revistas para precisão e adequação cultural ## Sistema de Tradução ### Tradução Automática -- Utiliza GitHub Actions com workflow co-op-translator -- Traduz para 50+ idiomas automaticamente -- Ficheiros fonte nas pastas principais -- Ficheiros traduzidos em diretórios `translations/{language-code}/` +- Utiliza GitHub Actions com workflow co-op-translator +- Traduz automaticamente para 50+ idiomas +- Ficheiros fonte nas pastas principais +- Ficheiros traduzidos nas pastas `translations/{language-code}/` -### Adicionar Melhorias Manuais nas Traduções +### Adição de Melhorias Manuais na Tradução -1. Localize o ficheiro em `translations/{language-code}/` -2. Faça melhorias preservando a estrutura -3. Assegure que exemplos de código permanecem funcionais -4. Teste qualquer conteúdo de quiz localizado +1. Localize o ficheiro em `translations/{language-code}/` +2. Faça melhorias preservando a estrutura +3. Assegure que exemplos de código continuam funcionais +4. Teste qualquer conteúdo de quiz localizado -### Metadados da Tradução +### Metadados de Tradução -Ficheiros traduzidos incluem cabeçalho de metadados: +Os ficheiros traduzidos incluem cabeçalho de metadados: ```markdown ``` - + ## Depuração e Resolução de Problemas ### Problemas Comuns -**Quiz app não começa**: -- Verifique a versão do Node.js (v14+ recomendado) -- Apague `node_modules` e `package-lock.json`, execute `npm install` novamente -- Verifique conflitos de porta (padrão: Vite usa porta 5173) +**Quiz app não inicia**: +- Verifique a versão do Node.js (recomendado v14+) +- Apague `node_modules` e `package-lock.json`, execute `npm install` novamente +- Verifique conflitos de porta (padrão: Vite usa porta 5173) -**Servidor API não inicia**: -- Confirme versão mínima do Node.js (node >=10) -- Verifique se a porta já está em uso -- Assegure que todas as dependências estão instaladas com `npm install` +**Servidor API não inicia**: +- Confirme se o Node.js está na versão mínima (node >=10) +- Veja se a porta já está em uso +- Assegure que todas as dependências estão instaladas com `npm install` -**Extensão do navegador não carrega**: -- Verifique se o manifest.json está corretamente formatado -- Confira console do navegador para erros -- Siga instruções específicas do navegador para instalação da extensão +**Extensão de browser não carrega**: +- Verifique se o manifest.json está formatado corretamente +- Confira erros na consola do browser +- Siga as instruções específicas do browser para instalação da extensão -**Problemas no projeto de chat Python**: -- Assegure que o pacote OpenAI está instalado: `pip install openai` -- Verifique se a variável ambiente GITHUB_TOKEN está definida -- Cheque permissões de acesso a GitHub Models +**Problemas no projeto de chat Python**: +- Verifique se o pacote OpenAI está instalado: `pip install openai` +- Confirme se a variável de ambiente GITHUB_TOKEN está definida +- Verifique permissões de acesso aos GitHub Models -**Docsify não serve a documentação**: -- Instale docsify-cli globalmente: `npm install -g docsify-cli` -- Execute a partir da raiz do repositório -- Confirme que o ficheiro `docs/_sidebar.md` existe +**Docsify não serve a documentação**: +- Instale docsify-cli globalmente: `npm install -g docsify-cli` +- Execute a partir da raiz do repositório +- Verifique se `docs/_sidebar.md` existe ### Dicas para Ambiente de Desenvolvimento -- Use VS Code com extensão Live Server para projetos HTML -- Instale extensões ESLint e Prettier para formatação consistente -- Use DevTools do navegador para depurar JavaScript -- Para projetos Vue, instale a extensão Vue DevTools no navegador +- Use VS Code com a extensão Live Server para projetos HTML +- Instale extensões ESLint e Prettier para formatação consistente +- Use as DevTools do browser para depurar JavaScript +- Para projetos Vue, instale a extensão Vue DevTools para browser ### Considerações de Performance -- Grande número de ficheiros traduzidos (50+ idiomas) torna clones completos grandes -- Use clone raso se só trabalhar com conteúdo: `git clone --depth 1` -- Exclua traduções das pesquisas quando trabalhar com conteúdo em inglês -- Processos de build podem ser lentos na primeira execução (npm install, build Vite) +- Grande número de ficheiros traduzidos (50+ idiomas) faz os clones completos serem grandes +- Use clone superficial se estiver a trabalhar apenas no conteúdo: `git clone --depth 1` +- Exclua traduções das pesquisas quando trabalhar no conteúdo em inglês +- Processos de build podem ser lentos na primeira execução (npm install, build Vite) ## Considerações de Segurança ### Variáveis de Ambiente -- Chaves API nunca devem ser commitadas no repositório -- Use ficheiros `.env` (já incluídos em `.gitignore`) -- Documente as variáveis de ambiente necessárias nos READMEs dos projetos +- Chaves API nunca devem ser cometidas no repositório +- Use ficheiros `.env` (já listados em `.gitignore`) +- Documente variáveis de ambiente necessárias nos READMEs dos projetos ### Projetos Python -- Utilize ambientes virtuais: `python -m venv venv` -- Mantenha dependências atualizadas -- Tokens do GitHub devem ter permissões mínimas necessárias +- Use ambientes virtuais: `python -m venv venv` +- Mantenha dependências atualizadas +- Tokens GitHub devem ter permissões mínimas necessárias -### Acesso ao GitHub Models +### Acesso aos GitHub Models -- Tokens de Acesso Pessoal (PAT) são necessários para GitHub Models -- Tokens devem ser guardados como variáveis ambiente -- Nunca commit tokens ou credenciais +- Tokens de Acesso Pessoal (PAT) são necessários para GitHub Models +- Tokens devem ser guardados como variáveis de ambiente +- Nunca cometa tokens ou credenciais no repositório ## Notas Adicionais ### Público-Alvo -- Principiantes completos no desenvolvimento web -- Estudantes e autodidatas -- Professores usando o currículo em salas de aula -- Conteúdo desenhado para acessibilidade e construção gradual de competências +- Principiantes completos em desenvolvimento web +- Estudantes e autodidatas +- Professores a usar o currículo em sala de aula +- Conteúdo desenhado para acessibilidade e construção gradual de competências ### Filosofia Educativa -- Abordagem de aprendizagem baseada em projetos -- Verificações frequentes de conhecimento (questionários) -- Exercícios práticos de programação -- Exemplos de aplicações do mundo real -- Foco nos fundamentos antes dos frameworks +- Aproximação baseada em projetos +- Verificações frequentes de conhecimento (quizzes) +- Exercícios práticos de programação +- Exemplos de aplicação no mundo real +- Foco nos fundamentos antes dos frameworks ### Manutenção do Repositório -- Comunidade ativa de aprendizes e contribuidores -- Atualizações regulares de dependências e conteúdo -- Issues e discussões monitorizadas pelos mantenedores -- Atualizações de tradução automatizadas via GitHub Actions +- Comunidade ativa de aprendizes e contribuidores +- Atualizações regulares de dependências e conteúdo +- Issues e discussões monitorizadas pelos mantenedores +- Atualizações de tradução automatizadas via GitHub Actions ### Recursos Relacionados -- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/) -- [Recursos Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes -- Cursos adicionais: IA generativa, Ciência de Dados, ML, currículos IoT disponíveis +- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/) +- [Recursos no Student Hub](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes +- Cursos adicionais: IA Generativa, Ciência de Dados, ML, currículos IoT disponíveis ### Trabalhar com Projetos Específicos -Para instruções detalhadas sobre projetos individuais, consulte os ficheiros README em: -- `quiz-app/README.md` - Aplicação de quiz Vue 3 -- `7-bank-project/README.md` - Aplicação bancária com autenticação -- `5-browser-extension/README.md` - Desenvolvimento de extensão para navegador -- `6-space-game/README.md` - Desenvolvimento de jogo baseado em Canvas -- `9-chat-project/README.md` - Projeto de assistente chat AI +Para instruções detalhadas de projetos individuais, consulte os ficheiros README em: +- `quiz-app/README.md` - Aplicação quiz em Vue 3 +- `7-bank-project/README.md` - Aplicação bancária com autenticação +- `5-browser-extension/README.md` - Desenvolvimento de extensão de browser +- `6-space-game/README.md` - Desenvolvimento de jogo baseado em canvas +- `9-chat-project/README.md` - Projeto de assistente de chat IA -### Estrutura Monorepo +### Estrutura de Monorepo -Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes: -- Cada aula é autónoma -- Projetos não partilham dependências -- Trabalhe em projetos individuais sem afetar outros -- Clone o repositório completo para a experiência do currículo completo +Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes: +- Cada aula é autónoma +- Projetos não partilham dependências +- Trabalhe em projetos individuais sem afetar os outros +- Clone o repositório completo para ter a experiência do currículo completo --- -**Aviso Legal**: -Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, por favor tenha em atenção que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional realizada por um humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução. +**Aviso Legal**: +Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional por um humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes do uso desta tradução. \ No newline at end of file diff --git a/translations/pt-PT/README.md b/translations/pt-PT/README.md index ccfbc353a..8bbf36511 100644 --- a/translations/pt-PT/README.md +++ b/translations/pt-PT/README.md @@ -12,52 +12,62 @@ # Desenvolvimento Web para Iniciantes - Um Currículo -Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 lições aprofunda JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe em questionários, discussões e tarefas práticas. Melhore as suas competências e otimize a retenção do conhecimento com a nossa eficaz pedagogia baseada em projetos. Comece hoje a sua jornada de programação! +Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 aulas mergulha em JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe em questionários, discussões e tarefas práticas. Melhore as suas competências e otimize a retenção do seu conhecimento com a nossa pedagógica eficaz baseada em projetos. Comece hoje mesmo a sua jornada de programação! -Junte-se à Comunidade Discord Azure AI Foundry +Junte-se à Comunidade Azure AI Foundry no Discord [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Siga estes passos para começar a utilizar estes recursos: -1. **Faça um Fork do Repositório**: Clique [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +Siga estes passos para começar a usar estes recursos: +1. **Faça Fork do Repositório**: Clique [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**Junte-se ao Azure AI Foundry Discord e conheça especialistas e outros programadores**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Suporte Multilíngue -#### Suportado através de GitHub Action (Automatizado e Sempre Atualizado) +#### Suportado via GitHub Action (Automatizado e Sempre Atualizado) -[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](./README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) +[Árabe](../ar/README.md) | [Bengali](../bn/README.md) | [Búlgaro](../bg/README.md) | [Birmanês (Myanmar)](../my/README.md) | [Chinês (Simplificado)](../zh-CN/README.md) | [Chinês (Tradicional, Hong Kong)](../zh-HK/README.md) | [Chinês (Tradicional, Macau)](../zh-MO/README.md) | [Chinês (Tradicional, Taiwan)](../zh-TW/README.md) | [Croata](../hr/README.md) | [Checo](../cs/README.md) | [Dinamarquês](../da/README.md) | [Holandês](../nl/README.md) | [Estónio](../et/README.md) | [Finlandês](../fi/README.md) | [Francês](../fr/README.md) | [Alemão](../de/README.md) | [Grego](../el/README.md) | [Hebraico](../he/README.md) | [Hindi](../hi/README.md) | [Húngaro](../hu/README.md) | [Indonésio](../id/README.md) | [Italiano](../it/README.md) | [Japonês](../ja/README.md) | [Kannada](../kn/README.md) | [Coreano](../ko/README.md) | [Lituano](../lt/README.md) | [Malaio](../ms/README.md) | [Malaiala](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Pidgin Nigeriano](../pcm/README.md) | [Norueguês](../no/README.md) | [Persa (Farsi)](../fa/README.md) | [Polaco](../pl/README.md) | [Português (Brasil)](../pt-BR/README.md) | [Português (Portugal)](./README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romeno](../ro/README.md) | [Russo](../ru/README.md) | [Sérvio (Cirílico)](../sr/README.md) | [Eslovaco](../sk/README.md) | [Esloveno](../sl/README.md) | [Espanhol](../es/README.md) | [Suaíli](../sw/README.md) | [Sueco](../sv/README.md) | [Tagalo (Filipino)](../tl/README.md) | [Tâmil](../ta/README.md) | [Telugu](../te/README.md) | [Tailandês](../th/README.md) | [Turco](../tr/README.md) | [Ucraniano](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamita](../vi/README.md) > **Prefere Clonar Localmente?** - -> Este repositório inclui mais de 50 traduções que aumentam significativamente o tamanho do download. Para clonar sem traduções, utilize o sparse checkout: +> +> Este repositório inclui traduções em mais de 50 idiomas o que aumenta significativamente o tamanho do download. Para clonar sem traduções, utilize o sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Isto oferece tudo o que precisa para completar o curso com um download muito mais rápido. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> Isto fornece tudo o que precisa para completar o curso com um download muito mais rápido. -**Se desejar ter idiomas de tradução adicionais, os suportados estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Se desejar que sejam suportados idiomas adicionais, estes encontram-se listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Abrir no Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _É estudante?_ -Visite a [**página do Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde encontrará recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher para certificado gratuito. Esta é a página que deve adicionar aos favoritos e consultar regularmente pois alteramos o conteúdo mensalmente. +Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde encontrará recursos para principiantes, pacotes para estudantes e até formas de obter um voucher de certificado gratuito. Esta é a página que deve guardar nos favoritos e consultar de vez em quando, pois atualizamos o conteúdo mensalmente. -### 📣 Anúncio - Novos desafios do modo GitHub Copilot Agent para completar! +### 📣 Anúncio - Novos desafios do modo Agente GitHub Copilot para completar! -Novo desafio adicionado, procure "GitHub Copilot Agent Challenge 🚀" na maioria dos capítulos. Este é um novo desafio para completar utilizando o GitHub Copilot e o modo Agent. Se nunca usou o modo Agent, ele é capaz não só de gerar texto mas também de criar e editar ficheiros, executar comandos e muito mais. +Novo desafio adicionado, procure "GitHub Copilot Agent Challenge 🚀" em maioria dos capítulos. É um novo desafio para completar usando o GitHub Copilot e o modo Agente. Se nunca usou o modo Agente antes, ele é capaz não só de gerar texto, mas também criar e editar ficheiros, executar comandos e muito mais. ### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_ -Novo projeto de Assistente AI acabou de ser adicionado, veja o [projeto](./9-chat-project/README.md) +Novo projeto de Assistente AI acabado de adicionar, veja o [projeto](./9-chat-project/README.md) -### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acaba de ser lançado +### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acabou de ser lançado Não perca o nosso novo currículo de IA Generativa! @@ -65,14 +75,13 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com ![Background](../../translated_images/pt-PT/background.148a8d43afde5730.webp) -- Lições cobrindo tudo, desde o básico até RAG. -- Interaja com personagens históricos usando GenAI e a nossa aplicação acompanhante. -- Narrativa divertida e envolvente, vai viajar no tempo! +- Aulas que abrangem tudo desde os conceitos básicos até RAG. +- Interaja com personagens históricos usando GenAI e a nossa app acompanhante. +- Narrativa divertida e envolvente, viaje no tempo! ![character](../../translated_images/pt-PT/character.5c0dd8e067ffd693.webp) - -Cada lição inclui uma tarefa a completar, um teste de conhecimento e um desafio para o guiar na aprendizagem de tópicos como: +Cada aula inclui uma tarefa para completar, um controlo de conhecimento e um desafio para guiá-lo na aprendizagem de tópicos como: - Prompting e engenharia de prompts - Geração de aplicações de texto e imagem - Aplicações de pesquisa @@ -83,41 +92,40 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com ## 🌱 Começar -> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos o seu feedback [no nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como utilizar este currículo. Adoraríamos o seu feedback [no nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um questionário pré-aula e avance lendo o material da aula, completando as várias atividades e verificando a sua compreensão com o questionário pós-aula. +**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada aula, comece com um questionário pré-aula, siga lendo o material da aula, complete as várias atividades e verifique a sua compreensão com o questionário pós-aula. -Para melhorar a sua experiência de aprendizagem, conecte-se com os seus colegas para trabalharem juntos nos projetos! As discussões são encorajadas no nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde a nossa equipa de moderadores estará disponível para responder às suas perguntas. +Para melhorar a sua experiência de aprendizagem, conecte-se com seus colegas para trabalharem juntos nos projetos! Discussões são incentivadas no nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde a nossa equipa de moderadores estará disponível para responder às suas perguntas. Para aprofundar a sua educação, recomendamos vivamente explorar o [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais. ### 📋 Configurar o seu ambiente -Este currículo tem um ambiente de desenvolvimento pronto a usar! Ao começar pode optar por executar o currículo num [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em browser, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Este currículo tem um ambiente de desenvolvimento pronto a usar! À medida que começa pode optar por executar o currículo num [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em browser, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Crie o seu repositório -Para guardar facilmente o seu trabalho, recomenda-se criar a sua própria cópia deste repositório. Pode fazer isto clicando no botão **Use this template** no topo da página. Isto criará um novo repositório na sua conta GitHub com uma cópia do currículo. +Para guardar facilmente o seu trabalho, é recomendado que crie a sua própria cópia deste repositório. Pode fazê-lo clicando no botão **Usar este modelo** no topo da página. Isto criará um novo repositório na sua conta GitHub com uma cópia do currículo. Siga estes passos: -1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página. +1. **Faça Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página. 2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Executar o currículo num Codespace -Na sua cópia do repositório que criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para trabalhar. +Na sua cópia deste repositório que criou, clique no botão **Code** e selecione **Open with Codespaces**. Isto criará um novo Codespace para trabalhar. ![Codespace](../../translated_images/pt-PT/createcodespace.0238bbf4d7a8d955.webp) #### Executar o currículo localmente no seu computador -Para executar este currículo localmente no seu computador, vai precisar de um editor de texto, um navegador e uma ferramenta de linha de comandos. A nossa primeira lição, [Introdução às Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), irá guiá-lo por várias opções para cada uma destas ferramentas para seleccionar o que funcionar melhor para si. - -Recomendamos usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como editor, que também inclui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Pode descarregar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). - +Para executar este currículo localmente no seu computador, vai precisar de um editor de texto, um navegador e uma ferramenta de linha de comandos. A nossa primeira aula, [Introdução às Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), orienta-o através das várias opções para cada uma destas ferramentas para que escolha a que funciona melhor para si. -1. Clone o seu repositório para o seu computador. Pode fazer isto clicando no botão **Code** e copiando a URL: +A nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também tem um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) incorporado. Pode fazer o download do Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Clone o seu repositório para o seu computador. Pode fazer isto clicando no botão **Code** e copiando o URL: [CodeSpace](./images/createcodespace.png) + Depois, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `` pelo URL que acabou de copiar: ```bash @@ -127,87 +135,87 @@ Recomendamos usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id 2. Abra a pasta no Visual Studio Code. Pode fazer isto clicando em **File** > **Open Folder** e selecionando a pasta que acabou de clonar. -> Extensões recomendadas para o Visual Studio Code: +> Extensões recomendadas do Visual Studio Code: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para pré-visualizar páginas HTML dentro do Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar a escrever código mais rápido +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar a escrever código mais rapidamente ## 📂 Cada lição inclui: - sketchnote opcional - vídeo suplementar opcional -- quiz de aquecimento pré-lição +- questionário pré-aula - lição escrita - para lições baseadas em projetos, guias passo a passo para construir o projeto - verificações de conhecimento - um desafio - leitura suplementar - tarefa -- [quiz pós-lição](https://ff-quizzes.netlify.app/web/) +- [questionário pós-aula](https://ff-quizzes.netlify.app/web/) -> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, 48 quizzes no total com três perguntas cada. Estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/); a aplicação do quiz pode ser executada localmente ou implementada no Azure; siga as instruções na pasta `quiz-app`. +> **Uma nota sobre os questionários**: Todos os questionários estão contidos na pasta Quiz-app, totalizando 48 questionários com três perguntas cada. Estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/), a aplicação de questionários pode ser executada localmente ou implantada no Azure; siga as instruções na pasta `quiz-app`. ## 🗃️ Lições -| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Lição Ligada | Autor | -| :-: | :---------------------------------------------------------: | :------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | A Começar | Introdução à Programação e Ferramentas do Ofício | Aprender os fundamentos básicos por trás da maioria das linguagens de programação e sobre software que ajuda desenvolvedores profissionais | [Introdução às Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | A Começar | Noções Básicas de GitHub, inclui trabalho em equipa | Como usar o GitHub no seu projeto, como colaborar com outros numa base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | A Começar | Acessibilidade | Aprender os conceitos básicos de acessibilidade web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Noções Básicas de JS | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Noções Básicas de JS | Funções e Métodos | Aprender sobre funções e métodos para gerir o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher | -| 06 | Noções Básicas de JS | Tomar Decisões com JS | Aprender a criar condições no seu código usando métodos de tomada de decisão | [Tomar Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Noções Básicas de JS | Arrays e Loops | Trabalhar com dados usando arrays e ciclos em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML na Prática | Construir o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS na Prática | Construir o CSS para estilizar o terrário online, focando nos conceitos básicos de CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construir o JavaScript para que o terrário funcione como uma interface de arrastar/soltar, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Construir um Jogo de Digitação | Aprender como usar eventos do teclado para conduzir a lógica da sua aplicação JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Trabalhar com Navegadores | Aprender como os navegadores funcionam, a sua história, e como esboçar os primeiros elementos de uma extensão para navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Construir um formulário, chamar uma API e armazenar variáveis no local storage | Construir os elementos JavaScript da sua extensão para navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários, e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, performance web | Usar processos em segundo plano do navegador para gerir o ícone da extensão; aprender sobre performance web e algumas otimizações para melhorar | [Tarefas em Segundo Plano e Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Mais Avançado em JavaScript | Aprender sobre Herança usando Classes e Composição e o padrão Pub/Sub, em preparação para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhar no canvas | Aprender sobre a API Canvas, usada para desenhar elementos no ecrã | [Desenhar no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Mover elementos no ecrã | Descobrir como elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Mover Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisões | Fazer elementos colidirem e reagirem entre si usando teclas e providenciar uma função de cooldown para assegurar o desempenho do jogo | [Detecção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Manter pontuação | Realizar cálculos matemáticos baseados no estado e desempenho do jogo | [Manter Pontuação](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizar e reiniciar o jogo | Aprender sobre terminar e reiniciar o jogo, incluindo limpar recursos e redefinir valores de variáveis | [Condição de Fim](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas numa Aplicação Web | Aprender como criar o esqueleto da arquitetura de um site multipágina usando roteamento e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construir um Formulário de Login e Registo | Aprender sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos de Recolha e Uso de Dados | Como os dados fluem para dentro e para fora da sua aplicação, como buscar, armazenar e dispensar deles | [Dados](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gestão de Estado | Aprender como a sua aplicação retém estado e como gerir isso programaticamente | [Gestão de Estado](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Código Browser/VScode](../../8-code-editor) | Trabalhar com VScode | Aprender a usar um editor de código | [Usar o Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhar com IA | Aprender a construir o seu próprio assistente de IA | [Projeto Assistente de IA](./9-chat-project/README.md) | Chris | +| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Lição Ligada | Autor | +| :-: | :---------------------------------------------------------: | :------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Getting Started | Introdução à Programação e Ferramentas do Ofício | Aprender os fundamentos básicos da maioria das linguagens de programação e sobre o software que ajuda os programadores profissionais | [Introdução a Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Getting Started | Noções básicas de GitHub, inclui trabalho em equipa | Como usar o GitHub no seu projeto, como colaborar com outros numa base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Getting Started | Acessibilidade | Aprender os conceitos básicos de acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basics | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basics | Funções e Métodos | Aprender sobre funções e métodos para gerir o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS Basics | Tomar Decisões com JS | Aprender a criar condições no seu código usando métodos de tomada de decisão | [Tomar Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basics | Arrays e Loops | Trabalhar com dados utilizando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML na Prática | Construir o HTML para criar um terrário online, focando na criação de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS na Prática | Construir o CSS para estilizar o terrário online, focando nos conceitos básicos de CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | Fechos JavaScript, manipulação do DOM | Construir o JavaScript para fazer o terrário funcionar como uma interface drag/drop, focando em fechamentos e manipulação do DOM | [Fechos JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Construir um Jogo de Digitação | Aprender a usar eventos do teclado para conduzir a lógica da sua app em JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Trabalhar com Navegadores | Aprender como os navegadores funcionam, a sua história e como criar os primeiros elementos de uma extensão para navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Construir um formulário, chamar uma API e armazenar variáveis em armazenamento local | Construir os elementos JavaScript da sua extensão para navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho web | Usar os processos em segundo plano do navegador para gerir o ícone da extensão; aprender sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Mais Avançado em JavaScript | Aprender sobre Herança utilizando Classes e Composição e o padrão Pub/Sub, em preparação para criar um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhar no canvas | Aprender sobre a API Canvas, usada para desenhar elementos num ecrã | [Desenhar no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Mover elementos pelo ecrã | Descobrir como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Mover Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detetar colisões | Fazer elementos colidirem e reagirem entre si usando pressionar de teclas e fornecer uma função de cooldown para garantir o desempenho | [Deteção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Manter a pontuação | Realizar cálculos matemáticos baseados no estado e desempenho do jogo | [Manter Pontuação](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Terminar e reiniciar o jogo | Aprender sobre terminar e reiniciar o jogo, incluindo limpeza de recursos e reposição de valores de variáveis | [A Condição de Fim](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [App Bancária](./7-bank-project/solution/README.md) | Modelos HTML e Rotas numa Aplicação Web | Aprender a criar a estrutura de arquitetura de um site multipágina usando roteamento e modelos HTML | [Modelos HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [App Bancária](./7-bank-project/solution/README.md) | Construir um Formulário de Login e Registo | Aprender sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [App Bancária](./7-bank-project/solution/README.md) | Métodos de Obtenção e Uso de Dados | Como os dados entram e saem da sua aplicação, como os obter, armazenar e descartar | [Dados](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [App Bancária](./7-bank-project/solution/README.md) | Conceitos de Gestão de Estado | Aprender como a sua app mantém o estado e como geri-lo programaticamente | [Gestão de Estado](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Código Browser/VScode](../../8-code-editor) | Trabalhar com VScode | Aprender a usar um editor de código| [Usar Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [Assistentes AI](./9-chat-project/README.md) | Trabalhar com AI | Aprender a construir o seu próprio assistente AI | [Projeto Assistente AI](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogia -O nosso currículo foi concebido com dois princípios pedagógicos chave em mente: +O nosso currículo foi desenhado com dois princípios pedagógicos chave em mente: * aprendizagem baseada em projetos -* quizzes frequentes +* questionários frequentes -O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web atuais. Os alunos terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, terrário virtual, extensão de navegador ecológica, jogo estilo space-invader, e uma aplicação bancária para negócios. No final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web. +O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos programadores web atuais. Os estudantes terão a oportunidade de adquirir experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador amiga do ambiente, um jogo ao estilo space-invader e uma app bancária para negócios. Ao final da série, os estudantes terão adquirido uma compreensão sólida do desenvolvimento web. -> 🎓 Pode fazer as primeiras lições deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn! +> 🎓 Pode fazer as primeiras lições deste currículo como um [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn! -Garantindo que o conteúdo está alinhado com os projetos, o processo torna-se mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias sobre noções básicas de JavaScript para introduzir conceitos, acompanhadas de um vídeo da coleção de tutoriais em vídeo “[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)”, alguns dos cujos autores contribuíram para este currículo. +Ao garantir que o conteúdo está alinhado com os projetos, o processo torna-se mais envolvente para os estudantes e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias de JavaScript para introduzir conceitos, acompanhadas por um vídeo da coleção de tutoriais "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos autores dos quais contribuíram para este currículo. -Além disso, um quiz de baixo risco antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula assegura uma retenção adicional. Este currículo foi desenhado para ser flexível e divertido e pode ser feito na totalidade ou em parte. Os projetos começam pequenos e tornam-se progressivamente mais complexos até ao final do ciclo de 12 semanas. +Além disso, um questionário de baixo risco antes da aula estabelece a intenção do estudante em aprender um tema, enquanto um segundo questionário após a aula assegura uma maior retenção. Este currículo foi desenhado para ser flexível e divertido e pode ser seguido na íntegra ou em parte. Os projetos começam pequenos e tornam-se progressivamente mais complexos até ao final do ciclo de 12 semanas. -Embora tenhamos evitado intencionalmente a introdução de frameworks JavaScript para nos concentrarmos nas competências básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo para completar este currículo seria aprender sobre Node.js através de outra coleção de vídeos: “[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”. +Embora tenhamos evitado intencionalmente introduzir frameworks de JavaScript para nos concentrarmos nas competências básicas necessárias como programador web antes de adotar um framework, um bom próximo passo para completar este currículo seria aprender sobre Node.js através de outra coleção de vídeos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Visite as nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Agradecemos o seu feedback construtivo! +> Visite as nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Apreciamos o seu feedback construtivo! -## 🧭 Acesso Offline +## 🧭 Acesso offline -Pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e depois, na pasta raiz deste repositório, digite `docsify serve`. O website será servido na porta 3000 no seu localhost: `localhost:3000`. +Pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e depois na pasta raiz deste repositório digite `docsify serve`. O website será servido na porta 3000 no seu localhost: `localhost:3000`. ## 📘 PDF - Um PDF de todas as lições pode ser encontrado [aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Outros Cursos -A nossa equipa produz outros cursos! Veja: + +A nossa equipa produz outros cursos! Confira: ### LangChain @@ -216,7 +224,7 @@ A nossa equipa produz outros cursos! Veja: [![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agentes +### Azure / Edge / MCP / Agents [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) @@ -251,21 +259,21 @@ A nossa equipa produz outros cursos! Veja: ## Obter Ajuda -Se ficar preso ou tiver alguma dúvida sobre como criar aplicações de IA. Junte-se a outros estudantes e programadores experientes em discussões sobre MCP. É uma comunidade de apoio onde as perguntas são bem-vindas e o conhecimento é partilhado livremente. +Se ficar bloqueado ou tiver alguma dúvida sobre como construir aplicações de IA. Junte-se a outros aprendizes e desenvolvedores experientes nas discussões sobre MCP. É uma comunidade solidária onde as perguntas são bem-vindas e o conhecimento é partilhado livremente. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Se tiver feedback sobre o produto ou erros durante a construção, visite: +Se tiver feedback sobre produtos ou erros durante a construção, visite: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Licença -Este repositório é licenciado sob a licença MIT. Veja o ficheiro [LICENSE](../../LICENSE) para mais informações. +Este repositório está licenciado sob a licença MIT. Consulte o ficheiro [LICENSE](../../LICENSE) para mais informações. --- **Aviso Legal**: -Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, por favor tenha em atenção que as traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes da utilização desta tradução. +Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução. \ No newline at end of file