Sa mga starters, why we need a development environment?
— think about it as XAMP or LAMP in your working computer. Diba, dito mo e-work on yung project mo? For example, PHP language, this will serve as your local server.
For front-end development, we will work only with HTML, CSS, and JS, using your desired editor. Diba?
What is front-end development? — ito yung nakikita mo panglabas na layout or design nang web page.
As we progress with our basics, hindi tinuro or introduce man lang ng professor namin yung tools sa real-world development. Siguro, hindi pa ready yung mind namin or gusto lang talaga ni prof mag explore for more tools or technologies available.
To be honest, hindi madali, kailangan ko magbasa ng mga articles and watch YøùTùbé tutorials. Its true no shortcut for Frontend Development and it took me a year, just to understand and explain ito sa thread nato.
Anyhow, I hope this series will help you out on your future development. In this thread, I will introduce basics and explanations why these tools are needed in the real-world project.
Sa Mac users, — You do not have permission to view the full content of this post. Log in or register now.
Sa Windows users, — You do not have permission to view the full content of this post. Log in or register now.
— Ito yung tools kung saan, mas madali e update yung HTML, CSS, and JS sa web page mo. Paano?
— For example, sa HTML web page mo. Gawan mo nang template per section ang buong web page mo.
— Section, ito yung <section> tag ng HTML 5. If meron kang desired changes sa lahat ng pages mo, edit mo lang ang isang file, update na ang lahat.
— Pwedo mo ring e-compress lahat ng images, HTML, CSS and JS files, para mas mabilis ang pag load ng web pages mo pag nilagay muna sa live hosting server.
— Live Reload, ito yung makikita mo lahat nag changes mo on the fly, without browser reload ng browser mo. (IMPORTANT for CSS)
For newbies, wag kayung matakot. For sure, maka add-up itung thread sa skill set nyo. Kung pasensya lang, tiyak maging easy ang life nyo.
Let us get started!
1. Install muna tayo nang local server natin sa You do not have permission to view the full content of this post. Log in or register now.. Ang gagamit natin sa thread nato, CentOS 7 minimal. If wala kapang .iso file, visit mo You do not have permission to view the full content of this post. Log in or register now., then choose Minimal ISO
Choose mu lang yung gusto mung link.
Pag meron ka nang local copy ng CentOS 7 Minimal, let us proceed sa installation. Make sure you have Oracle VirtualBox installed on your machine.
If you are ready, refer lang sa screenshots below and pasensya lang, for sure, successful yung installation mo.
Click New.
Complete these input fields as shown below:
Make sure RAM to 1024MB or 2048MB
Choose Create a Virtual hard disk now.
Choose Dynamically allocated
Make sure to set the File location and Size to 2.00TB, then click on Create.
At this point, let us set .iso and network settings for our Virtual Machine.
Choose our new VM and click on Settings as shown below:
Click System > Processor > 2, as shown below.
Storage > Empty in Controller: IDE > click on the disc icon.
Choose Virtual Optical Disk File.
Look and Choose your CentOS 7 Minimal iso file.
You should have the same output as shown below:
Network > Adapter 1 > Enable Network Adapter > Click on Bridged Adapter. Make sure to choose your Network Adapter for your working computer and Click OK.
Why? — This way, we can test your web page on your local network. Pwede mo ma access yung web page mo sa mobile device to test your mobile responsive layout. Useful diba?
At this point, you should be all set. Next tutorial, Start natin yung CentOS 7 installation.
If you have confusions, or correction you wish to add up, please let me know so I can correct them as expected. Update ko lang kayo sa next thread.
— think about it as XAMP or LAMP in your working computer. Diba, dito mo e-work on yung project mo? For example, PHP language, this will serve as your local server.
For front-end development, we will work only with HTML, CSS, and JS, using your desired editor. Diba?
What is front-end development? — ito yung nakikita mo panglabas na layout or design nang web page.
As we progress with our basics, hindi tinuro or introduce man lang ng professor namin yung tools sa real-world development. Siguro, hindi pa ready yung mind namin or gusto lang talaga ni prof mag explore for more tools or technologies available.
To be honest, hindi madali, kailangan ko magbasa ng mga articles and watch YøùTùbé tutorials. Its true no shortcut for Frontend Development and it took me a year, just to understand and explain ito sa thread nato.
Anyhow, I hope this series will help you out on your future development. In this thread, I will introduce basics and explanations why these tools are needed in the real-world project.
Sa Mac users, — You do not have permission to view the full content of this post. Log in or register now.
Sa Windows users, — You do not have permission to view the full content of this post. Log in or register now.
— Ito yung tools kung saan, mas madali e update yung HTML, CSS, and JS sa web page mo. Paano?
— For example, sa HTML web page mo. Gawan mo nang template per section ang buong web page mo.
— Section, ito yung <section> tag ng HTML 5. If meron kang desired changes sa lahat ng pages mo, edit mo lang ang isang file, update na ang lahat.
— Pwedo mo ring e-compress lahat ng images, HTML, CSS and JS files, para mas mabilis ang pag load ng web pages mo pag nilagay muna sa live hosting server.
— Live Reload, ito yung makikita mo lahat nag changes mo on the fly, without browser reload ng browser mo. (IMPORTANT for CSS)
For newbies, wag kayung matakot. For sure, maka add-up itung thread sa skill set nyo. Kung pasensya lang, tiyak maging easy ang life nyo.
Let us get started!
1. Install muna tayo nang local server natin sa You do not have permission to view the full content of this post. Log in or register now.. Ang gagamit natin sa thread nato, CentOS 7 minimal. If wala kapang .iso file, visit mo You do not have permission to view the full content of this post. Log in or register now., then choose Minimal ISO
Choose mu lang yung gusto mung link.
Pag meron ka nang local copy ng CentOS 7 Minimal, let us proceed sa installation. Make sure you have Oracle VirtualBox installed on your machine.
If you are ready, refer lang sa screenshots below and pasensya lang, for sure, successful yung installation mo.
Click New.
Complete these input fields as shown below:
Make sure RAM to 1024MB or 2048MB
Choose Create a Virtual hard disk now.
Choose Dynamically allocated
Make sure to set the File location and Size to 2.00TB, then click on Create.
At this point, let us set .iso and network settings for our Virtual Machine.
Choose our new VM and click on Settings as shown below:
Click System > Processor > 2, as shown below.
Storage > Empty in Controller: IDE > click on the disc icon.
Choose Virtual Optical Disk File.
Look and Choose your CentOS 7 Minimal iso file.
You should have the same output as shown below:
Network > Adapter 1 > Enable Network Adapter > Click on Bridged Adapter. Make sure to choose your Network Adapter for your working computer and Click OK.
Why? — This way, we can test your web page on your local network. Pwede mo ma access yung web page mo sa mobile device to test your mobile responsive layout. Useful diba?
At this point, you should be all set. Next tutorial, Start natin yung CentOS 7 installation.
If you have confusions, or correction you wish to add up, please let me know so I can correct them as expected. Update ko lang kayo sa next thread.