De Webeditor Brackets

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Voor het maken van websites maak je gebruik van html en css.

En wellicht ook van een JavaScript bibliotheek als jQuery.

Er is een legio aan gratis en betaalde webeditors.

Deze editors zijn erg handig omdat ze bijvoorbeeld met kleuren het verschil in code aangeven.

Hierdoor heb je goed inzicht in de code.

Zie je het direct als je ergens een fout hebt gemaakt en werk je vele malen sneller.

Deze editors helpen je ook bij het schrijven van de code.

Om deze cursus te volgen mag je gebruik maken van elke webeditor die je wilt.

De wegeditor moet het volgen van deze lessen niet in de weg zitten.

Ik wil dat je juist vrij bent om te werken zoals jij dat wil.

Het is wat mij betreft een kwestie van persoonlijke voorkeur welke editor je kiest.

Ik maak in deze cursus gebruik van de editor Brackets.

Ooit ontwikkeld door Adobe is dit nu een Open Source programma dat je gratis kunt gebruiken.

Deze kun je downloaden op de website brackets.io

Zodra je Brackets opstart krijg je dit startdocument in beeld.

Klik op de knop Live Voorbeeld om deze html-pagina in de browser Chrome voor te vertonen.

Op deze pagina staat een korte en snelle handleiding hoe Brackets werkt.

Deze editor kun je uitbreiden met handige functionaliteiten.

Aangezien ik er één geïnstalleerd heb laat ik je zien welke dit is en hoe je deze installeert.

In de rechterkolom staat het icoon voor Extensiebeheer. Klik hierop.

Een venster verschijnt en het tabblad Geïnstalleerd staat nu bij mij actief.

Je ziet dat ik deze extensies heb geïnstalleerd, Beautify.

Deze schoont bij elke bewaar-actie mijn document op zodat deze er altijd netjes uitziet.

Overbodige spaties worden bijvoorbeeld verwijderd als je je bestand tussendoor bewaard.

Nu deze geïnstalleerd is kan ik ervoor kiezen om deze te disablen of te verwijderen.

Er zijn extensies waarmee je in de toekomst zeker zou willen gaan werken.

Om een extensie te zoeken klik je op het tabblad Beschikbaar.

Een lijst met alle beschikbare extensies verschijnt.

Voer dan een term in in het zoekvenster.

Je zou dus kunnen opzoeken Beautify. Maar in de toekomst zou je ook gebruik willen maken van Emmet.

Want deze extensie maakt dat je met korte opdrachten en sneltoetsen heel snel ingewikkelde html en css kunt schrijven.

Dan is het enkel een kwestie van klikken op de knop Installeren.

Soms moet het programma even afgesloten worden en opnieuw worden opgestart. Dat geeft Brackets zelf aan.

Heb je de extensie Beautify geïnstalleerd, dan kun je deze activeren bij Bewerken.

Vink dan de optie Beautify on Save aan.

Vanaf nu wordt je document netjes opgeschoond zodra je je document bewaard.