В борбата с бъдещия изпит по CSS :)

Та с наближаването на изпита по CSS реших да пусна тази статия, в която в която да събера всичко, което ще използвам като помощни инструменти и трикове. Та ето списъка:

1. Instant eyedropper – омръзнало ли ви е да теглите 1 кило приставки за браузъри или да отваряте Photoshop всеки път когато трябва да вземете някой цвят ? Ако да, това е едно от вашите спасения 🙂 С помощта на този tool това става само с няколко кликания и драгвания на мишката.

Този tool ми бе препоръчан и показан от колегата Svilen_Ivanov и отдавам цялата заслуга за намирането му на него. Ето и темата която той пусна навремето в форума на Телерк Академи цък.

Така че ако го нямата ви съветвам да го свалите – улеснява доста селектирането на цветове 🙂

Може да го свалите от тук: http://instant-eyedropper.com/

2. Firebug Lite for Chrome – т.к. главно използвам Firefox за мой браузър и там главния ми инструмент при проверка на HTML/CSS ми е Firebug се чувствах доста странно когато ми се наложи да използвам Dev Tools на Chrome. Като цяло този add-on добавя малко орязана версия на Firebug за Chrome и позволява на тези от нас който са свикнали с Firebug да използват основните му функции и в Chrome.

Може да го свалите от тук: Цък.

3. Web developer tool bar – ако нямате това разширение горещо ви препоръчвам да си го сложите. Т.к. функциите тук са доста ще ви покаже някои от основните който могат да ви помогнат за предстоящия изпит:

3.1. Меню Tools:

Както виждате тук ни се предоставят най-различни опции за валидация и други благинки. Край на досадното copy paste -> валидатор, просто цъкаме на валидирай и сме готови 🙂

3.2. Resize –

Тук ни се предоставят доста възможности за прегледн на Уеб Сайта ни в различна обстановка. Примерно ако цъкнем на View Responsive Layouts ни показва сайта ни в най-различни резолюции или даже имаме предифинарана резолюция за 1024×768 – резолюцията на която ще се тестват нашите произведения от изпита.

3.3. Outline – очертава най-различни видове елементи за по-добро визуално представяне ( float-нати, с определена позиция и т.н. )

3.4. Miscellaneous – може би най-полезният инструмент тук е Display Ruler с който може да измервате големината на елементите 🙂  ( Забележка – Хром нещо не иска да прилага този инструмент в/у снимки. Ако някой знае решение да пише в темата )

Ето един пример: Цък.

3.5. Information – много подменюта, като от тях най-много ми хареса Display Color Information – показва ви всички цветове на страницата 🙂

Пример – всички цветове на страницата на студентската система: Цък.

Може да го свалите от тук: Цък.

4. Как лесно да сравни сайта ни с картинката предоставена на изпита ? – прост в един таб отворете картинката, а в другия до него вашето творение – преминавайте от единия таб към другия за да видите разликте.

Та това е от мен, ако се сетя за още нещо ще го добавя и дано тези ви помогната в борбата с бъдещия изпит 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s