Loading...
Tr00peR avatar Tr00peR 566 Точки

[Homework] HTML Tables

LINK към GitHub

Ще се радвам на всякакви забележки и препоръки, защото все още ми е малко тъмен тоя HTML и най-вече CSS-a. :)

За всяка задача съм изнесъл стила в отделен файл в папка styles.

 

ЕДИТ - Подробен гайд за калкулатора

10
Web Fundamentals - HTML5
georgi950 avatar georgi950 53 Точки
Best Answer

Ето от мен всички задачи(включително със звездичките) - Homework

 

Първа задача при мен има проблем под google Chrome, но под firefox е добре. Всички други работят добре под Chrome.

Не съм отделил CSS от HTML във всички задачи понеже не сме го учили и да е по-разбираемо за всички.

За 7 задача съм използвам JQuery, за по-лесно.

Поздрави!

 

5
Tr00peR avatar Tr00peR 566 Точки

Колега, на шеста задача си забравил да сложиш линкове към бутоните.

0
georgi950 avatar georgi950 53 Точки

Не бях прочел хубаво условието. Оправих го. :)

0
jabalka avatar jabalka 960 Точки

Здравейте.

Поствам и аз кода на решенията на задачите от домашното.

Решени са и тези със звездички. Всички стилове са извадени в .css файлове.

 

EDIT: Добавих preview на качените вече в интернет странички, за по-добра прегледност, по примера на колегите.

 

01/ Simple table Preview     HTML    CSS

02/ Exam Results Preview     HTML     CSS

03/ Nested Tables Preview     HTML     CSS

04/ Website Header Preview     HTML     CSS

edit: Пак се заиграх - понапудрих още малко Hover-a на падащите менюта :)

05/ Life in SoftUni Preview     HTML     CSS

06/ Life in SoftUni Keyboard Preview     HTML     CSS

edit: Поправих грешка в адресирането на бутоните и добавих малко пудра

07/ Calculator Preview     HTML     CSS

 

edit: Специално за колегата Ludmil.D това е линкът към главната директория на репото, съдържаща целия проект с всички ресурси

 

Всички задачи без четвърта сме решавали заедно с колегата Кико - да се знае.

Четвърта задача е лично творчество :)

На четвърта се постарах да докарам същите стилове като на картинката. Голяма играчка, но пък доста забавно :) Падащите менюта също работят. Линковете са към реалните страници. Единствено hover-а на падащите менюта директно ги отваря, вместо да се изисква клик. Но това май трябва да стане с JavaScript, който за сега не владея... :) За сега ;)

edit: бях забравила стрелкичките на падащите менюта - добавих ги.

Приемам въпроси и коментари :)

 

Дано ви е полезно!

26
Ludmil.D avatar Ludmil.D 41 Точки

Много интересно решение за заобляне на лупата:) точно го мъча и реших да проверя какво са сътворили колегите...
та малко в страни .. Нали сме модерни хора и ползваме Git/SVN съответно clone/check out би ни помогнало да копираме поне html/css filе-a но често има и други ресурси както виждаме images разни.. та:
моля да слагаме и директорията на проекта , която поне за мен не винаги е очевидната (обикновенно има git.ignore, доста се фрустрирах като не можах да сваля фаила с CLONE , а то просто не работиточно така...;) ) ама не във всички случаи така може по интерактивно да се разцъкат нещата JSfiddle най-добре... едит:за позлване на външни ресурси като картинки те трбява да са уплоаднати в клауд-а и да се даде съответно url към тях  

just sayn' с най-добри чувства и благодаря за хелп-а:)
arrow to the <code>

0
jabalka avatar jabalka 960 Точки

Здравей.

Ако се върнеш една папка нагоре нагоре в GitHub-a (ще се намираш в папка 02-HTML-Tables) ще видиш папка images - там са всички използвани ресурси. 

Ето линк, за по-лесно.

Ако имаш желание, направо може да си свалиш съдържанието на цялото репо, което е целият solution. Как да стане това:

1/ Навигираш още една папка нагоре, за да се намираш в папката SoftUni-HTML-HWRK-Tables

2/ Долу в дясно на екрана има бутон - Download ZIP

3/ Разархивираш и стартираш .sln файла и целият ми проект ще е при теб с всички ресурси, всички връзки ще ти работят и т.н.

 

Ако имаш въпроси по стъпките - пиши ми :)

Ако има неясноти кое как е направено в кода - на разположение съм.

 

Поздрави!

4
apelev avatar apelev 16 Точки

Всичко е много полезно! Аз лично гледам доста неща, как се правят, от твоето домашно.

С калкулатора се заиграх случайно, и забелязах, че не смята правилно. Ако дадеш рефреш на страницата и 0-лата която седи на "дисплея" по подразбиране е "сива"- всичко се смята нормално. Ако обаче натиснеш "C" бутона, нулата става черна и вече калкулатора започва да смята грешно.

1
jabalka avatar jabalka 960 Точки

@Tr00peR

Чудесен ти е кодът.

Единствено бих препоръчала да си подредиш малко .css файловете. Може да направиш две неща:

1/ За четимост да изписваш пълния път до елемента, който адресираш - на пример в .css-а на задача 1 - вместо "thead" да напишеш "table thead".

2/ Прието е когато един елемент е по-малък, child, на по-горе, да отстъпи с една табулация вдясно - както е при таговете в html-a. В твоя случай "table thead{...}" трябва да мине вдясно с една табулация, защото е child на "table".

 

Това е. Успех със звездичките!

п.п.Извинете за двата поста - явно много ми се спи вече и така.... Можеше в един да включа всичко...

4
Tr00peR avatar Tr00peR 566 Точки

Благодаря за коментара!

И един въпрос - 2рата точка (за табулацията при по-малък елемент) от къде си я видяла? Защото аз досега по гайдовете не съм срещнал подобен стил (не че много съм гледал де).

0
jabalka avatar jabalka 960 Точки
Имам спомен, че съм го гледала в лекция на Телерик. Също вчера колеги асистенти обясняваха това подреждане на други колеги.
1
Tr00peR avatar Tr00peR 566 Точки

Ок мерси

0
coaster avatar coaster 412 Точки

<Четвърта задача> + <CSS>

и как се показва в браузър: <picture>

А стрелкичките и другите неща трябва ли да са clickable и евентуално да извършват нещо? Или това е по собствено желание?

едит: оправих ги нещата :)

1
jabalka avatar jabalka 960 Точки

"The menu buttons must work (open some URL). Making the menu with a dropdown functionality is optional." - т.е. менюто ти трябва да работи - да се клика и да отваря нещо. Иначе падащото меню е по желание.

4
GoShow avatar GoShow 595 Точки

Засега само задължителните, звездичките - TODO :)

домашнооооо

Edit: всички задачи са готови.

3
nikolay.dimov83 avatar nikolay.dimov83 143 Точки

Смених линка с работещ: http://pastebin.com/gfxJ3CGT

 

Задача 5 - имате ли някаква идея защо Food не иска да си смени вертикалната центровка по никакъв начин:

http://pastebin.com/NZZpSDKv

 

CSS не използвам нарочно.

0
jabalka avatar jabalka 960 Точки

"This paste has been removed!" ...?!?

п.п. Колега, бих препоръчала като слагаш линк от падащото меню да избираш target > new window. Все пак е въпрос на личен избор, разбира се :)

Поздрави!

2
pichowskii avatar pichowskii 37 Точки
Здравей колега, На 4та задача ти липсва бутона за нотификациите с камбанката.
0
apelev avatar apelev 16 Точки

Аз лично използвах <button onclick="window.open('https://www.google.com/')">Google</button>
Нямам представа, каква е разликата, ама просто е по-кратко

0
ZvetanIG avatar ZvetanIG 907 Точки

window.open('https://www.google.com/') - това е фрагмент от javaScript, другото е HTML.  След като поекспериментирах с различни браузъри, бих казал че <button onclick="window.open('https://www.google.com/')">Google</button>  работи по-добре.

А относно 4 задача - в условието е споменато, че не се изисква 100% точност.  

0
HPetrov avatar HPetrov 822 Точки

Аз ще добавя само 4-та задача за Site Header-а, че за нея най-много време отделих и много се кефя на резултата :)


-->Site Header<--

Edit: За максимален ефект разширете броузера на full screen и разширете в JSFiddle поленцата така, че да разтегне както трябва header-а.

5
coaster avatar coaster 412 Точки

Супер е, изчистено и спретнато. Браво за dropdown менютата - изглеждат лесни за правене, а всъщност май не са чак толкова.

1
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.