My first proper React project. The styling was 'pre-baked', so to speak. I used React to iterate over a data array to return the elements. Completed as part of John Smilga's Udemy React course
React, HTML, CSS, JS - Unlike the previous project, below, this one is proper React, I would say.
My first React app uploaded to Netlify! Completed as part of John Smilga's Udemy React course
React, HTML, CSS, JS - this project was actually a refactoring project, turning an HTML/CSS/JS project from one of John's other courses into a React app
Not yet complete, this is a clone of the IMDb homepage in a similar vein to the follow-along projects completed with Traversy Media (see Recommended Learning Resources)
Using HTML, CSS, JS and jQuery (check the dropdown menus)
My plan is to expand on this with React when I'm comfortable with that language (to create and fill the relevant areas with repeatable components for celebrity photos, featured movies etc. I also want to make the page responsive, as per the projects below.)
I love this one. A trail of colour follows your mouse as you move over the square grid. Another one from Traversy Media's 5 HTML, CSS & JS Mini Projects
Using HTML, CSS, and Vanilla JS
Click in the input fields to see the wave effect animation on the labels. From Traversy Media's 5 HTML, CSS & JS Mini Projects
Definitely take a look at Brad's Udemy Course: 50 Projects in 50 Days for more
Using HTML, CSS, and Vanilla JS
A 3D card animation project, completed via a video by Kevin Powell. The original isn't, but mine is full 360 and I find playing with it very therapeutic!
Using HTML, CSS, and a little bit of Vanilla JS
A pure CSS, animated glowing border card project, completed via a video by Kevin Powell. It's amazing how much CSS is actually capable of. I didn't think this was possible before watching the video!
Using HTML and CSS
This is a fun little project that adds a 3D animation look to a Gif (in my case of my favourite film characters: the Minions!) as it splits from a single box, into 16 boxes.
Using HTML, CSS, and JS
A simple page, with a rotating page that reveals the navigation (completed via a Traversy Media follow-along - see the recommended learning resources on the homepage).
Using HTML, CSS and a little bit of JavaScript
A very simple page, with additional divs sliding onto the page from alternate sides, as you scroll down (completed via a Traversy Media follow-along - see the recommended learning resources on the homepage).
Using HTML, CSS and a little bit of JavaScript
This is a very popular animation effect, which I have now implemented on this very page.
An iTunes style music service page, done via a Traversy Media follow-along, including responsive layout
Using HTML, CSS, and a bit of jQuery
Brad does some great follow-alongs on his channel. Check out the HTML & CSS playlist here. There's nothing better than actually typing code for learning (even if it's not your own code).
A mockup of a photographer's portfolio, done in a mobile-first format, via a Traversy Media follow-along (see the YouTube link above).
Using HTML, CSS
Mobile-first is a design style where you create the page to be optimal for mobile devices first, and then make it scale up for larger screens. Normally, responsive design does this the other way round, so this is responsive design in reverse, so to speak.