Code Monkey home page Code Monkey logo

connect-your-tribe-squad-page's Introduction

Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md

Connect Your Tribe - Squadpage

Ontwerp en maak met een team een website voor je squad met Node en data uit de whois.fdnd.nl API.

Inhoudsopgave

Beschrijving

Op deze squadpage zijn alle squadleden van squad 1D te bekijken. Je kan op elk individueel kaartje klikken om meer informatie over deze persoon te lezen en om een bericht achter te laten! Daarnaast kan je een leuke game spelen waarin je strijdt tegen je medeklasgenoten zodra je op "Start Game" hebt geklikt.

Homepage

image

Game

image

Klik hier om de squadpage zelf te bekijken!

Kenmerken

Voor deze website is gebruik gemaakt van Node, Express en EJS. Node maakt het mogelijk om server-side gebruik te maken van Javascript.

Express is een webapplicatieframework voor Node.js. Het wordt vaak gebruikt in combinatie met Node voor het bouwen van webapplicaties en API's. Door het gebruiken van Express in combinatie met Node kun je makkelijker routes definiëren en HTTP verzoeken afhandelen.

EJS, ook wel Embedded Javascript, is een template-engine voor Node.js en JavaScript. EJS laat toe om direct in de HTML-bestanden stukjes Javascript te gebruiken zoals een loop om gegevens uit een database te tonen. EJS neemt deze code en maakt er uiteindelijk HTML van dat naar de browser wordt gestuurd, zodat gebruikers de webpagina kunnen zien zoals bedoeld.

Installatie

  1. Fork deze repository
  2. Clone de repository op eigen apparaat
  3. Gebruik editor naar keuze

Gebruik

Om deze pagina te bekijken kan je klikken op de livelink in de About sectie van deze repository.

Bronnen

Licentie

This project is licensed under the terms of the MIT license.

connect-your-tribe-squad-page's People

Contributors

koopreynders avatar annevd avatar daan645 avatar ju5tu5 avatar

connect-your-tribe-squad-page's Issues

Ontwerpfase nog beter maken?

Om je ontwerpfase nog beter te maken adviseer ik je om te kijken naar Figma. Figma is een webtool waarmee je web- en mobiele interfaces kunt ontwerpen. Het helpt je met het bouwen van je websites.

Dit is een artikel die mij heeft geholpen met de introductie van Figma en het geeft je een beginner tutorial: https://designlab.com/figma-101-course/introduction-to-figma

Paar voordelen van Figma:

  1. Je hebt toegang tot ontwerpmiddelen, opmerkingen, prototypen en animaties.

  2. Het maak gebruik van code-implementatie.

  3. Met de CSS-generatie kan je moeiteloos codefragmenten rechtstreeks uit de ontwerpbestanden kopieren.

Pseudo element ipv div

Feedback:

Je kan pseudo elementen in css gebruiken in plaats van een div voor de overlay. Dit kan bijvoorbeeld zo:
.container-wrapper::before {
content: "";
}

form ipv div

Gebruik een

in plaats van een
voor de 's. Bronnen:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.