vikkeyeftimov / connect-your-tribe-profile-card Goto Github PK

This project forked from fdnd-task/connect-your-tribe-profile-card

0.0 0.0 0.0 780 KB

Redesign je visitekaartje op basis van een bestaande API.

Home Page: https://dizzy-calf-fedora.cyclic.app

License: MIT License

JavaScript 30.69% CSS 29.37% EJS 39.94%

connect-your-tribe-profile-card'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

Titel

Beschrijving

Kenmerken

Installatie

Gebruik

Bronnen

Licentie

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

connect-your-tribe-profile-card's People

Contributors

connect-your-tribe-profile-card's Issues

CSS opmerkingen

.first-slide{
  p{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: var(--fontpsize);
  }
}

Is de P hier niet een nested property? je hoort het namelijk als & p{...} te noteren!

Live link werkt niet

Ik kon je site niet checken via html validator, je live URL werkt namelijk niet double check je cyclic!

Duplicated ID

connect-your-tribe-profile-card/views/index.ejs

Line 72 in 7c69847

    
           <button class="terug-button"><?xml version="1.0" ?><svg id="return-back-redo-arrow" style="enable-background:new 0 0 15.207 10.854;" version="1.1" viewBox="0 0 15.207 10.854" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M11.707,0h-4v1h4c1.378,0,2.5,1.122,2.5,2.5S13.085,6,11.707,6H1.914l3.146-3.146L4.354,2.146L0,6.5l4.354,4.354  l0.707-0.707L1.914,7h9.793c1.93,0,3.5-1.57,3.5-3.5S13.637,0,11.707,0z"/></svg>

In je code gebruik je meerdere keren het ID: return-back-redo-arrow .

Je kunt hier een class van maken of verschillende ID. Een ID hoort namelijk uniek te zijn, als je meerdere elementen de zelfde styling wilt laten gebruiken kun je beter een class gebruiken.

Hier kun je meeer lezen over het verschil en gebruik van ids en classes:https://www.bestcolleges.com/bootcamps/guides/css-class-vs-id/#:~:text=You%20should%20use%20a%20class,They%20are%20not%20unique.

Geen heading element in je article

connect-your-tribe-profile-card/views/index.ejs

Lines 3 to 7 in 7c69847

    
           <article class="artikel"> 
        
           <!-- START HOMESCREEN --> 
        
           <section class="first-slide">

Je hebt hier geen heading staan in je article wat wel nodig is.

Oplossing:
de article een heading geven of een div ervan maken als je geen heading wilt.

Onnodige class

https://github.com/Vikkeyeftimov/connect-your-tribe-profile-card/blob/7c6984744bbbf7c1d7dbc2012b87f89e921db915/views/index.ejs#L3C1-L3C26
Je hebt en onnodige class toegevoegd op article

Je zou de article zelf kunnen stylen op deze maanier article{ } aangezien je voor de rest geen articles gebruikt dit scheeelt code.

Structureer je code met tab

connect-your-tribe-profile-card/views/index.ejs

Lines 1 to 87 in 7c69847

	<%- include('./partials/head') %>

	<article class="artikel">

	<!-- START HOMESCREEN -->

	<section class="first-slide">

	<h1>Viktor Eftimov</h1>
	<h2>profile card</h2>

	<img class="prachtimagen" src="prachtfoto.jpeg" alt="prachtige foto van Viktor Eftimov" width="190">

	<p>Hallo en welkom bij mijn vistiekaartje! Ik ben een jonge Frontend designer die veel repect en nieuwsgierigheid hebt voor het maken van website. wil je meer over mij weten klik dan op één van de knoppen die zou je dan meer over mij vertellen.
	</p>
	<div class="buttonselector">
	<button class="hobbies-button">Hobbies</button>
	<button class="persoonlijk-button">Persoonlijk informatie</button>
	<button class="skills-button">Skills</button>
	</div>
	</section>

	<!-- END HOMESCREEN -->
	<!-- START FIRSTSLIDE -->

	<section class="specialehobbies">

	<h2>Hobbies</h2>
	<button class="terug-button"><?xml version="1.0" ?><svg id="return-back-redo-arrow" style="enable-background:new 0 0 15.207 10.854;" version="1.1" viewBox="0 0 15.207 10.854" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M11.707,0h-4v1h4c1.378,0,2.5,1.122,2.5,2.5S13.085,6,11.707,6H1.914l3.146-3.146L4.354,2.146L0,6.5l4.354,4.354 l0.707-0.707L1.914,7h9.793c1.93,0,3.5-1.57,3.5-3.5S13.637,0,11.707,0z"/></svg>
	Terug</button>
	<ul>
	<li>Voetbal⚽</li>
	<li>Gamen🎮</li>
	<li>Gymmen🏋️‍♀️</li>
	<li>Hardlopen🏃</li>
	<li>Feesten🥂</li>
	<li>Films kijken🎬</li>
	</ul>

	</section>

	<!-- END FIRSTSLIDE -->
	<!-- BEGIN SECONDSLIDE -->

	<section class="persoonlijk">
	<h2>Persoonlijk informatie</h2>
	<button class="terug-button"><?xml version="1.0" ?><svg id="return-back-redo-arrow" style="enable-background:new 0 0 15.207 10.854;" version="1.1" viewBox="0 0 15.207 10.854" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M11.707,0h-4v1h4c1.378,0,2.5,1.122,2.5,2.5S13.085,6,11.707,6H1.914l3.146-3.146L4.354,2.146L0,6.5l4.354,4.354 l0.707-0.707L1.914,7h9.793c1.93,0,3.5-1.57,3.5-3.5S13.637,0,11.707,0z"/></svg>
	Terug</button>
	<dl>
	<dt>Geboorte:</dt>
	<dd>12-01-2005</dd>
	<dt>Lengte:</dt>
	<dd>1.86m</dd>
	<dt>Nickname:</dt>
	<dd>Vikkey</dd>
	<dt>Telefoon_nummer:</dt>
	<dd>0643479034</dd>
	<dt>Email:</dt>
	<dd>[email protected]</dd>
	<dt>Woonplek:</dt>
	<dd>Amstelveen</dd>
	<dt>Opleiding:</dt>
	<dd>Havo</dd>
	</dl>
	</section>

	<!-- END SECONDSLIDE -->
	<!-- BEGIN THIRDSLIDE -->

	<section class="skills">
	<h2>Skills</h2>
	<button class="terug-button"><?xml version="1.0" ?><svg id="return-back-redo-arrow" style="enable-background:new 0 0 15.207 10.854;" version="1.1" viewBox="0 0 15.207 10.854" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M11.707,0h-4v1h4c1.378,0,2.5,1.122,2.5,2.5S13.085,6,11.707,6H1.914l3.146-3.146L4.354,2.146L0,6.5l4.354,4.354 l0.707-0.707L1.914,7h9.793c1.93,0,3.5-1.57,3.5-3.5S13.637,0,11.707,0z"/></svg>
	Terug</button>
	<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JAVASCRIPT</li>
	<li>Schoonmaken🪣</li>
	<li>luisteren naar andere👂</li>
	<li>frisbeeen🥏</li>
	</ul>
	</section>

	<!-- END THIRDSLIDE -->

	</article>
	<%- include('./partials/foot') %>

Je kunt je code beter structureren met tab daardoor wordt het overzichtelijker en makkelijker te lezen.

Je kunt dit op een makkelijke manier doen doormiddel van een plug-in genaamd prettier hier kun je zien hoe je het kan installeren: https://www.youtube.com/watch?v=Gmz27agvLYg

schrijf je code in 1 taal

connect-your-tribe-profile-card/views/index.ejs

Line 16 in 7c69847

connect-your-tribe-profile-card/views/index.ejs

Line 26 in 7c69847

connect-your-tribe-profile-card/views/index.ejs

Line 3 in 7c69847

connect-your-tribe-profile-card/views/index.ejs

Line 7 in 7c69847

Probeer je class names en comments in 1 taal te schrijven. Dit is wat netter en maakt het in de toekomst makkelijker als je met andere mensen werkt die bijv. geen nederlands kunnen.