Client side, also known as frontend development

When you typed fiswebsites.hu into your web browser's address bar, a graphical user interface appeared within a few seconds. You see images, text, buttons, and links that take you to a new page when clicked. This is the end of the program closer to the user, the frontend. In terms of function, the frontend is what displays information, and the backend is what produces it.

How does a frontend developer work?

A programmer creates the interface of a website or a mobile application based on a ready-made design plan. Web projects are mainly made using HTML, CSS, and JavaScript, as well as their modern frameworks. This portfolio, for example, was written in TailwindCSS and Vue.js.

What is Vue.js and why is it good?

Vue.js is a modern tool that helps in building websites. Imagine it like LEGO: we put the page together from small, reusable pieces (components). This allows for faster development and easier maintenance.

A simple example of a button that counts clicks:

<template>
  <button @click="count++">
    Kattintások száma: {{ count }}
  </button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Design and Appearance

The task of the frontend developer is also to make the site look good on all devices (mobile, tablet, desktop). For this, we use style sheets (CSS), such as TailwindCSS, which helps in creating a modern and clean look.

This is what a stylish card component base looks like:

<template>
  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
    <div class="shrink-0">
      <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
    </div>
    <div>
      <div class="text-xl font-medium text-black">ChitChat</div>
      <p class="text-slate-500">You have a new message!</p>
    </div>
  </div>
</template>