https://github.com/oleksandr-romashko/goit-markup-hw-06

Homework for Adaptive Design
https://github.com/oleksandr-romashko/goit-markup-hw-06

adaptive-design css html js

Last synced: about 2 months ago
JSON representation

Homework for Adaptive Design

• Host: GitHub
• URL: https://github.com/oleksandr-romashko/goit-markup-hw-06
• Owner: oleksandr-romashko
• Created: 2023-08-23T19:56:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-04T20:04:14.000Z (over 1 year ago)
• Last Synced: 2023-09-05T07:13:45.823Z (over 1 year ago)
• Topics: adaptive-design, css, html, js
• Language: HTML
• Homepage: https://oleksandr-romashko.github.io/goit-markup-hw-06/
• Size: 3.95 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Adaptive Design

## About

This is the homework solution for the Adaptive Design topic, based on the task below.

This homework covers following topics:

* web page display on different types of devices, adaptive vs responsive design

* "Mobile First" approach

* viewport and media requests

The solution includes markup and corresponding CSS styles.

A JS script has been provided that manages the opening and closing of the modal window.

### Module objectives

* To understand how web and mobile browsers display the page.

* To know the syntax, types and functions of media requests.

* To distinguish logical operators `and`, `or`, `not` and be able to use them.

* To understand what the "Mobile First" approach is and how to implement it in the project.

* To know the principles of displaying images on different types of devices.

* To be able to implement image responsiveness for different screen types.

## Task

* Create the layout of the adaptive version of all elements as indicated on the [Homework #6 layout](https://www.figma.com/file/Kr5Q4EVrEAqpOWko4QeEJb/Web-Studio-(Version-4.0)?type=design&node-id=297046-1554&t=xehgKGCXNQoohzws-0). Portfolio page is optional.

* Set up GitHub Pages and add a live page to the header of the GitHub repository.

* The solution must meet the mentor's acceptance criteria.