1 Тема від Nick9956

  • Nick9956
  • Користувач
  • Поза форумом
  • Дата реєстрації: 05.03.2015
  • Повідомлень: 297
    • Репутація: 56

Тема: Пиши код як профі

Якщо серед Вас є досвідчені веб-розробники, мені хотілося б почути, як Ви пишете код ?
З чого починаєте ? Як правильно писати код, щоб не загромаджувати файл непотрібними стрічками коду ?
Є якісь секрети чи ні ?

Дякую

2 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Пиши код як профі

Вам цікаво конкретно як пишуть код html+css ?

Подякували: leofun011

funivan вебсайт

3 Відповідь від Nick9956 Востаннє редагувалося Nick9956 (03.01.2017 19:55:04)

  • Nick9956
  • Користувач
  • Поза форумом
  • Дата реєстрації: 05.03.2015
  • Повідомлень: 297
    • Репутація: 56

Re: Пиши код як профі

funivan написав:

Вам цікаво конкретно як пишуть код html+css ?

як правильно створювати веб-сторінку ? зокрема адаптивну ?
Що краще використовувати: bootstrap чи просто media запити ?

КОЛИ у Вас є уже макет photoshop, що робити далі ? як правильно розміри задавати, відсути
Відступи краще у px чи % ?

як досягнути мінімалізму у коді

4 Відповідь від Monolith Востаннє редагувалося Monolith (03.01.2017 20:28:01)

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Пиши код як профі

Nick9956 написав:

Якщо серед Вас є досвідчені веб-розробники, мені хотілося б почути, як Ви пишете код ?
З чого починаєте ? Як правильно писати код, щоб не загромаджувати файл непотрібними стрічками коду ?
Є якісь секрети чи ні ?

Дякую

Я не досвідчений веб-розробник, але напишу. Вчуся просто переглядаючи різні відео на YouTube, читаючи різноманітні сайти присвячені HTML/CSS. З кожним разом дізнаюся щось нове. Книги, де б показувалося все з А до Я - немає. Можливо - це титанічна праця, описати всі ці нюанси. Скоріше за все, просто веб-технології так швидко розвиваються, що після виходу тієї книги - вона стане вже неактуальна.

Самому б хотілося знайти такий ресурс, де б все пояснювалося. Але зрозуміло, що все стає зрозумілим під час практики. Пробувати верстати самостійно, дивитися/читати уроки. Якщо щось не зрозуміло, то питати. Наприклад, цей форум. Якщо видно, що людина старається, щось пише, але запнулася - ми радо допоможемо. Та й вчитися разом веселіше. Тому бажаю успіху автору у навчанні!  *DRINK*

Подякували: 221VOLT1

5 Відповідь від Nick9956

  • Nick9956
  • Користувач
  • Поза форумом
  • Дата реєстрації: 05.03.2015
  • Повідомлень: 297
    • Репутація: 56

Re: Пиши код як профі

misha_bondar_2012 написав:
Nick9956 написав:

Якщо серед Вас є досвідчені веб-розробники, мені хотілося б почути, як Ви пишете код ?
З чого починаєте ? Як правильно писати код, щоб не загромаджувати файл непотрібними стрічками коду ?
Є якісь секрети чи ні ?

Дякую

Я не досвідчений веб-розробник, але напишу. Вчуся просто переглядаючи різні відео на YouTube, читаючи різноманітні сайті присвячені HTML/CSS. З кожним разом дізнаюся щось нове. Книги, де б показувалося все з А до Я - немає. Можливо - це титанічна праця, описати всі ці нюанси. Скоріше за все, просто веб-технології так швидко розвиваються, що після виходу тієї книги - вона стане просто вже неактуальна.

Самому б хотілося знайти такий ресурс, де б все пояснювалося. Але зрозуміло, що все стає зрозумілим під час практики. Пробувати верстати самостійно, дивитися/читати уроки. Якщо щось не зрозуміло, то питати. Наприклад, цей форум. Якщо видно, що людина старається, щось пише, але запнулася - ми радо допоможемо. Та й вчитися разом веселіше. Тому бажаю успіху автору у навчанні!  *DRINK*


дякую за відповідь,
якщо вже на те пішло, є питання одне
Потрібно зробити веб-сторінку, на якій відображатимуться тести з кількома відповідями, але потрібно що б черга тестів змінювалася. як це краще зробити ? функцією ? а як саме ?

Подякували: 221VOLT1

6 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Пиши код як профі

Потрібно зробити веб-сторінку, на якій відображатимуться тести з кількома відповідями, але потрібно що б черга тестів змінювалася. як це краще зробити ? функцією ? а як саме ?

Краще це робити на сервері і видавати різні питання користувачу.
Якщо на клієнті - тоді через javascript

Подякували: 221VOLT1

funivan вебсайт

7 Відповідь від Monolith Востаннє редагувалося Monolith (03.01.2017 20:14:01)

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Пиши код як профі

Мій невеличкий список цікавих інтернет-ресурсів:

Частенько їх навідую. Тільки якась нова стаття, вже можна щось нове дізнатися...Хтось ще знає якісь цікаві сайти?

Подякували: 221VOLT, 0xDADA11C7, ostap34PHP3

8 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Пиши код як профі

Nick9956 написав:
funivan написав:

Вам цікаво конкретно як пишуть код html+css ?

як правильно створювати веб-сторінку ? зокрема адаптивну ?
Що краще використовувати: bootstrap чи просто media запити ?

КОЛИ у Вас є уже макет photoshop, що робити далі ? як правильно розміри задавати, відсути
Відступи краще у px чи % ?

як досягнути мінімалізму у коді

Всі ваші питання легко гугляться. Заходите на www.google.com.ua/ і пішло-поїхало! Заходите на той же YouTube - шукаєте якийсь відеоурок з прикладом верстки - і все.

Подякували: 221VOLT, ostap34PHP2

9 Відповідь від Monolith Востаннє редагувалося Monolith (03.01.2017 20:26:08)

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Пиши код як профі

Nick9956 написав:

дякую за відповідь,
якщо вже на те пішло, є питання одне
Потрібно зробити веб-сторінку, на якій відображатимуться тести з кількома відповідями, але потрібно що б черга тестів змінювалася. як це краще зробити ? функцією ? а як саме ?

Тут треба використовувати мову програмування. HTML і CSS - не мови програмування, а тільки мови розмітки.
Так ви можете і на них зверстати собі тести. Але це будуть просто кнопочки і текст. Щоб перевіряти відповіді користувача, виводити результат - треба вже мова програмування. Тут на вибір. Найпростіший варіант - JavaScript. Або той же PHP/Python/Ruby тощо. Загалом вибір величезний. Все залежить від вашої цілі. Хоча всі схожі розрахунки, як перевірка якихось важливих даних(у вас тест важливий? :) ), треба виконувати на сервері. Тобто і використовувати треба серверну мову програмування.

Ось вам пару посилань:
https://uk.wikipedia.org/wiki/Клієнт-се … рхітектура
prostoyblog.ru/novichkam/chto-takoe-veb … vanie.html

Подякували: 221VOLT1

10 Відповідь від 221VOLT

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

Re: Пиши код як профі

misha_bondar_2012 написав:

Мій невеличкий список цікавих інтернет-ресурсів:

Частенько їх навідую. Тільки якась нова стаття, вже можна щось нове дізнатися...Хтось ще знає якісь цікаві сайти?

додамо до списку ще
https://github.com/ --- досліджувати чужі ісходники
http://stackoverflow.com/ --- знаходити відповіді на запитання-проблеми (з вірогідністю 99% що ваша проблема -- піднімалась до вас іншими людьми та у неті уже є готові рішення)
https://translate.google.com.ua/ --- якщо у вас недуже з англійською-іспанською-німецькою-китайською -- на перших порах виручає, проте англійську вже ж потрібно підтягувати(говорю в тому числі і самому собі)

Подякували: Monolith1

221VOLT вебсайт

11 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Пиши код як профі

221VOLT написав:

ісходники

https://uk.wikipedia.org/wiki/Початковий_код - просто це тут залишу. Пробачте, але це все моя вчителька української. Вона нас навіть била...морально.

221VOLT написав:

https://translate.google.com.ua/ --- якщо у вас недуже з англійською-іспанською-німецькою-китайською -- на перших порах виручає, проте англійську вже ж потрібно підтягувати(говорю в тому числі і самому собі)

Це так. Сам ось почав виділяти час на англійську. І взагалі зрозумів, що краще "гуглити" на англійській - це факт.
І раджу ще перекладач(розширення для Хрому) - LinguaLeo

Подякували: 221VOLT1

12 Відповідь від ping

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1266

Re: Пиши код як профі

misha_bondar_2012 написав:

Це так. Сам ось почав виділяти час на англійську. І взагалі зрозумів, що краще "гуглити" на англійській - це факт.
І раджу ще перекладач(розширення для Хрому) - LinguaLeo

для мене краще (для вивчення англ у вільну хвилинку) підійшов https://www.duolingo.com/

Подякували: Monolith, 221VOLT2

13 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Пиши код як профі

ping написав:
misha_bondar_2012 написав:

Це так. Сам ось почав виділяти час на англійську. І взагалі зрозумів, що краще "гуглити" на англійській - це факт.
І раджу ще перекладач(розширення для Хрому) - LinguaLeo

для мене краще (для вивчення англ у вільну хвилинку) підійшов https://www.duolingo.com/

Дякую. Треба буде і там полазити. Мені взагалі LinguaLeo сподобався, але ще більше сподобався їхній перекладач-розширення. Просто слово прямо на сторінці два рази клікаєш і тобі висвічується переклад. Зручно.

Подякували: 221VOLT1

14 Відповідь від Q-bart

  • Q-bart
  • Q-bart
  • Хочу бути модератором, щоб такі штуки ставити
  • Поза форумом
  • Звідки: Центр інтернету
  • Дата реєстрації: 14.06.2014
  • Повідомлень: 1 725
    • Репутація: 717

Re: Пиши код як профі

misha_bondar_2012 написав:

перекладач-розширення. Просто слово прямо на сторінці два рази клікаєш і тобі висвічується переклад. Зручно.

Google має таку фічу вже дуже давно...

Подякували: 221VOLT1

15 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Пиши код як профі

Q-bart написав:
misha_bondar_2012 написав:

перекладач-розширення. Просто слово прямо на сторінці два рази клікаєш і тобі висвічується переклад. Зручно.

Google має таку фічу вже дуже давно...

Зате сам переклад не такий точний.

Подякували: 221VOLT1

16 Відповідь від Key Востаннє редагувалося Key (05.01.2017 09:40:08)

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: Пиши код як профі

1. беру свою заготовочку https://github.com/Keey/html-template
2. відкриваю макет у фш, досліджую(шрифти кольори заголовки відступи)
3. конвертація шрифтів і їх підключення.
4. роблю іконки в залежності від вимог(font,svg,sprite)
5. підключаю потрібні мені бібліотеки(слайдери,галереї і тому подібне)
6. визначаю зміні в scss(кольори шрифти подібне)
7. починаю помаленьку верстати з верху до низу кожен елемент по черзі.

p.s. не використовую бутсрап взагалі, відцотки чи пікселі це виначаю по-ходу верстки. якщо сайт під воордпрес тоді користуюся іншою заготовкою. і взагалі кожен проект це шось нове тому потрібно постійно вчитися і шось міняти не тільки в коді а й в голові.

Подякували: Monolith, 221VOLT, ostap34PHP3

17 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Пиши код як профі

Key написав:

1. беру свою заготовочку https://github.com/Keey/html-template
2. відкриваю макет у фш, досліджую(шрифти кольори заголовки відступи)
3. конвертація шрифтів і їх підключення.
4. роблю іконки в залежності від вимог(font,svg,sprite)
5. підключаю потрібні мені бібліотеки(слайдери,галереї і тому подібне)
6. визначаю зміні в scss(кольори шрифти подібне)
7. починаю помаленьку верстати з верху до низу кожен елемент по черзі.

p.s. не використовую бутсрап взагалі, відцотки чи пікселі це виначаю по-ходу верстки. якщо сайт під воордпрес тоді користуюся іншою заготовкою. і взагалі кожен проект це шось нове тому потрібно постійно вчитися і шось міняти не тільки в коді а й в голові.

А саму файлову структуру як ви робите? У мене так: index.html, папочки css, js, lib для бібіліотек та img для картинок. Чи є сенс щось видумувати?

І ще одне питання, про адаптивність: ви все робите за допомогою % і @media-quires?

Подякували: 221VOLT1

18 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: Пиши код як профі

misha_bondar_2012 написав:
Key написав:

1. беру свою заготовочку https://github.com/Keey/html-template
2. відкриваю макет у фш, досліджую(шрифти кольори заголовки відступи)
3. конвертація шрифтів і їх підключення.
4. роблю іконки в залежності від вимог(font,svg,sprite)
5. підключаю потрібні мені бібліотеки(слайдери,галереї і тому подібне)
6. визначаю зміні в scss(кольори шрифти подібне)
7. починаю помаленьку верстати з верху до низу кожен елемент по черзі.

p.s. не використовую бутсрап взагалі, відцотки чи пікселі це виначаю по-ходу верстки. якщо сайт під воордпрес тоді користуюся іншою заготовкою. і взагалі кожен проект це шось нове тому потрібно постійно вчитися і шось міняти не тільки в коді а й в голові.

А саму файлову структуру як ви робите? У мене так: index.html, папочки css, js, lib для бібіліотек та img для картинок. Чи є сенс щось видумувати?

І ще одне питання, про адаптивність: ви все робите за допомогою % і @media-quires?

ну так, папки є в заготовці...
flexbox, %, @media

Подякували: Monolith, 221VOLT2