Useful Tools to Create Your HTML/CSS Website from Scratch
Many of you are thinking about finally making the leap and starting a new career as a web developer. While some believe it takes a lot of courage and requires a lot of life-changing decisions and sacrifices, others have already started online programming courses and are desperately trying to make time for learning something new every day despite being on a tight schedule. Needless to say, those who belong to the latter group stand much greater chances of making a successful career switch and becoming web developers.
If you have recently finished a basic course in HTML and CSS, you’re probably eager to start your first project and check where do you actually stand in the world of coding. Just as no house can be built without setting a foundation first, you cannot build a website without having an HTML foundation. In this article, I will list some of the most useful tools you need besides HTML knowledge to create your HTML/CSS website from scratch.
Set Your Local Environment
When developing a website, it is important to keep all of your coding and other development work on your machine. To do that, you can use a web development platform such as WampServer. WampServer is a web development platform on Windows that allows you to turn basic HTML websites into dynamic web applications and also manage your server and databases. It is shortly known as WAMP, which is an abbreviated name for Windows, Apache, MySQL and PHP. Apache is server software, MySQL is a database management system and PHP is the programming language in which WordPress is written. For Linux operating system, the software is known as LAMP. Thanks to WampServer, you can give access to your website to everyone or keep it to yourself only until it’s 100% publish-ready, as you can easily switch between online and offline.
Follow Basic Guidelines
Being a programmer means working by your rules. Before you start with a project, however, there are still basic guidelines you should follow. When working with HTML, CSS and JS, you need to know the formatting and style rules in order to write a quality and organized code. You can indeed use all the tools to minify, modify and update your website as long as you keep up to the standard code quality. There are many sources you can find the basic guidelines, but I recommend that you check the Google HTML/CSS Style Guide, AirBNB for CSS and AirBNB for JS at GitHub.
Get Inspired
Surprised? Well, you shouldn’t be, because front-end web developers cannot do it without finding the right source of inspiration. It is a matter of personal preference because there are million different ways a web developer can get inspired. My favourite way of finding inspiration is CodePen. This website is a place for front-end developers from all over the world where they can share and discuss projects, as well as find interesting ideas that can fire up your brain. But that’s only my way. The important thing is to get inspired, make a plan and stick to it.
Version Control
If you don’t want to overwrite an important file when attempting to add a new feature to your project, you need to use a version control system, such as Git. Git is one of the favourite programmers’ tools as it’s simple, easy to use and allows us to track the history of our projects in a data structure known as “repository”. Any changes and improvements you make in future to your code can be dismissed as you can back it up to before applying those changes, which gives you the freedom to get creative. Git also makes it easier to merge between your work and the work of a partner you may be cooperating with. However, Git is not a tool you can master if you just started coding, which is why you can use GitHub – a version control suitable to the masses. GitHub has become the most popular repository hosting website and it also allows you to create unlimited repositories for free. Bitbucket is yet another GUI solution that makes it easy to work with a multiple-members team.
Task Management
One awesome way to keep track of your work or your team’s progress and manage projects conveniently is to use task management software. Today there is a vast of available options for free that can replace your old-school cork board and pins and help you be more productive. My favourite task management software is Asana – simple, easy and absolutely free to use and it can handle businesses of all sizes. Asana gives you clarity and can organize all of your projects, tasks, dashboards and conversations in an efficient manner. You can also access it from your mobile and save your ideas as soon as they hit you.
Other similar tools: Trello, Basecamp.
Communication Tools
When it comes to communication, we all have our preferences. Web conferencing, smartphones, landline telephones, mails, fax machines, social networking sites, online chat tools… there are many different options to choose from. However, in today’s world and especially in the IT world, we prefer online communication via communication tools or software. Over the last few years, Slack has become a preferable option for many companies, simply because it’s simple and easy to use. Skype and Zoom are undeniably another reliable software.
Files Sharing
If you prefer having your projects, ideas and other files online rather than on your HDD, simply sign up for Google Drive or Dropbox account. These two provide you with plenty of online storage which you can use to store any sort of data. The second best thing about these online storage platforms is that they allow you to access your files from anywhere, on any device and even share them with anyone. Everything you keep in these two online storage platforms is automatically synced to all of your device that uses the same e-mail.
Code Editors
Code editors are text editor software specially designed for editing source codes by programmers and are a fundamental programming tool. They can either be built into a web browser or an integrated development environment or a standalone app. If you’re wondering how can they help you build your website, you should know that the code editor allows you to simplify and speed up your code as much as possible. One popular code editor I often rely on is Sublime Text. Modern, simple, approachable and incredibly efficient, Sublime Text will help you make your code simple, clean and easy to read. Atom is another great code editor you can use.
Free Fonts
We all get sick and tired of those default fonts that come with our computers. Ariel, Times New Roman, Verdana and Georgia are maybe classic fonts and perfect for content writers, for example, but to make a website faster, more modern-looking and more beautiful, you will need some other fonts than the ones I mentioned. That’s where Google (Free) Fonts steps in. Google provides hundreds of free fonts that can make your website stand out. Also, by using Google fonts you’re making your website faster and accessible to all, regardless of where they are and what device they use.
Free Icons (SVG, Font Icons)
If your project requires custom icons, there are some extensive libraries for font icons online, such as Font Awesome, Ionicons, Fontello, Google Material Icons, Icomoon and many others. Some clients may request custom icons as they would like to build a brand and thanks to these online tools, you can quickly find a set of vector icons that you can customize them with everything that’s possible with CSS so you can meet your client’s requirements. If you too, like me, always strive for scalable vector graphics (SVG), these are some of the best places you can find scalable vector icons. IconCrafts is always my first choice.
Grid systems and components
Another useful tool that I regularly use is Twitter Bootstrap. One common problem for us, front-end web developers, is that we can sometimes get stuck in the same patterns. We may not even notice that we keep on using the same features over and over again. But that is not the case when you use Twitter Bootstrap. This UI framework combats this common problem by turning common elements into variations. In other words, it makes the front-end web development much easier and much faster. Twitter Bootstrap is the most popular HTML, CSS and JS framework for developing responsive websites, but there are some other popular frameworks you can try out too, for example, Skeleton and Foundation.
Preprocessor
As you may have learned by now, your code needs to be DRY, which means Don’t Repeat Yourself. Unfortunately, it’s easy for your code to get not-very-dry and force you to inspect it from the very beginning. Well, not if you use a CSS preprocessor – this tool will do the inspection for you and help you make your code DRY. SASS is my personal favourite tool and it is my constant ally in my coding projects. Mature, stable and incredibly powerful preprocessor available for professional use, SASS can help you keep your code DRY and your stylesheets more readable, eliminating the need to go through your entire code manually. This is particularly useful for larger websites with plenty of code.
Before Launching Your Website
Here are a few things you need to take care of before launching your website.
- Run HTML Validator – to check your code for syntax errors;
- Run Gulp – to automate repetitive tasks
- If you don’t want to use Gulp to compress your photos and minimize the size of your JS and CSS, you can do it manually yourself on other online platforms, such as CompressPNG, CompressJPG, JSCompress, CSS Minifier etc;
- Run Google PageSpeed, Pingdom and GTMetrix for additional testings and statistics;
If you haven’t entered the world of coding yet, but you want to, I urge you to start right now. Don’t know how and where to start? Start with the basics of HTML and CSS. Here are some of the best websites that offer tutorials and courses for web developers:
Share on
