Websites maken op Webflow - cursus RUB 31.900. van Uprock, training 4 maanden, datum 27 november 2023.

instagram viewer

THEORIE

Invoering

In deze les leert u over de cursus en hoe de training verloopt. Maak kennis met de functies en doeleinden van de gratis en betaalde abonnementen van Webflow. Je leert ook hoe je het werk aan een project kunt structureren, van analyse tot lancering.

• Waar gaat deze cursus over?
• Hoe de cursus werkt
• Plannen en tarieven
• Locatieplannen
• Accountplannen
• Beoordeling en lay-outanalyse
• Acceptatiechecklist voor lay-out
• Werkplan
• Het voorbereiden van de lay-out voor de lay-out
• Afbeeldingen exporteren en optimaliseren
• Andere bestanden voorbereiden

THEORIE

Webstructuur

In deze les maak je kennis met de basiselementen van een webpagina en de principes van de blokindeling waarop de Webflow-service werkt. Basiskennis zal u helpen de basisterminologie van webontwikkeling te begrijpen. Je leert wat een webpaginahiërarchie is en waaruit deze bestaat. Verken het Navigator-paneel om te begrijpen hoe de elementstructuur wordt gemaakt en weergegeven in Webflow.

• Bloklay-out en basis-HTML en CSS
• Hiërarchie van site-elementen
• Navigatorpaneel
• Oefening: Het plannen van de sitestructuur

THEORIE

Projectcreatie en publicatie

In deze les leert u hoe u zich registreert op de Webflow-website en een project maakt, en leert u de beperkingen op het aantal projecten en pagina's in een project. U begrijpt welke werkingsmodi er zijn in de Webflow-service. En leer ook hoe u uw account activeert en uw site publiceert met behulp van het vervolgkeuzemenu Publiceren.

• Registratie en creatie van een project
• Het publiceren van een website
• Deel project
• Een project klonen
• Een aangepaste sjabloon klonen

THEORIE

basis instellingen

U raakt vertrouwd met de basisprojectinstellingen in de modus Projectinstellingen. Stel daarom het project in, upload afbeeldingen naar mappen en maak de UI Kit.

• Projectinstellingen
• Uw domein koppelen
• Sitebestanden
• Algemene projectinstellingen
• Basisstijlen instellen
• Afbeeldingen uploaden
• UI-kit met hoofdelementen

OEFENING

Elementen

In deze les leert u hoe u elementen aan een sitepagina kunt toevoegen en welke elementen niet binnen hun eigen soort kunnen worden geplaatst. Ontdek welke basiselementen er bestaan ​​om een ​​website te maken en wat hun doel is. Maak ten slotte de sitestructuur en voeg inhoud toe aan de elementen.

• Elementen toevoegen
• Overzicht van de belangrijkste elementen
• Overzicht functionele elementen
• Personalisatie van elementen
• Oefening: Het creëren van de hoofdstructuur van de site
• Oefening: Elementen en klassen toevoegen

OEFENING

Elementstijlen

Je raakt vertrouwd met concepten als Klassen en Combo Klassen en leert over hun doel. Voeg daarom klassen toe aan Secties, Containers, Afbeeldingen, Teksten.

• Algemene principes
• Overzicht van eenvoudige secties van het paneel Stijl
• Paneeloverzicht Stijlmanager
• Elementstatussen
• Oefening: inhoud aan elementen toevoegen

OEFENING

Stijlinstellingen. 1 deel

Je bestudeert de samenstelling van het paneel Stijl en onderzoekt de sectie Lay-out, die wordt gebruikt om de rangschikking van elementen ten opzichte van elkaar te configureren.

• Stijlpaneel: Lay-outsectie
• Oefening: Gedetailleerde lay-out van secties 1 en 2

OEFENING

Stijlinstellingen. deel 2

Je gaat door met het verkennen van de samenstelling van het deelvenster Stijl en onderzoekt het rasterelement, dat verantwoordelijk is voor de manier waarop de elementen zijn gerangschikt, wat ideaal is Geschikt voor het maken van een verscheidenheid aan complexe rasterlay-outs, inclusief tabellen die eenvoudig kunnen worden geconverteerd naar kaarten op mobiel schermen.

• Stijlpaneel: Rasterelement
• Oefening: Gedetailleerde lay-out van secties 3 en 4

OEFENING

Stijlinstellingen. Deel 3

Je gaat door met het bestuderen van de samenstelling van het paneel Stijl en het bestuderen van de sectie Grootte, waarmee je de grootte van het element kunt bepalen, instellen minimale en maximale breedte- en hoogtewaarden, en pas het gedrag aan van onderliggende elementen die de grenzen overschrijden ouderelement.

• Stijlpaneel: maatsectie
• Oefening: Gedetailleerde lay-out van secties 5 en 6

OEFENING

Sitepagina's

We bekijken het paneel Pagina's. Laten we eens kijken welke soorten pagina's er bestaan ​​en hoe u deze kunt aanpassen. Als gevolg hiervan maakt u 7-8 secties van de site.

• Sitepagina's
• Oefening: Gedetailleerde lay-out van secties 7 en 8

OEFENING

Secundaire functies

U leert over extra functies die u helpen tijdens het werken aan een project, maar ook bij het vinden van trainingsmateriaal. Als gevolg hiervan maakt u 9-10 secties van de site.

• Helperfuncties in de Designer-modus
• Oefening. Gedetailleerde lay-out van secties 9 en 10

OEFENING

Symbolen en patronen

Leer hoe u symbolen kunt maken van elementen of groepen elementen in Webflow om herhalende blokken en inhoud te beheren. Als resultaat hiervan gaat u het navigatiemenu en de navigatiebalk opmaken, ankerlinks instellen en symbolen maken voor het menu en de voettekst.

• Overzicht symbolenpaneel
• Beoordeling van kant-en-klare lay-outs
• Karakters creëren
• Oefening

OEFENING

Adaptieve lay-out

In deze les leert u de basisprincipes van adaptieve lay-out en raakt u vertrouwd met het concept van “Breakpoints”. Creëer daarom een ​​adaptieve tablet- en mobiele versie, een adaptieve versie voor grote schermen en een adaptief menu.

• Basisprincipes van adaptieve lay-out
• Breekpunten
• Controle van aanpassingsvermogen
• Website-aanpassing voor mobiele schermen
• Website-aanpassing voor grote schermen
• Aanpassingsvermogen testen

UITGEBREIDE MOGELIJKHEDEN

Animatie. 1 deel

Je leert de algemene principes van animatie, leert hoe je linkknoppen en andere hover-elementen animeert en animeert het eerste scherm.

• Algemene animatieprincipes
• Triggers
• Triggers instellen
• Animatie-elementen tijdens het zweven
• Ankerlinks

UITGEBREIDE MOGELIJKHEDEN

Animatie. deel 2

Je leert wat globale animatie is. Leer daarom hoe u het kunt maken.

• Mondiale animatie
• Component-animatie
• Animatie bij het laden en scrollen van de pagina

UITGEBREIDE MOGELIJKHEDEN

Code van derden invoegen

U zult begrijpen waarom u code van derden moet invoegen. Maak kennis met de component Embedden. Leer hoe u code van derden kunt integreren, bijvoorbeeld hoe u commentaardiensten of een kaartwidget kunt verbinden. Leer in de praktijk hoe u de kaartcode invoert.

• Component insluiten
• Code invoegen in pagina-instellingen
• Code invoegen in projectinstellingen
• Code invoegen in elementinstellingen (aangepaste attributen)
• Het invoegen van de kaart op de site

UITGEBREIDE MOGELIJKHEDEN

Analyse en SEO

Ontdek wat webanalyse en SEO zijn en waarom ze nodig zijn. U begrijpt hoe u Analytics koppelt en SEO-pagina's instelt.

• Analytics verbinden
• Yandex Metrica en Google Analytics verbinden
• SEO instellen in pagina-instellingen

UITGEBREIDE MOGELIJKHEDEN

Voltooiing van het project

Doorloop nogmaals alle fasen van het maken van een website. Je bedenkt hoe je de site goedkeurt en overdraagt ​​aan de klant. Leer hoe u een website aan een domein op Webflow-hosting koppelt, de website uploadt en op uw hosting installeert.

• Checklist voor het controleren van de site
• Goedkeuring en overdracht van het project aan de opdrachtgever
• Een website koppelen aan een domein op Webflow-hosting
• Upload de site en installeer deze op uw hosting

UITGEBREIDE MOGELIJKHEDEN

Bonus

Afstudeerproject