Стоит ли начать делать адаптив

@Артур123421312 · Регистрация: 24.09.2017

Author24 — интернет-сервис помощи студентам

Здравствуйте. недели 2-3 назад я начал изучать вёрстку. Я бы хотел спросить могу ли я уже начать учить адаптив или мне стоит ещё подучить основы. Вот мой последний свёрстанный макет. Так же скину фотки с сайта.
[del]
Верстал по этому вот макету https://psdfreebies.com/psd/me... -template/

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="ttt.css" rel="stylesheet" type="text/css"/>
<title>Документ без названия</title>
</head>
<body>
    <div class="top_header">
        <div class="container">
            <div class="top_header_block1">
                <img src="img/logo.png" alt="img" class="logo_image">
                <div class="top_menu">
                    <div>
                        <img src="img/head_logo.png" alt="img">
                        <h4>WORK TIME: 09:00 - 17:00</h4>
                        <p>Saturday and Sunday - CLOSED</p>
                    </div>
                    <div>
                        <img src="img/head_logo2.png" alt="img">
                        <h4>MAIL US</h4>
                        <p>free@psdfreebies.com</p>
                    </div>
                    <div>
                        <img src="img/head_logo3.png" alt="img">
                        <h4>CALL US</h4>
                        <p>+123 4567 8900</p>
                    </div>
                </div>
            </div>
            <div class="top_header_block2">             
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact us</a></li>
                    </ul>
                    <div class="icons_socset">
                        <a href="#"><img src="img/facebook.png" alt="img_socset"></a>
                        <a href="#"><img src="img/google-plus.png" alt="img_socset"></a>
                        <a href="#"><img src="img/vk.png" alt="img_socset"></a>
                        <a href="#"><img src="img/youtube2.png" alt="img_socset"></a>
                        <a href="#"><img src="img/linkedin2.png" alt="img_socset"></a>
                    </div>              
            </div>
            
        </div>
    </div>
    <header>
        <div class="container">
            <div class="title">
                <h1>We have Best Medicare
                plan options for you</h1>
                <p>
                Sed ut perspiciatis unde omnis iste natus error 
                sit voluptatem accusantium doloremque laudantium.
                </p>
                <div class="button1"><a href="#">Read more</a></div>
            </div>
        </div>
    </header>
    <section class="four_icons">
        <div class="box1">
            <img src="img/iconka.png" alt="iconka">
            <h4>Best Treatment</h4>
            <p>Sed ut perspiciatis unde omnis iste natus error sit v
                oluptatem accusantium doloremque laudantium.</p>
        </div>
        <div class="box2">
            <img src="img/iconka2.png" alt="iconka">
            <h4>Emergency Help</h4>
            <p>Sed ut perspiciatis unde omnis iste natus error sit volupta
                tem accusantium doloremque laudantium.</p>
        </div>
        <div class="box3">
        <img src="img/iconka3.png" alt="iconka">
            <h4>Medical Staff</h4>
            <p>Sed ut perspiciatis unde omnis iste natus error sit 
                voluptatem accusantium doloremque laudantium.</p>
        </div>
        <div class="box4">
        <img src="img/iconka4.png" alt="iconka">
            <h4>Qualified Doctors</h4>
            <p>Sed ut perspiciatis unde omnis iste natus error sit 
                voluptatem accusantium doloremque laudantium.</p>
        </div>
    </section>
    <section class="center_doctorina">
        <div class="container">
            <div class="title2">
                <h4>Why Choose Us ?</h4>
                <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                accusantium doloremque laudantium, totam rem aperiam, eaque ip
                sa quae ab illo inventore ver
                itatis et quasi architecto beatae vitae dicta sunt explicabo. 
                </p>
            </div>
            <div class="blockk1">
                <div class="bl_mini">
                    <div>
                        <img src="img/img1.png" alt="image">
                        <h5>Professional</h5>
                    </div>              
                    <p>
                        Sed ut perspiciatis unde omnis iste natus error sit volu
                        ptatem accusantium doloremque laudantium.
                    </p>
                </div>
                <div class="bl_mini">
                    <div>
                        <img src="img/img2.png" alt="image">
                        <h5>Professional</h5>
                    </div>              
                    <p>
                        Sed ut perspiciatis unde omnis iste natus error sit volu
                        ptatem accusantium doloremque laudantium.
                    </p>
                </div>
            </div>
            <div class="blockk2">
                <div class="bl_mini">
                    <div>
                        <img src="img/img3.png" alt="image">
                        <h5>Professional</h5>
                    </div>              
                    <p>
                        Sed ut perspiciatis unde omnis iste natus error sit volu
                        ptatem accusantium doloremque laudantium.
                    </p>
                </div>
                <div class="bl_mini">
                    <div>
                        <img src="img/img4.png" alt="image">
                        <h5>Professional</h5>
                    </div>              
                    <p>
                        Sed ut perspiciatis unde omnis iste natus error sit volu
                        ptatem accusantium doloremque laudantium.
                    </p>
                </div>
            </div>
            <img src="img/doctor.png" alt="img" class="doctorr">
        </div>
    </section>
    <section class="photik">        
            <div class="container">
                <div class="alles">
                    <div class="all_box">
                        <img src="img/1.png" alt="img" class="img_bg">
                        <p>1000+</p>
                        <img src="img/line.png" alt="image" class="line">
                        <h6 class="textet">Happy</br>
                            Customers</h6>              
                    </div>
                    <div class="all_box">
                        <img src="img/2.png" alt="img" class="img_bg">
                        <p>2017</p>
                        <img src="img/line.png" alt="image" class="line">
                        <h6 class="textet">Top</br>
                            Hospitality</h6>                
                    </div>
                    <div class="all_box">
                        <img src="img/3.png" alt="img" class="img_bg">
                        <p>1105</p>
                        <img src="img/line.png" alt="image" class="line">
                        <h6 class="textet">Innovative</br>
                            Approach</h6>               
                    </div>
                    <div class="all_box all_box2">
                        <img src="img/4.png" alt="img" class="img_bg">
                        <p>500+</p>
                        <img src="img/line.png" alt="image" class="line">
                        <h6 class="textet">Lung</br>
                            Replacement
                        </h6>               
                    </div>
                </div>
            </div>      
    </section>
    <section>
        <div class="container all_sites_in_world">
            <div class="left_site">
                <div>
                    <div class="h1_title">How we works</div>
                    <p class="all_p_ckript margin_h1_title_p">
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                    accusantium doloremque laudantium.Sed ut perspiciatis unde omnis iste na
                    us error sit voluptatem accusantium doloremque laudantium.
                    </p>
                </div>
                <div class="left_right_boxing"> 
                    <div class="left_boxing">
                        <img src="img/left_site.png" alt="image">
                        <p class="all_p_ckript2">Lorem ipsum dolor sit amet, </p>
                        <div class="left_border_right_div">
                            <div class="bordeer">April 19, 2017 </div>
                            <div>Dr. Jon Doe</div>
                        </div>
                        <p class="all_p_ckript">Sed ut perspiciatis unde omnis iste natus error sit voluptat
                        em accusantium doloremque laudantium.</p>
                    </div>
                    <div class="right_boxing">
                        <img src="img/left_site2.png" alt="image">
                        <p class="all_p_ckript2">Lorem ipsum dolor sit amet, </p>
                        <div class="left_border_right_div">
                            <div  class="bordeer">April 19, 2017 </div>
                            <div>Dr. Jon Doe</div>
                        </div>
                        <p class="all_p_ckript">Sed ut perspiciatis unde omnis iste natus error sit voluptat
                        em accusantium doloremque laudantium/</p>
                    </div>
                </div>
                <div class="button_left_site"><a href="#">read more</a></div>
            </div>
            <div class="right_site">
                <div class="h1_title paragraf_top_padding">Our creative</div>
                <p class="all_p_ckript">Sed ut perspiciatis unde omnis iste natus error sit volu
                ptatem accusantium doloremque laudantium.Sed ut perspiciatis 
                unde omnis iste natus error sit voluptatem </p>
                <div class="buttonije">
                    <div class="button_in_buttonije"><a href="#"><img src="img/knopka.png"></a></div>
                    <div><a href="#" class="text_silka">Heart Treatment</a></div>
                </div> 
                <div class="all_p_ckript margin_nth2_top">Sed ut perspiciatis unde omnis iste natus error s.it volu
                ptatem accusantium doloremque laudantium.Sed ut perspiciatis u
                nde omnis iste natus e
                rror sit voluptatem accusantium doloremque laudantium.</div>
                <div class="buttonije2">
                    <div class="button_in_buttonije"><a href="#"><img src="img/knopka.png"></a></div>
                    <div><a href="#" class="text_silka">Heart Treatment</a></div>
                </div> 
                <div class="buttonije2">
                    <div class="button_in_buttonije"><a href="#"><img src="img/knopka.png"></a></div>
                    <div><a href="#" class="text_silka">Heart Treatment</a></div>
                </div> 
                <div class="buttonije2">
                    <div class="button_in_buttonije"><a href="#"><img src="img/knopka.png"></a></div>
                    <div><a href="#" class="text_silka">Heart Treatment</a></div>
                </div> 
            </div>
        </div>
    <section  class="gallery_bg">
        <div class="container bogg">
                <div class="title_gallery">
                    <div>Gallery</div>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit volupt
                    tem accusantium doloremque laudantium.Sed ut perspiciatis und
                    e omnis iste na
                    tus error sit voluptatem accusantium doloremque laudantium.</p>
                </div>
                <div class="box_gallery">
                    <div><img src="img/galery.png" alt="img"></div>
                    <div><img src="img/galer2.png" alt="img"></div>
                    <div><img src="img/galery3.png" alt="img"></div>
                </div>
                <div class="box_gallery2">
                    <div><img src="img/galery4.png" alt="img"></div>
                    <div><img src="img/galery5.png" alt="img"></div>
                    <div><img src="img/galery6.png" alt="img"></div>
                </div>
        </div>
    </section>
    <section class="all_center_aling">
        <div class="container bogg">
            <div class="title_one_last">
                <div class="Our_text">Our Team</div>
                <p class="my_family">Sed ut perspiciatis unde omnis iste natus error sit voluptate
                m accusantium doloremque laudantium.Sed ut perspiciatis unde omnis
                iste natus error sit voluptatem accusantium doloremque laudantium.</p>
            </div>  
            <div class="all_box_4">
                <div class="mini_box_4">
                    <img src="img/children.png" alt="image">
                    <div>
                        <div class="dr">Dr Ricky Doe</div>
                        <div class="ass">Assistant Surgeon</div>
                    </div>
                    <div class="bottom_bottom">
                        <img src="img/face_icon.png" alt="image">
                        <img src="img/face_icon2.png" alt="image">
                        <img src="img/face_icon3.png" alt="image">
                    </div>
                </div>
                <div class="mini_box_4">
                    <img src="img/children2.png" alt="image">
                    <div>
                        <div class="dr">Dr Ricky Doe</div>
                        <div class="ass">Assistant Surgeon</div>
                    </div>
                    <div class="bottom_bottom">
                        <img src="img/face_icon.png" alt="image">
                        <img src="img/face_icon2.png" alt="image">
                        <img src="img/face_icon3.png" alt="image">
                    </div>
                </div>
                <div class="mini_box_4">
                    <img src="img/children3.png" alt="image">
                    <div>
                        <div class="dr">Dr Ricky Doe</div>
                        <div class="ass">Assistant Surgeon</div>
                    </div>
                    <div class="bottom_bottom">
                        <img src="img/face_icon.png" alt="image">
                        <img src="img/face_icon2.png" alt="image">
                        <img src="img/face_icon3.png" alt="image">
                    </div>
                </div>
                <div class="mini_box_4">
                    <img src="img/children4.png" alt="image">
                    <div>
                        <div class="dr">Dr Ricky Doe</div>
                        <div class="ass">Assistant Surgeon</div>
                    </div>
                    <div class="bottom_bottom">
                        <img src="img/face_icon.png" alt="image">
                        <img src="img/face_icon2.png" alt="image">
                        <img src="img/face_icon3.png" alt="image">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="ba_last">
        <div class="container">
            <div class="text_bottom_button">New Patient Special Offer Complimentary Consultation</div>
            <div class="button_up_text"><a href="#">read more</a></div>
        <div class="container">
    </section>
    <footer>
        <div class="container">
            <div class="footer_box1">
                <div class="footer_1class_zagolovok">Get in Touch</div> 
                <div class="float_left_for_image">
                    <img src="img/icon6.png" alt="help">
                    <div>free@psdfreebies.com</br>
                         free@psdfreebies.com</div>
                </div>
                <div class="float_left_for_image">
                    <img src="img/icon7.png" alt="help">
                    <div>+123 456 7890</br>
                         +123 456 7890</div>
                </div>  
                <div class="float_left_for_image">
                    <img src="img/icon8.png" alt="help">
                    <div>123, Main Road, New City,</br>
                    My Country 123456</div>
                </div>  
                <div class="image_left_align">
                    <a href="#"><img src="img/footer_icon.png" alt="social_site"></a>
                    <a href="#"><img src="img/footer_icon2.png" alt="social_site"></a>
                    <a href="#"><img src="img/footer_icon3.png" alt="social_site"></a>
                    <a href="#"><img src="img/footer_icon4.png" alt="social_site"></a>
                    <a href="#"><img src="img/footer_icon5.png" alt="social_site"></a>
                </div>  
                
            </div>
            <div class="footer_box1">
                <div class="footer_1class_zagolovok">Quick Links</div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">About us</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Blog</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Contact us</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Faq</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Insurance</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Contact us</a></div>
                </div>
            </div>
            <div class="footer_box1">
                <div class="footer_1class_zagolovok">Our Services</div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Work Injuries</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Sport Injuries</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Cold Laser Therapy</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Massage Therapy</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Physiotherapy</a></div>
                </div>
                <div class="margin_for_block2_in_footer">
                    <a href="#"><img src="img/knopka2.png" alt="menu"></a>
                    <div><a href="#">Chiropratic Therapy</a></div>
                </div>
            </div>
            <div class="footer_box1 dont_nice_margin">
                <div class="footer_1class_zagolovok">Enquiry Form</div>
                <div class="name">Name</div>
                <div  class="Phome">Phone</div>
                <div  class="Message">Message</div>
                <div class="button_in_footer"><a href="#">submit</a></div>
            </div>
        </div>
    </footer>
    <div class="last_footer">
        <div>Copyright © 2017. PSDFreebies.com  | Best PSD Template for freelancer and agencies</div>
    </div>
</body>
</html>

@6elka1703 · 28.09.2018, 23:14

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

@Артур123421312 · 29.09.2018, 12:41 **[ТС]**

Окей) Просто я боялся что в адаптивной вёрстке придётся писать код по другому. Так что бы Каждый элемент отрабатывал правильно относительно друг друга. Спасибо что всё прояснил) Начну учиться прямо сейчас.

@Magistr13 · 29.09.2018, 13:39

Как по мне, адаптив стоит начинать Junior верстальщику в последнюю очередь.
После того как изучите:
1. препроцессоры CSS (Sass желательно).
2. БЭМ методологию.
3. Автоматизацию процесса (Gulp).
4. Поведения табличных, блочных, блочно-строчных, строчных, флекс элементов как минимум.
5. Желательно уметь работать с Git.
6. Кроссбраузерная верстка.
7. Тестирование вашей верстки на переполнение контента и тд...
8. Валидный, семантический html код.
9. Разбиение кода на части, шаблонизация.
10. Оптимизация загрузки страницы, постепенная деградация, прогрессивное улучшение.
11. Иметь уже за плечами парочку качественно сверстанных фикс шаблонов.

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

@Артур123421312 · 29.09.2018, 17:38 **[ТС]**

А что такое фикс шаблоны?
Про всё остальное знаю, но вот про это нет.

@6elka1703 · 29.09.2018, 18:13

Артур123421312, фиксипованные шаблоны наверное.

@Mailo · 30.09.2018, 16:36

Magistr13, ИМХО всё кроме 4,6,11 не нужно изучать перед изучением адаптива,а 1 и 3 это вообще инструменты для удобства работы, т.е. если человек без них или с ними заверстает заказчику как бы пофиг.

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	28.09.2018, 23:14	2
	Артур123421312, ну в адаптиве сверхественного ничего нет, тоже самая верстка только под разные разрешения экранов. Так что даже учить особо и не придется главное опыта набраться в этом и дело пойдет как по маслу 0

@Артур123421312 0 / 0 / 1 Регистрация: 24.09.2017 Сообщений: 58
	29.09.2018, 12:41 [ТС]	3
	Окей) Просто я боялся что в адаптивной вёрстке придётся писать код по другому. Так что бы Каждый элемент отрабатывал правильно относительно друг друга. Спасибо что всё прояснил) Начну учиться прямо сейчас. 0

@Magistr13 3 / 2 / 1 Регистрация: 21.06.2017 Сообщений: 17
	29.09.2018, 13:39	4
	Как по мне, адаптив стоит начинать Junior верстальщику в последнюю очередь. После того как изучите: 1. препроцессоры CSS (Sass желательно). 2. БЭМ методологию. 3. Автоматизацию процесса (Gulp). 4. Поведения табличных, блочных, блочно-строчных, строчных, флекс элементов как минимум. 5. Желательно уметь работать с Git. 6. Кроссбраузерная верстка. 7. Тестирование вашей верстки на переполнение контента и тд... 8. Валидный, семантический html код. 9. Разбиение кода на части, шаблонизация. 10. Оптимизация загрузки страницы, постепенная деградация, прогрессивное улучшение. 11. Иметь уже за плечами парочку качественно сверстанных фикс шаблонов. Адаптивная верстка подытоживает все ваши базовые знания юного верстальщика. Сверстанный через жо... адаптив, не даст вам никакого опыта и качественного портфолио, вы потратите кучу времени попусту. 0

@Артур123421312 0 / 0 / 1 Регистрация: 24.09.2017 Сообщений: 58
	29.09.2018, 17:38 [ТС]	5
	А что такое фикс шаблоны? Про всё остальное знаю, но вот про это нет. 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	29.09.2018, 18:13	6
	Артур123421312, фиксипованные шаблоны наверное. 0

@Mailo 228 / 208 / 27 Регистрация: 18.02.2010 Сообщений: 2,042
	30.09.2018, 16:36	7
	Magistr13, ИМХО всё кроме 4,6,11 не нужно изучать перед изучением адаптива,а 1 и 3 это вообще инструменты для удобства работы, т.е. если человек без них или с ними заверстает заказчику как бы пофиг. 0