Advanced Master in Web Design and Development (Full Stack Development)


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

Program Description


540 Hours

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


Do you think you can master graphic design tools (Adobe Tools) and, at the same time, turn your own designs into web pages? Fortunately or unfortunately, this profile is increasingly in demand in companies and agencies in the sector. Sometimes it is not only enough to be a good graphic designer or web developer, as many companies require a double or multipurpose profile. In this master's degree, we will learn to master the most important tools of graphic design (Adobe Illustrator, Photoshop and Indesign) and, in addition, the student will become a full stack web developer, a programmer with a very complete technical profile who knows well both what referring to back-end as referring to front-end, and increasingly in demand and better valued in companies.

For this, this Master is made up of three modules: Adobe Tools, Web Design with HTML5, CSS3, Javascript and jQuery and Full Stack Development with the previous tools plus PHP7 and SQL.

In the first module the student will learn to handle the most important tools of graphic design. We will start with vector design (Adobe Illustrator), to continue with digital image processing (Adobe Photoshop) and editorial design (Adobe Indesign). After completing this module, the student will be able to make any graphic interface design that they imagine.

In the second module the student learns everything related to web structure (HTML5), layout and visual web design (CSS3) and we will delve into web programming with Javascript and jQuery.

In the third module the student will become a complete web developer, or full stack developer. What does this mean? That the student will be able to program applications or web pages both on the client side (front-end development) and on the server side (back-end development). The full stack developer position is increasingly sought after by companies and, therefore, is one of the best valued economically in our labor sector.


  • Adobe illustrator
  • Adobe photoshop
  • Adobe InDesign
  • 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


540 Hours Total

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



  • 09.00 - 12.00 hours
  • 12.00 - 15.00 hours


  • 16.00 - 19.00 hours
  • 19.00 - 22.00 hours


€ 4,450

Check current offers and promotions at


  • 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 .

Graphic Design Module (Adobe Tools)

01- Adobe Illustrator

  • Color profiles and modes
  • Work space
  • Basic shapes
  • Selection Tools
  • Swatches / Color / Gradient
  • Strokes / Fills
  • Appearance panel
  • Work tables
  • Layers
  • Transformations
  • To line up
  • Pathfinder
  • The pen
  • The pencil
  • Brushes
  • Text
  • Eraser / Scissors / Blade
  • Expand
  • Interactive painting
  • Motifs, patterns
  • Symbols
  • Insert images
  • Interactive Tracing
  • Perspective grids
  • Transparency
  • Clipping mask
  • Gradient meshes
  • Effects edit
  • 3D effect
  • Text
  • Print and output

02- Adobe Photoshop

  • Color modes
  • Work spaces
  • The pixel
  • Layers
  • Basic forms
  • Selection tools
  • Paint pot
  • Degraded
  • Transformations
  • Inteligent object
  • Mergers
  • Brushes
  • Dropper
  • The pencil
  • Clone plug
  • Patches
  • Photo retouching tools
  • The pen
  • Clipping masks
  • Layer masks
  • Effects
  • Channels
  • Picture settings
  • Adjustment layers
  • Filters
  • Print and output

03- Adobe Indesign

  • Document / Book / Library
  • Pages and spreads
  • Work space
  • Margins and columns
  • Rules
  • Guides and grids (graticule)
  • The samples
  • Creation tools
  • Objects (containers)
  • Layers
  • Transformation
  • Lineups
  • Effects
  • Links panel
  • Lace
  • Master page
  • Typography
  • Character options
  • Paragraph options
  • Work with styles
  • Composition
  • Automatic paging
  • Interactive elements
  • Print and output

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

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)


  • 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


Link CSS

Selectors and pseudo-selectors


  • 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


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


  • Link web with Google Search Console
  • Canonical link implementation

02- Web Development (Front-End)


  • 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


  • 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


  • 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

  • Object definition
  • 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
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