First steps - Kitasio/MyWebDev GitHub Wiki

  1. Go to bootstrap and copy the "Starter template" to your HTMl file, you might wanna download bootstrap and link to it locally, but they say for production better use CDN.

  2. Create your style.css and put it under the bootstraps one, in css file make some default configurations, for example:

body{
	font-family: 'Monserrat', sans-serif;
	min-width: 320px;
}
img{
	max-width: 100%;
	height: auto;
}
section{
	padding: 100px 0;
}
h3{
	font-style: italic;
	font-size: 42px;
	font-family: 'Palatino Linotype'
}
h4{
	font-weight: 600;
	font-size: 44px;
}

  1. At the end of your style file you can add configuration boxes that tell how to behave in different screen resolutions, here's example for medium screen:

/* ==============SCREEN=============== */

@media only screen and (max-width: 991px) {
	.navbar .nav-item {
		padding: 0 0;
		font-size: 14px;
	}
	header p {
		margin-top: 200px;
	}
}

  1. Making a responsive navbar burger

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

  1. Grid

<!DOCTYPE html>
<html>
<head>
	<title>Using CSS Grid</title>
	<style>
		body{
			color: #fff;
			font-family: 'Nunito Semibold';
			text-align: center;
		}
        #content{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: minmax(100px, auto);
            grid-gap: 10px;
            max-width: 960px;
            margin: 0 auto;
            grid-template-areas:
                "header header header header"
                "footer footer footer footer"
                "main main main main"
                "main main main main"
                "aside aside nav nav"
                "section section section section"
                "section section section section";
        }
        /* desktop grid */
        @media screen and (min-width: 760px){
    		#content{
    			display: grid;
    			grid-template-columns: repeat(4, 1fr);
    			grid-auto-rows: minmax(100px, auto);
    			grid-gap: 10px;
    			max-width: 960px;
    			margin: 0 auto;
                grid-template-areas:
                    "header header header header"
                    "aside main main main"
                    "nav main main main"
                    "section section section section"
                    "section section section section"
                    "footer footer footer footer";
    		}
        }
		#content > *{
			background: #3bbced;
			padding: 30px;
		}
        header{
            grid-area: header;
        }
        main{
            grid-area: main;
        }
        aside{
            grid-area: aside;
        }
        nav{
            grid-area: nav;
        }
        section{
            grid-area: section;
        }
        footer{
            grid-area: footer;
            background: #333 !important;
        }
	</style>
</head>
<body>

	<div id="content">

		<header>Header</header>
        <main>Main</main>
        <section>Section</section>
        <aside>Aside</aside>
        <nav>Nav</nav>
        <footer>Footer</footer>

	</div>

</body>
</html>

NAVBAR

HTML

<!-- navbar -->
    <nav>
      <img src="img/logo.svg" alt="" />
      <input class="search" type="text" />
      <ul class="nav-links">
        <li><a href="#">Главная</a></li>
        <li><a href="#">Услуги</a></li>
        <li><a href="#">О клинике</a></li>
        <li><a href="#">Специалсты</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
      <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </div>
    </nav>

CSS

nav {
  min-height: 10vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
nav img {
  margin-right: 10vw;
  width: 5rem;
}
.search {
  width: 50%;
}
.nav-links {
  display: flex;
  justify-content: space-around;
  width: 60%;
}
.nav-links li {
  list-style: none;
}
.nav-links li a {
  text-decoration: none;
  color: #888;
}

/* BURGER */
.burger {
  display: none;
}
.burger div {
  width: 25px;
  height: 3px;
  background-color: #888;
  margin: 5px;
  transition: all 0.3s ease;
}

Now the media

@media screen and (max-width: 770px) {
  /* NAVBAR */
  .body {
    overflow-x: hidden;
  }

  .nav-links {
    position: absolute;
    right: 0px;
    height: 90vh;
    top: 10vh;
    background-color: white;
    box-shadow: 0 0 3px #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
    cursor: pointer;
  }

  nav img {
    width: 3rem;
  }

burger and slide animation

.nav-active { transform: translate(o%); } @keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0px); } }

.toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); } .toggle .line2 { opacity: 0; } .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }

JS

const navSlide = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");
  const navLinks = document.querySelectorAll(".nav-links li");
  //Toggle nav
  burger.addEventListener("click", () => {
    nav.classList.toggle("nav-active");

    //Animate Links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = "";
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +
          0.5}s`;
      }
    });
    // Burger Animation
    burger.classList.toggle("toggle");
  });
};

navSlide();
⚠️ **GitHub.com Fallback** ⚠️