Arboreal Del 1

Hejsan!

Jag har skapat en hemsida får Arboreal som är en prenumerationstjänst för företag. De hjälper företag att dekorera sina kontor med fina växter som man sedan betalar varje månad får att få in nya samt förnya det gamla, man får extra enheter beronde på vilken abonemang man köper.

Jag har skapat en HTML,CSS,JS fil samt lagt till ett par bilder får att snygga till det lite. var god kolla igenom koden och se ifall du fann några fel eller något jag kunde fårbättra :).

Validering:

HTML:

Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

From line 142, column 2; to line 142, column 23

(Använder IMG här istället för en heading)

CSS:

Gratulerar Inga fel hittades.

M.V.H Ahmet Ordulu.

Feedback från Arboreal Del 1

Förslag på feedbackpunkter:

Är HTMLen logiskt upplagd, korrekt indenterad och lättläst?

• HTML är bra skriven, gÃ¥r lätt att följa och varje DIV är bra namngiven.
• Möjligvis att det saknas nÃ¥gon märkning i FORM 142-169. Klipper in lärarens exempel Add Todo

Är CSSen logiskt upplagd, korrekt indenterad och lättläst?

• JA, det är lätt att hänga med och vad som ska gÃ¥ vart. Allt kommer i rätt ordning.

Tydlig namngivning av klasser så att man förstår vad det är som stylas? -JA,

Finns det överflödig CSS? För många selektorer eller för specifika selektorer? Upprepande av egenskaper i CSSen?

• Möjligen att H1-H3 har samma styling flera gÃ¥nger.
• Tycker inte att de är överdivet mÃ¥nga selektorer.
• Blandat PX och REM, tydligaste stället är 431 och 434.

Är gränssnittet (designen) tydligt indelad och lättanvänd?

• JA, Gillar mjuka bläddringen ner pÃ¥ sidan samt den exlusiva hover funktionen rad 257-279.

Finns det ändringar i designen som skulle kunna underlätta användandet av sidan?

• Jag skulle lÃ¥ta varje Theme fÃ¥r mer plats och ge dem chansen att visa vad som skiljer dem Ã¥t. Du fick priserna att skilja sig sÃ¥ lÃ¥t theme göra det samma?

Öka kontrasterna på sidan? Använd mer marginaler/padding för att göra saker luftigare?

• Känns som samma frÃ¥ga som Ã¥van

Finns det element som är ojämnt centrerade etc.?

• Ser ut som att loggan har tappat sin "form". Skall vara kvadratisk.

Övriga synpunkter

• Funderar pÃ¥ om "About us" är mer för oss sÃ¥ vi förstÃ¥r föreaget och vad de vill nÃ¥ ut med än info för hemsidan.

Arboreal del 2

Jag använder flexbox för att strukturera sidan samt göra det enklare för mig att använda media queries när det kommer till tablet och mobila enheter. jag använder mig utav media-queries för samtliga bildskärmar(desktop, tablet, mobil) see css-filen.

BreakPoints:

1024px: gör headern lite mindre samt font storleken och att container klassen inte kramar sidoväggen.

900px: gömmer huvudloggan och gör navbar storleken lite mindre så att den inte tar så mycket plats

480px: gör font storleken ännu mindre för smalla skärmar liksom de äldra versionerna av smartphones.

Responsiv Mönster:

Jag har utgått från mostly fluid för att göra det så mycket responsiv som möjligt jag använde desstuom ett par max-width breakpoint som går allt från mobil anpassat till desktop skärmar, ett exempel kan vara att huvudloggan inte syns på mobil anpassade enheter.

Feedback:

då jag inte fick så mycket kritik så följde jag den feedback jag fick när det handla om theme sektionen så jag ändrade lite och gav varje tema lite mer plats samt en bild om hur den ser ut när man hover. förutom det så var det ochså att jag hade både px på vissa ställen och inte rem men jag behövde de exakta värden för att hålla alla på bättre plats.

Fungerande Browsers:

Firefox Chrome Android IOS Microsoft Edge Internet Explorer 11,10,9