Generic filters
Search in title

Responsive Web Design Training

  • Training Duration:
  • 4 Days
  • Training Environment:
  • On-site at the Institution
  • In DVA Classrooms
  • Online
Download Training Document
Request Information!
HTML5 eğitimleri kategorisi

About the Training

Responsive Web Design Training is a course that covers optimizing web pages for different devices such as mobile phones, tablets, and desktop computers. RWD ensures that web pages adapt to various devices based on their size, resolution, and screen dimensions.

Responsive Web Design Training teaches participants the following:

  • Designing responsive web pages using CSS grid and flexbox.
  • Adapting CSS styles to device sizes using media queries.
  • Setting and applying different display criteria for various devices.
  • Making content and images suitable for different devices.
  • Optimizing HTML and CSS code to enhance loading speed.
  • Designing mobile-friendly and user-friendly web pages using responsive design techniques.

Individuals who wish to take this training should be familiar with web design and development concepts and have basic knowledge of HTML and CSS. Additionally, anyone who wants to understand the importance of responsive web design and learn more about it can participate in this training.

This training is an important step in web design and development. For the training to be effective, participants should have a basic understanding of HTML and CSS languages. Moreover, this course will be useful for those who want to improve the user experience and create websites compatible with different devices. Additionally, the training will cover modern web design trends, responsive design principles, and practical applications. Participants will have the opportunity to bring their own projects to life through interactive learning. This course is aimed at anyone looking to advance their web design and development skills.

What Will You Learn?

In Responsive Web Design Training, you will learn the following topics:
  • Designing responsive web pages using CSS grid and flexbox
  • Adapting CSS styles to device sizes using media queries
  • Setting and applying different display criteria for various devices
  • Making content and images suitable for different devices
  • Optimizing HTML and CSS code to enhance loading speed
  • Designing mobile-friendly and user-friendly web pages using responsive design techniques
Through this training, you will enhance your ability to design user-friendly web pages suitable for different devices, and you will be able to create flexible and user-friendly websites that align with modern web design trends.

Prerequisites

The following prerequisites are required for Responsive Web Design Training:
  • Knowledge of HTML and CSS: Since HTML and CSS will be used in the responsive web design training, a basic understanding of these languages is necessary.
  • General understanding of web design and development: Having a general idea about web design and development will make the training more efficient.
  • Advanced use of CSS: In the responsive web design training, you will use advanced CSS techniques such as CSS grid and flexbox, so a basic understanding of these techniques is required.
By meeting these prerequisites, you can gain maximum benefit from the responsive web design training.

Who Should Attend?

Responsive Web Design Training is suitable for the following individuals:
  • Those working in or interested in the field of web design and development
  • Individuals with basic knowledge of HTML, CSS, and JavaScript
  • Web designers and developers aiming to design mobile-friendly websites
  • Web designers and developers who want to learn advanced CSS techniques
  • Those who want to design flexible and user-friendly websites in line with responsive web design trends
Anyone interested in taking the training can participate in the Responsive Web Design Training. However, to make effective use of the training, it is recommended to have a basic understanding of HTML, CSS, and JavaScript.

Outline

Introduction to Responsive Web Design
  • What is responsive Web design?
  • Why should I use RWD?
  • Where did RWD come from?
  • Who is responsible for RWD?
  • When should I use RWD?
  • How do I implement RWD?
Fundamental Techniques of RWD
  • Feature detection
  • The viewport element
  • Overview of responsive layouts adaptive layouts
  • Media queries
  • Responsive images
  • Responsive table
Introduction to Feature Detection
  • What is Modernizr
  • Using the Modernizr JavaScript library
  • Understanding how Modernizr works
  • Using the Modernizr object
  • Using the Modernizr API
  • The Modernizr library and the HTML5 shim
  • CSS Feature Queries
  • CSS @supports
  • supports() method
Understanding the Viewport
  • What is the viewport?
  • How is the pixel width of the viewport measured?
  • Understanding the viewport meta tag
Media Attribute and Media Queries
  • How do I specify a media type?
  • Recognized media types
  • Understanding the HTML media attribute
Understanding Media Queries
  • What is a media query?
  • Media query syntax
  • Media query repositories
  • Where can I write a media query?
  • About js
  • About css3-js
  • Media queries and the cascade
  • Media query features
  • A media query strategy
  • Understanding the media query
The CSS Box Model
  • Understanding the CSS box model and box size
  • What is the CSS box model?
The CSS Reset
  • Why use a CSS reset?
  • Understanding the CSS reset
The Display Property
  • Introduction to the display property
  • Inline block
  • Important display properties
Overview of RWD Layout Techniques
  • Fixed layout liquid layout
  • A word about elastic layouts
  • Responsive
  • Adaptive
  • New CSS Properties: Flexbox and Grid
Understanding Flexbox Layout
  • Flex-box layout: New feature of Bootstrap 4
  • Creating a flex box
  • What is a flex box?
  • The flex box model
  • Flex display properties
  • Understanding the flex layout model
  • The flex grow, shrink and basis properties
  • Practice your flex property knowledge
  • Creating a responsive flex box layout
  • Flex box layout
Grid Layout
  • Introduction to the Grid layout
  • Grid Glossary
  • Grid terminology and behavior
  • Using grid properties
  • Create a grid and use grid properties
  • Use named grid lines
  • Memorizing grid properties
Introduction to CSS Frameworks and Bootstrap
  • Responsive Frameworks
  • What is Bootstrap?
  • Who created Bootstrap?
  • Why use Bootstrap
  • Important information for users of Bootstrap 3
  • The Bootstrap Playground
  • Customizing Bootstrap
  • Acquiring Bootstrap 4
  • Download options
  • What you get
  • Using the starter template
  • Browser support for Bootstrap
  • Customizing your version of Bootstrap 4
  • Introduction to Bootstrap 5
Fundamentals of Layout with Bootstrap
  • Containers
  • Media queries – responsive breakpoints
  • Z-index
The Bootstrap 4 Grid System
  • How it works
  • Grid options
  • Controlling alignment
  • Working with columns
  • Build a simple layout with the Bootstrap 4 grid
  • Bootstrap 4’s new media feature
  • Build a complex layout with the Bootstrap 4 grid
  • What’s new in Bootstrap 5
Bootstrap Built-in Styles
  • Typographic styles
  • Using Bootstrap typographic styles
  • Table styles
  • Image styles
Bootstrap Components
  • Introduction to Bootstrap Components
  • Bootstrap components chart
  • Bootstrap Cards
  • Bootstrap Modals
  • Bootstrap Forms
Bootstrap Editors Responsive Typography
  • What is responsive typography?
  • Font Sizing options
  • Working with ems
  • Working with rems
  • Working with viewport widths
  • Creating type with the optimal characters per line
Responsive Images
  • What are responsive images?
  • Issues surrounding responsive images
  • Basic image terminology
  • HTML techniques
  • CSS techniques
  • Responsive techniques
  • Adaptive techniques
  • Scaling foreground images with CSS
  • Using the max-width property
  • Scaling background images with CSS
  • Cropping foreground images with CSS
  • Cropping background images with CSS
  • Server-side solutions
  • Other solutions
Responsive Tables
  • Introduction to Responsive tables
  • Responsive table techniques
  • Hiding table data
  • Manipulating the table display
  • Scroling table data

Training Request Form

HTML5 eğitimleri kategorisi

HTML5 Training

HTML5 Training: Foundations of Modern and Advanced Web Design The Importance of HTML5 Training for Organizations The Role of HTML5 in Modern and Interactive Web

Eğitimi İncele »

If you want to maximize the benefits of your training in terms of time and cost efficiency, all you need to do is contact us.

Our training consultants will get in touch with you, assist in identifying your organization’s needs, and provide the most suitable training programs for your employees.

Training Request Form

Digital Vision Academy © All Rights Reserved 2023