Développement Front End avec TypeScript / React ou Vue JS

Je suis un développeur Front-End Freelance à Grenoble et Lyon, je vous propose des prestations de développement Front-End sur mesure.

Avec le développement Front-End sur mesure, il n'y a pas de limite dans la personnalisation du Front-Office de votre projet web.

Ces prestations seront développées avec les technologies HTML 5.1 / CSS 3 / JavaScript / TypeScript / React JS ou Vue.js.

Développement Front-End - HTML / CSS / JS / TS

Le développement Front-End - Qu'est-ce que c'est ?

Le développement Front-End consiste à développer la partie visible des sites web.

L'intégration se fait avec du HTML, la mise en page se fait avec du CSS, et les animations se développent avec du JavaScript.

Grâce aux Media Queries CSS 3 on peut apporter aux sites web des versions Responsive.

Utiliser uniquement des langages Front-End est suffisant pour développer des sites web statiques, mais pour développer des sites web dynamiques (sites E-commerce ou applications web par exemple) ça ne suffit pas, il faut aussi utiliser des langages web Back-End (tel que PHP et SQL par exemple).

Lors du développement Front-End, on se doit aussi de rendre le site web accessible quel que soit le navigateur utilisé par le visiteur (Mozilla Firefox, Chrome, Opéra…).

Exemple de syntaxe du langage HTML :


<form method="post" action="contact">
    <input type="text" name="name" placeholder="Votre Nom *">
    <input type="email" name="email" placeholder="Votre Email *">
    <input type="tel" name="tel" placeholder="Votre Téléphone *">
    <textarea name="message" placeholder="Votre Message *"></textarea>
    <input type="submit" name="submit" value="Envoyer">
</form>

Exemple de syntaxe du langage CSS :


form {
    padding: 20px;
}

form input[type=text],
form input[type=email],
form input[type=tel] {
    height: 40px;
    margin: 10px;
    padding: 5px 10px;
}

Exemple de syntaxe du langage JavaScript (Vanilla JS) :


const calendar = {
    office_type: null,
    first_day: null,
};

/**
 * Filtrer les réservations du calendrier par un type de bureau
 */
calendar.filterByOfficeType = function(e) {
    var elementTarget = e.target;

    calendar.office_type = elementTarget.getAttribute('data-office-type');
    calendar.first_day = document.getElementById('data-first-day').value;

    // on actualise le calendrier
    calendar.loadCalendar();
}

calendar.listenChangeForFilterByOfficeType = function() {
    var elements = document.getElementsByClassName('office_type');
    for (var i = 0; i < elements.length; i++) {
        element = elements[i];
        element.addEventListener('change', calendar.filterByOfficeType);
    }
};

L'importance d'une bonne sémantique

Normes W3C

Afin d'optimiser le référencement naturel de votre site internet, il est important de le coder avec une bonne sémantique.

Le développement Front-End doit aussi respecter les standards W3C (World Wide Web Consortium).

Besoin d'un développement Front-End sur Grenoble et Lyon ?