"Твой второй код: Спасибо, что ты со мной"
Привет! Меня зовут Сергей, и сегодня я хочу показать вам, как создать ещё одну простую, но красивую веб-страницу. Это будет отличная возможность попрактиковаться и улучшить свои навыки программирования.
Представьте, что вы уже сделали свой первый шаг в мире IT и теперь готовы двигаться дальше. Давайте создадим страницу, которая поблагодарит вас за то, что вы решили остаться со мной и продолжить обучение.
Для этого выполните следующие шаги:
Создание текстового документа :Откройте текстовый редактор (например, Notepad на Windows или TextEdit на Mac).
Вставьте туда следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой второй код</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #61dafb;
color: #282c34;
margin: 0;
text-align: center;
}
h1 {
font-size: 3em;
animation: bounceIn 2s ease-in-out;
}
p {
font-size: 1.5em;
animation: fadeIn 3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
</style>
</head>
<body>
<h1>Спасибо, что ты со мной!</h1>
<p>Создай свой первый проект и следуй за мной!</p>
</body>
</html>
- Сохранение документа :Сохраните файл с расширением .html, например, мой_второй_код.html.
- Открытие в браузере :Найдите сохранённый файл на компьютере и дважды щёлкните по нему. Ваш браузер автоматически откроет его, и вы увидите результат!
Эта страница немного сложнее первой, но она также очень проста. Обратите внимание на анимации, которые делают её более живой и интересной. Вы можете экспериментировать с различными эффектами и стилями, чтобы сделать её уникальной.
Теперь у вас есть два проекта, с которых можно начать своё путешествие в мир программирования. Эти маленькие успехи — это только начало вашего пути. Продолжайте учиться и практиковаться, и вы сможете создавать удивительные вещи!
Не забывайте подписываться на мой канал и помните "Программирование для всех", чтобы получать новые материалы и быть в курсе последних новостей из мира IT. Вместе мы сможем достичь невероятных высот!
Заключение
Эти статьи помогут вам быстро создать свои первые веб-страницы и получить базовые знания о HTML и CSS. Они также покажут, как легко и весело может быть программирование, если вы подходите к этому с любопытством и энтузиазмом.
Если у вас есть вопросы или нужна помощь, не стесняйтесь обращаться! Я здесь, чтобы помочь вам на каждом этапе вашего пути. 😊
Готовы продолжить? Давайте обсудим следующие темы или проекты, которые могут заинтересовать вашу аудиторию!