Portfolio Site
-
Updated
Jul 6, 2018 - JavaScript
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)_
Portfolio Site
My solution for the Google Mobile Web Specialist Nanodegree, including all three stages. No JS or CSS framework used. Only ES6, Flexbox, Media Queries, PWA with Service Workers and IndexedDB 🎓
Media Query generator for CSS style.
This service allows you to create an account, post, delete, and like photos 📷
Developed the Nxt Watch application, a YouTube-inspired platform that enables users to log in, access curated video categories such as Trending, Gaming, and Saved videos, search for specific content, view detailed video information, and toggle between Light and Dark themes.
This is a simple "to do list"- my first React application with interactions.
Website for metaverse with pleasant and smooth animations.
UnSplash API Infinite Scroll Page
Mortal Kombat - Dataverse es una aplicación web responsive que tiene como objetivo filtrar y ordenar los personajes de Mortal Kombat.
Full stack e-commerce app built using vanilla javascript and commece.js api
a 5 days calendar waiting for the Bologna Children's Book Fair 2023
Guess the Word is a fun programing game for young learners and young teens with Creative mind. In this game students read a definition of a word and have to guess what the word is using the letters that appear.
Google Keep Clone developed using HTML, CSS, JavaScript. This app can remember notes you create here.
Developed a food app with search, recipe details, recipe of the day, random recipes, login/signup, debouncing, and a responsive layout. Explore delicious recipes effortlessly!
Developed a weather application with versatile features: search any city for current weather, forecast for the next 7 days, and live location-based weather data. The app boasts a responsive layout for seamless use across devices.
Just some UI for user signup, login, User registration , update details and forgot password. It uses APIs , which are currently not in production. This site is responsive. Tools like Bootstrap and CSS media query are used to achieve this.
Created by Håkon Wium Lie, W3C
Released June 19, 2012