Responsive Web

Hola buenas noches,estoy trabajando para un proyecto de la secundaria.Y logre avanzarlo bastante,pero estoy trancado en la parte de hacer que sea responsive.La cosa es que no tengo ni la mas mínima idea de como hacerlo.

Si me pueden dar un ayuda seria mas que excelente.

Html

Código:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/Tecnologia.css">
<title>Document</title>
</head>
<nav>
<a href="index.html"><img style="margin-left: 1150px;" width="30px" height="30px" src="img/INDEX.png" alt=""></a>
</nav>
<body>
<div class="codigohtml">
<center>
Parte del codigo fuente
</center>
__-- 1-- < html lang="es"> 

__---2_- < head >
__-- 3-__--- < meta charset="UTF-8"> 
__-- 4-__--- < meta name="viewport" content="width=device-width, initial-scale=1.0">
__-- 5-__--- < link rel="stylesheet" href="css/cssdeprueba1.css">
__-- 6-__---< title >Document< /title >
__-- 7__< /head >
 

__-- 8_- < body >

__-- 9-__- < div id="menu">
_...10-___--< ul > 
__ 12_-- -______< li > < a href="Tenologia.html"> tecnología < /a >< /li > 
__ 13_-- -______< li > < a href="#"> Ual < /a >< /li > __ 18_-- -______< li > < a href="#"> Ingles< /a >< /li > 
__ 14_-- -______< li > < a href="#"> Ciencias experimentales < /a >< /li > 
__ 15_-- -______< li > < a href="#"> Idioma esp< /a >< /li > __ 18_-- -______< li > < a href="#"> Biologia< /a >< /li > 
__ 16_-- -______< li > < a href="#"> Matemática< /a >< /li > 
__ 17_-- -______< li > < a href="#"> Taller < /a >< /li > 
 __ 18-______< /ul > 
_.. 19__- < /div > 
 
__-20_--< /body >
 

_.. 21_-- < s tyle > 
 
_...22___- * {
_...23______- padding: 0 ; 
_...24______- margin: 0 ; 
_...25______- font-family: Arial, Helvetica, sans-serif ; 
_...26______- decoration: none; 
_...27__----- }
_...28_-- 

_...29__-- .codigohtml { 
_...30______- background-color: rgb(51,51,51); 
_...31______- border-color: rgb(177,177,177); 
_...32______- border-width: 3px; 
_...33______- border-style: solid; 
_...34______- margin: 20px; 
_...35______- font-size: 13px; 
_...36___--- }
_...37 

_...38___- .html{ 
_...39______- margin-bottom: -19px; 
_...40______- padding: 2px; 
_...41______- text-align: center; 
_...42______- font-family: Arial, Helvetica, sans-serif;
_...43______- font-size: 15px; 
_...44___--- }
_...45_-- 

_...46___- .css{ 
_...47______- margin-bottom: -19px; 
_...48______- padding: 2px; 
_...49______- text-align: center; 
_...50______- font-family: Arial, Helvetica, sans-serif;
_...51______- font-size: 15px; 
_...52___--- }
_...53_-- 

_...54___- .em { 
_...55____---- font-style: normal; 
_...56___--- }
_...57_-- 

_...58___- .numero { 
_...59______- -moz-user-select:none; 
_...60______- -webkit-user-select:none; 
_...61______- -ms-user-select:none; 
_...62______- -user-select:none; 
_...63___--- }
_...64_-- 

_...65___- .codigocss{ 
_...66______- background-color: rgb(51,51,51); 
_...67______- border-color: rgb(177,177,177); 
_...68______- border-width: 3px; 
_...69______- border-style: solid; 
_...70______- margin: 20px; 
_...71___--- }
 
_.. 72_-- < /style >
 
_.. 73_-- < /html >

</div>
</body>
<footer class="middle">
<button class="btn btn1"><a style="text-decoration: none;color: white;" href="PaginaWeb.zip" download="PaginaWeb.rar">Descargue la pagina web aquí!</a></button>
</footer>

</html>

Css

Código:

*{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;

}

body{
background-color: rgb(51, 51, 51);
}

em{
font-style: normal;
}

.numero{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

.middle{
position: absolute;
bottom: -760px;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;

}

.btn{
background: none;
border: 2px solid #000;
font-size: "montserrat",sans-serif;
text-transform: uppercase;
padding: 12px 20px;
min-width: 200px;
margin: 10px;
cursor: pointer;
transition: color 0.4s linear;
position: relative;
top: -20px;
}

.btn:hover{
color: #fff;

}

.btn::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 26, 255);
z-index: -1;
transition: transform 0.5s;
transform-origin:0 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
}

.btn1::before{
transition: 1.5s;
transform:scaleX(0) ;
}

.btn1:hover::before{
transition: 1.5s;
transform:scaleX(1) ;
}

Pd:Si soy nuevo en html y css.