Front-end разработка, что делать если зашёл в тупик?

Question

Анатолий Плешков @Anatolii_9

Фронтенд

Front-end разработка, что делать если зашёл в тупик?

Уже около двух лет занимаюсь фронтендом, по началу изучал HTML5/CSS, Затем чистый JS, дальше начал смотреть на bootstrap/grid/sass/Flexbox и прочие. И после некоторого времени за вёрсткой макетов появились трудности с вопросом что же делать дальше, макеты которые могу верстать-верстаю, все уже стало казаться однотипным и хочется чего то сложнее, но как только начинаю браться за более сложные макеты, с адаптацией под разные экраны, с анимациями и прочей красотой начинаются сильные проблемы, самостоятельно решить не могу проблему, вроде бы и понимаю что стоит подтянуть знания, но видеоуроки, книги, статьи уже читались и понимались, перечитывал несколько раз одни и те же книги, но все равно стоит остаться один на один со сложным макетом, начинают возникать трудности, а гуглить каждый раз решение проблемы, это уже не собственные знания, хотелось бы как то больше изучить именно те задачи которые часто используются на практике, может есть какая-то книга/курс/видеоуроки где можно очень подробно и разжёванно разобрать практические задачи по вёрстке? Надоело уже сидеть на одном и том же месте и не развиваться ни в одну сторону.

Вопрос задан более трёх лет назад
512 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Решения вопроса 1

14 комментариев

Анатолий Плешков @Anatolii_9 Автор вопроса

Практика имеется только в вёрстке не сложных макетов, а если начинаю делать что-то сложнее предыдущего, то возникает множество вопросов,есть моменты которые и вовсе не получается решить, если взять легче, то тут нет вопросов, но было уже множество простых макетов, как можно поднять уровень с вёрстки с простых макетов до средних по сложности?

Написано более трёх лет назад
Максим @Floatname

Анатолий Плешков, суть в том и заключается - чтобы развиваться и научиться делать что-то новое и более сложное, вы берете задачи, которые вызывают множество вопросов, которые выше вашего уровня, и пытаетесь всеми способами их решить. А еще лучше - найдите себе стажировку, где будут готовы вас развивать и давать различные по сложности задачи.
Ведь так всегда: то что не сложно - мы делаем для закрепления знаний, то что сложно - мы делаем для развития, и со временем это сложное переходит в разряд простых :)

Написано более трёх лет назад
Анатолий Плешков @Anatolii_9 Автор вопроса

Ну на стажировку меня врятли возьмут, город и так маловат, да и я ещё только в 11й класс пошёл, все отказывают как только узнают возраст. А как научиться решать эти сложные задачи? Была практика с всплывающие меню, сидел недели 2,но в итоге получилось все сделать самостоятельно на чистом JS. Только вот начав делать его с начала, приходиться тратить времени не меньше, это так и должно быть? Мне казалось что в какой то момент, будь это третий, пятый или десятый раз, должно уже уходить меньше времени, но получается что каждый раз как с чистого листа.

Написано более трёх лет назад
Stalker_RED @Stalker_RED

Анатолий Плешков, покаж свое меню.

Написано более трёх лет назад
Анатолий Плешков @Anatolii_9 Автор вопроса

Попозже кину, щас пока что на работе.

Написано более трёх лет назад
Максим @Floatname

Анатолий Плешков, вот тут порешайте задачки, там и верстка, и js, и еще много полезного, уровень возрастающий от задачи к задаче. Еще и в английском попрактикуетесь

Написано более трёх лет назад

Анатолий Плешков @Anatolii_9 Автор вопроса

Stalker_RED,

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu</title>
    <link rel="stylesheet" href="menu.css">
</head>
<body>
    <!-- Кнопка открытия меню -->
    <button class="menu" id="mn" onmouseover="MouseMenu()" onclick="Oppener()">&#8801;</button>
    <!-- Конец кнопки меню -->
<!-- Меню -->
    <div id="rw" class="menu_notap">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Search</a>
        <a href="#" class="close_menu" id="close" onclick="Closer()">&#10006;</a>
    </div>
    <!-- Конец меню -->
    <!-- JavaScript -->
    <script>
        // Функция выполняемая при наведении на кнопку меню
        function MouseMenu(){
            document.getElementById('mn').innerHTML="&#8744;";
                 }
                //  Функция открытия меню
                 function Oppener(){
                    document.getElementById('mn').className="menu_open";
                    document.getElementById('rw').className="menu_tap";
                 }
                //  Функция закрытия меню
               function Closer(){
                document.getElementById('mn').className="menu";
                    document.getElementById('rw').className="menu_notap";
                    document.getElementById('mn').innerHTML="&#8801;";
               }
                </script>
                <!-- Конец JavaScript -->
</body>
</html>

body{
    padding-left:10px;
    padding-top:15px;
    margin: 0;
    background-color: rgb(145, 145, 145);

}
.menu{
    width: 50px;
    height: 50px;
    font-size: 25px;
    color: #fff;
    border: 0;
    background-color: #000;
    transition: ease-in 1s;
    

}
.menu:hover{
    width: 50px;
    height: 50px;
    font-size: 25px;
    color: rgb(0, 143, 0);
    border: 0;
    background-color: #000;
    cursor: pointer;
}
.menu_open{
   display: none;
}
.menu_notap{
    display: none;
}
.menu_tap{
    display:flex;
    flex-direction: column;
    width: 10%;
    height:100%;
    background-color: #000;
    font-size: 30px;
    
    
    
}
a{
    text-decoration: none;
    color: #fff;
    padding: 30% 20px;
    margin: 0 auto;
    transition: ease-in 0.7s;
    cursor: pointer;
}
a:hover{
    color:rgb(0, 143, 0);
}
#close:hover{
    color:rgb(255, 0, 0);
}
@media screen and (max-width:1260px){
    .menu_tap{
        display:flex;
        flex-direction: column;
        width:12%;
        height:100%;
        background-color: #000;
        font-size: 30px;
        
}
@media screen and (max-width:1010px){
    .menu_tap{
        display:flex;
        flex-direction: column;
        width:14%;
        height:100%;
        background-color: #000;
        font-size: 30px;
        
}
@media screen and (max-width:860px){
    .menu_tap{
        display:flex;
        flex-direction: column;
        width:16%;
        height:100%;
        background-color: #000;
        font-size: 20px;
        
}
@media screen and (max-width:600px){
    .menu_tap{
        display:flex;
        flex-direction: column;
        width:18%;
        height:100%;
        background-color: #000;
        font-size: 17px;
        
}
@media screen and (max-width:500px){
    .menu_tap{
        display:flex;
        flex-direction: column;
        width:20%;
        height:100%;
        background-color: #000;
        font-size: 16px;
        
}
@media screen and (max-width:410px){
    .menu_tap{
        display:flex;
        flex-direction: column;
        width:18%;
        height:100%;
        background-color: #000;
        font-size: 14px;
        
}
@media screen and (max-width:370px){
    .menu_tap{
        display:flex;
        flex-direction: column;
        width:20%;
        height:100%;
        background-color: #000;
        font-size: 12px;
        
}

Написано более трёх лет назад

Тарас Шульга @AngryYumy

Анатолий Плешков, вы меня конечно простите, но у вас, знания жс ниже среднего, да и стиль написания кода/верстки как будто учились по туториалам ~14 годов.
Верстка тоже такое себе (не в обиду). Инлайн жс тоже то еще порно.
И да нельзя было в песочницу залить?

Написано более трёх лет назад
Анатолий Плешков @Anatolii_9 Автор вопроса

Тарас Шульга, Вот о том я и говорю, я прекрасно понимаю что это всё печально, но где и как это подтянуть я не понимаю, вроде бы и понятно что и как делать, но хотелось бы делать это качественно, а где этому учится и вовсе не знаю

Написано более трёх лет назад
Анатолий Плешков @Anatolii_9 Автор вопроса

Если практика практика и практика, то получается что все начинает получаться, но код выглядит и читается просто ужасно

Написано более трёх лет назад
Тарас Шульга @AngryYumy

Анатолий Плешков, хороший и читаемый код это ещё сложный чем просто сделать проект.
У меня например такой подход как только я закончу проект и отдам заказчику, подожду месяц-два и опять смотрю тот же код, если вообще ничего не понимаю, знач каша , как итог смотрю какие моменты нужно поправить, и на следующий раз это учитываю. Сперва хотя бы научись качество делать работу, а потом уже гонось за чистым кодом - ибо ща побежишь за двумя зайцами и будешь как Гоша Дударь

Написано более трёх лет назад
Анатолий Плешков @Anatolii_9 Автор вопроса

То есть сейчас стоит все таки практиковатся самостоятельно, и в тех моментах когда что то не понимаю можно обратиться к литературе, и только после того как знания будут уверенными, гнаться за чистым кодом? Как же понять тогда момент когда знаний для этого будет достаточно?

Написано более трёх лет назад
Тарас Шульга @AngryYumy

Анатолий Плешков, ну это философский вопрос.
Сперва научись нормально решать проблемы, а потом адекватно это все оформлять.
Я конечно не говорю, что говнокодить - это хорошо.
Но когда человек с малой практикой и плохим пониманием пытается писать на ООП /чисто - аккуратно бавыходит еще хуже

Написано более трёх лет назад
Andry Shepard @noskriptt

Анатолий Плешков, всегда есть удалена. Зачем ограничиваться только одним городом?! Да это тяжело, но таков путь, который ты избрал)

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 4

6 комментариев

Анатолий Плешков @Anatolii_9 Автор вопроса

В этом и проблема, что-то новое на практике у меня получается не уверенно, и хотелось бы научиться этому,а как научиться не знаю.

Написано более трёх лет назад
Stalker_RED @Stalker_RED

Анатолий Плешков, у всех новое неуверенно. В первый раз неуверенно, второй раз полегче, а на десятый будет уже не новое, а "рутина, фу-фу-фу".

Написано более трёх лет назад
Анатолий Плешков @Anatolii_9 Автор вопроса

А если взять практику, то есть может где практика? Ибо задачи придуманные самостоятельно особо сложными не получаются.

Написано более трёх лет назад
Stalker_RED @Stalker_RED

Анатолий Плешков, это логично, что когда ты сам себе придумываешь задачу, ты делаешь что умеешь, или что необходимо, а не то, что захотелось фантазеру-дизайнеру.

Поищите на фрилансе реальные задачи с макетами, например.

Вот я полистал, и за минуту нашел реальные макеты https://freelance.habr.com/tasks/310566
https://freelance.habr.com/tasks/310444

Написано более трёх лет назад
Анатолий Плешков @Anatolii_9 Автор вопроса

Я так задачи с собеседований Front-end разработчиков выполнял, практика была и вправду хорошей, жаль не все согласны просто так дать задание) насобирал заданий штук 5, была одна ситуация когда 2 из 3 частей задачи выполнил, а последняя все никак не давалась, каких то близких задач и решений неудалось найти, а проконсультироваться было не с кем, так она и осталась нерешённой где-то среди файлов на Ssd.

Написано более трёх лет назад
Анатолий Плешков @Anatolii_9 Автор вопроса

Stalker_RED, спасибо за макеты)

Написано более трёх лет назад

Комментировать

3 комментария

Анатолий Плешков @Anatolii_9 Автор вопроса

Пока что только пошёл в 11й класс, впереди ещё гол школы и 4 года вуза. Понимаю что работать было бы хорошо, только кроме фриланса нигде и не берут. А на фрилансе брать заказы сложнее чем мои знания страшно, не хочется подводить заказчика, поскольку не могу сказать сроки и гарантировать выполнение работы

Написано более трёх лет назад
Анатолий Плешков @Anatolii_9 Автор вопроса

Насчёт JS, подтянуть не помемпшало бы, вот этим пока что и занимаюсь.

Написано более трёх лет назад
Афанасий Захаров @afanasiyz

Анатолий Плешков Забудьте про фриланс. Ничего путного оттуда не достанете, к сожалению.

Занимайтесь программированием - js, может быть дополнительно любой другой язык, чтобы понять, как эта штука вообще работает.
если год на это потратите, то в вуз придете с неплохой базой, и уже можно будет пытаться искать стажировки.

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Фронтенд

+2 ещё

Простой
Как правильно разделить frontend и backend на проекте с переездом на другой стек?
- 2 подписчика
- 22 апр.
- 143 просмотра
1

ответ
CSS

+1 ещё

Средний
Не работают переносы слов (CSS hyphens) в OPERA. В чём может быть проблема?
- 1 подписчик
- 20 апр.
- 55 просмотров
1

ответ
Фронтенд

+1 ещё

Простой
Как понять токен рефрешится или нет?
- 1 подписчик
- 11 апр.
- 64 просмотра
1

ответ
JavaScript

+4 ещё

Простой
Можно устройться работать фронтенд-разработчиком в 16,лет?
- 1 подписчик
- 08 апр.
- 427 просмотров
0

ответов
Фронтенд

+2 ещё

Средний
Как обновлять данные на странице html?
- 1 подписчик
- 04 апр.
- 98 просмотров
1

ответ
CSS

+3 ещё

Простой
Как добавить анимацию появления фото?
- 1 подписчик
- 04 апр.
- 132 просмотра
0

ответов
React

+2 ещё

Простой
Как создать QR-код по строке и направить его пользователю на скачивание?
- 1 подписчик
- 31 мар.
- 128 просмотров
3

ответа
HTML

+2 ещё

Простой
Как сделать в сладере позиционирование текстового блока на одном уровне?
- 1 подписчик
- 20 мар.
- 62 просмотра
1

ответ
React

+1 ещё

Простой
React. Нормальная ли практика выносить картинки за пределы src в папку public?
- 1 подписчик
- 18 февр.
- 101 просмотр
2

ответа
JavaScript

+1 ещё

Простой
Как создать сайт SPA?
- 1 подписчик
- 12 февр.
- 176 просмотров
2

ответа
Показать ещё Загружается…

Разработчик фронтенда в Конструктор лендингов

Яндекс • Екатеринбург

от 220 000 до 350 000 ₽

Senior Fullstack JavaScript Node.js + React

Simplenight inc.

от 4 000 до 6 500 $

Swift developer Middle/Middle+ удаленно

presto.heads

До 150 000 ₽

Верстка сайта и натяжка на wordpress

25 апр. 2024, в 19:22

18000 руб./за проект

Создать телеграмм бот на Python

25 апр. 2024, в 19:21

10000 руб./за проект

Разработка дизайна для мобильного приложения

25 апр. 2024, в 18:47

2795100 руб./за проект

ИМХО, тут лучший совет -- устройтесь в офис. Там и практика поинтереснее, и подскажут, если что

Answer 1 · 2020-07-02 14:38:55

По описанию вы человек который прошел/прочёл/просмотрел 1000 курсов/уроков/книг , практики ноль.
Вот вам самый топ вариант - берём и пишем код, никой супер книги/курсов нет - нужна тупо практика и все.

Answer 2 · 2020-07-02 14:37:08

все уже стало казаться однотипным и хочется чего то сложнее ... хотелось бы как то больше изучить именно те задачи которые часто используются на практике, может есть какая-то книга/курс/видеоуроки где можно очень подробно и разжёванно разобрать практические задачи по вёрстке?

вот здесь у вас противоречие. Вы хотите практического опыта, но вместо выполнения практики ищете очередные курсы и уроки.

Вот та однотипная фигня - и есть практика. Хотите более разнообразной практики - берите другие задачи.

Answer 3 · 2020-07-02 14:59:50

ReActor Дмитрий Вершанский @HunteR-VRX

Помешанный на развитии

Приветствую!
Пилюля в этом случае одна - just do it

Ответ написан более трёх лет назад

Комментировать

Answer 4 · 2020-07-02 15:18:26

Подтяните немного JS и идите ищите работу.
Абсолютно точно после двух лет изучения вам по хорошему стоит уже работать в этой сфере.
Очень много где для работы фронтендером не нужна серьезная верстка, простых знаний хватит.

Answer 5 · 2020-07-04 12:14:00

Я не фронтарь, но поведаю свою историю Бэка. Писал на python/Django, думал что я крут. Меня взяли в фирму, проект большой, задач много. После месяца я понял что нифига не знаю. Работаю сейчас на позиции Джуна, уже год как (просто не хотят платить больше) за это время я с Django ушел уже до fastapi. Изучил реакт и вью. Научился проектировать архитектуру под нагрузки, писать тесты и т.д. офф дока/практика и советы бывалых тебе помогут. Начни с простого. Например, возьми открытый апи и сделай фронт для него. С рендером на фронте, например, без перезагрузки. Там только Js нужен. Дальше пойдет как по маслу. Не надо курсов, это тоже не есть хорошо.
Сейчас у тебя дофига теории и 0 практики, как написали выше. И это суровая правда.

Front-end разработка, что делать если зашёл в тупик?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт