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

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

Redesign je visitekaartje op basis van een bestaande API.

Home Page: https://pleasant-overcoat-crow.cyclic.app/

License: MIT License

JavaScript 45.08% CSS 33.07% EJS 21.85%

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

Feedback Fatih:

Prima opzet
Je weet wat je moet doen met de API
Gooi alleen wat meer creativiteit in je opdracht. Het lijkt zo saai....

Je maakt geen gebruik van custom properties. Door het gebruiken van custom properties kan je eenvoudige het design aanpassen op 1 plek zonder dat je op verschillende plekken dezelfde aanpassing moet doen.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Top : Data uit API halen

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

Lines 17 to 19 in 49bd534

    
           <li><a href="tel:<%= data.phone_number %>"> <%= data.phone_number%> </a></li> 
        
           <li><a href="mailto:<%= data.email %>"> <%= data.email %> </a></li> 
        
           <li><a href="https://github.com/KaanKalmi"> <%= data.github_handle %> </a></li>

Volgendsmij heb je dit al goed door, nice dat je het gebruikt voor je contactgegevens.

Main element en vervang divs voor sections

https://github.com/KaanKalmi/connect-your-tribe-profile-card/blob/49bd53432ad2f11016e165fc5ce2b01186f7804a/views/index.ejs#L2C1-L23C1

Probeer je divs te vervangen voor sections dit zal beter zijn voor de toegankelijkheid van je website.

https://forum.freecodecamp.org/t/trying-to-understand-the-difference-between-section-and-div/589106

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

fluctuating TBT

Total Blocking Time fluctuates between:
1010ms to 670ms
all improvement options given by lighthouse added, but its still loading slow?

Geen <html> in je head.ejs

connect-your-tribe-profile-card/views/partials/head.ejs

Lines 1 to 17 in f6e169d

    
           <head> 
        
             <meta charset="UTF-8"> 
        
             <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        
             <script defer src="interaction.js"></script> 
        
             <link rel="stylesheet" href="style.css"> 
        
             <title>Visite kaart</title> 
        
           </head> 
        
           <body> 
        
             <div class="container"> 
        
               <div class="card"> 
        
                 <section class="front"> 
        
                   <img src="<%= data.avatar%>"> 
        
                   <header> 
        
                     <h1> <%= data.name %> <%= data.surname %>  </h1> 
        
                     <h2> <%= data.nickname%> </h2> 
        
                   </header> 
        
                </section>

Je hebt geen <html> in je head.ejs staan, daarom ook geen lang en geen <!DOCTYPE html>.
Je hebt hem wel afgesloten bij je foot.ejs

alt tekst

Foutomschrijving:
Je bent bij regel 5/12 alt tekst vergeten te schrijven.

Huidige code:

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

Line 5 in 49bd534

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

Line 12 in 49bd534

Oplossing:
Alt tekst schrijven :)

Geen <lang>

connect-your-tribe-profile-card/views/partials/head.ejs

Lines 1 to 7 in f6e169d

    
           <head> 
        
             <meta charset="UTF-8"> 
        
             <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        
             <script defer src="interaction.js"></script> 
        
             <link rel="stylesheet" href="style.css"> 
        
             <title>Visite kaart</title> 
        
           </head>

Je hebt geen <lang> in de header

Geen <!DOCTYPE html>

connect-your-tribe-profile-card/views/partials/head.ejs

Lines 1 to 7 in f6e169d

    
           <head> 
        
             <meta charset="UTF-8"> 
        
             <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        
             <script defer src="interaction.js"></script> 
        
             <link rel="stylesheet" href="style.css"> 
        
             <title>Visite kaart</title> 
        
           </head>

Er staat nergens een <!DOCTYPE html> in je html

Tip : Designwijze Textvormgeving en leesbaarheid

https://www.hotjar.com/conversion-rate-optimization/glossary/website-readability/

Lees hier waarom het belangrijk is en hoe je dit kunt verbeteren.

Probeer je contactgegevens en quote bijvoorbeeld wat groter op het scherm te zetten zodat het beter leesbaar is voor de gebruiiker. Textvormgeving is belangrijk dus hier kan je wat meer aandacht aan besteden als je wilt.

Grab cursor op kaartje

Je cursor word een grab wanneer je op je profile card gaat. Waarschijnlijk heeft dit te maken met de audio die je erop heb gezet?

Beter in index.ejs?

connect-your-tribe-profile-card/views/partials/head.ejs

Lines 9 to 17 in f6e169d

    
           <div class="container"> 
        
             <div class="card"> 
        
               <section class="front"> 
        
                 <img src="<%= data.avatar%>"> 
        
                 <header> 
        
                   <h1> <%= data.name %> <%= data.surname %>  </h1> 
        
                   <h2> <%= data.nickname%> </h2> 
        
                 </header> 
        
              </section>

Weet niet of het handig is om dit stukje code van je kaartje in je head.ejs te stoppen. Kan dit niet beter in je index.ejs. Ik weet niet of het de bedoeling was om theoretisch dit bij al je pagina's te gebruiken. correct me if I'm wrong.

Article i.p.v section?

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

Lines 2 to 13 in f6e169d

    
           <section class="back"> 
        
             <img src="<%= data.avatar %>"> 
        
             <header> 
        
               <h1> <%= data.name %> <%= data.prefix %> <%= data.surname %> </h1> 
        
             </header> 
        
             <ul> 
        
               <li><a href="tel:<%= data.phone_number %>"> <%= data.phone_number%> </a></li> 
        
               <li><a href="mailto:<%= data.email %>"> <%= data.email %> </a></li> 
        
               <li><a href="https://github.com/KaanKalmi"> <%= data.github_handle %> </a></li> 
        
             </ul> 
        
             <blockquote> <%= data.bio %> </blockquote>  
        
           </section>

Kan dit niet beter in een <article> inplaats van een <section>, omdat het kaartje alleen staand is?

	<li><a href="tel:<%= data.phone_number %>"> <%= data.phone_number%> </a></li>
	<li><a href="mailto:<%= data.email %>"> <%= data.email %> </a></li>
	<li><a href="https://github.com/KaanKalmi"> <%= data.github_handle %> </a></li>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script defer src="interaction.js"></script>
	<link rel="stylesheet" href="style.css">
	<title>Visite kaart</title>
	</head>
	<body>
	<div class="container">
	<div class="card">
	<section class="front">
	<img src="<%= data.avatar%>">
	<header>
	<h1> <%= data.name %> <%= data.surname %> </h1>
	<h2> <%= data.nickname%> </h2>
	</header>
	</section>

	<section class="back">
	<img src="<%= data.avatar %>">
	<header>
	<h1> <%= data.name %> <%= data.prefix %> <%= data.surname %> </h1>
	</header>
	<ul>
	<li><a href="tel:<%= data.phone_number %>"> <%= data.phone_number%> </a></li>
	<li><a href="mailto:<%= data.email %>"> <%= data.email %> </a></li>
	<li><a href="https://github.com/KaanKalmi"> <%= data.github_handle %> </a></li>
	</ul>
	<blockquote> <%= data.bio %> </blockquote>
	</section>

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

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

Titel

Inhoudsopgave

Beschrijving

Kenmerken

Installatie

Gebruik

Bronnen

Licentie

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

Contributors

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

Recommend Projects

Recommend Topics

Recommend Org