Bootstrap, HTML, CSS, JavaScript, jQuery и WordPress

Bootstrap, HTML, CSS, JavaScript, jQuery и WordPress

Ние ще ви научим как да създавате responsive уеб сайтове – сайтове, които изглеждат еднакво добре на различни по вид устройства – настолни компютри, телефони и таблети.

По време на обучението ще се научите да:

- създавате портфолио сайтове, WordPress теми, продуктови страници, one-page сайтове и други използвайки Bootstrap, HTML, CSS, JavaScript, jQuery;
- представяте съдържанието на сайта изграждайки го използвайки редове, колони, гридове, ценови таблици, банери, менюта, навигация, филтри, customer testimony, социални икони, carousel, бутони, линкове, медия и много други компоненти;
- планирате и управлявате процеса на дизайн и разработка използвайки уеб стандартите;
- изграждате лесно и бързо на responsive сайтове;
- управлявате начина на обмен на данни и взаимодействие с компонентите на страниците чрез JavaScript и jQuery;
- създавате, лесно и бързо, общ стил за всички страници чрез CSS;
- работите с WordPress;
- използвате технологии за предоставяне на данни на уеб страниците – т.нар. server side.

Технологиите, които ще усвоите:

- HTML или Hypertext Markup Language език за създаване на уеб страници.
- CSS се използва за задаване и контрол на стиловете в уеб страниците по лесен и опростен начин.
- JavaScript е лек и лесен програмен език с обектно-ориентирани възможности който позволява изграждането на взаимодействие и обмяна на данни в и между статични уеб страници.
- jQuery е библиотека на основата на JavaScript. JavaScript и jQuery се използват за динамично управление на съдържанието и компонентите на сайтовете.
- Bootstrap е най-популярната библиотека за уеб и съдържа в себе си множество CSS стилове и компоненти, позволяваща бързо и лесно създаване на т.нар. responsive сайтове – сайтове които изглеждат еднакво добре на различни по вид устройства – настолни компютри, телефони и таблети.
- WordPress е най-използваната многостранна система за управление на съдържанието (CMS) позволяваща създаването на напълно функционален уеб сайт и мобилни приложения.

За да получите повече информация и/или да се запишете свържете се с нас на тел.: 02/958 9965 и nadia@ontarget.bg .

1. Introduction

Introducing HTML and CSS

Introducing JavaScript and jQuery

Introducing Bootstrap

Keeping a web project on track

2. Planning and High-Level Design

Brainstorming

User stories and user personas

Feature/unfeature list

Wireframes

Mock-ups

Information architecture

Prototype

Examples and exercises

3. Giving Your Pages Structure: HTML5

What are web pages, really?

Elements

Attributes and their values

Empty elements

Document types

Document shell – the head and the body

Marking up content – sections, article and aside, headers and headlines, footers, text

Links

Emphasis

Other inline elements

Lists

Images

Audio and video

Tables

Forms

Special characters

Examples and exercises

4. Exploring Fundamental Concepts of CSS

The origins and evolution of Cascading Style Sheets

How CSS works

Applying styles to web page elements

CSS inheritance: making the general case work in your favor

Visual rendering: document flow and the CSS box model

Examples and exercises

5. Developing CSS3 in Practice: From Design to Deployment

The visual source: understanding design documents

Diving into code: advanced CSS concepts applied

Page structure: laying out the page

The header: start at the top

Exploring the world of fonts

Room to breathe: space it out

Give those form elements some style

Sidebar styling

CSS3 transitions

Footer beautification

CSS media types and creating print style sheets

Designing for other media types and devices

Examples and exercises

6. Responsive Design

Why bother?

Strategy and practice

Introducing the @media query

Adding phone-specific rules

Adding tablet-specific rules

Examples and exercises

7. JavaScript Primer

JavaScript the basics

Variables and expressions

Conditionals and operators

Iterations

Examples and exercises

8. A Deeper Dive Into JavaScript

Philosophy of object-oriented design

Object constructor

Object notation

Inheritance

Functions

Anonymous functions

Interacting with the DOM

Examples and exercises

9. Closing the Loop with JavaScript

Working with data

Saving and retrieving client side data

Cookies

Web storage

Loading external data

Ajax

Cross Origin Resource Sharing

Debugging with firebug

Examples and exercises

10. jQuery

Loading jQuery

Selecting elements

Traversal and manipulation

Events

jQuery mobile

jQuery plugins

Examples and exercises

11. Using Server-Side Technologies

Web servers: dishing out hypertext

Databases

Web application languages

Frameworks

12. Using WordPress to Jumpstart Development

Introducing WordPress

Installing WordPress

Themes

Examples and exercises

13. Getting Started with Bootstrap

Preparing a project template folder

Pulling in the Bootstrap files

Giving your site a title

Compiling and linking default Bootstrap CSS

Examples and exercises

14. Bootstrappin’ Your Portfolio

Creating responsive columns

Marking up the carousel

Turning links into buttons

Understanding the power of LESS

Adding the logo image

Adjusting nav item padding

Adding icons

Adding Font Awesome icons

Adjusting the navbar icon color

Styling the carousel

Tweaking the columns and their content

Styling the footer

Examples and exercises

15. Bootstrappin’ a WordPress Theme

Bringing in our home page content

Customizing a page template

Creating a custom base template

Using custom fields for a custom structure

Creating a custom content template

Putting the footer content in place

Swapping design assets

Connecting our stylesheet

Connecting our JavaScript files

Adding logo images to the navbar and footer

Adding icon links

Adding back WordPress-specific styles

Examples and exercises

16. Bootstrappin’ Business

Creating a complex banner area

Adding utility navigation

Making responsive adjustments

Implementing the color scheme

Styling the collapsed navbar

Designing a complex responsive layout

Laying out a complex footer

Examples and exercises

17. Bootstrappin’ E-commerce

Styling the breadcrumbs, page title, and pagination

Adjusting the grid

Adding Font Awesome checkboxes to our links

Using LESS mixins to arrange links in columns

Adjusting the layout for tablets and phones

Collapsing panels for phone users

Examples and exercises

18. Bootstrappin’ a One-page Marketing Website

Overviewv

Customizing the jumbotron

Tackling customer reviews

Creating attention-grabbing pricing tables

Styling the table body and foot

Adjusting for small viewports

Providing visual hierarchy to our tables

Adding ScrollSpy to the navbar

Examples and exercises