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