Hello, everyone.
Today, I'm going to introduce how to build a web development environment on Windows to get started! For sure, Mac machine is useful because its base is Linux, which is used to most of software and framework to develop web service. But we can do it sufficient if we build an environment tightly even on Windows. All of contents on this post is what I did actually. These are main objects.
1. Environment Development for Web Design.
2. Environment Development for Front-End Engineering using HTML5, CSS3, Bootstrap4 and Javascript.
3. Environment Development for Back-End Engineering using Ruby on Rails on Docker
It must be too long if I introduce all of above so I will do it with two separated posts. Today is for 1. and 2., and then 3. few days later.
Please feel free to contact me if you have any question regarding this post.
Anyway, let's get started!
1.Environment Development for Web Design.
Web design is one of most important part of web development. All of users see its visual and some decides if they use it by its design. To create beautiful design expands its possibility. What I'm using to design is "Adobe XD CC". Another software "Sketch" is most common but it's only for Mac. You can use XD for free with signup and there is tons of information and tips to use it.
You can download it from URL below and can install easily.
<Adobe XD CC>
https://www.adobe.com/products/xd.html
After download, please follow the instruction on your screen. Adobe products are integrated to "Adobe Creative Cloud" and XD will be installed via this. Once install has finished, you will see "Xd" pink colored icon on your desktop. Well done!
That is all what I did to start web design. Now you can create new design with Adobe XD. There is some plugins and tips to use it that I will introduce on another post.
2.Environment Development for Front-End Engineering using HTML5, CSS3, Bootstrap4 and Javascript.
<2-1. Editor>
What I installed by free to start coding for front-end is "Atom", which is common editor developed by Git. You can just download and then install following the instruction on your screen. It's easy.
Download it from official site below.
Atom is awesome editor which help us to input command by extension of the file so it accelerate our development and make it smoothly! You can go to "File" -> "Settings" -> "+Install" after install the Atom to add packages which makes our development more useful! I suggest you to install following eight packages for initial.
color-picker pigments maximize-panes tag emmet file-icons remote-edit selection-highlight
Have you done?
Actually, I am no longer using Atom although I introduced. Of course, I used to use it but it was really heavy sometime. So now I switched to use "Sublime Text 3", which is another popular editor. This consts $80 for permanent license however you can use it free for evaluate version. It's mostly same as product version without it shows "Unregistered" on top bar and sometime it asks us if you buy it on popup window. Sublime is really fast and quick so I definitely recommend trying use it. Please pay $80 if you like it ;)
For editor, you can use anything by your preference. I like Sublime Text so far.
<2-2. Browser>
Okay, now you can web deign and then coding with HTML/CSS. After that, you will need to check how it works. It's web browser. I recommend you to install some browsers because you cannot choose which browser users use. You already have "Internet Explorer" and "Microsoft Edgh" which are installed on Windows by default. Additionally, you can install Google Chrome and Firefox. It is better if you have iPhone and/or Android device. Unfortunately, we cannot check with Safari browser which is provided by Apple. Safari for Windows is now out of date. We need to check it with Mac or iPhone/iPad. Good news, there is Android emulator for Windows that named "Nox" This is also really easy to install. You can download from official site below.
After installing of Nox, it might better to install Google Chrome for android as well.
Now, You can start from design through coding with checking on browsers! Was it easy?
You've already on the start line of web developer. You can develop not only static website but also dynamic website with Javascript or jQuery.
On next post, I will introduce how to build web application on Windows. What I did is create docker container on Windows and then install Ruby on Rails on the container.
All of application on this post could be usable by only download and install however we need some operation and understanding for next time. I'd better to explain it using some figures to make it understandable.
Thank you for your reading and see you next post!!