Web Development — The Chamber of Secrets
Hey all! We are glad to begin this new blog series “WebDev — Cheatsheet”, initiated to share with you the easiest facts, tools, knowledge, and fun parts about web development.
Web development is a huge process. From planning the prototypes (structure) of the website to getting it hosted on the internet, it can be a tedious process. This article is about the tools and software that came in handy throughout my development process. I am aware that there are multitudes of other softwares that might be better than these for some people, but these are just a few that I found easy to use.
The article is divided into the following five sections:
- To code
- Visual studio code (VS Code)
- Codepen
2. To design
- Figma
- Bootstrap
3. To enhance
- Browserstack
- Screenfly
4. To manage
- Git
5. To skip it all
- Sketch2Code
- To code
When you start working on a website, “where to code?” is an obvious question. We generally write codes in text/code editors, programs that are made to simply edit text. For beginners, these can be inbuilt tools like Notepad. For experienced programmers, external softwares are usually used such as Visual Studio Code, Atom, Sublime Text, and many, many others. VS Code and Codepen are two useful coding tools that I suggest you try out.
Visual studio code
VS Code is a code editor developed by Microsoft. It can be downloaded for Windows, MacOS and Linux systems.
The most adored thing about VS Code is that it is lightweight, or in other words, it will not occupy much of your storage. VS Code provides you with innumerable extensions to save you time and make coding more straightforward. These extensions can perform tasks as simple as closing brackets while coding, or maintaining different colors to understand the structure of code.
In addition to this, VS Code has a live server inbuilt. While writing a code on a simple application like Notepad, you have to refresh the browser to see the changes you just made on your code. When there are frequent changes, refreshing can be a tedious task. However, VS Code’s live server enables your website to be updated in real time according to the changes made on the code. Yes, this means no more refresh clicks needed!
VS Code also has Git commands built-in, which makes the entire process of pushing and pulling changes from Git repository a cakewalk. You just have to press one button and your changes are done! I will discuss Git in a little more depth in the fourth section.
You can read more about VS Code and download it from here.
Codepen
When we talk about development, HTML, CSS, and JavaScript are three different languages that come to our mind instantly. These three codes are written in different ways. Some people choose to have three different documents, while others prefer to have different parts in the same document. Either way, coordinating all three can be a tricky task.
Codepen is software that allows you to code in all three languages in three windows placed side by side. You can simultaneously edit either of them and immediately see the output on a fourth window present below these. It also gives ready-made code snippets that can be copied into your own website according to the copyright rules, which means, free code! The published codes are also unique because you can edit any of the three languages in the coding window and customize them according to your requirements.
You can try it out here.
2. To design
“Design is intelligence made visible” — Alina Wheeler. Be it any creation in this technical world, presentation is fundamental. When it comes to websites, getting prototypes approved by the owners is the first step. What follows ahead is an introduction to tools that can be used for designing the User Interface (UI).
Figma
Figma is a design tool made for common people like you and me.
Its main purpose is to design UI prototypes for websites and applications. It has a simple interface with various shapes and objects. You can fill colors and add borders through simple clicks on the screen. The best part about Figma is that it directly provides you with the CSS code for the element you have designed. This can also be used to design particular images or illustrations for websites.
Another interesting feature is Figma’s collaborative designing. Suppose there are multiple people designing a website, wouldn’t it be great if they could all do so at the same time using the same document? This is precisely what Figma’s collaborative feature does: it allows multiple users to simultaneously edit a document while showing real-time changes made to the prototype.
You can check it out here.
Bootstrap
You don’t exactly know CSS but still want your website to look superb? BOOTSTRAP!!
Bootstrap is a free open source framework for CSS which is made for responsive web development. With its abundant scope, it allows you to add spectacular designs on your website. From navigation bars, buttons, cards or carousels, you can find each element readily coded in Bootstrap. The greatness lies in the fact that one word in Bootstrap can be approximately equivalent to 10–15 lines in actual CSS. It can be easily added to a website with one line of code or by downloading it on a local machine.
What’s even better is that it provides Bootstrap Icons. Instead of having to design such small icons, you can directly use one of the 1,500 Bootstrap Icons available in SVG format.
Along with it, Bootstrap themes also provide ready-made websites for $40–70. You can just change the texts according to your website and you are ready to go!
You can explore more of Bootstrap framework on its official site here.
3. To enhance
Developing your website is pointless if you don’t make sure it can be visible on all devices/browsers. A website can be opened using multiple browsers, like Google Chrome, Microsoft Edge, Firefox, Safari, and more, However, some recently added features of CSS, like flexbox, are not supported by older browsers. When such a website is opened on them, they cannot understand the code which makes it look out of place and unstructured. To avoid such errors, it is important to check whether your website is responsive — this means that it works properly on all browsers and adapts according to the screen size of the device. The following two tools will help you verify this:
BrowserStack
BrowserStack provides you with an easy user interface to enter your website URL, and then displays the output. You can easily shift between different browsers and test the website. It provides you with a great experience of actually handling the selected device on multiple browsers. So next time you have to do Cross Browser Testing, remember BrowserStack!
Screenfly
Screenfly is a software application used to test websites for different screen resolutions. The software asks for a simple input for the website URL and does the rest of the work by itself. A single code is written for both desktop and mobile versions. The easiest way to check responsiveness is to resize the browser window to different widths. It will give you an idea of the mobile and desktop views of your website, although it might not always be accurate and may vary from one browser to another.
One of Screenfly’s key features includes its customized screen sizes. It allows you to select the device you want to view in and shows the website in that screen size. It also gives options for different models when you select a device. For example, when you select Mobile view, you can again select whether the mobile is a Blackberry 8300 or an Apple iPhone 7. It also shows you the screen view when the device is rotated horizontally.
To know more about this tool, visit screenfly.org.
There are many other softwares like ‘Responsinator’ or ‘am I responsive’ that can also help you check your website’s responsiveness.
4. To manage
Git
Git is a multipurpose tool which deserves to be spoken about much more, but for the purpose of this article I will try my best to stick to Web development!
Git is an open source software where developers share and store their codes, so that others can readily use and modify them without any copyright issues. Imagine Git to be your cupboard where you can store the items you have bought or created. In technical terms, you can create different repositories (folders) for different projects. It has exciting features like a README file in which other users can find instructions on how to use the code in that repository.
When working with a team, sharing the code can become difficult. The traditional way was to store code on a local machine and send zipped files across. However, this can quickly become messy. This is where Git comes in handy. When you use Git, several people can simultaneously work on a code and push their changes to the repository. The owner of the repository can then decide whether to merge these changes into the main code. It also shows a working tree at each point.
Git projects can easily be downloaded on a local machine using only two or three commands. Also, Git provides free hosting. Once you are done developing and uploading your project on Git, you can directly host it with a single click and your website will be ready to be shared with the world!
For personal analysis, Git also provides you with the number of projects you posted annually, and divides all codes according to the coding language used. Last but not least, it displays the percentage of contributions made by each member in group projects.
To summarize, if you are looking for a place to store your projects or to work live with a team, Git is your answer.
5. To skip it all
Sketch2Code
This tool is a solution for those of you who don’t want to code. All you have to do is upload a picture of a handwritten or manually drawn design into this tool, and you will receive a piece of code for your design. You can then directly add this to your website and save yourself plenty of time and effort!
I hope these tools will be helpful to you.
Happy coding!
I used all the above tools to develop the website for our organisation, Fields Data. To know more about our organisation, click here.