Guruh talabasi odilov Jasurbek

Download 311.98 Kb.

bet	2/2
Sana	17.06.2023
Hajmi	311.98 Kb.
	#1528127

1 2

Bog'liq
Mustaqil ish2

Cod muhariri.
Atom , Brackcets , Sublime Text, Web Shtorm.
Xulosa

JavaScript, veb-sahifalar uchun dasturlash tili hisoblanadi. Bu tilda HTML va CSS bilan birlikda, brauzerda dinamik veb-sahifalarni yaratish uchun ishlatiladi.
JavaScript bilan brauzerda bir nechta amallarni bajarish mumkin, masalan, HTML elementlarini yaratish va o'chirish, CSS stilini o'zgartirish, animatsiyalar yaratish, formalar yaratish va tekshirish, va boshqa ko'plab amallarni bajarish mumkin.

JavaScript tilining eng katta xususiyatlari birinchidan, undan mustaqil ravishda ishlatilishi mumkin. JavaScript bilan yaratilgan kod serverda emas, balki brauzerda ishlatiladi va bu ko'p foydalanuvchilarga uchun veb-saytlarni va ilovalarni yanada dinamik va interaktiv qiladi.

Ikkinchidan, JavaScript bir nechta JavaScript-ustida kutubxonalardan foydalanish imkoniyatini beradi, ya'ni boshqalarga tegishli kodlar yozishdan qochadi. Bu JavaScript kutubxonalari sahifalarni qulay va oson yaratishga va ularga ko'rsatishga imkon beradi.

JavaScript turli brauzerlarda ishlaydi va eng yirik dasturchilik platformalari (masalan, React, Angular, va Vue) yordamida ishlatiladi. JavaScript, veb-saytlar va ilovalar yaratishda zarur bo'lgan asosiy tildir. Ularning ko'pincha qulay ko'rinishda va interaktivlik qilishda JavaScript-ning ahamiyati katta.

Men bu “Mustaqil ish”im davomida “Linked”platformasinig Frond-End qismini Tayorladi. Unda “HTML”,”CSS” , tillaridan foydalandim. Koddan namunalar:

HTML

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>spacextitle>
<link rel="stylesheet" href="/css/stayle.css">
head>

<body>
<div class="cotainer">
<div class="navbar">
<div class="nav">
<a href="#"><img src="/logo.png" alt="">a>
div>

<div class="nav">
<a href="#">Falcon 9a>
<a href="#">Falcon Heavya>
<a href="#">Dragona>
<a href="#">Updatesa>
div>

<div class="nav1">
<a href="#">Abouta>
<a href="#">Gallerya>
<a href="#">Shopa>
div>
div>
<div class="main">
<h1 class="main-title">
Falcon Heavy
h1>
<p> the most powerful operational rocket in the world by a factor of two
p>
<div class="border">div>
<img src="/image 2.png" alt="">
div>
<div class="box">
<div class="box1">
<h1 class="h1">
Falcon Heavy Overview
h1>
<table>
<tr>
<td>HEIGHTtd>
<td>70 m / 229.6 fttd>
tr>
<tr>
<td>DIAMETERtd>
<td>12.2 m / 39.9 fttd>
tr>
<tr>
<td>MASStd>
<td>1,420,788 kg / 3,125,735 lbtd>
tr>
<tr>
<td>PAYLOAD TO LEOtd>
<td>63,800 kg / 140,660 lbtd>
tr>
<tr>
<td>PAYLOAD TO GTO td>
<td>26,700 kg / 58,860 lbtd>
tr>
<tr>
<td>PAYLOAD TO MARStd>
<td>16,800 kg / 37,040 lbtd>
tr>
table>
<h1 class="h1">UNMATCHED PERFORMANCEh1>
<h3>With more than 5 million pounds of thrust at liftoff, Falcon Heavy is the most capable rocket
flying. By
comparison, the liftoff thrust of the Falcon Heavy equals approximately eighteen 747 aircraft at
full
power. Falcon Heavy can lift the equivalent of a fully loaded 737 jetliner—complete with passengers,
luggage and fuel—to orbit.h3>
div>
<div class="box2">
<img src="" alt="">
div>
div>

<div class="blok">
<div class="header">
<a href="#">
<img src="/logo.png" alt="">
a>
div>
<div class="header">
<a href="#">Twittera>
<a href="#">Youtubea>
<a href="#">Instagrama>
<a href="#">Flickra>
<a href="#">LinkedIna>
<a href="#">Privacya>
<a href="#">Policya>
div>
<p>For additional questions, contact rideshare@spacex.comp>
<div class="header">
<button>Contact usbutton>
div>
div>
div>
body>
html>

CSS KODLARI:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: sans-serif;
background-color: black;
}

.cotainer {
height: 3400px;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-around;
height: 100px;
}
.border {
width: 50%;
height: 60px;
border-right: 1px solid white;
}
.box {
display: flex;
align-items: center;
justify-content: center;
}
a {
color: rgba(255, 255, 255, 0.8);
margin-right: 15px;
font-size: 12px;
}
.nav1 a {
color: rgba(251, 251, 251, 0.5);
}
.main {
margin: 0;
text-align: center;
color: white;
}
.main-title {
margin: 0px 0;
font-size: 60px;
font-weight: 500;
}
.main img {
width: 1250px;
}
.main p {
width: 270px;
margin: 25px auto;
color: rgba(251, 251, 251, 0.672);
}
.h1 {
color: white;
width: 300px;
margin: 20px 100px;
}
.box2 {
width: 50%;
height: 1720px;
background-image: url(/image-removebg-preview\ 1.png);
}
td {
color: rgba(255, 255, 255, 0.8);
padding: 10px 0px 10px 100px;
}
h3 {
width: 450px;
font-size: 15px;
font-weight: 400;
margin: 40px 40px 40px 100px;
color: rgba(255, 255, 255, 0.8);
}
table {
margin-bottom: 200px;
}
.blok p {
color: rgba(251, 251, 251, 0.5);
text-align: center;
font-size: 15px;
}
.header {
text-align: center;
margin: 25px;
}
.blok button {
color: white;
border: 2px solid white;
border-radius: 5px;
padding: 15px 70px;
}
.blok a {
font-size: 15px;
color: white;
}

Cod muhariri.

Men bu loyihani dasturlash davomida “VS Code” san foydalandim. Bu muharir mem uchun juda qulay sabablari:

Muhitning Qulayigi va bepulligi.
Imkoniyatlari va kampyuterning tanlamasligi. 3). Hamma dasturlash tillarini yozish mumkunligi.

To’g’ridan to’gri Git va GitHub bilan bog’lanishligi.
Foydalanuvchi o’zi uchun qulay bo’lgan mavzuni tayorlashligi.
Qulayliklaridan eng birinchisi “Web Dasturturchi”lar uchun juda qulay bo’lgan Cod muhariri hisoblanadi.

Bu fikirlar mening shaxsiy fikrim. Men doim “VS Code”dan foydalanaman.
Boshqa Cod muharirlari ham mavjud lekin bunchalik qulay emas. Masalan:

Atom , Brackcets , Sublime Text, Web Shtorm.

Amaliy Qism.

Loyihaning ko’rinishi quyidagicha:

Bu sahifa contentlar oynasiga havolalarni o`z ichiga oladi.

Ushbu qisimda yaratish uchun. navbar nomli class ochib uni ichida yana 3ta nav nomli class ochamiz nav nomli clasni ichiga a teglarini joylaymiz va nav claslar yonma yon joylashishi uchun navbar clasiga displey flex berib stayle berib qo`yamiz.

Ushbu qismda main nomli class yaratib olamiz keyin uni ichiga h1, p va img yaratib olamiz va ularga matin razmeri yani shirift kattaligi uchun- font size, shiriht qalinligi uchun font weight ,matn rangi uchun color rasm o`lchamlari uchun widht heigt berib olamiz

Ushbu qisimda chiqarish uchun box degan class ochib olamiz va uni ichiga
box1 va box2 nomli class ochib olamiz box1 nomli class ichiga h1, h3 va table teglarini yaratib olamiz va malumotlarni kiritamiz. Box2 nomli classga esa img tegini joylashtiramiz va bularga css da stayle beramiz

Usbu qisimni yaratish uchun birinchi bloc nomli class ochamiz va uni ichiga header nomli classdan 3ta ochamiz header claslarini ichiga img a va button teglarini ochib olamiz va ularga cssga stayle berib qo`yamiz.

Xulosa

Bu loyihani ishlash davomida html hamda css ni o`zi bilan mukammal veb sahifa tayorlash mumkin emasligini bildim man keyingi loyha ishlarimda Html css javascript jquery bootstrap va boshqa tillardan foydalangan xolda mukamal loyhalarni tayorlashga harakat qilaman.Men ushbu loyhani tayorlashb jarayonida ko`plab o`zim bilmaga yangi kodlarni o`rgandim. Bu loyiha menga ancha keng imkoniyatlar va ko’plab bilimar olishimga yordam berdi.
Foydalanilgan saytlar: Wikipedia.org micrasoft.com w3schools.com

Download 311.98 Kb.

Do'stlaringiz bilan baham:

1 2