ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ಪರಿಚಯ

ನೀವು ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ಗೆ ಹೊಸಬರಾಗಿರಲಿ ಅಥವಾ ಅನುಭವಿ ಡೆವಲಪರ್ ಆಗಿರಲಿ, ಟ್ರೆಂಡ್‌ಗಳೊಂದಿಗೆ ಮುಂದುವರಿಯಲು ಈ ಉದ್ಯಮದಲ್ಲಿ ಹೊಸ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಭಾಷೆಗಳು/ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಕಲಿಯುವುದು ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ರಿಯಾಕ್ಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ, ಫೇಸ್ಬುಕ್ ಕೇವಲ ನಾಲ್ಕು ವರ್ಷಗಳ ಹಿಂದೆ ತೆರೆದ ಮೂಲವಾಗಿದೆ ಮತ್ತು ಈಗಾಗಲೇ ಪ್ರಪಂಚದಾದ್ಯಂತದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೆವಲಪರ್ಗಳಿಗೆ ಮೊದಲ ಆಯ್ಕೆಯಾಗಿದೆ.

Vue ಮತ್ತು ಆಂಗ್ಯುಲರ್, ಸಹಜವಾಗಿ, ತಮ್ಮದೇ ಆದ ಕಾನೂನುಬದ್ಧ ಅಭಿಮಾನಿಗಳನ್ನು ಹೊಂದಿವೆ. ತದನಂತರ Svelte ಮತ್ತು Next.js ಅಥವಾ Nuxt.js ನಂತಹ ಇತರ ಸಾರ್ವತ್ರಿಕ ಚೌಕಟ್ಟುಗಳಿವೆ. ಮತ್ತು ಗ್ಯಾಟ್ಸ್ಬಿ, ಮತ್ತು ಗ್ರಿಡ್ಸಮ್, ಮತ್ತು ಕ್ವೇಸರ್... ಮತ್ತು ಹೆಚ್ಚು.

ನೀವು ಅನುಭವಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೆವಲಪರ್ ಎಂದು ಸಾಬೀತುಪಡಿಸಲು ಬಯಸಿದರೆ, ನೀವು ಉತ್ತಮ ಹಳೆಯ JS ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದರ ಜೊತೆಗೆ ವಿವಿಧ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಮತ್ತು ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಕನಿಷ್ಠ ಕೆಲವು ಅನುಭವವನ್ನು ಹೊಂದಿರಬೇಕು.

2020 ರಲ್ಲಿ ನೀವು ಫ್ರಂಟ್-ಎಂಡ್ ಮಾಸ್ಟರ್ ಆಗಲು ಸಹಾಯ ಮಾಡಲು, ನಾನು ಒಂಬತ್ತು ವಿಭಿನ್ನ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ಒಟ್ಟುಗೂಡಿಸಿದ್ದೇನೆ, ಪ್ರತಿಯೊಂದೂ ವಿಭಿನ್ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಮತ್ತು ಲೈಬ್ರರಿಯ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುವ ಟೆಕ್ ಸ್ಟಾಕ್‌ನಂತೆ ನೀವು ನಿರ್ಮಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಪೋರ್ಟ್‌ಫೋಲಿಯೊಗೆ ಸೇರಿಸಬಹುದು. ನಿಜವಾಗಿ ವಿಷಯಗಳನ್ನು ರಚಿಸುವುದಕ್ಕಿಂತ ಏನೂ ನಿಮಗೆ ಸಹಾಯ ಮಾಡುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ, ಆದ್ದರಿಂದ ಮುಂದುವರಿಯಿರಿ, ನಿಮ್ಮ ಮನಸ್ಸನ್ನು ಬಳಸಿ ಮತ್ತು ಅದನ್ನು ಸಾಧಿಸಿ

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

EDISON ಸಾಫ್ಟ್‌ವೇರ್‌ನ ಬೆಂಬಲದೊಂದಿಗೆ ಲೇಖನವನ್ನು ಅನುವಾದಿಸಲಾಗಿದೆ ಬಹು-ಬ್ರಾಂಡ್ ಮಳಿಗೆಗಳಿಗೆ ವರ್ಚುವಲ್ ಫಿಟ್ಟಿಂಗ್ ಕೊಠಡಿಗಳನ್ನು ಮಾಡುತ್ತದೆಮತ್ತು ಪರೀಕ್ಷಾ ತಂತ್ರಾಂಶ.

ರಿಯಾಕ್ಟ್ ಬಳಸಿ ಚಲನಚಿತ್ರ ಹುಡುಕಾಟ ಅಪ್ಲಿಕೇಶನ್ (ಕೊಕ್ಕೆಗಳೊಂದಿಗೆ)

ರಿಯಾಕ್ಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಚಲನಚಿತ್ರ ಹುಡುಕಾಟ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸುವುದು ನೀವು ಪ್ರಾರಂಭಿಸಬಹುದಾದ ಮೊದಲ ವಿಷಯವಾಗಿದೆ. ಅಂತಿಮ ಅಪ್ಲಿಕೇಶನ್ ಹೇಗಿರುತ್ತದೆ ಎಂಬುದರ ಚಿತ್ರಣವನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನೀವು ಏನು ಕಲಿಯುವಿರಿ
ಈ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸುವ ಮೂಲಕ, ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸ ಹುಕ್ಸ್ API ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಪ್ರತಿಕ್ರಿಯೆ ಕೌಶಲ್ಯಗಳನ್ನು ನೀವು ಸುಧಾರಿಸುತ್ತೀರಿ. ಉದಾಹರಣೆ ಯೋಜನೆಯು ರಿಯಾಕ್ಟ್ ಘಟಕಗಳು, ಬಹಳಷ್ಟು ಕೊಕ್ಕೆಗಳು, ಬಾಹ್ಯ API, ಮತ್ತು ಸಹಜವಾಗಿ ಕೆಲವು CSS ಶೈಲಿಯನ್ನು ಬಳಸುತ್ತದೆ.

ಟೆಕ್ ಸ್ಟಾಕ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

  • ಕೊಕ್ಕೆಗಳೊಂದಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಿ
  • ರಚಿಸಿ-ಪ್ರತಿಕ್ರಿಯಿಸಿ-ಅಪ್ಲಿಕೇಶನ್
  • ಜೆಎಸ್ಎಕ್ಸ್
  • ಸಿಎಸ್ಎಸ್

ಯಾವುದೇ ತರಗತಿಗಳನ್ನು ಬಳಸದೆಯೇ, ಈ ಯೋಜನೆಗಳು ನಿಮಗೆ ಕ್ರಿಯಾತ್ಮಕ ಪ್ರತಿಕ್ರಿಯೆಗೆ ಪರಿಪೂರ್ಣ ಪ್ರವೇಶ ಬಿಂದುವನ್ನು ನೀಡುತ್ತವೆ ಮತ್ತು 2020 ರಲ್ಲಿ ಖಂಡಿತವಾಗಿಯೂ ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ. ನೀವು ಕಂಡುಹಿಡಿಯಬಹುದು ಉದಾಹರಣೆ ಯೋಜನೆ ಇಲ್ಲಿ. ಸೂಚನೆಗಳನ್ನು ಅನುಸರಿಸಿ ಅಥವಾ ಅದನ್ನು ನಿಮ್ಮದಾಗಿಸಿಕೊಳ್ಳಿ.

Vue ನೊಂದಿಗೆ ಚಾಟ್ ಅಪ್ಲಿಕೇಶನ್

ನನ್ನ ಮೆಚ್ಚಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಚಾಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸುವುದು ನೀವು ಮಾಡಬೇಕಾದ ಇನ್ನೊಂದು ಉತ್ತಮ ಯೋಜನೆಯಾಗಿದೆ: VueJS. ಅಪ್ಲಿಕೇಶನ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನೀವು ಏನು ಕಲಿಯುವಿರಿ
ಈ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ, ನೀವು ಮೊದಲಿನಿಂದ Vue ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೇಗೆ ಮಾಡಬೇಕೆಂದು ಕಲಿಯುವಿರಿ - ಘಟಕಗಳನ್ನು ರಚಿಸುವುದು, ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವುದು, ಮಾರ್ಗಗಳನ್ನು ರಚಿಸುವುದು, ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸೇವೆಗಳಿಗೆ ಸಂಪರ್ಕಿಸುವುದು ಮತ್ತು ದೃಢೀಕರಣವನ್ನು ನಿರ್ವಹಿಸುವುದು.

ಟೆಕ್ ಸ್ಟಾಕ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

  • ವ್ಯೂ
  • vuex
  • ವ್ಯೂ ರೂಟರ್
  • Vue CLI
  • ಪಶರ್
  • ಸಿಎಸ್ಎಸ್

Vue ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು ಅಥವಾ 2020 ರಲ್ಲಿ ಅಭಿವೃದ್ಧಿಗೆ ಬರಲು ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕೌಶಲ್ಯಗಳನ್ನು ಸುಧಾರಿಸಲು ಇದು ನಿಜವಾಗಿಯೂ ಉತ್ತಮ ಯೋಜನೆಯಾಗಿದೆ. ನೀವು ಕಂಡುಹಿಡಿಯಬಹುದು ಟ್ಯುಟೋರಿಯಲ್ ಇಲ್ಲಿ.

ಕೋನೀಯ 8 ನೊಂದಿಗೆ ಸುಂದರವಾದ ಹವಾಮಾನ ಅಪ್ಲಿಕೇಶನ್

ಕೋನೀಯ 8 ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸುಂದರವಾದ ಹವಾಮಾನ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಲು ಈ ಉದಾಹರಣೆಯು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ:

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನೀವು ಏನು ಕಲಿಯುವಿರಿ
ಈ ಯೋಜನೆಯು ಮೊದಲಿನಿಂದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಲ್ಲಿ ಅಮೂಲ್ಯವಾದ ಕೌಶಲ್ಯಗಳನ್ನು ನಿಮಗೆ ಕಲಿಸುತ್ತದೆ - ವಿನ್ಯಾಸದಿಂದ ಅಭಿವೃದ್ಧಿಯ ಮೂಲಕ, ಎಲ್ಲಾ ರೀತಿಯಲ್ಲಿ ನಿಯೋಜನೆ-ಸಿದ್ಧ ಅಪ್ಲಿಕೇಶನ್‌ವರೆಗೆ.

ಟೆಕ್ ಸ್ಟಾಕ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

  • ಕೋನೀಯ 8
  • ಫೈರ್ಬೇಸ್
  • ಸರ್ವರ್ ಸೈಡ್ ರೆಂಡರಿಂಗ್
  • ಗ್ರಿಡ್ ಮತ್ತು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಸಿಎಸ್ಎಸ್
  • ಮೊಬೈಲ್ ಸ್ನೇಹಿ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವಿಕೆ
  • ಡಾರ್ಕ್ ಮೋಡ್
  • ಸುಂದರ ಇಂಟರ್ಫೇಸ್

ಈ ಎಲ್ಲವನ್ನೂ ಒಳಗೊಳ್ಳುವ ಯೋಜನೆಯ ಬಗ್ಗೆ ನಾನು ನಿಜವಾಗಿಯೂ ಇಷ್ಟಪಡುವ ವಿಷಯವೆಂದರೆ ನೀವು ಪ್ರತ್ಯೇಕವಾಗಿ ವಿಷಯಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ವಿನ್ಯಾಸದಿಂದ ಅಂತಿಮ ನಿಯೋಜನೆಯವರೆಗೆ ಸಂಪೂರ್ಣ ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನೀವು ಕಲಿಯುತ್ತೀರಿ.

Svelte ಬಳಸಿಕೊಂಡು ಮಾಡಬೇಕಾದ ಅಪ್ಲಿಕೇಶನ್

ಸ್ವೆಲ್ಟೆ ಘಟಕ-ಆಧಾರಿತ ವಿಧಾನದ ಹೊಸ ಮಗುವಿನಂತೆ - ಕನಿಷ್ಠ ರಿಯಾಕ್ಟ್, ವ್ಯೂ ಮತ್ತು ಆಂಗ್ಯುಲರ್ ಅನ್ನು ಹೋಲುತ್ತದೆ. ಮತ್ತು ಇದು 2020 ರ ಹೊಸ ಉತ್ಪನ್ನಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ.

ಮಾಡಬೇಕಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಅತ್ಯಂತ ಹೆಚ್ಚು ವಿಷಯವಲ್ಲ, ಆದರೆ ಇದು ನಿಜವಾಗಿಯೂ ನಿಮ್ಮ ಸ್ವೆಲ್ಟೆ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಇದು ಈ ರೀತಿ ಕಾಣಿಸುತ್ತದೆ:

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನೀವು ಏನು ಕಲಿಯುವಿರಿ
ಈ ಟ್ಯುಟೋರಿಯಲ್ ಪ್ರಾರಂಭದಿಂದ ಕೊನೆಯವರೆಗೆ Svelte 3 ಅನ್ನು ಬಳಸಿಕೊಂಡು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ. ನೀವು ಘಟಕಗಳು, ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಬಳಸುತ್ತೀರಿ

ಟೆಕ್ ಸ್ಟಾಕ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

  • ಸ್ವೆಲ್ಟ್ 3
  • ಘಟಕಗಳು
  • CSS ನೊಂದಿಗೆ ಸ್ಟೈಲಿಂಗ್
  • ES 6 ಸಿಂಟ್ಯಾಕ್ಸ್

ಅನೇಕ ಉತ್ತಮ Svelte ಸ್ಟಾರ್ಟರ್ ಯೋಜನೆಗಳಿಲ್ಲ, ಹಾಗಾಗಿ ನಾನು ಕಂಡುಕೊಂಡಿದ್ದೇನೆ ಪ್ರಾರಂಭಿಸಲು ಇದು ಉತ್ತಮ ಆಯ್ಕೆಯಾಗಿದೆ.

Next.js ಬಳಸಿಕೊಂಡು ಇ-ಕಾಮರ್ಸ್ ಅಪ್ಲಿಕೇಶನ್

Next.js ಎಂಬುದು ಬಾಕ್ಸ್‌ನ ಹೊರಗೆ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಬೆಂಬಲಿಸುವ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅತ್ಯಂತ ಜನಪ್ರಿಯ ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಗಿದೆ.

ಈ ಯೋಜನೆಯು ಈ ರೀತಿ ಕಾಣುವ ಇ-ಕಾಮರ್ಸ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ:

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನೀವು ಏನು ಕಲಿಯುವಿರಿ
ಈ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ, Next.js-ಹೊಸ ಪುಟಗಳು ಮತ್ತು ಘಟಕಗಳನ್ನು ರಚಿಸುವುದು, ಡೇಟಾ ಮತ್ತು ಶೈಲಿಯನ್ನು ಹೊರತೆಗೆಯುವುದು ಮತ್ತು ಮುಂದಿನ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಯೋಜಿಸುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ನೀವು ಕಲಿಯುವಿರಿ.

ಟೆಕ್ ಸ್ಟಾಕ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

  • ಮುಂದೆ
  • ಘಟಕಗಳು ಮತ್ತು ಪುಟಗಳು
  • ಡೇಟಾ ಮಾದರಿ
  • ಶೈಲೀಕರಣ
  • ಯೋಜನೆಯ ನಿಯೋಜನೆ
  • SSR ಮತ್ತು SPA

ಹೊಸದನ್ನು ಕಲಿಯಲು ಇ-ಕಾಮರ್ಸ್ ಅಪ್ಲಿಕೇಶನ್‌ನಂತಹ ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಯನ್ನು ಹೊಂದಲು ಯಾವಾಗಲೂ ಉತ್ತಮವಾಗಿದೆ. ನಿನ್ನಿಂದ ಸಾಧ್ಯ ಟ್ಯುಟೋರಿಯಲ್ ಅನ್ನು ಇಲ್ಲಿ ಹುಡುಕಿ.

Nuxt.js ಜೊತೆಗೆ ಪೂರ್ಣ ಪ್ರಮಾಣದ ಬಹುಭಾಷಾ ಬ್ಲಾಗ್

Nuxt.js Vue ಗಾಗಿ, Next.js ಏನೆಂದರೆ ರಿಯಾಕ್ಟ್: ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಏಕ-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಸಂಯೋಜಿಸಲು ಉತ್ತಮ ಚೌಕಟ್ಟು
ನೀವು ರಚಿಸಬಹುದಾದ ಅಂತಿಮ ಅಪ್ಲಿಕೇಶನ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನೀವು ಏನು ಕಲಿಯುವಿರಿ

ಈ ಮಾದರಿ ಯೋಜನೆಯಲ್ಲಿ, ಆರಂಭಿಕ ಸೆಟಪ್‌ನಿಂದ ಅಂತಿಮ ನಿಯೋಜನೆಯವರೆಗೆ Nuxt.js ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸಂಪೂರ್ಣ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ನೀವು ಕಲಿಯುವಿರಿ.

ಇದು Nuxt ಒದಗಿಸುವ ಪುಟಗಳು ಮತ್ತು ಘಟಕಗಳು ಮತ್ತು SCSS ನೊಂದಿಗೆ ಸ್ಟೈಲಿಂಗ್‌ನಂತಹ ಅನೇಕ ತಂಪಾದ ವೈಶಿಷ್ಟ್ಯಗಳ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯುತ್ತದೆ.

ಟೆಕ್ ಸ್ಟಾಕ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

  • Nuxt.js
  • ಘಟಕಗಳು ಮತ್ತು ಪುಟಗಳು
  • ಸ್ಟೋರಿಬ್ಲಾಕ್ ಮಾಡ್ಯೂಲ್
  • ಹ್ಯಾಗ್ಫಿಶ್
  • ರಾಜ್ಯ ನಿರ್ವಹಣೆಗಾಗಿ Vuex
  • ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ SCSS
  • ನಕ್ಸ್ಟ್ ಮಿಡಲ್ವೇರ್ಸ್

ಇದು ನಿಜವಾಗಿಯೂ ತಂಪಾದ ಯೋಜನೆಯಾಗಿದೆ, ಇದು ಅನೇಕ ಉತ್ತಮ Nuxt.js ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ನಾನು ವೈಯಕ್ತಿಕವಾಗಿ Nuxt ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಇಷ್ಟಪಡುತ್ತೇನೆ ಆದ್ದರಿಂದ ನೀವು ಇದನ್ನು ಪ್ರಯತ್ನಿಸಬೇಕು ಏಕೆಂದರೆ ಅದು ನಿಮ್ಮನ್ನು ಉತ್ತಮ Vue ಡೆವಲಪರ್ ಮಾಡುತ್ತದೆ.

Gatsby ಜೊತೆ ಬ್ಲಾಗ್

ಗ್ಯಾಟ್ಸ್‌ಬಿ ರಿಯಾಕ್ಟ್ ಮತ್ತು ಗ್ರಾಫ್‌ಕ್ಯೂಎಲ್ ಅನ್ನು ಬಳಸುವ ಅತ್ಯುತ್ತಮ ಸ್ಥಿರ ಸೈಟ್ ಜನರೇಟರ್ ಆಗಿದೆ. ಇದು ಯೋಜನೆಯ ಫಲಿತಾಂಶವಾಗಿದೆ:

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನೀವು ಏನು ಕಲಿಯುವಿರಿ

ಈ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ, ರಿಯಾಕ್ಟ್ ಮತ್ತು ಗ್ರಾಫ್ ಕ್ಯೂಎಲ್ ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಸ್ವಂತ ಲೇಖನಗಳನ್ನು ಬರೆಯಲು ನೀವು ಬಳಸುವ ಬ್ಲಾಗ್ ಅನ್ನು ರಚಿಸಲು ಗ್ಯಾಟ್ಸ್‌ಬೈ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ನೀವು ಕಲಿಯುವಿರಿ.

ಟೆಕ್ ಸ್ಟಾಕ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

  • ಗ್ಯಾಟ್ಸ್‌ಬಿ
  • ಪ್ರತಿಕ್ರಿಯಿಸು
  • ಗ್ರಾಫ್‌ಕ್ಯೂಎಲ್
  • ಪ್ಲಗಿನ್‌ಗಳು ಮತ್ತು ಥೀಮ್‌ಗಳು
  • MDX/ಮಾರ್ಕ್‌ಡೌನ್
  • ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ CSS
  • ಟೆಂಪ್ಲೇಟ್ಗಳು

ನೀವು ಎಂದಾದರೂ ಬ್ಲಾಗ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು ಬಯಸಿದರೆ, ಇದು ಒಂದು ಉತ್ತಮ ಉದಾಹರಣೆಯಾಗಿದೆ ರಿಯಾಕ್ಟ್ ಮತ್ತು ಗ್ರಾಫ್ಕ್ಯುಎಲ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಅದನ್ನು ಹೇಗೆ ತಯಾರಿಸುವುದು ಎಂಬುದರ ಕುರಿತು.

ನಾನು WordPress ಒಂದು ಕೆಟ್ಟ ಆಯ್ಕೆ ಎಂದು ಹೇಳುತ್ತಿಲ್ಲ, ಆದರೆ Gatsby ನೊಂದಿಗೆ ನೀವು React ಬಳಸಿಕೊಂಡು ಉನ್ನತ-ಕಾರ್ಯಕ್ಷಮತೆಯ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು - ಇದು ಅದ್ಭುತ ಸಂಯೋಜನೆಯಾಗಿದೆ.

ಗ್ರಿಡ್ಸಮ್ ಜೊತೆ ಬ್ಲಾಗ್

Vue ಗೆ ಗ್ರಿಡ್ಸಮ್... ಸರಿ, ನಾವು ಈಗಾಗಲೇ ಇದನ್ನು Next/Nuxt ಜೊತೆಗೆ ಹೊಂದಿದ್ದೇವೆ.
ಆದರೆ ಗ್ರಿಡ್‌ಸಮ್ ಮತ್ತು ಗ್ಯಾಟ್ಸ್‌ಬೈಗೆ ಇದು ನಿಜ. ಇಬ್ಬರೂ ತಮ್ಮ ಡೇಟಾ ಲೇಯರ್ ಆಗಿ GraphQL ಅನ್ನು ಬಳಸುತ್ತಾರೆ, ಆದರೆ Gridsome VueJS ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಅದ್ಭುತವಾದ ಸ್ಥಿರ ಸೈಟ್ ಜನರೇಟರ್ ಆಗಿದ್ದು ಅದು ನಿಮಗೆ ಉತ್ತಮ ಬ್ಲಾಗ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ:

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನೀವು ಏನು ಕಲಿಯುವಿರಿ

Gridsome, GraphQL ಮತ್ತು Markdown ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು ಸರಳವಾದ ಬ್ಲಾಗ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ಈ ಯೋಜನೆಯು ನಿಮಗೆ ಕಲಿಸುತ್ತದೆ. Netlify ಮೂಲಕ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೇಗೆ ನಿಯೋಜಿಸಬೇಕು ಎಂಬುದನ್ನು ಸಹ ಇದು ಒಳಗೊಂಡಿದೆ.

ಟೆಕ್ ಸ್ಟಾಕ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

  • ಗ್ರಿಡ್ಸಮ್
  • ವ್ಯೂ
  • ಗ್ರಾಫ್‌ಕ್ಯೂಎಲ್
  • ಗುರುತು ಮಾಡಿಕೊಳ್ಳಿ
  • ನೆಟ್ಲಿಫೈ

ಇದು ನಿಸ್ಸಂಶಯವಾಗಿ ಅತ್ಯಂತ ಸಮಗ್ರವಾದ ಟ್ಯುಟೋರಿಯಲ್ ಅಲ್ಲ, ಆದರೆ ಇದು ಗ್ರಿಡ್ಸಮ್ ಮತ್ತು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ ಮಾರ್ಕ್‌ಡೌನ್ ಉತ್ತಮ ಆರಂಭದ ಹಂತವಾಗಿರಬಹುದು.

Quasar ಅನ್ನು ಬಳಸುವ ಸೌಂಡ್‌ಕ್ಲೌಡ್ ತರಹದ ಆಡಿಯೊ ಪ್ಲೇಯರ್

Quasar ಎಂಬುದು ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಬಳಸಬಹುದಾದ ಮತ್ತೊಂದು Vue ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಗಿದೆ. ಈ ಯೋಜನೆಯಲ್ಲಿ ನೀವು ಆಡಿಯೊ ಪ್ಲೇಯರ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸುತ್ತೀರಿ, ಉದಾಹರಣೆಗೆ:

ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು 9 ಯೋಜನೆಗಳು

ನೀವು ಏನು ಕಲಿಯುವಿರಿ

ಇತರ ಯೋಜನೆಗಳು ಮುಖ್ಯವಾಗಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತವೆ, Vue ಮತ್ತು Quasar ಫ್ರೇಮ್‌ವರ್ಕ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ಇದು ನಿಮಗೆ ತೋರಿಸುತ್ತದೆ.
ಆಂಡ್ರಾಯ್ಡ್ ಸ್ಟುಡಿಯೋ/ಎಕ್ಸ್‌ಕೋಡ್ ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾದ ಕಾರ್ಡೋವಾವನ್ನು ನೀವು ಈಗಾಗಲೇ ಹೊಂದಿರಬೇಕು. ಇಲ್ಲದಿದ್ದರೆ, ಕೈಪಿಡಿಯು ಕ್ವೇಸರ್ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಲಿಂಕ್ ಅನ್ನು ಹೊಂದಿದೆ, ಅಲ್ಲಿ ಅವರು ಎಲ್ಲವನ್ನೂ ಹೇಗೆ ಹೊಂದಿಸಬೇಕು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತಾರೆ.

ಟೆಕ್ ಸ್ಟಾಕ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

  • ಕ್ವಾಸರ್
  • ವ್ಯೂ
  • , Omaha
  • ವೇವ್ ಸರ್ಫರ್
  • UI ಘಟಕಗಳು

ಸಣ್ಣ ಯೋಜನೆ, ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಕ್ವೇಸರ್‌ನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಮೂಲ: www.habr.com

ಕಾಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ