HTML / CSS - Front-End

დაეუფლე Front-End ვებ ტექნოლოგიების საფუძვლებს და ისწავლე ვებ გვერდების შექმნა. დაიწყე სწავლა დღესვე!

Laptop  Icon - Academy Webflow Template
ონლაინ ვიდეოები
Files Icon - Academy Webflow Template
ქვიზები და ტესტები
Chat Icon - Academy Webflow Template
აქტიური ქომუნითი
Mentor Icon - Academy Webflow Template
სადისკუსიო სივრცე

ინფორმაცია

ჩვენი 12-კვირიანი HTML და CSS კურსი განკუთვნილია ყველა დონის დამწყებთათვის. ეს კურსი შენთვისაა თუ გსურს მიიღო საფუძვლიანი ცოდნა და პრაქტიკული უნარები ვებგვერდების შექმნაში. ამ კურსის განმავლობაში გავეცნობით ვებგვერდების სტრუქტურისა და ვიზუალის შექმნის მთავარ პრინციპებს, რაც საშუალებას მოგვცემს დამოუკიდებლად შევქმნათ მაღალი ხარისხის, თანამედროვე და Responsive ვებგვერდები.

რას ისწავლით

I კვირა: შესავალი HTML-ში

  • HTML-ის საფუძვლები და დოკუმენტის სტრუქტურა
  • ძირითადი HTML ტეგები და მათი გამოყენება
  • ტექსტის ფორმატირება და სიების შექმნა

II კვირა: HTML-ის მოწინავე ელემენტები

  • ბმულების და სურათების დამატება
  • ცხრილების შექმნა და ფორმების გამოყენება
  • პრაქტიკული მაგალითები

III კვირა: შესავალი CSS-ში

  • CSS-ის საფუძვლები და სტილები
  • ფერები და ფონები
  • CSS სინტაქსი და სელექტორები

IV კვირა: CSS Box მოდელი

  • Box მოდელის პრინციპები: border, content, padding, margin
  • ზომის მახასიათებლები
  • Box მოდელის გამოყენება პრაქტიკაში

V კვირა: CSS განლაგებები - ნაწილი 1

  • Display თვისება და მისი მნიშვნელობა
  • ელემენტების პოზიციონირება
  • მრავალსვეტიანი განლაგების შექმნა

VI კვირა: CSS განლაგებები - ნაწილი 2

  • Flexbox-ის საფუძვლები და მისი გამოყენება
  • Flex კონტეინერის და ელემენტების თვისებები
  • Responsive განლაგებების შექმნა

VII კვირა: CSS Grid

  • CSS Grid-ის საფუძვლები
  • Grid კონტეინერის და ელემენტების თვისებები
  • კომპლექსური განლაგებების შექმნა

VIII კვირა: Responsive ვებ დიზაინი

  • Media Queries და Responsive ერთეულები
  • Mobile first დიზაინის პრინციპები
  • Responsive ვებგვერდების შექმნა

IX კვირა: CSS Transitions & Animations

  • Transitions და მათი გამოყენება
  • CSS ანიმაციების შექმნა
  • Keyframe ანიმაციები

X კვირა: მოწინავე CSS ტექნიკები

  • CSS ცვლადები და მათი გამოყენება
  • ფსევდო-კლასები და ფსევდო-ელემენტები
  • მოწინავე სელექტორები

XI კვირა: მრავალგვერდიანი ვებგვერდის შექმნა

  • პროექტის სტრუქტურა და ფაილების ორგანიზაცია
  • გვერდების შორის ნავიგაცია
  • სტილის თანმიმდევრობა მრავალგვერდიან ვებგვერდზე

XII კვირა: ფინალური პროექტი და მიმოხილვა

  • ყველა გაკვეთილის მიმოხილვა
  • საუკეთესო პრაქტიკები HTML და CSS-ში
  • ხელმისაწვდომობა და SEO საფუძვლები

რა უნარებს შეიძენთ კურსის გავლის შემდეგ?

ამ კურსის დასრულების შემდეგ თქვენ შეძლებთ:

  • დამოუკიდებლად შექმნათ HTML და CSS კოდი, სტრუქტურირებული და სტილიზებული ვებგვერდებისთვის.
  • გამოიყენოთ მოწინავე CSS ტექნიკები Responsive და თანამედროვე ვებგვერდების შესაქმნელად.
  • შეადგინოთ მრავალგვერდიანი ვებგვერდები, რომლებიც მომხმარებლებისთვის მარტივად წვდომადი და კომფორტული იქნება.
  • გამოიყენოთ CSS Transitions და ანიმაციები ვიზუალური ეფექტების დასამატებლად.
  • გაეცნოთ ვებგვერდების ხელმისაწვდომობის და SEO საუკეთესო პრაქტიკებს.

BitCamp Reactor - ის Full Stack პროგრამით ხომ არ დაინტერესდები?

მოიცავს 15+ საგანს, 1 წლიანი განრიგით. ჯამურად დაზოგავ ასეულობით ლარს.
მაჩვენე შეთავაზება

სილაბუსი

თავი 1: Introduction to HTML

  • Topics Covered:
    • What is HTML?
    • The structure of an HTML document
    • Basic HTML tags: <!DOCTYPE>, <html>, <head>, <title>, <body>
    • Text formatting tags: <h1> to <h6>, <p>, <br>, <hr>
    • Creating lists: <ul>, <ol>, <li>
  • Practical Exercises:
    • Creating a simple webpage with a title and some paragraphs
    • Adding headings and lists to the webpage

თავი 2: Advanced HTML Elements

  • Topics Covered:
    • Links: <a>
    • Images: <img>
    • Tables: <table>, <tr>, <td>, <th>, <caption>
    • Forms: <form>, <input>, <textarea>, <button>, <select>, <option>
  • Practical Exercises:
    • Creating a navigation menu using links
    • Embedding images and creating image galleries
    • Designing a table with various data
    • Creating a simple contact form

თავი 3: Introduction to CSS

  • Topics Covered:
    • What is CSS?
    • Adding CSS to HTML: Inline, Internal, and External styles
    • Basic CSS syntax and selectors
    • Colors and backgrounds
  • Practical Exercises:
    • Adding inline, internal, and external styles to a webpage
    • Changing text and background colors
    • Applying background images and gradients

თავი 4: CSS Box Model

  • Topics Covered:
    • Understanding the CSS Box Model: Margin, Border, Padding, Content
    • Width and height properties
    • Box-sizing property
  • Practical Exercises:
    • Creating and styling boxes
    • Experimenting with different box model properties

თავი 5: CSS Layouts - Part 1

  • Topics Covered:
    • Display property: block, inline, inline-block, none
    • Positioning elements: static, relative, absolute, fixed, sticky
    • Float and clear properties
  • Practical Exercises:
    • Creating different types of layouts using display properties
    • Positioning elements on a webpage
    • Using float to create a multi-column layout

თავი 6: CSS Layouts - Part 2

  • Topics Covered:
    • Flexbox: Introduction and basic concepts
    • Flex container properties: display: flex, flex-direction, flex-wrap, justify-content, align-items
    • Flex item properties: flex-grow, flex-shrink, flex-basis, align-self
  • Practical Exercises:
    • Creating responsive layouts using Flexbox
    • Building a navigation bar with Flexbox
    • Designing a flexible grid layout

თავი 7: CSS Grid

  • Topics Covered:
    • Introduction to CSS Grid
    • Grid container properties: display: grid, grid-template-columns, grid-template-rows, grid-gap
    • Grid item properties: grid-column, grid-row
  • Practical Exercises:
    • Creating a basic grid layout
    • Building a complex grid layout with multiple rows and columns

თავი 8: Responsive Web Design

  • Topics Covered:
    • Media queries
    • Responsive units: %, em, rem, vh, vw
    • Mobile-first design approach
  • Practical Exercises:
    • Making a webpage responsive using media queries
    • Designing a responsive navigation menu
    • Creating a responsive image gallery

თავი 9: CSS Transitions and Animations

  • Topics Covered:
    • Introduction to CSS transitions
    • Creating simple animations with CSS
    • Keyframe animations: @keyframes
  • Practical Exercises:
    • Adding transitions to buttons and links
    • Creating animated elements on a webpage
    • Building a simple animated banner

თავი 10: Advanced CSS Techniques

  • Topics Covered:
    • CSS variables (custom properties)
    • CSS pseudo-classes and pseudo-elements
    • Advanced selectors: attribute selectors, combinators
  • Practical Exercises:
    • Using CSS variables for theme customization
    • Styling elements with pseudo-classes and pseudo-elements
    • Applying advanced selectors in a project

თავი 11: Building a Multi-page Website

  • Topics Covered:
    • Project structure and file organization
    • Navigation between pages
    • Consistent styling across multiple pages
  • Practical Exercises:
    • Planning and designing a multi-page website
    • Creating a consistent navigation menu
    • Linking pages and ensuring consistent styles

თავი 12: Final Project and Review

  • Topics Covered:
    • Review of all topics covered
    • Best practices in HTML and CSS
    • Accessibility considerations
    • SEO basics for HTML and CSS
  • Practical Exercises:
    • Completing a final project: designing and building a fully responsive multi-page website
    • Peer review and feedback session
    • Final adjustments and presentations

შეფასებები

Stars Icon - Academy Webflow Template

"ბითქემფი 2020 წლის მაისში აღმოვაჩინე და ვთვლი რომ ის ერთ-ერთი საუკეთესო აღმოჩენა იყო, მაშინ ჯერ კიდევ 16 წლის ვიყავი და მცირე ცოდნა მქონდა დაგროვილი პროგრამირებაში თუმცა მეგონა რომ ბევრი ვიცოდი. ბითქემფის პლატფორმამ მომცა ის რაც ყველაზე მეტად მჭირდებოდა განვითარებისთვის - სწორი roadmap და მეგობრული community, რომელიც ყოველთვის მზადაა დაგეხმაროს." ლექსომ დეველოპერულ კომპანია Omedia - ში დაიწყო მუშაობა.

ლექსო სურამელი
Stars Icon - Academy Webflow Template

"რომ არა ბითქემფი, ძალიან მეეჭვება, რომ როდესმე ამ პროფესიის შესწავლას სერიოზულად შევხედავდი, ძალიან კარგი გარემოა და სხვა ადამიანები სწავლისას ყოველთვის მაძლევდნენ ხოლმე მოტივაციას. ყველაფერი, რაც ვიცი, ვისწავლე ადამიანების უანგარო სურვილით, თავისი ცოდნა სხვებისთვის გადაეცათ და ამისთვის ძალიან მადლობელი ვარ." ვახტანგმა დეველოპერულ კომპანია REDBERRY - ში დაიწყო მუშაობა

ვახტანგ ჩიატაური
Stars Icon - Academy Webflow Template

"ბითქემფში უმრავლესობა ნულიდან იწყებს და ყველა ერთმანეთს ეხმარება; ვინც უკვე ოდნავ მეტი ისწავლა, ცდილობს ახლა სხვებს დაეხმაროს და აუხსნას მასალა, თანაც ახსნით და სხვის კოდში ბაგის ძებნით, შენსავე ცოდნას იმყარებ, ამიტომ ეს პროცესი ორივე მხარისთვის გამოსადეგია." ანამ დეველოპერულ კომპანია scandiweb - ში დაიწყო მუშაობა.

ანა ლეჟავა