Course: Responsive Web Design
duration: 6 hours |
Language: English (US) |
access duration: 90 days |
Details
In this Web Design training course you will learn the basics of Responsive Webdesign. You will learn about the strategies, flexible data and the configuration of user interfaces.
Among subjects that covered are CSS3 Flexbox, CS overflow property, SVG, HTML5, stacking cells and far more.
Result
After completing this course you are familiar with the basics of Responsive Webdesign.
Prerequisites
There is no specific knowledge required.
Target audience
Software Developer, Web Developer, Web Designer
Content
Responsive Web Design
Responsive Web Design: Flexible Grids, Images, and Media Queries
- start the course
- describe the concept of responsive web design, its core components, and contrast adaptive, fluid, and responsive design
- contrast fixed and fluid layouts and use proportional width settings to achieve fluid grid layouts
- implement the CSS3 Flexbox as part of a responsive design web layout
- describe how to implement the CSS3 grid layout with flexible lengths (fraction units)
- describe how to implement semantic grid systems using a preprocessor such as Sass
- describe and contrast use of percentages, ems, rems, and viewport units in responsive design
- describe the issue of rounding
- configure flexible text with appropriate measurement units for size and line height and features such as text overflow in a responsive web design solution
- use the maxwidth attribute to configure images to be responsive
- configure tiled background images to be responsive
- describe the CSS overflow property and implement it as a part of a responsive web design solution for images
- use sprites for background images as part of a responsive design solution
- describe scalable vector images (SVG) and use SVG to implement scaling images
- describe the HTML5 canvas and use the canvas to implement scaling images
- describe and use the new HTML5 picture element
- recall use of maxwidth attribute and use intrinsic ratio to work with embedded video to make it responsive
- describe media queries, their syntax, breakpoints, using both major and minor breakpoints, and their application in responsive web design
- use media queries with device or viewport dimensions
- contrast the viewport meta tag and CSS3 parameter and combine with a media query for device adaptation
- configure a screen resolution media query
- work with multiple media queries, combining and negating queries
- work with available media types apart from screen
- work with features such as input mechanism and color
- describe how to resolve compatibility issues relating to media queries in older browsers
- apply fluid grids, flexible images, and media queries to your web design
Responsive Web Design: Flexible Data and UIs, Devices, Process and Performance
- start the course
- configure tables to be responsive using scrolling
- configure tables to be responsive by stacking cells
- configure tables to be responsive by hiding portions of the table
- configure flexible tables by converting a table to a chart
- describe design considerations for flexible forms and discuss support for HTML5 input types and attributes
- use HTML5 input types and attributes to configure responsive forms
- describe navigation options such as footer anchors, top menus that deconstruct, drop-down to select menus, and flyout menus that can form part of a responsive design solution and describe how options such as footer anchors are suitable for touch input
- create a responsive menu system using a deconstructing top menu as part of a responsive design solution
- create a responsive menu system using footer anchor navigation as part of a responsive design solution
- describe the off-canvas pattern and show how to implement it for flyout menus
- describe the off-canvas pattern and show how to implement it for content
- describe and provide examples of how screens can be collapsed for bigger devices, floating screens can be used, non-crucial content can be used in larger screen side-bars and components can be adjusted or replaced, or content expanded, to enable display in multiple devices
- implement CSS3 columns and media queries as part of a responsive layout
- use stacked galleries in a responsive UI
- use tabbed workspaces in a responsive UI solution
- use split views in a responsive UI
- use media queries to generate styles for different devices
- manage elements in transition as part of a responsive web design
- configure responsive keyframe animations
- describe the concept of interacting with sensors and devices as part of responsive design, describe native APIs and use geolocation API to fill out form addresses
- use the window.navigator object to check for a network connection, and describe the NetworkInfo API
- recognize the importance of device and feature detection and describe the use of the Modernizr tool
- identify the considerations for successful responsive web design
- describe how using style tiles can help in the responsive design process
- describe how to optimize performance for responsive applications configured to run on different devices
- describe conditional loading
- configure flexible data, user interfaces, device interaction, and process and performance procedures in responsive web design
Course options
We offer several optional training products to enhance your learning experience. If you are planning to use our training course in preperation for an official exam then whe highly recommend using these optional training products to ensure an optimal learning experience. Sometimes there is only a practice exam or/and practice lab available.
Optional practice exam (trial exam)
To supplement this training course you may add a special practice exam. This practice exam comprises a number of trial exams which are very similar to the real exam, both in terms of form and content. This is the ultimate way to test whether you are ready for the exam.
Optional practice lab
To supplement this training course you may add a special practice lab. You perform the tasks on real hardware and/or software applicable to your Lab. The labs are fully hosted in our cloud. The only thing you need to use our practice labs is a web browser. In the LiveLab environment you will find exercises which you can start immediately. The lab enviromentconsist of complete networks containing for example, clients, servers,etc. This is the ultimate way to gain extensive hands-on experience.
Sign In
WHY_ICTTRAININGEN
Betaal in termijnen
| Cursusnaam | |
| Looptijd | |
| Rentebedrag financiering | |
| Totaal bedrag | |
| Maandbedrag |
Gespreid betalen met Spraypay
Met de betaaloptie SprayPay kun je jouw bestelling van € 250,- tot € 3.500,- veilig en gespreid betalen in gelijke termijnen van 12, 18, 24 of 36 maanden. Je hebt op die manier een minimale financiële belasting en je kunt eenvoudig de termijnbetalingen opnemen in jouw vaste lasten.
Hoe werkt het kopen op afbetaling? De beoordeling van de kredietaanvraag vindt online plaats. Binnen enkele seconden weet je of je in aanmerking komt voor een krediet. Is de aanvraag akkoord dan kun je meteen genieten van je aankoop.
Let op: deze betaalmetode is aleen beschikbaar voor particulieren! Bekijk voor je aankoop ook de SprayPay voorwaarden.
Via ons opleidingsconcept bespaar je tot 80% op trainingen
Start met leren wanneer je wilt. Je bepaalt zelf het gewenste tempo
Spar met medecursisten en profileer je als autoriteit in je vakgebied.
Ontvang na succesvolle afronding van je cursus het officiële certificaat van deelname van Icttrainingen.nl
Krijg inzicht in uitgebreide voortgangsinformatie van jezelf of je medewerkers
Kennis opdoen met interactieve e-learning en uitgebreide praktijkopdrachten door gecertificeerde docenten
Orderproces
Once we have processed your order and payment, we will give you access to your courses. If you still have any questions about our ordering process, please refer to the button below.
read more about the order process
Een zakelijk account aanmaken
Wanneer u besteld namens uw bedrijf doet u er goed aan om aan zakelijk account bij ons aan te maken. Tijdens het registratieproces kunt u hiervoor kiezen. U heeft vervolgens de mogelijkheden om de bedrijfsgegevens in te voeren, een referentie en een afwijkend factuuradres toe te voegen.
Betaalmogelijkheden
U heeft bij ons diverse betaalmogelijkheden. Bij alle betaalopties ontvangt u sowieso een factuur na de bestelling. Gaat uw werkgever betalen, dan kiest u voor betaling per factuur.
Cursisten aanmaken
Als u een zakelijk account heeft aangemaakt dan heeft u de optie om cursisten/medewerkers aan te maken onder uw account. Als u dus meerdere trainingen koopt, kunt u cursisten aanmaken en deze vervolgens uitdelen aan uw collega’s. De cursisten krijgen een e-mail met inloggegevens wanneer zij worden aangemaakt en wanneer zij een training hebben gekregen.
Voortgangsinformatie
Met een zakelijk account bent u automatisch beheerder van uw organisatie en kunt u naast cursisten ook managers aanmaken. Beheerders en managers kunnen tevens voortgang inzien van alle cursisten binnen uw organisatie.
What is included?
| Certificate of participation | Yes |
| Monitor Progress | Yes |
| Award Winning E-learning | Yes |
| Mobile ready | Yes |
| Sharing knowledge | Unlimited access to our IT professionals community |
| Study advice | Our consultants are here for you to advice about your study career and options |
| Study materials | Certified teachers with in depth knowledge about the subject. |
| Service | World's best service |
Platform
Na bestelling van je training krijg je toegang tot ons innovatieve leerplatform. Hier vind je al je gekochte (of gevolgde) trainingen, kan je eventueel cursisten aanmaken en krijg je toegang tot uitgebreide voortgangsinformatie.
FAQ
Niet gevonden wat je zocht? Bekijk alle vragen of neem contact op.