Advanced css and sass project featuring reponsive design, animation and transition, grid and flexbox, media queries, browser compatibility.
-
Updated
Jun 12, 2024 - SCSS
Media Queries are a way to target browsers by certain characteristics, features, and user preferences, then apply styles, or run other code based on those things. They are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. Media queries are used for the following:
@media
and @import
at-rules<style>
, <link>
, <source>
, and other HTML elements with the media=
attributeWindow.matchMedia()
and EventTarget.addEventListener()
methodsA media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.
* **all:** Suitable for all devices.
* **print:** Intended for paged material and documents viewed on a screen in print preview mode.
* **screen:** Intended primarily for screens.
* **Viewport/Page Characteristics**
* **Display Quality**
* **Color**
* **Interaction**
* **Video-prefixed:** The spec references user agents, including TVs, that render video and graphics in two separate planes that each have their own characteristics. _(upcoming Media Queries Level 5)_
Advanced css and sass project featuring reponsive design, animation and transition, grid and flexbox, media queries, browser compatibility.
A landing page about educational techniques and statistics in teaching.
A landing page about traveling.
Simple and powerful breakpoints for styled components and emotion.
Support Bidyanondo 1.0" is a web project created to promote and support the activities of the Bidyanondo Foundation. The foundation is known for its philanthropic activities, including providing free education, food, and shelter to underprivileged children and communities.
📸 Sliding action script
Проектная работа Mesto
A responsive login UI built with React and styled with CSS, having a centered layout, background image, and responsive design for various screen sizes.
A website with favourite sweets
Vue Weather
a responsive piano interface using HTML and CSS, exploring media queries and pseudo selectors for screen size adaptability. Dive into responsive web development fundamentals while building an engaging project!
Conclusão do terceiro desafio full stack da Rocketseat
Fire Movie : is a Responsive Website to Search, Add Movies To Watch, Watched or Delete Movies. Built with React.js and CSS3. I used Context API, React hooks (useState, useEffect, useContext), JavaScript methods (Map and Filter), LocalStorage, and the Axios library to fetch data from the OMDB API.
This project is made using HTML, CSS,JavaScript and GithubUsersApi. It will return the github user info of the user whose username is provided. Find the deployed link of the project below
A simple Loan Application
Stats Card Preview Website | FrontEnd Mentor Challenge
A Personal Portfolio about my experience and projects.
this is a project from FreeCodeCamp.org Responsive web design course, it's a simple form using html and css only(no javascript or frameworks included)
Created by Håkon Wium Lie, W3C
Released June 19, 2012