අපි how to be a web developer 01 වලදී සාකච්චා කළා කොහොමද web designer කෙනෙක් වෙන්නේ කියල..එහෙමත් නැත්තන් front-end එක design කරන්නේ කොහොමද කියල.... ඉතින් අද මම කතා කරන්න යන්නේ තවදුරටත් front end design ගැනම තමා... හැබැයි අද කතා කරන්නේ කොහොමද professional web designer කෙනෙක් වෙන්නේ කියල.......
හරි ඔයා අපි කලින් ලිපියේ සාකච්චා කරපු විදිහට වැඩ ටික කලානම් දැන් ඔයාට web design ගැන හොද දැනුමක් තියනවා.... එත් තාමත් ඔයාට professional web designer කෙනෙක් වෙන්න බැහැ...එහෙමත් නැත්තනම් ඔයාට තාමත් free lancer වගේ දේවල් කරලා මුදල් උපයන තත්වයට යන්න බැහැ.... මේකට ප්රධාන හේතුව තමා ඔයාට web design ගැන දැනුමක් තිබුනට ඔයාට හොද පළපුරුද්දක් නැතිකම.... ඉතින් අද අපි කතා කරමු කොහොමද මේ පළපුරුද්ද හදාගන්නේ කියල....
ඔයා මුලින්ම simple web site කීපයක් තනියම design කරන්න උත්සහ කරන්න..... ඔයා මේ හදන web site professional වෙන්න ඕනි නැහැ....මෙතැනදී අරමුණ වෙන්නේ ඔයාට basic html සහ css වල හොද පළපුරුද්දක් ලබා ගැනීමයි.... අනිත් කාරනාව තමා මෙකෙදි ඔයා bootstrap වගේ front end framework වලට යන්න එපා... ඔයා css දාන එක ඔයාගේ අතින්ම කරන්න.... මේකෙන් ඔයාට html සහ css ගැන හොද පළපුරුද්දක් ලබා ගන්න පුළුවන්.... ඉදිරියට මේ පළපුරුද්ද ගොඩක් වටිනවා.....
https://www.w3schools.com/html/default.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/js/default.asp
https://www.w3schools.com/w3css/default.asp
https://www.w3schools.com/jquery/default.asp
හරි දැන් ඔයාට html , css සම්බන්දයෙන් හොද පළපුරුද්දක් තියනවා.... දැන් ඔයා ඊළගට simple නමුත් professional web site කීපයක් design කරන්න...... ඔයා මේක template එකක් බලාගෙන කරන්න.... මම comment section eke මේකට site එකක link එකක් දාන්නම්... එකෙන් ඔයාට හොදයි කියල හිතෙන web page එකක් බලාගෙන එක තනියම හදන්න උත්සහ කරන්න..... දැන් මේකෙදි ඔයා bootstrap වගේ front end framework එකකට යන්න.....bootstrap විතරක්ම නෙවෙයි...ඔයාට ඕනිනම් zurb-foundation, skeleton, MUI, PURE වගේ framework උනත් use කරන්න පුළුවන්.... එත් ආරම්භයක් වශයෙන් මම recommend කරන්නේ bootstrap....
https://get.foundation/
https://www.muicss.com/
හරි දැන් ඔයාට html , css පිළිබද සැලකියයුතු මට්ටමේ පළපුරුද්දක් තියනවා....හැබැයි එක තීරණය වෙන්නේ ඔය වැඩ කරපු විදිය අනුව තමා..... ඔයා දැන් ඊළගට web applications සදහා UI design කරන්න.....web application එකක් කියන්නේ internet එකේ run වෙන පොඩි software කියල කියන්න පුළුවන්...මේවා හදන්නේ web developer ල.... ඒ කියන්නේ උදහරනයක් විදියට ගත්තොත් face-book එකේ login එක...hackerrank වගේ site එකක home page එක.... ඒ වගේ UI ඔයා design කරන්න......සරලවම කියවනවානම් පොඩි පොඩි app වලට ඔයා UI design කරන්න.... ඒ කියන්නේ to-do-list වගේ වගේ පොඩි පොඩි app වලට UI design කරන්න......පහල තියන උදාහරණ ටික බලන්නකෝ..එතකොට තේරෙයි....
මේ තියෙන්නේ සරල login කීපයක්.....
ඔයාගේ design හැකියාව තවත් වර්දනය කරගන්න පුළුවන් දෙයක් තාමා simple web site වල images එහෙමත් නැත්නම් photoshop files බලාගෙන ඒවා ඔයාම design කරන්න උත්සහ කරන්න.... මේකෙන් ඔයාගේ html , css වලට තියන පළපුරුද්ද සැහෙන්න වැඩිදියුණු කරගන්න පුළුවන්....
හරි මේ කිව්වා දේවල් හරියට උනන්දුවෙන් කලානම් දැන් ඔයා හොද පුහුණුවක් තියන web designer කෙනෙක් හැටියට සලකන්න පුළුවන්.... ඔයාට ඔයාගේ හැකියාව තවත් ඔපමට්ටම් කරගන්න ඒ වගේම තමා අලුත් technologies ගැන දැනගන්න ඒ වගේමයි ඔයාගේ අතටත් කියක් හරි හොයාගන්න ඔයාට කරන්න පුළුවන් දේ තමා free lancer වැඩ ටිකක් හොයාගෙන කරන්න.... මේක කරද්දී අනිවාර්යෙන්ම ඔයාට අලුත් technologies ගැන දැනගන්න ලැබෙනවා වගේම ඔයාගේ අතටත් කියක් හරි හොයාගන්න පුළුවන්....
හරි අපි අදත් එහෙනම් බලමු මේ වැඩ ටික කරගෙන යද්දී ඔයාට එන්න පුළුවන් ගැටළු මොනාද කියල...... ඔයාට එන්න පුළුවන් ප්රදානම සහ ඉතාම ප්රයෝගික ගැටළුවක් තමා පලවෙනි වතාවේ bootstrap වගේ දේවල් use කරද්දී link එක හරියට add නොවීම වගේ ඉතා සරල ප්රශ්න නිසා ඔයාට මේක එහෙම්පිටින්ම එපා වීම...මේක හුගක් සාමාන්ය දෙයක්... අදුනික හැමෝටම මේ දේ වෙනවා.... එත් ඔයා පොඩ්ඩක් ගැම්මෙන් වැඩ කරල මුල පියවර ටික පැනාගත්තොත් ඔයාට ඉතුරු ටික ලේසියෙන්ම කරගෙන යන්න පුලුවන්......ඒ වගේම තමා මට මුල් ලිපියේදී කියන්න අමතක වුනු දෙයක් තියනවා... ඔයා ටිකක් හොද text editor එකක් තෝරාගන්න.... මේක ඔයාගේ වැඩ කරගෙන යන ගැමම තීරණය කරන ප්රධානම සාධකයක් වෙනවා.... මම හොද text editor කිහිපයක් comment section එකේ comment කරන්නම්.... ඔයාට තියන ලොකුම අභියෝගේ තමා මේ කාලේදී ඔයාගේ උනන්දුව නැති වෙන්නේ නැතිව මේකේ එල්ලිලා ඉන්න එක.......ඒ අභියෝගේ කොහොම හරි ජයගන්න.....
හරි එහෙනම් පටන් ගත්ත තැන ඉදන් බලද්දී ඔයා දැන් සැහෙන්න හොද මට්ටමකට ඇවිත් ඉන්නේ....web developer කෙනෙක් වෙන්න ඔයාට තව ටික දුරයි යන්න තියෙන්නේ.... එහෙනම් මෙතනින් එහාට ඔයා මොනාද කරන්න ඕනි...කොහොමද ඒ දේවල් කරන්න ඕනි කියන එක අපි ඊලග ලිපියෙන් සාකච්චා කරමු... ඔයාට අද ලිපියෙන් කියපු දේවල් ගැන මොනාහරි අවුල් තැන තියනවනම් comment කරන්න අමතක කරන්න එපා..... හරි එහෙනම් හැමෝටම ජය වේවා....!
හැමෝටම සුභ දවසක්...
ඊළඟ ලිපිය ළඟදීම ..............
හරි ඔයා අපි කලින් ලිපියේ සාකච්චා කරපු විදිහට වැඩ ටික කලානම් දැන් ඔයාට web design ගැන හොද දැනුමක් තියනවා.... එත් තාමත් ඔයාට professional web designer කෙනෙක් වෙන්න බැහැ...එහෙමත් නැත්තනම් ඔයාට තාමත් free lancer වගේ දේවල් කරලා මුදල් උපයන තත්වයට යන්න බැහැ.... මේකට ප්රධාන හේතුව තමා ඔයාට web design ගැන දැනුමක් තිබුනට ඔයාට හොද පළපුරුද්දක් නැතිකම.... ඉතින් අද අපි කතා කරමු කොහොමද මේ පළපුරුද්ද හදාගන්නේ කියල....
ඔයා මුලින්ම simple web site කීපයක් තනියම design කරන්න උත්සහ කරන්න..... ඔයා මේ හදන web site professional වෙන්න ඕනි නැහැ....මෙතැනදී අරමුණ වෙන්නේ ඔයාට basic html සහ css වල හොද පළපුරුද්දක් ලබා ගැනීමයි.... අනිත් කාරනාව තමා මෙකෙදි ඔයා bootstrap වගේ front end framework වලට යන්න එපා... ඔයා css දාන එක ඔයාගේ අතින්ම කරන්න.... මේකෙන් ඔයාට html සහ css ගැන හොද පළපුරුද්දක් ලබා ගන්න පුළුවන්.... ඉදිරියට මේ පළපුරුද්ද ගොඩක් වටිනවා.....
https://www.w3schools.com/html/default.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/js/default.asp
https://www.w3schools.com/w3css/default.asp
https://www.w3schools.com/jquery/default.asp
හරි දැන් ඔයාට html , css සම්බන්දයෙන් හොද පළපුරුද්දක් තියනවා.... දැන් ඔයා ඊළගට simple නමුත් professional web site කීපයක් design කරන්න...... ඔයා මේක template එකක් බලාගෙන කරන්න.... මම comment section eke මේකට site එකක link එකක් දාන්නම්... එකෙන් ඔයාට හොදයි කියල හිතෙන web page එකක් බලාගෙන එක තනියම හදන්න උත්සහ කරන්න..... දැන් මේකෙදි ඔයා bootstrap වගේ front end framework එකකට යන්න.....bootstrap විතරක්ම නෙවෙයි...ඔයාට ඕනිනම් zurb-foundation, skeleton, MUI, PURE වගේ framework උනත් use කරන්න පුළුවන්.... එත් ආරම්භයක් වශයෙන් මම recommend කරන්නේ bootstrap....
https://get.foundation/
https://www.muicss.com/
හරි දැන් ඔයාට html , css පිළිබද සැලකියයුතු මට්ටමේ පළපුරුද්දක් තියනවා....හැබැයි එක තීරණය වෙන්නේ ඔය වැඩ කරපු විදිය අනුව තමා..... ඔයා දැන් ඊළගට web applications සදහා UI design කරන්න.....web application එකක් කියන්නේ internet එකේ run වෙන පොඩි software කියල කියන්න පුළුවන්...මේවා හදන්නේ web developer ල.... ඒ කියන්නේ උදහරනයක් විදියට ගත්තොත් face-book එකේ login එක...hackerrank වගේ site එකක home page එක.... ඒ වගේ UI ඔයා design කරන්න......සරලවම කියවනවානම් පොඩි පොඩි app වලට ඔයා UI design කරන්න.... ඒ කියන්නේ to-do-list වගේ වගේ පොඩි පොඩි app වලට UI design කරන්න......පහල තියන උදාහරණ ටික බලන්නකෝ..එතකොට තේරෙයි....
ඔයාගේ design හැකියාව තවත් වර්දනය කරගන්න පුළුවන් දෙයක් තාමා simple web site වල images එහෙමත් නැත්නම් photoshop files බලාගෙන ඒවා ඔයාම design කරන්න උත්සහ කරන්න.... මේකෙන් ඔයාගේ html , css වලට තියන පළපුරුද්ද සැහෙන්න වැඩිදියුණු කරගන්න පුළුවන්....
හරි මේ කිව්වා දේවල් හරියට උනන්දුවෙන් කලානම් දැන් ඔයා හොද පුහුණුවක් තියන web designer කෙනෙක් හැටියට සලකන්න පුළුවන්.... ඔයාට ඔයාගේ හැකියාව තවත් ඔපමට්ටම් කරගන්න ඒ වගේම තමා අලුත් technologies ගැන දැනගන්න ඒ වගේමයි ඔයාගේ අතටත් කියක් හරි හොයාගන්න ඔයාට කරන්න පුළුවන් දේ තමා free lancer වැඩ ටිකක් හොයාගෙන කරන්න.... මේක කරද්දී අනිවාර්යෙන්ම ඔයාට අලුත් technologies ගැන දැනගන්න ලැබෙනවා වගේම ඔයාගේ අතටත් කියක් හරි හොයාගන්න පුළුවන්....
හරි අපි අදත් එහෙනම් බලමු මේ වැඩ ටික කරගෙන යද්දී ඔයාට එන්න පුළුවන් ගැටළු මොනාද කියල...... ඔයාට එන්න පුළුවන් ප්රදානම සහ ඉතාම ප්රයෝගික ගැටළුවක් තමා පලවෙනි වතාවේ bootstrap වගේ දේවල් use කරද්දී link එක හරියට add නොවීම වගේ ඉතා සරල ප්රශ්න නිසා ඔයාට මේක එහෙම්පිටින්ම එපා වීම...මේක හුගක් සාමාන්ය දෙයක්... අදුනික හැමෝටම මේ දේ වෙනවා.... එත් ඔයා පොඩ්ඩක් ගැම්මෙන් වැඩ කරල මුල පියවර ටික පැනාගත්තොත් ඔයාට ඉතුරු ටික ලේසියෙන්ම කරගෙන යන්න පුලුවන්......ඒ වගේම තමා මට මුල් ලිපියේදී කියන්න අමතක වුනු දෙයක් තියනවා... ඔයා ටිකක් හොද text editor එකක් තෝරාගන්න.... මේක ඔයාගේ වැඩ කරගෙන යන ගැමම තීරණය කරන ප්රධානම සාධකයක් වෙනවා.... මම හොද text editor කිහිපයක් comment section එකේ comment කරන්නම්.... ඔයාට තියන ලොකුම අභියෝගේ තමා මේ කාලේදී ඔයාගේ උනන්දුව නැති වෙන්නේ නැතිව මේකේ එල්ලිලා ඉන්න එක.......ඒ අභියෝගේ කොහොම හරි ජයගන්න.....
හරි එහෙනම් පටන් ගත්ත තැන ඉදන් බලද්දී ඔයා දැන් සැහෙන්න හොද මට්ටමකට ඇවිත් ඉන්නේ....web developer කෙනෙක් වෙන්න ඔයාට තව ටික දුරයි යන්න තියෙන්නේ.... එහෙනම් මෙතනින් එහාට ඔයා මොනාද කරන්න ඕනි...කොහොමද ඒ දේවල් කරන්න ඕනි කියන එක අපි ඊලග ලිපියෙන් සාකච්චා කරමු... ඔයාට අද ලිපියෙන් කියපු දේවල් ගැන මොනාහරි අවුල් තැන තියනවනම් comment කරන්න අමතක කරන්න එපා..... හරි එහෙනම් හැමෝටම ජය වේවා....!
හැමෝටම සුභ දවසක්...
ඊළඟ ලිපිය ළඟදීම ..............
