Первый сайт, подсказки и советы

Question

Всем привет, начал изучать программирование, начал с веба, изучив html и css решил попробовать, какого это делать сайт, хотелось бы показать то что я сделал и выслушать советы , критику и как укоротить код, оставляю ссылку.

https://codepen.io/SadxDarkness/pen/MWKEGpa

* {
    margin: 0px;
    padding: 0px;
    font-family: 'Barlow', sans-serif;
}
a {
    text-decoration: none;
}
html {
    background-color: rgb(255,252,221);  
    font-family: arial , sans serif;
}
header {
    background-color:rgb(76,131,166);
    height: 160px; width: 1920px;
    color: rgb(255,252,221);
}


/* Стили для navigations по сайту */


#navigation { 
    margin-top: 50px;
    font-size: 20px;
    height: 40px;
    padding-left: 100px;
    background-color: #FFFFECFF;
    padding-top: 14px;
}
#navigation a{
    color: #669999;
}
#navigation a:hover {
    color:#ffffec;
}
#navigation li{
    display: inline; 
    margin-right: 10px; 
    padding: 10px;
    border: 2px solid rgb(76,131,166);
    border-radius: 10px; 
}
#navigation li:hover {
    background-color: rgb(76,131,166);
    color:#ffffec;
}
#header {
    width: 350px;
    margin-left: 100px;
    padding-top: 30px;
}
#choice {
    height:500px;
    background-color:#4a82a5; 
}


/* стили для основного блока */


.main {
    width: 1300px;
    height: 1504px;
    display: block;
    margin-left: 300px;
    padding: 20px; 
    margin-top: 10px; 
}

 /*стили для блока с фото и выбором дома*/
 #photos{
    border: 6px solid rgb(255,252,221) ;
    border-radius: 10px; 
    width: 600px;
    height: 350px;
    color: #FFFFECFF;
    background-color: rgb(26,66,90);
    margin-top: 50px;
    margin-left: 50px;
    float: left;
}
 #photos img {
    width: 600px;
    height: 270px;
    border-radius: 10px;
}
 #text_choice {
    margin-left: 20px;
    margin-top: 10px;
    line-height: 25px;
}
 #selecthome {
    width: 500px;
    height: 400px;
    float: right;
    margin-bottom: 100px;
    float: right;
    margin-top: 50px;
    margin-right: 50px;
}
 #forthey {
    margin-top: 30px;
    margin-left: 30px;
}
 #textowners, #texttenants {
    border-radius: 10px 10px 0px 0px; 
    border: 1px solid black;
    padding: 10px;
    border-bottom-style: none;
    color: rgb(255,252,221);
    background-color:rgb(64, 136, 180);
    font-size: 25px;
}
 #textowners {
    background-color: rgb(194, 242, 237);
    margin-left:20px;
}
 #selecthousehere {
    height: 280px;
    width: 400px;
    border: 1px solid black;
    margin-top: 10px;
    margin-left: 30px;
    padding-left: 20px;
    padding-top: 20px;
    color: rgb(255,252,221);
    background-color: rgb(64, 136, 180);
    border-radius: 0px 10px 10px 10px;
}
 #search {
    width: 380px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid black;
    font-weight: bold;
    background-color: rgb(255,252,221);
    font-size: 17px;
}
 #searchall{
    margin-top:20px; 
}
 #propertytype {
    margin: 20px;
    background-color: rgb(255,252,221);
    width: 200px;
    height: 35px;
    font-size: 20px;
    border-radius: 10px;
    font-weight: bold;
}
  #bedrooms {
    margin-left:48px;
    background-color: ;
    width: 200px;
    height: 35px;
    font-size: 20px;
    background-color: rgb(255,252,221);
    border-radius: 10px;
    font-weight: bold;
 }
 #buttonsearch {
    background-color: rgb(194, 242, 237);
    height: 40px; 
    width: 210px;
    border-radius: 15px; 
    margin-top: 20px;
    margin-left: 130px;
    font-size: 20px;
    border:1px solid black;
 }


/* стиль для блока с 3 действиями */

.whatyoucan {
    height: 200px;
    border: 1px solid black;
    background-color: #DEFFCBFF;
 }
 /* в процессе понял что можно сделать не используя грид, ыыы*/
#grid {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    margin-top: 40px; 
}
#buy , #sell , #rent {
    height: 150px;
    width: 300px;
    font-size: 15px;
    font-family: sans-serif;
}
#buy {
    margin-left: 50px; 
}
#sell{
    margin-left: 270px; 
}
#rent{
    margin-left: 493px; 
}
#buy h2{
    color: #669999;
    padding-bottom: 5px; 
}
#sell h2{
    color: #669999;
    padding-bottom: 5px; 
}
#rent h2{
    color: #669999;
    padding-bottom: 5px; 
}
#houses{
    border: 1px solid black;
    height: 600px;
}


/* стили для блока с домами */


#gridhome{
    display: grid;
    grid-template-columns:repeat(4, 10%);
    grid-column-gap: 11em;
    grid-row-gap: 3em;
    margin-left: 75px; 
    margin-top: 30px; 
}
#firsthouse, #secondhouse, #thirdhouse, #fourthhouse, #fifthhouse, #sixthhouse, #seventhhouse, #eighthhouse {
    width: 250px;
    height: 225px;
    border: 6px solid #e1dede;
    background-color: #4f8fb7;
    opacity: 1;
}


/* можно ли как-нибудь обратиться ко всем id с hover и img? Ибо вот так расписывать бред */


#firsthouse:hover {
    opacity:0.6;
}
#secondhouse:hover {
    opacity:0.6;
}
#thirdhouse:hover {
    opacity:0.6;
}
#fourthhouse:hover {
    opacity:0.6;
}
#fifthhouse:hover {
    opacity:0.6;
}
#sixthhouse:hover {
    opacity:0.6;
}
#seventhhouse:hover {
    opacity:0.6;
}
#eighthhouse:hover {
    opacity:0.6;
}
#firsthouse img {
width: 254px;
}
#secondhouse img {
width: 254px;
}
#thirdhouse img{
width: 254px;
}
#fourthhouse img  {
width: 254px;
}
#fifthhouse img {
width: 254px;
}
#sixthhouse img {
width: 254px;
}
#seventhhouse img {
width: 254px;
}
#eighthhouse img {
width: 254px;
}
#gridhome a {
    color: rgb(255,252,221);
}
#gridhome a:active {
    color: rgb(255,252,221);
}


/* стили для входа на сайт и регистрации */


#login {
    background-color:#4a82a5; 
    height: 200px;
    padding: 10px;
}
#memberlogin , #signup , #subscribe , #socnet {
    border: 1px solid black;
    border-radius: 10px;
}
#memberlogin {
    background-color: #7eb6da;
    height: 100px;
    padding-left: 10px;
    padding-top: 30px;
}
#gridlogin {
    display:grid;
    grid-template-columns:repeat(2,3fr); 
    grid-row-gap: 10px; 
    grid-column-gap: 20px;
}
#username , #password {
    border: 1px solid rgb(255,252,221);
    border-radius: 10px;
    height: 40px;
    width: 200px;
    background-color: rgb(255,252,221);
    margin-left: 15px;
    margin-top: 10px; 
    font-weight: bold;
    font-size:15px;
}
#buttonlogin {
    border-radius: 10px;
    width: 150px;
    height: 40px;
    margin-left: 15px;
    background-color: rgb(194, 242, 237);
    border-color: rgb(255,252,221);
    border:1px solid black; 
    font-size:15px;
}
#subscribe {
    padding-left: 20px;
    padding-top: 15px;
    background-color: #7eb6da;

}
#fieldinput {
    width: 400px;
    height: 40px;
    border-radius: 10px;
    border:1px solid black;
    border: 1px solid black;
    font-size: 15px;
    margin-top: 35px;
    background-color:rgb(255,252,221);
    font-weight: bold;
}
#submitsubscribe {
    height: 40px; 
    width: 150px;
    border-radius: 10px;
    border:1px solid black;
    background-color: rgb(194, 242, 237);
}
#signup , #socnet{
    height: 50px;
    background-color: #7eb6da;
}
#memberyet {
    float: left;
    margin-left: 30px;
    margin-top: 10px;
    font-weight: 600;
    font-size: 20px;
    color: rgb(255,252,221);
}
#signup a {
float: right;
margin-right: 20px;
margin-top: 10px;
font-weight: 600;
font-size: 20px;
}
#signup a:visited{
    color: rgb(255,252,221);
}


#socnet {
    background-color: #4a82a5;
    border: 0px solid black;
}

/* footer */
footer {
width: 100%:;
height: 300px;
border: 1px solid black;
background-color: #7FB7D1FF;
}
#aboutus {
    margin-top:30px;
    margin-left: 300px;
    font-size: 20px;
    list-style-type:none;
    line-height: 30px;
    color: rgb(255,252,221);
    width: 150px;
    float: left;
}

#aboutus a:visited {
    color: rgb(255,252,221);
}


#proparties {
    margin-top:30px;
    margin-left: 200px;
    font-size: 20px;
    list-style-type:none;
    line-height: 30px;
    color: rgb(255,252,221);
    float: left;
}

#proparties a:visited {
    color: rgb(255,252,221);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reborn</title>
    <link rel="stylesheet" href="reborn.css" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@1,300&display=swap" rel="stylesheet">
</head>
<body>

<!-- Комментарии мог писать на английском , но лень -->
    <!-- Шапка, поделенная на 2 части, название сайта и навигация  -->
<header>
    <div id=header><span style="font-size: 30px; color:" title="Главная" >Realestate Company</span><br /> <span style="font-size: 18px" title="Главная">Lorem ipsum is simply dummy text <span></div>
    <ul id=navigation>
    <li><a href="#" target="_blank">Home</a></li>
    <li><a href="#" target="_blank">Our Story</a></li>
    <li><a href="#" target="_blank">Tenant</a></li>
    <li><a href="#" target="_blank">Owner</a></li>
    <li><a href="#" target="_blank">Contact Us</a></li>
    </ul>
</header>


<!-- Начало класс main(основная информация) -->
    <div class="main">

<!-- choice блок где можно выбрать какой дом ты хочешь -->
<div id="choice">

    <!-- фото и текст -->
    <div id="photos">
        <img src="https://media-ph-live.lamudi.com/cXVhbGl0eS83MA%3D%3D/2x2x2x700x340/9b54705feafdf0.jpg" alt="">
        <div id="text_choice"><strong><span style="font-size: 25px">Lorem ipsum is simply dummy text of</span></strong> <br />
        We work with investors to make managing your investmens easy!</div>
    </div>

    <!-- выбор для кого дом -->
    <div id=selecthome>
        <div id=forthey> <a href="#" target="_blank"><span id="texttenants"><strong>Tenants</strong></span> <span id="textowners"><strong>Owners</strong></span></a>
        </div>

        <!-- поле для поиска, cелекторы и кнопка поиска -->

        <div id=selecthousehere>
            <strong>Address, Suburbs, Postcodes, or Regions</strong>
            <form action="" name="search" id="searchall" >
                <input type="text" id="search" placeholder="Example:Ulica Pushkina, Dom Kolotushkina, 2216">
<strong>Property Type:</strong>
            <select id="propertytype" name="propertytype">
                <option disabled="disabled" selected="selected">-- Select one --</option>
                <option value="all">all</option>
                <option value="bad">bad</option>
                <option value="medium">medium</option>

            </select> <br />
<strong>Bedrooms:</strong>
            <select id="bedrooms" name="bedrooms">
                <option disabled="disabled" selected="selected">-- Select one --</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>

            </select> <br />

            <button type="sibmit" id="buttonsearch"><strong>Search</strong></button>
        </form>
            </div>
    </div>
</div>


        <!-- 3 действия с домами которые можно произвести на сайте -->

<div class="whatyoucan">
    <div id="grid">
        
    <div id="buy"><h2><img src="home.png">Buy a home</h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown</div>
        
    <div id="sell"><h2><img src="home.png">Sell a home</h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown</div>
        
    <div id="rent"><h2><img src="home.png">Rent a home</h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown</div></div>
</div>


        <!-- Грид сетка с различными домами -->

<div id="houses">
        <div id="gridhome">
            <div id=firsthouse>
                <a href="#" target="_blank"><img src="Layer 41.png" alt="">
                <p style="padding: 5px">6290 Kupper South Wanush,
                 TX 25348</p></a>
            </div>
            <div id=secondhouse>
                <a href="#" target="_blank"><img src="Layer 41.png" alt="">
                <p style="padding: 5px">4605 Bayonne Court Arlington,
                 TX 76016</p></a>
            </div>
            <div id=thirdhouse>
                <a href="#" target="_blank"><img src="Layer 41.png" alt="">
                <p style="padding: 5px">4605 Yonne Greng Ington, FR 35016</p></a>
            </div>
            <div id=fourthhouse>
                <a href="#" target="_blank"><img src="Layer 41.png" alt="">
                <p style="padding: 5px">6378 Tiger Erlong Couple, TX 39970</p></a>
            </div>
            <div id=fifthhouse>
                <a href="#" target="_blank"><img src="Layer 41.png" alt="">
                <p style="padding: 5px">1234 Zenden Poster Muden, TX 50013</p></a>
            </div>
            <div id=sixthhouse>
                <a href="#" target="_blank"><img src="Layer 41.png" alt="">
                <p style="padding: 5px">4999 Shkolnik Wrangel Milk, TX 22833</p></a>
            </div>
            <div id=seventhhouse>
                <a href="#" target="_blank"><img src="Layer 41.png" alt="">
                <p style="padding: 5px">1289 Bech Court Punk, TX 64321</p></a>
            </div>
            <div id=eighthhouse>
                <a href="#" target="_blank"><img src="Layer 41.png" alt="">
                <p style="padding: 5px" >5912 Starlin Smike Padington, TX 49821</p></a>
            </div>
        </div>
</div>


<!-- Вход и регистрация на сайте -->

<div id="login">
    <div id="gridlogin">
        <div id="memberlogin">
            <strong style="font-size: 30px; color:rgb(255,252,221);margin: 15px;  ">Member Login</strong>

            <form action="" id="entry">
                <input type="text"  id="username" placeholder="User name">
                <input type="password" id="password" placeholder="Password">
                <button type="submit" id="buttonlogin"><strong>Login</strong></button>
            </form>
        </div>
        <div id="subscribe"><strong style="color:rgb(255,252,221); font-size: 20px;">Subscribe to out weekly newsletter</strong>
        <form action="" id="email">
            <input type="email" placeholder="Your Email" id="fieldinput">
            <button type="submit" id="submitsubscribe"><strong>Subscribe</strong></button>
        </form>
        </div>
        <div id="signup">
            <div id="memberyet">Not a member yet?</div> <a href="#" target="_blank">Signup now!</a>
        </div>
        <div id="socnet">
            <a href="#" target="_blank"><img src="google +.png" alt=""></a>
            <a href="#" target="_blank"><img src="facebook.png" alt=""></a>
            <a href="#" target="_blank"><img src="twitter.png" alt=""></a>

        </div>

    </div>
</div>
    </div>


<!-- footer -->

<footer>
    <ul id="aboutus"> <strong>About us:</strong>
        <a href="#" target="_blank"><li>About us</li></a>
        <a href="#" target="_blank"><li>Why us</li></a>
        <a href="#" target="_blank"><li>Costumer Stories</li></a>
        <a href="#" target="_blank"><li>Press Resources</li></a>
        <a href="#" target="_blank"><li>Press Releases</li></a>
        <a href="#" target="_blank"><li>Contact us</li></a>
    </ul>
    <ul id="proparties"> <strong>Proparties:</strong>
        <a href="#" target="_blank"><li>Rent a home</li></a>
        <a href="#" target="_blank"><li>Lease a home</li></a>
        <a href="#" target="_blank"><li>Buy a home</li></a>
        <a href="#" target="_blank"><li>Rent a home</li></a>
        <a href="#" target="_blank"><li>Sell a home</li></a>
        <a href="#" target="_blank"><li>Ask advices</li></a>
    </ul>
</footer>
</body>
</html>

Насчёт дизайна и шрифтов - если нужно будет сделать красиво и у меня будут данные по типу цветов и шрифтов то я сделаю, а тут в принципе это не столь важно.

Answer 1

Начнем с критики:

Общая ошибка: у вас клик срабатывает только по надписи, а не по блоку. Это в меню и в выборе домов
Селекты следует стилизовать, заходите на тот же самый CodePen и вбиваете "select", далее выбираете понравившийся, и интегрируете в свой код.
Разумеется вам предстоит оптимизировать страницу под мобильные устройства и различные расширения экранов, через @media screen
Для input я бы задал свойство padding для того внутреннего отступа текста
Также для input прописать свойство outline:none
Поставить cursor:pointer на кнопки
Предположительно, стоит сделать весь контент в main,head,footer располагающийся на одной ширине, иначе получается не совсем приятно (imho)
(IMHO)Перенести меню в шапку, справа от надписи "Realestate Company Lorem ipsum is simply dummy text". Возможно, после того, как вы зададите одинаковую ширину для main,head,footer - это будет уже не необходимо

Советы:

Посмотрите такой сайт, как AdobeColor, очень помогает для выбора цветовых гамм, также там можно просмотреть трендовые цветовые гаммы, и много чего другого.
Для упрощения верстки можете в будущем пользоваться bootstrap, только к нему надо привыкнуть, я все же предпочитаю, если есть время, писать все самому.
Разумеется также на практике внедрить JS, и после PHP.

Если у вас написан только CSS и HTML, в большинстве случаев там ускорять нечего, по крайне мере пользователь разницу не увидит, только если он не сидит с устройства из мезозоя.

Answer 2

Главный блок надо разместить по центру при помощи margin-left: auto; margin-right: auto;. Высоту блокам практически никогда не надо задавать, если только это не геометрическая фигура, следоательно контентному блоку .main она не нужна.

Советую сразу же на этапе первого изучения верстки вникать в БЭМ и не писать айдишники как селекторы для стилей.

Картинкам надо задавать альтернативный текст и размеры. Разумеется, изображения должны соответствовать этим заданным размерам. И еще их надо оптимизировать - начать можно с squoosh.app, а затем, когда изучите сборщики, делать это автоматически. Правильный формат картинки - залог успеха, потому не надо сохранять фотку в PNG, а иконка всегда должна быть векторной (SVG).

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

Форма очень часто является важнейшей частью на странице. Ее надо сделать максимально удобной и доступной. Потому никогда не забывайте про лейблы, ассоциированные с инпутами и селектами.

Навигация по сайту должна быть на месте, не надо открывать новое окно по клику на ссылку, которая ведет на этот же сайт. А если надо уводить на другой сайт в другую вкладку, то должен присутствовать rel="noopener noreferer".

И напоследок - не надо стилизовать блоки в HTML на месте, в атрибуте style.

Удачи на пути изучения технологий, пусть этот первый сайт не станет последним.

БЛОГ НА HUSL

Первый сайт, подсказки и советы

Ответы (2 шт):