Responsive Layout with Media Queries
Mobile-first responsive layout, using media queries to create different layouts.
Live Preview
Responsive Form
An HTML form which contains four input fields. As the width of the screen changes, the layout of the form changes.
Live Preview
Responsive Images
Creating a flexible grid that substitutes different images at different breakpoints using the picture element.
Live Preview
Zebra Table
A webpage that includes a responsive HTML table, the content for table is my school time table.
Live Preview
Sass Conversion
Creating SASS file that generates new version of main.css for a given site based on the required fonts, images, CSS, and HTML.
Live Preview
Shopping Cart
Creating a basic shopping cart to add and remove items to/from the cart and to update total items and the total shopping cart.
Live Preview
Temperature and Humidity Reader (Raspberry Pi)
Using the date and time value sent to the server by the form to create a sqlite query to extract the temperature and humidity reading(s) for that date and time, formats the result as a html table and sends the result back to the client browser.
Live Preview
Employee Profile
Each developer has a personal profile page. Things like name, nicknames, skills, hobbies, interest, contact, shoe size :D and special abilities are all ideas of text that can be found.
Live Preview
Coding an SVG
The goal is to design a small SVG graphic (Microphone) for the web. This graphic is to have hover states so that something changes visually! Responsive, and have a different look at onebreakpoint(any). CSS transforms and animations has been used.
Live Preview
Coding an SVG
The goal is to design a small SVG graphic (MP3) for the web. This graphic is to have hover states so that something changes visually! Responsive, and have a different look at onebreakpoint(any). CSS transforms and animations has been used.
Live Preview