Professional Master in Web Development and Conceptualization (Full Stack Development)

General

2 locations available
Read more about this program on the school's website

Program Description

web design, laptop, html

720 Hours (12 Months)

The content of this program is indicative, and it may vary for reasons of updating or modifying the contents.

goals

If you want to join one of the professions with the most future in the labor market, this is your master's degree. Because to the knowledge that every web developer must have (HTML5, CSS3, Javascript, JQuery, PHP7, SQL, UX / UI) we add everything necessary to handle the CMS most used today for web page design: WordPress. Become an off-road web developer with this professional master's degree!

In the first module, Web Design, the two basic structure and layout languages for any developer will be addressed in depth: HTML5 and CSS3. In addition, the two key fields in the development or front-end programming of a website will be introduced: JavaScript and jQuery. Therefore, and from a current point of view, as highlighted by the enhancement of mobile design for all types of devices, in this module the basis for training in full stack programming will be acquired.

In the Full Stack Development Web Development module, the necessary knowledge will be deepened for the student to become a 360º web developer. On the one hand, a large part of the academic load will focus on the front-end aspects, with JavaScript and jquery, the most visual part of a website. And on the other, the module will be completed with the necessary PHP7 and SQL to master programming on the server side and databases, or back-end.

The WordPress module will address everything a web programmer should know about the most widely used CMS (Content Manager System) on the planet. Free software whose versatility allows us to offer professional solutions for all types of projects, from a blog to a corporate website, through e-commerce. An intuitive tool that every programmer should know, since 33% of the websites on the planet are developed in WordPress.

With the Design in User Experience and Interfaces module, the student will be able to enter one of the most fashionable aspects of current web development: UX / UI. In the course of this block, a balance will be sought between the two most important properties that make up a website: aesthetics and usability. All focused on getting the most out of everything learned in web design, development and / or programming.

information

  • Plain text editor specialized in web: Dreamweaver / Sublime / Notepad ++ / Komodo Edit / Brackets
  • HTML5 / CSS3
  • Mobile-first Indexing. Bootstrap
  • SEO web positioning. Accessibility and usability
  • JavaScript
  • jQuery
  • Complex variable and flow control structures
  • Functions in JavaScript
  • The DOM
  • Advanced JavaScript
  • AJAX in JavaScript
  • advanced jQuery
  • First steps with PHP7
  • Data types in PHP7
  • Control structures in PHP7
  • Functions in PHP7
  • Manage sessions
  • WordPress web design
  • Web Conceptualization and Sketch
  • Quote and web planning
  • Web development and optimization in WordPress
  • UX / UI Fundamentals
  • User Research
  • Interface design (Figma, Adobe XD)
  • Prototyping

Duration

720 Hours Total

  • In person or Online
  • 560 Hours of Classes
  • Monday to Thursday (+ some Friday)
  • 160 Hours Final Projects

Schedule

Mornings

  • 09.00 - 12.00 hours
  • 12.00 - 15.00 hours

Afternoons

  • 16.00 - 19.00 hours
  • 19.00 - 22.00 hours

Price

€ 5,600

Check current offers and promotions at www.cei.es

Official

  • Our school is one of the five Adobe Authorized Training Centers in Spain . This fact shows that CEI has fulfilled all the requirements that Adobe requests and, likewise, constitutes a guarantee of quality for all our students.
  • CEI is an Apple Authorized Training Center . Therefore, our students will be able to obtain the Apple Professional Certification and advance their careers in design and information technologies, business environments and B2B markets.
  • IBM trusts us and for this reason they have awarded us the IBM Education Partner badge. This seal rewards schools that maintain and promote quality training.
  • Our school is consolidated as the Maxon Training Center of reference in Spain and we became the 1st school in Europe to be Maxon Training Provider for R18 .

Web Design module with HTML5, CSS3 and Javascript

01- Web Design, HTML5 AND CSS3

Introduction to the use of computer equipment

Operating systems:

  • Windows
  • Mac
  • Linux

Software installation and management:

  • Browsers
  • Text editors

File system and folders

  • Create files and folders
  • Organization of web projects
  • Absolute, relative, and URL paths

Web browsing

Principles in Network Administration

Client-server architecture

Servers and protocols

  • SSL certificates
  • HTTP / HTTPS
  • FTP / SFTP / FTPS

Client team

Introduction to routers and switches

DNS (domains and IPs)

  • Public IP
  • Local IP
  • Domain names

Hosting, housing & CPD

Basic principles for creating static websites

  • Languages used (HTML5 and CSS3)
  • Code execution flow
  • Visual structure of a website

Principles of usability and accessibility

Prototyping of a website (UX / UI)

  • User Interface (Marvel)
  • User Experience (InVision)

HTML5

  • Tags and attributes
  • Semantics and usage
  • HTML5 document standard and structure
  • Comments
  • Paragraphs, headlines and text formats
  • Multimedia (Images, Audio and Video)
  • Links and buttons
  • Lists
  • Boards
  • Forms
  • iFrames
  • Meta tags
  • Favicom

CSS3

Link CSS

Selectors and pseudo-selectors

Attributes

  • Colors
  • Money
  • Format and transformation of texts
  • Height, wide
  • Edges
  • Margins
  • Fillings
  • Positions
  • Alignment
  • Shaded and gradients
  • Opacity
  • Transformations
  • Filters

Pseudoclasses (active, hover, checked, first-child, last-child, nth-child)

Pseudoelements (after, before)

Font import and implementation (media and font-face)

Icon import and implementation (fonts and SVG)

CSS variables

CSS animations (keyframes)

Mobile-first Indexing

  • General structures (Floats)
  • Simple Structures (Flexbox)
  • Complex Structures (CSS Grid)

Frameworks and APIs

  • Bootstrap 4
  • Materialize
  • Material Design

Internet

  • Create a domain
  • Creating a web hosting
  • Connection and upload of a website to the server

SEO

  • Link web with Google Search Console
  • Canonical link implementation

02- Web Development (Front-End)

JavaScript

  • Introduction to front-end programming
  • JavaScript. General syntax
  • Include JavaScript in HTML documents
  • JavaScript in attachments
  • JavaScript inside HTML code
  • JavaScript. Variables and operators
  • Local variables and global variables
  • Numerical variables
  • Methods for numeric variables
  • Assignment operators
  • Increment and decrement operators
  • Mathematical operators
  • Text strings (strings)
  • Methods for text strings
  • Undefined variables
  • NULL variables
  • NaN variables
  • Logical operators in JavaScript
  • Relational operators

jQuery

  • Introduction to Jquery
  • Steps to use jQuery
  • First script with jQuery
  • JQuery Basics: Adding and Removing CSS Classes
  • JQuery basics: show and hide page elements
  • JQuery Basics: Quick Effects with jQuery
  • JQuery Basics: jQuery function callback
  • JQuery Basics: Using Basic Ajax with jQuery
  • JQuery Basics: Ajax jQuery with load message

Web Development Module Full Stack Development

01- Front-End Development with JavaScript and jQuery

Complex variable and flow control structures

  • JavaScript. Complex variable types
  • Arrays in JavaScript
  • Methods for Arrays
  • Conditionals in JavaScript
  • If / else
  • Switch
  • Loops in JavaScript
  • For cycle
  • While loop

Functions in JavaScript

  • Functions in JavaScript
  • Syntax and usage
  • JavaScript scope
  • Work with functions

The DOM

  • JavaScript. The DOM
  • Introduction to the DOM
  • Notation object
  • Create nodes
  • Add nodes
  • Modify, replace, and delete nodes
  • Access to DOM attributes
  • Modify Element Styles
  • DOM events

Advanced JavaScript. Objects

  • Definition of object
  • Associative arrays
  • Properties
  • Methods
  • Apply () and call () methods
  • Introduction to JSON notation
  • Working with JSON in JavaScript (I)
  • Working with JSON in JavaScript (II)

AJAX in JavaScript

  • AJAX in JavaScript
  • First steps
  • First application
  • How an AJAX application works
  • Methods and properties of the XMLHttpRequest object
  • Objects for AJAX
  • I work with AJAX. Drop down lists
  • I work with AJAX. Autocomplete form
  • I work with AJAX. RSS reader
  • I work with AJAX. Google maps

jQuery Advanced

  • JQuery 3. Essential methods
  • JQuery function or $ () function
  • Core / each: each of the jQuery core
  • Size () method and length property of the jQuery core
  • Data () core jQuery method
  • JQuery selectors
  • Hierarchy selectors in jQuery
  • Attribute methods in jQuery
  • Access and modify HTML attributes from jQuery
  • JQuery's attr () method, other uses, and removeAttr ()
  • JQuery prop () method and differences with attr ()
  • JQuery CSS methods
  • JQuery css () method
  • JQuery CSS functions to know the size and position of elements
  • Events in jQuery
  • Event handlers in jQuery
  • Introduction of Event Object in jQuery
  • Mouse events in jQuery mouseenter and mouseleave
  • Keyboard events in jQuery
  • Define events with bind () and remove them
  • Events defined with live () in jQuery
  • Delegated events in jQuery
  • Effects in jQuery
  • jQuery animate (): animation of CSS properties
  • Color animations with jQuery
  • Fading in jQuery
  • Effect queues in jQuery
  • Queue () method to access a queue of effects
  • Put functions in a jQuery effect queue
  • Stop the execution of a jQuery effect queue
  • Delay () method to delay the execution of queue effects
  • Personal effects queue (not default) in jQuery
  • Plugin development in jQuery
  • Introduction to plugin development in jQuery

02- Back-End Development with PHP7

First steps with PHP7

  • Introduction to back-end programming
  • Basic structure of a PHP page
  • PHP tags
  • The echo function
  • Instruction separator
  • Comments
  • Mix PHP and HTML
  • Naming rules
  • PHP configuration
  • The php.ini configuration file
  • Configuration information
  • Set of characters
  • Use PHP from the command line
  • The basics of the PHP language
  • Constants Definition and scope
  • Variables Initialization and assignment
  • Variables Scope and duration
  • Dynamic variables (or variable variables)

Data types in PHP7

  • Type of data
  • Available types
  • Scalar and special data types
  • Arrays
  • Arrays. Creation, manipulation and scope
  • Operators
  • The assignment operator by value
  • The assignment operator by reference
  • The arithmetic operators
  • The string operator
  • The combined operators
  • The logical and comparison operators
  • The ternary operator
  • The NULL union operator
  • The combined comparison operator
  • Operator precedence

Control structures in PHP7

  • Control structures in PHP 7. Conditionals
  • The if structure
  • The switch structure
  • Control structures in PHP 7. Loops
  • The if structure
  • The while structure
  • The do ... while structure
  • The for structure
  • The foreach structure
  • The continue and break statements
  • Include a file
  • Operation and use
  • Interrupt the script
  • Interfaces
  • Class constants
  • Traits
  • Anonymous classes
  • Exceptions
  • Manage errors in a PHP script
  • General information
  • PHP error messages
  • Error handling functions

Functions in PHP7

  • Use PHP functions
  • Preamble
  • Manipulate constants, variables, and data types
  • Constants
  • Variables
  • Type of data
  • Conversions
  • Manipulate numeric variables
  • Manipulate variable strings
  • Manipulate arrays
  • Use regular expressions
  • Structure of a regular expression

MySQL databases

  • Managing forms and links
  • Data recovery
  • Character encoding
  • Required data
  • Send and download files
  • Access a database
  • Connection and disconnection
  • Basic SQL queries (view, edit, delete and insert)
  • Table creation
  • Store records from PHP
  • Results integration
  • Data encoding
  • Field validation

Manage sessions

  • Manage sessions
  • General information
  • Identification by form
  • Identification via HTTP authentication
  • Verify the ID credentials entered
  • Use cookies
  • Use PHP session management
  • Implementation
  • Self-management of session identifier transmission
  • Keep information from visit to visit
  • Brief summary of Get / Post / Cookie / Session variables

Web Design Module with Wordpress

01- Web Design with Wordpress. From conceptualization to development

Introduction

  • The Web. Types and structures
  • Google Mobile First Index
  • WordPress. What is it?
  • The web design. Creative process

Doing research

  • Investigation process
  • Analysis techniques

Quoting and planning

  • How much is my website worth?
  • Temporary work planning
  • Management systems to work web design

Conceptualizing the web

  • Inspiration and referral making
  • The visual identity. Web Styles Manual
  • Content tree creation
  • Sketch or wireframes
  • Creation of mockups with Sketch
  • Web prototyping with Invision
  • Presentation to the client and content preparation

Creating content

  • Copywriting
  • Types of contents
  • The generation of content in WordPress. Post and pages
  • The images. Types and treatment for web
  • LOPD. Installation and regulation

Developing our website

Knowing WordPress

  • Local and server installation
  • Preparation of a WordPress. Essential steps
  • Structure of WordPress and its interface

Plugins

Media Library: Image Optimization

The topics

  • Types of topics
  • Explaining a topic

Moving our design to WordPress

  • Designing the bodysuit

Visual Composers: Visual Composer and Elementor

Addons and complements

Creating web in Mobile first

Contact forms

  • Designing custom headers. The menus
  • Designing custom footers
  • Own creation of templates and snippets
  • Creation of custom layouts for post
  • Creation of custom post types and their layouts
  • Create custom fields

Ecommerce: Woocommerce

  • Explanation and configuration of an online store
  • Create custom product templates
  • Checkout modification and configuration
  • Required plugins

User management in WordPress

  • User roles
  • User Registration
  • Creation of private areas and memberships
  • Viewing content according to roles

Website translation

  • Using the plugin
  • Translation of themes and plugins

WordPress export and backup

Other plugins of interest: sliders, sharing on social networks, feeds, chats.

Optimizing and protecting our website

Performance optimization of our WordPress

  • Code optimization
  • Cache installation

Wordpress protection

  • Protection of access to WordPress
  • Protection of contents and folders
  • Protection against external attacks

Developing our website

  • Introduction to Inbound Marketing for WordPress
  • Creation of site maps
  • SEO plugin installation and configuration

Developing our website

WordPress maintenance techniques

Module Design in User Experience and Interfaces (UX / UI)

01- Introduction

  • Presentation and objectives of the course
  • Fundamentals in UX / UI
  • What is UX? What is the UI?
  • Differences and similarities

02- The Client

  • Briefing
  • Business data
  • Requirements taking
  • Analysis of the competition

03- UX Research

  • Research and analysis
  • Heat maps
  • Eye Tracking
  • Card Sorting
  • A / B test
  • User test
  • Buyer Persona
  • Heuristic Evaluation

04- Information Architecture

  • Content Inventory
  • Content tree
  • Organization systems
  • Labeling systems
  • Navigation systems
  • Search systems
  • Forms

05- Design Methodologies

  • Design Thinking
  • Atomic Design
  • Flow charts with Whimsical
  • Customer Journey
  • Card Sorting

06- Mobile First, Trends, Responsive Design

07- Design Web Version

  • Design Psychology, Gestalt Laws
  • Principles of design
  • Typography
  • Colors
  • Grid
  • Sketching
  • Design systems
  • Design with Figma
  • Prototyping with Figma
  • Design with Adobe XD
  • Prototyping with Adobe XD

08- Animations Web Version

  • Animation with Figma
  • Animation with Adobe Xd

09- Apps Design

  • Design Psychology, Gestalt Laws applied to apps
  • Design principles in apps
  • Investigation of interactions in apps
  • Mobile interactions
  • Mobile device measurements
  • Typography in apps
  • Colors
  • Grid
  • Sketching
  • Design systems
  • Design with Figma
  • Prototyping with Figma
  • Design with Figma
  • Prototyping with Figma
  • Design with Adobe XD
  • Prototyping with Adobe XD

10- Animations Web App Version

  • Animation with Figma
  • Animation with Adobe Xd

11- UX and SEO

  • Similarities between UX and SEO
  • SEO factors (web)
  • ASO factors (apps)

12- Project Management

  • Preparation of a web budget: concepts and items
  • Project planning
  • Delivery schedule and deadlines
  • Project presentation
  • Planning software
  • Resource Search

13- Portfolio

Project exportPublication of projects for rrssPresentation of projects for web
Last updated Aug 2020

Keystone scholarship

Discover the options our scholarship can give you

About the School

CEI - Centro de Estudios de Innovación - es una Escuela de Diseño Digital del siglo XXI, fundada en el siglo XX (año 1991). Somos un centro de formación oficial de Adobe, Apple, IBM, Maxon y Google Pa ... Read More

CEI - Centro de Estudios de Innovación - es una Escuela de Diseño Digital del siglo XXI, fundada en el siglo XX (año 1991). Somos un centro de formación oficial de Adobe, Apple, IBM, Maxon y Google Partner, especializado en el sector del diseño y marketing digital, con sedes en Madrid, Sevilla y próximamente también en Lisboa. Nuestros cursos, masters y títulos superiores se desarrollan en cuatro áreas: Diseño gráfico, Desarrollo web, Marketing Digital y Edición y Postproducción de Vídeo Digital (VFX) y Motion Graphics. Read less
Madrid , Seville , Madrid + 2 More Less