Вчимося верстати Pixel Perfect за 1,5 години

Вебінар проводив Danylo Mysak — Full-stack Coach at Mate academy, веб-розробник із 15-річним досвідом, призер Міжнародної олімпіади з інформатики.

Дійство відбувалося в форматі live-coding, де Данило показував все на практиці під час проведення вебінару.

Було розглянуто:
— як з нуля зверстати простий сайт;
— як швидко прикрасити його, нічого не малюючи;
— як додати на сайт базові анімації;
— як створити швидкий пошук за допомогою простих скриптів.

Таймлайн вебінару:

  • 1:10 Привітання, представлення
  • 3:32 План вебінару
  • 3:55 Заготовка для HTML-сторінки
  • 5:10 Розбір HTML-сторінки на блоки
  • 7:28 Задум сторінки, головний блок, розмір сторінки
  • 8:18 Рішення з розміром сторінки, висота блоків
  • 9:47 Наповнення main’у, позиціювання елементів
  • 10:48 Властивості шрифтів сторінки
  • 12:15 Задання типового кольору для шрифтів
  • 12:30 Питання з чату. Чи не було б краще використовувати min-height, а не height?
  • 14:11 Верстка меню сторінки
  • 17:13 Встановлення кольору посилань, встановлення відступу між посиланнями
  • 19:45 Питання з чату. Як правильно розраховувати відступи тексту між рядками?
  • 20:25 Чому nav не зробили у «li-a», а одразу зробили в «а»?
  • 21:27 Верстка основної частини сірого блоку
  • 25:00 Налаштування кнопки
  • 27:44 Позиціювання наповнення блоку
  • 28:40 Встановлення відступів між рядками тексту
  • 29:29 Нижня частина сторінки, верстка другого блоку
  • 33:27 Стилізація окремих блоків, властивості зображень
  • 34:03 Питання з чату. Чому ми не зробили header-header?
  • 36:05 Налаштування відступів між текстами та зображеннями
  • 42:08 Розташування ціни на сторінці, позиціювання стосовно article
  • 43:00 Налаштування відступів між елементами блоку
  • 44:20 Правильне розташування елементів на екрані
  • 45:20 Питання з чату. Чому не вгорнули image в ще один блок, щоб використовувати overflow і hidden?
  • 45:53 Заокруглення зображень
  • 46:20 Додання footer’у для нових елементів – контакти та адреси
  • 48:02 Питання з чату. Співвідношення сторін зображень?
  • 49:48 Додання стилів для footer’а
  • 50:50 Відбивка між елементами сторінки
  • 53:39 Прикрашення сторінки
  • 54:14 Додання градієнту кольору
  • 55:05 Коли неможна користуватись absolute’ом для позиціювання?
  • 58:35 Налаштування градієнту
  • 59:43 Позиціювання градієнту на фоні та іншого контенту сторінки
  • 59:55 Додання стилів для кнопок та посилань
  • 1:01:40 Додання до посилань та кнопок анімацій
  • 1:03:10 На які розміри екрану слід орієнтуватися при адаптивній верстці?
  • 1:04:40 Додання поля пошуку
  • 1:12:07 Пошук даних по тексту
  • 1:13:30 Задання параметру пошуку
  • 1:16:10 Розбір роботи пошуку

Бажаєш розвиватися в цьому напрямку? Подавай заявку на навчання на онлайн курс по фронтенду

82 Replies to “Вчимося верстати Pixel Perfect за 1,5 години”

  1. I want to voice my love for your kind-heartedness supporting people who absolutely need help on your area of interest. Your special dedication to getting the solution along had become astonishingly significant and have truly made women like me to realize their dreams. Your new warm and helpful information entails this much to me and still more to my peers. Best wishes; from each one of us.

  2. This is really interesting, You are an overly professional blogger.
    I have joined your rss feed and stay up for in quest of extra of your magnificent post.
    Also, I’ve shared your website in my social networks

  3. Great post. I used to be checking constantly this weblog and I’m impressed! Extremely useful information particularly the closing section 🙂 I take care of such information much. I used to be seeking this certain information for a very long time. Thank you and good luck.

  4. I’ve been exploring for a little bit for any high-quality articles or blog posts on this sort of area . Exploring in Yahoo I at last stumbled upon this site. Reading this info So i am happy to convey that I’ve a very good uncanny feeling I discovered exactly what I needed. I most certainly will make sure to do not forget this web site and give it a glance on a constant basis.

  5. Normally I don’t read article on blogs, however I wish to say that this write-up very pressured me to
    check out and do it! Your writing taste has been amazed me.
    Thank you, very great article.

  6. Thank you for helping out, great information. “If you would convince a man that he does wrong, do right. Men will believe what they see.” by Henry David Thoreau.

  7. I have been browsing online more than 3 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all website owners and bloggers made good content as you did, the web will be much more useful than ever before.

  8. I like this site very much, Its a really nice situation to read and obtain info . “Philosophy is a battle against the bewitchment of our intelligence by means of language.” by Ludwig Wittgenstein.

  9. I’m gone to tell my little brother, that he should also pay a quick
    visit this weblog on regular basis to get updated from most
    recent information.

  10. I would like to express my love for your generosity in support of persons that really need guidance on this important idea. Your real dedication to getting the solution throughout became pretty invaluable and have frequently helped somebody just like me to realize their ambitions. This insightful advice entails a lot to me and additionally to my fellow workers. With thanks; from everyone of us.

  11. An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post!

  12. Hi there very cool website!! Man .. Excellent .. Amazing .. I will bookmark your web site and take the feeds additionally…I am glad to find numerous helpful information right here within the post, we’d like work out extra strategies in this regard, thank you for sharing. . . . . .

  13. I was suggested this web site by means of my cousin. I’m now not positive whether or not this post is written via him as no one else know such distinctive approximately my difficulty. You are amazing! Thank you!

  14. Pretty section of content. I simply stumbled upon your web site and
    in accession capital to assert that I acquire in fact enjoyed account your blog posts.
    Anyway I’ll be subscribing to your augment or even I fulfillment you get entry to constantly quickly.

  15. I don’t know whether it’s just me or if everyone else encountering issues with
    your blog. It seems like some of the text within your posts are running off the screen. Can somebody
    else please comment and let me know if this is happening to them as well?
    This could be a issue with my web browser because I’ve had this happen before.
    Kudos

  16. This design is spectacular! You obviously
    know how to keep a reader entertained. Between your wit and your videos, I was almost
    moved to start my own blog (well, almost…HaHa!) Fantastic job.

    I really loved what you had to say, and more than that, how you presented it.

    Too cool!

  17. I don’t even know how I stopped up here, however I thought this submit was once good.
    I don’t recognise who you might be but certainly you are going to
    a famous blogger for those who aren’t already.
    Cheers!

  18. What i don’t understood is actually how you are not really much
    more smartly-appreciated than you might be right now. You are very intelligent.
    You understand therefore considerably on the subject of this subject,
    made me in my opinion consider it from so many various angles.
    Its like men and women aren’t fascinated until it’s something to accomplish
    with Lady gaga! Your own stuffs outstanding. All the time handle
    it up!

  19. Hello superb website! Does running a blog such as this take
    a large amount of work? I have absolutely no knowledge of programming however I had been hoping to start my own blog soon. Anyway, if you have any
    suggestions or tips for new blog owners please share. I know this is off subject however I just had to ask.
    Thanks a lot!

  20. Hi there! I know this is sort of off-topic but I needed
    to ask. Does managing a well-established blog such as yours require a massive amount work?
    I’m completely new to running a blog but I do write in my
    journal daily. I’d like to start a blog so I can share my experience and thoughts online.

    Please let me know if you have any kind of suggestions or tips
    for new aspiring bloggers. Appreciate it!

  21. Today, I went to the beachfront with my children. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed.
    There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is
    totally off topic but I had to tell someone!

  22. Its like you learn my thoughts! You seem to grasp so much approximately this, such as you
    wrote the ebook in it or something. I feel that you just could do with some p.c.

    to pressure the message home a little bit, however instead of that,
    that is excellent blog. A great read. I will certainly be
    back.

  23. First off I would like to say excellent blog!
    I had a quick question which I’d like to ask if you don’t mind.
    I was curious to know how you center yourself and clear your head prior to writing.
    I’ve had a hard time clearing my mind in getting my thoughts
    out there. I truly do enjoy writing however it just seems like the first 10
    to 15 minutes are usually lost just trying to figure out how to
    begin. Any recommendations or tips? Many thanks!

  24. Heya outstanding website! Does running a blog similar to this take a great deal of work?
    I have absolutely no knowledge of computer programming however I was hoping
    to start my own blog in the near future. Anyway,
    should you have any ideas or techniques for new blog owners please share.
    I understand this is off topic however I simply wanted to ask.
    Cheers!

  25. I’ve been exploring for a little for any high quality
    articles or weblog posts in this kind of house . Exploring in Yahoo I ultimately
    stumbled upon this website. Reading this info So i’m satisfied to exhibit that I have
    a very excellent uncanny feeling I discovered exactly what I needed.

    I most indisputably will make sure to do not omit this
    site and give it a look regularly.

  26. I’ve been browsing on-line more than three hours
    today, but I by no means discovered any interesting article like
    yours. It is lovely value enough for me. Personally,
    if all website owners and bloggers made excellent
    content as you probably did, the net shall be much more helpful than ever before.

  27. It is perfect time to make a few plans for the future and
    it is time to be happy. I have read this put up and if I may I desire to recommend you some attention-grabbing
    issues or tips. Maybe you could write next articles
    regarding this article. I wish to learn more issues approximately it!

  28. It’s a pity you don’t have a donate button! I’d definitely donate
    to this brilliant blog! I suppose for now i’ll settle for bookmarking and adding your RSS feed to
    my Google account. I look forward to new updates and will talk about this website with
    my Facebook group. Chat soon!

  29. Unquestionably imagine that which you stated.

    Your favorite reason appeared to be at the net the easiest
    factor to be aware of. I say to you, I certainly get annoyed while
    folks consider worries that they plainly don’t realize
    about. You controlled to hit the nail upon the highest and also outlined
    out the whole thing with no need side effect , folks could take a signal.
    Will likely be back to get more. Thank you

  30. Hello! Do you know if they make any plugins to assist with Search
    Engine Optimization? I’m trying to get my blog
    to rank for some targeted keywords but I’m not seeing
    very good gains. If you know of any please share.
    Cheers!

  31. Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I acquire actually enjoyed account your blog posts.

    Any way I will be subscribing to your augment and even I achievement you access consistently quickly.

  32. Good day! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good results. If you know of any please share. Appreciate it!

Leave a Reply

Your email address will not be published. Required fields are marked *