Fiswebsites

Amikor a webböngésző címsorába beírtuk, hogy fiswebsites.hu, pár másodpercen belül egy grafikus felhasználói felület tárult elénk. Látunk képeket, szöveget, gombokat és hivatkozásokat, amelyekre kattintva egy új oldalra juthatunk. Ezek a felhasználóhoz közelebb eső vége, frontendje a programnak. Funkcióját tekintve a frontend tehát az, ami megjeleníti az információkat, a backend pedig, ami előállítja.

Hogyan dolgozik egy frontend fejlesztő?

Egy honlap vagy egy mobilalkalmazás felületét egy kész design terv alapján készíti a programozó. Webes projektek főként HTML, CSS és JavaScript felhasználásával, valamint ezek modern keretrendszereivel készülnek. Ez a portfólió pl. TailwindCSS és Vue.js nyelveken íródott.

Mi az a Vue.js és miért jó?

A Vue.js egy modern eszköz, ami segít a weboldalak építésében. Képzeljük el úgy, mint a LEGO-t: apró, újrahasználható darabokból (komponensekből) rakjuk össze az oldalt. Ez gyorsabb fejlesztést és könnyebb karbantartást tesz lehetővé.

Egy egyszerű példa egy gombra, ami számolja a kattintásokat:

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

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

Design és Megjelenés

A frontend fejlesztő feladata az is, hogy az oldal minden eszközön (mobil, tablet, asztali gép) jól mutasson. Ehhez stíluslapokat (CSS) használunk, mint például a TailwindCSS, ami segít a modern és letisztult megjelenés kialakításában.

Így néz ki egy stílusos kártya komponens alapja:

<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>