Házi feladatok

Gyakorlat teszi a mestert!

A tanulóink mindig kapnak házi feladatot, ahol jópofa, játékos feladatok megoldásával gyakorolhatják a webfejlesztés alapjait. Ezen az oldalon mutatunk egy pár izgalmas példát. Elsőre lehet, hogy egyszerűnek tűnnek, mégis kellően megalapozott HTML/CSS/JS tudás kell a megoldásukhoz. Mindegyikhez mellékeljük a megoldást is, ami csak egy a több lehetséges közül.

1. HTML kódok gyakorlása sakktáblával

Jeleníts meg középre igazítva egy sakktáblát, amit HTML-ben hozz létre!
Próbáld meg minél egyszerűbben!
Megjegyzés: a sakkfigurák megtalálhatók az unicode karaktertáblában

Megoldás

2. Flexbox gyakorlás zászlókkal

Egy weboldalon helyezz el három DIV-et, piros, fehér, és kék háttérrel. Mobil nézetben legyen francia zsászló, asztali nézetben orosz!

Megoldás

3. Animáció CSS segítségével

Feladat:

a hajó jusson el a kép bal széléről a jobbra
közben a napocska keljen fel, a képernyő közepétől a tetejére kússzon fel
közben világosodjon ki az ég!

Megoldás

4. Javascript feladat

Itt egy doboz. 2 mp-enként változzon meg a doboz border-radiusa VAGY 50%-ra VAGY 0-ra. Véletlenszerűen sorsolódjon ki az is, hogy milyen háttérszínt kap a doboz!

Megoldás

5. Szöveg animációja

Feladat:

HTML-ben helyezd el SVG segítségével a PROOKTATÁS szöveget
CSS-ben animáld meg a betűk körvonalának kirajzolását, és a kitöltőszín világos szürkéből sötétedjen
Helyezd középre a szöveget és használd a Prooktatás kék színét!

Megoldás

                

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

<head>
    <meta charset="UTF-8">
    <title>Doboz</title>
<style>
    #box{
        
        width: 200px;
        height: 200px;
        
    }    
</style>

</head>

<body>
    <div id="box"></div>

    <script>
        const box = document.getElementById('box');

        setInterval(() => {
            box.style.borderRadius = `${Math.random() < 0.5 ? '0' : '50%'}`;
            box.style.backgroundColor = getRandomColor();
        }, 2000);

        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

    </script>

</body>

</html>


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sakk</title>
</head>
<body>
	
</body>
</html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        a {
            color: #000;
            display: block;
            font-size: 60px;
            height: 80px;
            position: relative;
            text-decoration: none;
            text-shadow: 0 1px #fff;
            width: 80px;
        }

        #chess_board {
            margin: auto;
            border: 5px solid #333;
        }

        #chess_board td {
            background: #fff;
            background: -moz-linear-gradient(top, #fff, #eee);
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#eee));
            box-shadow: inset 0 0 0 1px #fff;
            -moz-box-shadow: inset 0 0 0 1px #fff;
            -webkit-box-shadow: inset 0 0 0 1px #fff;
            height: 80px;
            text-align: center;
            vertical-align: middle;
            width: 80px;
        }

        #chess_board tr:nth-child(odd) td:nth-child(even),
        #chess_board tr:nth-child(even) td:nth-child(odd) {
            background: #ccc;
            background: -moz-linear-gradient(top, #ccc, #eee);
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#eee));
            box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
            -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
            -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
        }
    </style>
</head>

<body>
    <table id="chess_board" cellpadding="0" cellspacing="0">
        <tr>
            <td id="A8"><a href="#" class="rook black">&#9820;</a></td>
            <td id="B8"><a href="#" class="night black">&#9822;</a></td>
            <td id="C8"><a href="#" class="bishop black">&#9821;</a></td>
            <td id="D8"><a href="#" class="king black">&#9819;</a></td>
            <td id="E8"><a href="#" class="queen black">&#9818;</a></td>
            <td id="F8"><a href="#" class="bishop black">&#9821;</a></td>
            <td id="G8"><a href="#" class="night black">&#9822;</a></td>
            <td id="H8"><a href="#" class="rook black">&#9820;</a></td>
        </tr>
        <tr>
            <td id="A7"><a href="#" class="pawn black">&#9823;</a></td>
            <td id="B7"><a href="#" class="pawn black">&#9823;</a></td>
            <td id="C7"><a href="#" class="pawn black">&#9823;</a></td>
            <td id="D7"><a href="#" class="pawn black">&#9823;</a></td>
            <td id="E7"><a href="#" class="pawn black">&#9823;</a></td>
            <td id="F7"><a href="#" class="pawn black">&#9823;</a></td>
            <td id="G7"><a href="#" class="pawn black">&#9823;</a></td>
            <td id="H7"><a href="#" class="pawn black">&#9823;</a></td>
        </tr>
        <tr>
            <td id="A6"></td>
            <td id="B6"></td>
            <td id="C6"></td>
            <td id="D6"></td>
            <td id="E6"></td>
            <td id="F6"></td>
            <td id="G6"></td>
            <td id="H6"></td>
        </tr>
        <tr>
            <td id="A5"></td>
            <td id="B5"></td>
            <td id="C5"></td>
            <td id="D5"></td>
            <td id="E5"></td>
            <td id="F5"></td>
            <td id="G5"></td>
            <td id="H5"></td>
        </tr>
        <tr>
            <td id="A4"></td>
            <td id="B4"></td>
            <td id="C4"></td>
            <td id="D4"></td>
            <td id="E4"></td>
            <td id="F4"></td>
            <td id="G4"></td>
            <td id="H4"></td>
        </tr>
        <tr>
            <td id="A3"></td>
            <td id="B3"></td>
            <td id="C3"></td>
            <td id="D3"></td>
            <td id="E3"></td>
            <td id="F3"></td>
            <td id="G3"></td>
            <td id="H3"></td>
        </tr>
        <tr>
            <td id="A2"><a href="#" class="pawn white">&#9817;</a></td>
            <td id="B2"><a href="#" class="pawn white">&#9817;</a></td>
            <td id="C2"><a href="#" class="pawn white">&#9817;</a></td>
            <td id="D2"><a href="#" class="pawn white">&#9817;</a></td>
            <td id="E2"><a href="#" class="pawn white">&#9817;</a></td>
            <td id="F2"><a href="#" class="pawn white">&#9817;</a></td>
            <td id="G2"><a href="#" class="pawn white">&#9817;</a></td>
            <td id="H2"><a href="#" class="pawn white">&#9817;</a></td>
        </tr>
        <tr>
            <td id="A1"><a href="#" class="rook white">&#9814;</a></td>
            <td id="B1"><a href="#" class="night white">&#9816;</a></td>
            <td id="C1"><a href="#" class="bishop white">&#9815;</a></td>
            <td id="D1"><a href="#" class="king white">&#9813;</a></td>
            <td id="E1"><a href="#" class="wife white">&#9812;</a></td>
            <td id="F1"><a href="#" class="bishop white">&#9815;</a></td>
            <td id="G1"><a href="#" class="night white">&#9816;</a></td>
            <td id="H1"><a href="#" class="rook white">&#9814;</a></td>
        </tr>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        
</body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 

body {
    margin: 0;
}

html {
    overflow: hidden;
}

#sky {
    position: absolute;
    width: 100%;
    height: 50%;
    background: lightblue;
    animation: sky 10s;
}

#sea {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    background: blue;
}

#sun {
    height: 100px;
    position: absolute;
    animation: sunrise 10s
        /*infinite*/
    ;
}

#boat {
    height: 150px;
    position: absolute;
    top: 5%;
    left: 100%;
    animation: boat 5s;
}


@keyframes sunrise {
    0% {top: 90%;   }
    100% { top: 0;}
    /*
    0%   {top:90%; left:0;}
    33%  {top:0; left:40%; }
    66%  {top:0; left:40%; }
    100% {top:90%; left:80%; }
*/
}
@keyframes sky {
    0% {background: black}
    100% {background: lightblue}
}
@keyframes boat {
    0%   {top:5%; left:0;}
    100% {top:5%; left:100%; }
}


</style>
  </head>
  <body>
      <div id="sky">
        <img src="../sunrise/sun.png" alt="napocska" id="sun">
      </div>
      <div id="sea">
        <img src="../sunrise/boat.png" alt="hajócska" id="boat">
      </div>
  </body>
</html>


<!doctype html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Házi feladat</title>
    <style>
        html,
        body {
            height: 100%;
        }
        body {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
        .piros,
        .kek,
        .feher {
            flex-grow: 1;
        }
        .piros {
            background-color: red;
        }
        .feher {
            background-color: white;
        }
        .kek {
            background-color: blue;
        }
@media only screen and (min-width: 1200px) {
            body {
                display: flex;
                flex-direction: column;
            }
            .piros {
                order: 2;
            }
            .feher {
                order: 0;
            }
            .kek {
                order: 1;
            }
        }

    </style>
</head>
<body>
    <div class="kek"></div>
    <div class="feher"></div>
    <div class="piros"></div>
</body>
</html>


            <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG animáció</title>
    <style>

        div {
            display: grid;
            place-items: center;
            
        }

    
        .text-animation {
            font-size: 14rem;
            fill: rgba(70, 85, 90, 0.4);
            stroke: rgba(23, 139, 235, 1);
            stroke-width: 5;
            animation: stroke 5s;
          }

          @keyframes stroke {
            0% {
              stroke-dashoffset: 25%;
              stroke-dasharray: 0 50%;
              stroke-width: 2;
              fill: rgba(70, 85, 90, 0.2);
              stroke: rgba(23, 139, 235, 0.4);
            }
            100% {
              stroke-dashoffset: -25%;
              stroke-dasharray: 50% 0;
              fill: rgba(70, 85, 90, 0.9);
              stroke: rgba(23, 139, 235, 1);
            }
          }
          
    </style>
</head>
<body>
        <div>

            <svg viewBox="0 0 1600 300">
                <text x="50%" y="50%" dy=".35em" text-anchor="middle" class="text-animation" >
                    PROOKTATÁS
                </text>
            </svg>	
           
        </div>
          
        
</body>