Marina Ferreira
  • Home
  • Projects
  • Tutorials & Notes Tutorials
Marina Ferreira
  • Home
  • Projects
  • Tutorials & Notes
  • Code Sketch Twitter
  • Code Sketch Facebook
  • Code Sketch Channel Youtube
  • Medium
  • Code Sketch Github
  • Linkedin
  • Send Mail
  • Convert It All

    Convert It All

    Unit Converter App built in React and Ruby on Rails

    Oct 23, 2018
    Go to Project!
    • html
    • css
    • js
    • react
    • ruby
  • Memory Game (Tutorial Demo)

    Memory Game (Tutorial Demo)

    HTML5, CSS3 and Vanilla JavaScript Memory Game

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
    • tutorial
  • Note Display (Tutorial Demo)

    Note Display (Tutorial Demo)

    VanillaJS Note Display from Awwwards website.

    Jun 7, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
    • svg
    • tutorial
  • Type Ahead

    Type Ahead

    Search with results as you type.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Calendar

    Calendar

    Angular 5 calendar

    Oct 24, 2018
    Go to Project!
    • html
    • css
    • js
    • angular
  • Nested Flexbox

    Nested Flexbox

    What the Flexbox - WesBos: nested flexbox.

    Jun 8, 2018
    Go to Project!
    • html
    • css
    • css-only
    • flexbox
  • Monsters Rolodex

    Monsters Rolodex

    React monster filter app from Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)

    Dec 1, 2019
    Go to Project!
    • js
    • jsx
    • react
  • Brazil Population Choropleth

    Brazil Population Choropleth

    Brazil's states and counties population D3 Choropleth in Vanilla JS

    Nov 7, 2019
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
    • d3
    • topojson
    • geojson
  • Whack a Mole

    Whack a Mole

    Whack a mole game.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Countdown Clock

    Countdown Clock

    Countdown clock.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Video Speed

    Video Speed

    Video speed control.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Click and Drag

    Click and Drag

    Click and drag to scroll.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Stripe Follow Along

    Stripe Follow Along

    Follow along menu dropdown.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Sticky Nav

    Sticky Nav

    Sticky main navigation on scroll.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Speech Synthesis

    Speech Synthesis

    Speech Synthesis API - text into voice.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Follow Along Links

    Follow Along Links

    Mouse seeker link highlight.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Geolocation

    Geolocation

    Geolocation: position and speed.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Speech Recognition

    Speech Recognition

    Speech Recognition API.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Webcam

    Webcam

    Apply filters and take screenshots with the webcam.

    Jun 29, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Video Length

    Video Length

    Calculate the video length of a channel.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Array Sort

    Array Sort

    Sort bands names excluding articles.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Moving Shadow

    Moving Shadow

    Text shadow moves along with the mouse.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Local Storage

    Local Storage

    Save your menu to the local storage.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Slide in Scroll

    Slide in Scroll

    Slide in images on text scroll.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Key Sequence Detection

    Key Sequence Detection

    Enter the secret word to see what happens!

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Html5 Video Player

    Html5 Video Player

    HTML5 Video Player. Controls for volume, speed, advance and return.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Multiple Check

    Multiple Check

    Check multiple checkboxes holding shift.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Html Canvas

    Html Canvas

    Draw in the Canvas!

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Flex Image Gallery

    Flex Image Gallery

    Flexbox vertical image gallery.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Css Variables

    Css Variables

    Set an image spacing, blur and color through CSS variables

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Clock

    Clock

    Analogic clock.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Drum Kit

    Drum Kit

    Drums in the keyboard.

    Jun 27, 2018
    Go to Project!
    • html
    • css
    • js
    • vanilla-js
  • Loading Heart

    Loading Heart

    Loading Heart CSS Animation

    Jun 13, 2018
    Go to Project!
    • html
    • css
    • css-only
  • Mobile Layout

    Mobile Layout

    What the Flexbox - WesBos: mobile layout.

    Jun 8, 2018
    Go to Project!
    • html
    • css
    • css-only
    • flexbox
  • Pricing Grid

    Pricing Grid

    What the Flexbox - WesBos: Pricing Grid.

    Jun 8, 2018
    Go to Project!
    • html
    • css
    • css-only
    • flexbox
  • Mobile Reorder

    Mobile Reorder

    What the Flexbox - WesBos: flexbox ordering.

    Jun 8, 2018
    Go to Project!
    • html
    • css
    • flexbox
  • Leftover Elements

    Leftover Elements

    What the Flexbox - WesBos: Leftover elements.

    Jun 8, 2018
    Go to Project!
    • html
    • css
    • css-only
    • flexbox
  • Inline Form

    Inline Form

    What the Flexbox - WesBos: Airbnb Flexbox inline form.

    Jun 8, 2018
    Go to Project!
    • html
    • css
    • css-only
    • flexbox
  • Circular Slider

    Circular Slider

    CSS only circular slider.

    Jun 6, 2018
    Go to Project!
    • html
    • css
    • css-only
© Copyright 2020 by Marina Ferreira
  • Code Sketch Twitter
  • Code Sketch Facebook
  • Code Sketch Channel Youtube
  • Medium
  • Code Sketch Github
  • Linkedin
  • Send Mail