Frontend Development என்றால் என்ன?

Frontend Development என்பது இணையதளங்கள் மற்றும் செயலிகளின் பயனர் இடைமுகத்தை (user interface) உருவாக்குவதை குறிக்கிறது. இது பயனர்கள் நேரடியாக பார்க்கும் மற்றும் தொடர்புகொள்ளும் அனைத்து அம்சங்களையும் உள்ளடக்கியது. Frontend Development-ன் முக்கிய நோக்கம் பயனர் அனுபவத்தை (user experience) மேம்படுத்துவதாகும்.

ஒரு இணையதளத்தின் வெற்றி பெரும்பாலும் அதன் பயனர் அனுபவத்தை பொறுத்தது என்பதால் இணையதளங்கள் மற்றும் செயலிகளில் Frontend மிகவும் முக்கியமான பங்கு வகிக்கிறது.

Web Development-ல், நிரலாளர்கள் HTML, CSS மற்றும் JavaScript போன்ற மொழிகளைப் பயன்படுத்தி, பயனர்களுக்கு கவர்ச்சிகரமான, பயன்படுத்த எளிதான, வேகமான மற்றும் பாதுகாப்பான இடைமுகத்தை உருவாக்குகின்றனர். இந்த மூன்று மொழிகளும் இணைந்து இணையதளங்களின் அடித்தளமாக செயல்படுகின்றன.

🤔Note

HTML, CSS, JavaScript ஆகியவற்றின் பங்கு

Roles of HTML, CSS, JS in frontend development

HTML - இணையதளத்தின் கட்டமைப்பு

HTML இணையதளத்தின் அடிப்படை கட்டமைப்பை உருவாக்குகிறது - இது ஒரு வீட்டின் சட்டப்படலை போன்றது. இதில் உள்ளடங்குபவை:

தலைப்புகள் (headings), பத்திகள் (paragraphs), பட்டியல்கள் (lists) போன்ற அனைத்து உரை உள்ளடக்கமும்
படங்கள் (images), வீடியோக்கள் (videos) போன்ற ஊடக உள்ளடக்கம் (media content)
படிவங்கள் (forms), உள்ளீட்டுப் புலங்கள் (input fields), பொத்தான்கள் (buttons)
இணைப்புகள் (links) மற்றும் பகுதிகளை இணைக்கும் இடங்கள் (navigation elements)

HTML ஒரு தளத்தின் என்ன என்பதை வரையறுக்கிறது - அது காட்ட வேண்டிய தகவல்கள்.

CSS - அழகு மற்றும் வடிவமைப்பு

CSS எல்லாவற்றையும் அழகாக்குகிறது - இது உங்கள் வீட்டின் வண்ணங்கள், அலங்காரங்கள் மற்றும் பாணி போன்றது. இதன் மூலம் பின்வருவனவற்றை செய்துகொள்ளலாம்:

நிறங்கள் (colors), எழுத்து வகைகள் (fonts), எழுத்து அளவுகளை (font sizes) தேர்வு செய்தல்
அளவு (dimensions), இடைவெளி (spacing), எல்லைகள் (borders) மற்றும் நிழல்களை (shadows) நிர்ணயித்தல்
பக்கத்தின் தளவமைப்பை (layout) வடிவமைத்தல் - கூறுகள் எங்கே தோன்ற வேண்டும்
பல்வேறு திரை அளவுகளில் (screen sizes) எவ்வாறு காண்பிக்க வேண்டும் என்பதை கட்டுப்படுத்துதல் (responsive design)

CSS ஒரு தளத்தின் எப்படி தோன்ற வேண்டும் என்பதை வரையறுக்கிறது.

JavaScript - இயக்கம் மற்றும் செயல்பாடு

JavaScript உங்கள் தளத்தை உயிரோட்டமாக்குகிறது - இது வீட்டின் மின்சாரம், தண்ணீர் மற்றும் இயங்கும் பாகங்களைப் போன்றது. JavaScript மூலம்:

பயனர் கிளிக் செய்யும்போது (clicking), டைப் செய்யும்போது (typing), அல்லது ஸ்க்ரோல் செய்யும்போது (scrolling) நடப்பவற்றைக் கட்டுப்படுத்தலாம்
படிவங்களை சரிபார்த்து (form validation), உள்ளிடப்பட்ட தகவல்களைச் சேகரிக்கலாம்
சேவையகத்திலிருந்து தரவைப் பெற்று காட்டலாம் (data fetching) (உதாரணமாக, வானிலை அறிக்கை)
பயனர் தேர்வுகளின் அடிப்படையில் உள்ளடக்கத்தை மாற்றலாம் (dynamic content)
அனிமேஷன்கள் (animations) மற்றும் ஊடாடும் கூறுகளை (interactive elements) உருவாக்கலாம்

JavaScript ஒரு தளத்தின் என்ன செய்யும் என்பதை வரையறுக்கிறது.

HTML, CSS, JavaScript மூன்றும் எப்படி இணைந்து செயல்படுகின்றன

ஒரு எளிய உதாரணத்தில்:

HTML ஒரு பொத்தானை உருவாக்குகிறது
CSS அதை அழகாக்கி, சரியான இடத்தில் வைக்கிறது
JavaScript அதை கிளிக் செய்யும்போது என்ன நடக்கும் என்பதைத் தீர்மானிக்கிறது

Summary

HTML ஒரு தளத்தின் என்ன என்பதை வரையறுக்கிறது - அது காட்ட வேண்டிய தகவல்கள்.
CSS ஒரு தளத்தின் எப்படி தோன்ற வேண்டும் என்பதை வரையறுக்கிறது.
JavaScript ஒரு தளத்தின் என்ன செய்யும் என்பதை வரையறுக்கிறது.