Chop-Chop Logo
Blog

Guide to Markup projects: Everything You Need to Know

The information provided in this article is based on my personal experience as well as the experience of my colleagues from the Chop-Chop. Markup projects are nothing more than projects based on basic languages such as HTML, CSS, and JS. They are "static" pages/projects, and that's it. If you've ever made a website using these languages, then you've already created your first markup page/project. If not, don't worry, everything is ahead of you. In this article, you will learn how to approach it, what tools you need for better code management, and how to improve your workflow.

What kind of knowledge do we need to have to start markup projects?

Well, it actually depends on our needs and the needs of our clients. Let's take HTML, CSS, and JS as the foundation. And honestly, that's all we need to write a website. But is writing in pure HTML, CSS, and JS tiring? When coding, let's try to make our lives easier, not more difficult.

JS and CSS

So let's start with JS. Of course, we want to write using ES6 in the code. And let's add TypeScript to avoid common errors, you'll thank me later.
When it comes to CSS - we don't want to write everything in one file. Imagine you have a large project and your CSS code has thousands of lines. After spending some time on such a file, you won't even know your own name. Headache guaranteed!
So, to divide the CSS code into smaller parts, let's use SCSS or, if you prefer, LESS. In my opinion, SCSS is more transparent, so I highly recommend it.

HTML

Now, we know how to improve JS and CSS, but what about HTML? Well, of course, it's possible. We have plenty of available tools that allow us to split HTML code and manipulate JavaScript within it. With those tools, we can use loops, conditions, and many other cool things that will greatly facilitate our work. Some of these tools are:

Among all these tools, I can recommend Nunjucks.js because it actively supports the features we need. The other tools are not significantly different from each other, and their syntax is quite similar. However, each tool has its own strengths and weaknesses, so choose the one that is the most convenient for you.

Helpful coding tools for working on markup projects

At this point, our coding skills have improved, and we have leveled up by incorporating these technologies. However, it's important to note that simply adding these technologies is not enough. We need to learn their syntax and understand what they offer in order to fully utilize their potential. It's crucial to invest time and effort into learning and mastering these tools to harness their benefits to the fullest.
To elevate our coding skills even further, let's add a few important tools that will further enhance our productivity.

  1. Git: GitHub / GitLab – these tools allow us to work with different versions of the same code, making teamwork easier. They provide code control for us and our project members, allowing us to track changes and additions. They are a must-have for effective code management. 
  2. Gulp – it's an automation tool for building and streamlining tasks in the development workflow. It relies on streaming and allows us to create automated processes such as compiling source files, minifying code, optimizing images, synchronizing browsers, and much more. Gulp is based on JavaScript and can be used in conjunction with various modules and plugins available in the Node.js ecosystem. It is a valuable asset in our daily development workflow. 
  3. Node.js – It's a runtime environment based on the JavaScript V8 engine, enabling us to run JavaScript code outside of the browser. It allows us to write server-side applications in JavaScript, leveraging the same programming skills for both client and server-side development.
  4. Yarn / npm – These are package managers for JavaScript used to manage project dependencies. Yarn was created as an alternative to npm (which is the default package manager for the Node.js environment). Yarn offers fast and reliable package installation, updating, and management for JavaScript packages. It also provides version-locking mechanisms to help maintain stability and consistency in project dependencies. 

In summary, Gulp is an automation tool for development tasks, Node.js is a runtime environment for JavaScript, and Yarn/npm are package managers that assist in managing project dependencies and installing JavaScript packages.

Now that we have learned about the functionalities of individual tools, we can create our development environment or explore existing environments on GitHub to see how they function. This will allow us to quickly and efficiently build websites and leverage various helpful features.

Let's sum it up

In this article, I have described tools that simplify and enhance our work with markup projects. By using modern technologies such as ES6 and TypeScript for JavaScript, and preprocessors like SCSS or LESS for CSS, we can improve our coding practices. Additionally, there are tools such as Handlebars.js, EJS, Pug, Dust.js, and Nunjucks.js that facilitate HTML code writing. Tools like Git (along with GitHub and GitLab platforms) help manage code versions and streamline teamwork. Gulp automates programming tasks, Node.js serves as an environment for running JavaScript code outside the browser, and Yarn/npm act as package managers for managing project dependencies. In conclusion, employing modern technologies and tools can simplify web development, increase work efficiency, and improve code quality.