Учим Front-end?

Разговоры обо всем
Автор
Повідомлення
yupi
Member
Аватар користувача

Повідомлення

Настал момент в жизни, когда пришлось самому искать разную инфу об этом.
Никогда не сталкивался.
Задали ребетенку домашнее задание.
Тк у меня опыта в данном акспекте еще меньше, чем у малого, то за 6ч различного поиска, мой разум выдал решение, которое ниже. :lol:
Как сделать, как показано в ответе, я уже понятия не имею.
Кто подскажет? Вроде и просто, но я очень далек от этой темы.
Если кому интересно, то буду выкладывать разные задачки, пытаясь их и сам как-то решать :gigi:
Задание
Создать html-страницу “Card game”.
Для отображения мастей карт используйте спецсимволы.
Пример конечного результата:
Зображення
Мое решение :gigi:
спойлер
Зображення

Код: Виділити все

<!DOCTYPE html>
<html>
<head>
	<title>Card Game</title>
	<style>
    body 
    .l1 { 
     color: red; /* Красный цвет символов */ 
     font-size: 200%; /* Размер шрифта в процентах */ 
    }
    .l2 { 
     font-size: 200%; /* Размер шрифта в процентах */ 
    }
  </style> 
</head>
<body>
	<h3>Player 1</h3>
		<p><span class="l2">2♣ </span><span class="l1">9♡ 6♡ A♢</span><span class="l2"> Q♠ J♣ </span></p>
		<p><span class="l1">3♡ </span><span class="l2">A♣ 10♣</span><span class="l1"> K♢ </span><span class="l2">8♠ </span><span class="l1">3♡ </span></p>
</body>
</html>
Вышло черти что и с боку бантик :lol:
Как выделить так текст я не нашел за день. Да и сам собственно мое решение мне не нравится абсолютно :rotate:
Изучение только началось, поэтому ни css ни что-то еще не было и в помине. :shuffle:
Сегодня мозг мой был взорван :laugh:
murzik
Member

Повідомлення

yupi
может это готовые картинки? Нужно просто вставить img?
п.с: вот же они, спецсимволы https://html5book.ru/specsimvoly-html/
&#10084; \2764 Закрашенное жирное сердце
фон текста
http://htmlbook.ru/faq/kak-dobavit-tsve ... vku-teksta
Востаннє редагувалось 15.06.2019 22:53 користувачем murzik, всього редагувалось 2 разів.
yupi
Member
Аватар користувача

Повідомлення

murzik
да нет, в условии ж указано использовать спецсимволы
murzik
Member

Повідомлення

вообще это интересная тема и хорошо что в школах начали это продвигать. мы же это проходили аж в универе на 3 курсе. но нужно развивать это в ребенке, это как английский язык, нужно постоянно читать\изучать\использовать на практике. А когда человек уже 18+, нужно показать реальный пример исполнения заказа по созданию странички, например, и за который деньги заплатят в конечном результате. Чтобы человек понимал, для чего это. Не нужно делать домашние задания ради оценок. Не сочтите за чтение морали, просто к слову.
Востаннє редагувалось 15.06.2019 22:57 користувачем murzik, всього редагувалось 2 разів.
KimRomik
Member
Аватар користувача

Повідомлення

вам бы еще указать нужный шрифт, для этого используют font-family и font-size
чтобы спецсимволы были в блоках, нужно каждый вписывать в отдельный div и задавать общий стиль для них через атрибут class

murzik
учить веб-разработке все равно что учить пользоваться отверткой - вроде инструмент примитивно простой, а выделяют миллионный госбюджет на это... :facepalm:
это я к тому, что она в школах нафиг не нужна, уж лучше бы высшей математики учили
Востаннє редагувалось 15.06.2019 22:59 користувачем KimRomik, всього редагувалось 2 разів.
yupi
Member
Аватар користувача

Повідомлення

murzik:Не нужно делать домашние задания ради оценок
так не ради оценок, если не понимать азы, то смысл дальше заниматься будет?
KimRomik:чтобы спецсимволы были в блоках, нужно каждый вписывать в отдельный div и задавать общий стиль для них через атрибут class
а можно пример кода с одним или двумя символами? а то в голове за день каша уже :insane:
murzik
Member

Повідомлення

KimRomik
нам год читали С++, красиво говорили и твердили, что это язык языкам, что программисты С++ востребованы и доходы хорошие. А в конце курса мы написали КАЛЬКУЛЯТОР и стали мы классными специалистами по программированию С++. КПИ, прекрати :facepalm:
Daemon74
Member
Звідки: Харьков

Повідомлення

murzik: что программисты С++ востребованы и доходы хорошие
Если я скажу ЗП full stack developerа С++ в более менее нормальных конторах - меня опять забанят. Но если коротко - то Вам говорили правду. Другое дело, что преподавать программирование практически нереально. Реально закладывать основу и учить алгоритмически мыслить. А именно программирование - предмет на полном самообразовании. И постоянном самосовершенствовании и развитии. Остановился - проиграл.
KimRomik
Member
Аватар користувача

Повідомлення

yupi
спойлер
Зображення

Код: Виділити все

<!DOCTYPE html>
<html>
<head>
   <title>Card Game</title>
   <style>
   body{
      font-family: Arial;
   }
   .l1 {
      color: #a21c1c;
   }
   .row{
      height: 80px;
   }
   .card{
      float: left;
      background-color: #E0E0E0;
      width: 70px;
      height: 50px;
      margin: 2px;
      padding: 10px 0px 0px 0px;
      font-size: 30px;
      text-align: center;
   }
  </style> 
</head>
<body>
   <h3>Player 1</h3>
   <div class="row">
	   <div class="card">2♣</div>
	   <div class="card">
		  <span class="l1">9♥</span>
	   </div>
	   <div class="card">
		  <span class="l1">6♥</span>
	   </div>
	   <div class="card">
		  <span class="l1">A♦</span>
	   </div>
	   <div class="card">Q♠</div>
	   <div class="card">J♣</div>
   </div>
   <div class="row">
	   <div class="card">
		  <span class="l1">3♥</span>
	   </div>
	   <div class="card">A♣</div>
	   <div class="card">10♣</div>
	   <div class="card">
		  <span class="l1">K♦</span>
	   </div>
	   <div class="card">8♠</div>
	   <div class="card">
		  <span class="l1">3♥</span>
	   </div>
   </div>
</body>
</html>
P.S.: кстати это лишь Front, а не Front-End
murzik:нам год читали С++, красиво говорили и твердили, что это язык языкам, что программисты С++ востребованы и доходы хорошие. А в конце курса мы написали КАЛЬКУЛЯТОР и стали мы классными специалистами по программированию С++. КПИ, прекрати :facepalm:
конечно, потому что никто не станет обучать людей самыми важными вещами (конкуренция)
КПИ никакой не "престижный", он давно лишился этого звания, потому что там студентов обучают то, что могли бы и сами сделать (если конечно не овощ с низким IQ)
в универы идут только ради диплома "для галочки", так как на некоторых предприятиях требуют этого
пора уже развеять стереотипы, что универы якобы гарантируют светлое будущее
Android
Bot
Аватар користувача
Звідки: Dnipro

Повідомлення

Вариантов решения этой "задачки" слишком немало, надо понять ее контекст - что именно они там учили, тема урока(ов) и все такое.
А то можно сделать так, можно вот так, а можно еще как-то, а вдруг там вообще таблицы от них ждут.
А вообще я бы порекомендовал посмотреть какие-то уроки на трубе по css, ну или почитать, что-то типа "CSS. Каскадные таблицы стилей" Мейера например.
yupi
Member
Аватар користувача

Повідомлення

Android
Ничего не учили, только начали структуру учить html)
KimRomik
будем завтра пробовать вникать :beer:
Android
Bot
Аватар користувача
Звідки: Dnipro

Повідомлення

yupi:Ничего не учили, только начали структуру учить html)
Тогда даж не знаю, что и отвеить. html-сущностями давай сразу грузить, изучая структуру хтмл... ну такое :shuffle:
Если исключить css, то такое разве что таблицами можно наваять, но это так себе затея откровенно говоря...
DarkJoney
Member
Аватар користувача

Повідомлення

yupi
Привет! Набросал по-быстрому. За правильность решения не ручаюсь, не верстал ничего, наверное, со 2 курса универа, с сайтами тогда дело не пошло у меня. Может где-то там и не прав. Подзабыл уже. По старой привычке использовал сетку Bootstrap.
А еще, я забыл посмотреть пример решения, поэтому вышло так:
спойлер
Зображення
Сорцы тут:
спойлер
https://we.tl/t-q4VeDTzDAp
Надеюсь, что хоть как-то помог. Если ребенку зачтут, сообщи тут, будет повод выпить пива за это дело. :beer:
P.S Редактор рекомендую Brackets, и нужно поставить плагин Emmet. Там еще 1 был удобный, но я не помню имя, всегда юзал Brackets. Он автоматизировал некоторые вещи, тот же sample html делал по сочетанию клавиш, разметки сам предлагает, что экономило время и повышало удобство.

Отправлено спустя 38 минут 10 секунд:
murzik
У меня в ОНАС тоже так учили, дело было несколько лет назад. Дали минимальную базу по С++, тот кто разобрался - тот молодец. Были сначала примитивные лабы, но было интересно. Потом уже были алгоритмы, а еще позже Python. Если кратко, были подводные камни, были разной паршивости преподы, но ВУЗ лишь дал базу и пинок учить самому. Правда, он подействовал не везде, и лишь я и еще пару кентов работают в разработке. Вообще, все, что я знаю и делаю сейчас, это то, что я учил сам и на проектах. Бывало сам придумал программы, бывало брал проекты, мог учить много разного сразу. Да и сейчас все время учусь, и это нормально. Если быть в IT и не учиться, можно быстро оказаться замененным кем-то другим. А рассчитывать, что ты придешь в ВУЗ, и там всему научат, и что ты сразу пойдешь в условный EPAM/Luxoft/DataArt хотя бы джуном на 500 баксов - глупо.
А еще глупее рассчитывать на курсы, что ты придешь, ввалишь бабки, и тебя будут с ложечки кормить и ты выйдешь с них senior. Чертовс два. Могут дать лишь мало-мальский пинок к дальнейшему обучению. Это проверено мной и друзьями, я когда был студентом, мы с другом ходили на много разных. В итоге, учиться нужно уметь самому, и в IT это важно. Я пробовал учить фронт, даже работал в студии на парт-тайме, но блин, там столько нюансов, что я ушел на backend и все. Чего только не приходилось уже писать. А товарищ у меня таки full stack, и он даже преподает.

А то, что детям сейчас такое дают - это круто. Чем выше у нового поколения будет уровень английского языка(а еще лучше нескольких) и знаний в области IT - тем будет лучше для нас всех. Я в прошлом декабре ехал в интерсити в Киев с Ришельевским лицеем, по детям был класс 7-8, так они ехали на экскурсии в офисы IT контор. А еще потом они на мое место работы приходили, тут, в Одессе. И мне очень нравятся подобные вещи, курс программирования должен быть в школьной программе на уровне с языками и математикой, так как это не только сугубо механическая работа, а такая же логика и мышление.
Я восхищаюсь индусами, при их общей бедности и уровне жизни, их разработчики, даже дети, творят потрясающие вещи. У меня подруга фронт ездила в Индию, и видела босых пареньков лет 12, девочек с покрытой головой, которые умели программировать контроллеры и другие вещи. Конечно, наши ребята не хуже, но нам не хватает их упорства что-ли. Детей нужно интенсивно мотивировать к любому виду полезной деятельности, не только к разработке. Проблема в том, что ВУЗы и школы пока что наоборот мочат мотивацию, поэтому это должны заложить родители, а ребенок уже тогда вполне сможет сделать все сам.

А в мое время, в школе, мы мучали Пейнт, Офис и тренажер набора текста. На этом, информатика заканчивалась. Как-то даже Маму вызывали с претензией, что Ваш сын сильно быстро печатает, он попортит нам клавиатуры...
falcongrig
Member
Аватар користувача
Звідки: Киев

Повідомлення

DarkJoney:Чем выше у нового поколения будет уровень английского языка(а еще лучше нескольких) и знаний в области IT - тем будет лучше для нас всех.
А индивидуальные особенности и способности ты предлагаешь вообще не учитывать, как при совке? Тупо всех построить в одну шеренгу, одинаково одеть и заставить маршировать? :lol:
Школы со спецуклоном - однозначно да. Навязывать это абсолютно всем - точно нет, толку не будет, даже наоборот. Про несколько иностранных языков вообще бред какой-то.
yupi
Member
Аватар користувача

Повідомлення

еще одна задачка :) столько инфы лупят, что вдвоем сидим днями и пытаемся разобраться
каким образом отдельно цифры то разукрашивать?
спойлер
Зображення
а то выходит так вот только :insane:
спойлер
Зображення
KimRomik
Member
Аватар користувача

Повідомлення

yupi
спойлер

Код: Виділити все

<!DOCTYPE html>
<html>
<head>
   <style>
   body{
      font-family: Arial;
      font-weight: bold;
      color: #FFFFFF;
   }
   #main{
      position: absolute;
      background-color: #ED9EAE;
      padding: 10px;
   }
   .row{
      width: 400px;
      background-color: #C66376;
      padding: 10px 10px 10px 10px;
      margin: 10px;
   }
   .el{
      display: inline;
      background-color: #9E354A;
      padding: 10px 20px 10px 20px;
      margin: 0px 10px 0px 10px;
   }
   </style> 
</head>
<body>
   <div id="main">
      <div class="row">1.<div class="el">Apple</div></div>
      <div class="row">2.<div class="el">Orange</div></div>
      <div class="row">3.<div class="el">Pineapple</div></div>
      <div class="row">4.<div class="el">Pear</div></div>
      <div class="row">5.<div class="el">Cherry</div></div>
   </div>
</body>
</html>
yupi
Member
Аватар користувача

Повідомлення

Как реализовать html-страницу с живой иконкой?
При загрузке страницы отображается черно-белая иконка. Если навести на нее мышкой, то она медленно (5 секунд) увеличивается и становится цветной. Если мышку увести, то иконка резко возвращается к первоначальному состоянию.
Только на css\html
Что-то в гугле туго с этим :-/
zmax
Member
Аватар користувача
Звідки: Zp

Повідомлення

yupi
htmlbook еще не советовали штудировать?
Задача не ясна. Живая иконка это гифка вставленная как обычная картинка?
yupi
Member
Аватар користувача

Повідомлення

Android
:beer: точно, именно оно и надо было.
Не могли понять, как из чб (filter) изо сделать цветное :gigi:
Відповісти