Вчимося верстати 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 Розбір роботи пошуку

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

177 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!

  33. Hey! This post couldn’t be written any better!
    Reading through this post reminds me of my good old room mate!
    He always kept chatting about this. I will forward this write-up
    to him. Pretty sure he will have a good read. Thank
    you for sharing!

  34. I like the valuable information you provide in your articles.
    I’ll bookmark your blog and check again here regularly.
    I am quite certain I will learn plenty of new stuff right here!
    Good luck for the next!

  35. Hmm is anyone else having problems with the pictures on this blog loading?
    I’m trying to figure out if its a problem on my end or if it’s the blog.
    Any feedback would be greatly appreciated.

  36. An outstanding share! I have just forwarded this onto
    a co-worker who has been conducting a little research on this.
    And he actually ordered me breakfast because I stumbled upon it
    for him… lol. So allow me to reword this…. Thank YOU for the meal!!
    But yeah, thanks for spending the time to talk about this issue here on your web page.

  37. Hi there! This blog post could not be written much better!
    Looking at this article reminds me of my previous roommate!
    He constantly kept talking about this. I am going to send this information to him.
    Pretty sure he’s going to have a great read. Thank you for sharing!

  38. Wonderful blog! Do you have any tips for aspiring writers?
    I’m planning to start my own website soon but I’m
    a little lost on everything. Would you advise starting
    with a free platform like WordPress or go for a paid option? There are so many options out there
    that I’m completely overwhelmed .. Any suggestions? Thanks!

  39. This is really interesting, You’re a very skilled blogger. I’ve joined your feed and look
    forward to seeking more of your magnificent post.
    Also, I’ve shared your web site in my social networks!

  40. I was curious if you ever thought of changing the layout of
    your website? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people could connect with it
    better. Youve got an awful lot of text for only having
    one or two pictures. Maybe you could space it out
    better?

  41. hello there and thank you for your information – I have certainly picked up
    anything new from right here. I did however expertise
    several technical issues using this site, as I experienced
    to reload the site lots of times previous to I could get it
    to load correctly. I had been wondering if your web hosting is OK?
    Not that I’m complaining, but sluggish loading instances
    times will often affect your placement in google and can damage your quality score
    if advertising and marketing with Adwords.
    Well I’m adding this RSS to my email and could look out for a lot more of your
    respective exciting content. Ensure that
    you update this again soon.

  42. Its such as you learn my mind! You seem to understand a lot about this,
    such as you wrote the book in it or something. I feel that you just can do with some p.c.
    to power the message home a bit, but other than that, this is fantastic blog.
    A great read. I will definitely be back.

  43. Good day! I know this is kinda off topic but I was wondering which blog platform are you using for this website?
    I’m getting sick and tired of WordPress because I’ve had issues with hackers and I’m looking at
    alternatives for another platform. I would be awesome if you could point me in the direction of a good platform.

  44. Nice post. I was checking continuously this weblog
    and I am impressed! Very useful info particularly the closing phase :
    ) I take care of such info much. I used to be looking for this certain info for a long time.
    Thank you and best of luck.

  45. Thanks for the marvelous posting! I quite enjoyed reading
    it, you’re a great author.I will make sure to bookmark your blog and
    will come back very soon. I want to encourage one to continue your great job,
    have a nice afternoon!

  46. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point.

    You obviously know what youre talking about, why
    throw away your intelligence on just posting videos
    to your site when you could be giving us something enlightening to read?

  47. May I simply say what a relief to find someone who truly knows
    what they’re discussing on the internet. You actually understand how
    to bring an issue to light and make it important.
    A lot more people should look at this and understand this side of
    your story. I can’t believe you aren’t more popular given that you definitely have the gift.

  48. My partner and I stumbled over here coming from a different web page and thought
    I may as well check things out. I like what I see so now i’m following you.
    Look forward to looking over your web page again.

  49. When I originally commented I appear to have clicked the -Notify me when new comments are added- checkbox and from now on whenever a comment is added I receive 4 emails with the exact same comment.
    Is there an easy method you can remove me from that service?

    Many thanks!

  50. Write more, thats all I have to say. Literally, it seems as though you relied on the video
    to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting
    videos to your blog when you could be giving us something
    informative to read?

  51. 22lbs GONE in 13 days with this strange “carb-pairing” trick

    If you’re upset about your weight and want to lose a little more, get this…

    An overweight mother with pre-diabetes has just SHOCKED the
    medical
    community by losing an unheard of 22lbs pounds in just 13 days…

    ….Without starving herself, she lost a total of 37lbs in the first month!

    …Even without exercising, she went on to burn off 84lbs (almost a pound a day)
    and eliminated any sign of diabetes or any other
    life-ending diseases.

    And the amazing thing is…

    All she did was this D.I.Y. “carb-pairing” trick that reconditions your 3 female
    weight-loss hormones to drastically accelerate fat-burning while still eating the
    foods you love.
    Check it out for yourself… https://bit.ly/2q8vnzt
    Enjoy!

  52. Admiring the hard work you put into your blog and detailed information you present.
    It’s nice to come across a blog every once in a while that isn’t the same out of
    date rehashed information. Fantastic read! I’ve bookmarked your site and I’m adding your
    RSS feeds to my Google account.

  53. View and post reviews about packers and movers services, hotel services, home delivery services, online shopping services, transport services, etc. Post your review on the JagrukBane website.

  54. You actually make it seem so easy with your presentation but I find this matter to be
    really something which I think I would never understand. It seems too complicated and extremely broad for
    me. I am looking forward for your next post, I’ll try to get the hang of
    it!

  55. JagrukBane is the best website for posting reviews about products and services. So if you buy any product or use any service then post your review on the JagrukBane website.

  56. TruckingCube provides transportation services at an affordable price. If you want to rent a truck, storage and moving service, box rental service, etc., visit the TruckingCube company website once.

Leave a Reply

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