All Solutions
Fylo dark theme landing page
- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen! I hope you like my version of the Fylo dark theme landing page. Please click the like button and leave a comment, thank you!
Intro section with dropdown navigation using Tailwind and Alpine.js
#tailwind-css- HTML
- CSS
- JS
3Byron1,950SubmittedHello ladies and gentlemen! Here's my fantastic version of the Intro section with dropdown navigation. I've build this lovely design using Tailwind and Alpine.js and it was rather easy. I hope you enjoy looking at it! Feel free to leave a little red heart for my work, thanks! ❤️
Blogr landing page using Bootstrap and Sass
#bootstrap- HTML
- CSS
- JS
1Byron1,950SubmittedHello ladies and gentlemen, here's my interpretation of the Blogr landing page! I decided to help myself by use Bootstrap and Sass to style everything up. I think it's a nice simple design and it was a pleasure to build. Hope you all like it. Please leave a lovely little like, or maybe even a cheeky comment! 😄
Tip calculator app using SvelteKit
#svelte- HTML
- CSS
- JS
4Byron1,950SubmittedHello ladies and gentlemen! Had fun with this one, using SvelteKit. Used some lovely features of Svelte like
bind:
for that sweet, sweet reactivity between the inputs and the amount/total results. It was also nice to use the{#if}
directive to conditionally show the validation messages, and{#each}
came in handy for displaying the buttons. Anyway, I hope you all like it. Feel free to leave a saucy little comment if you like!Insure landing page using Tailwind CSS
#tailwind-css- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen, welcome to my Insure landing page! I decided to use Tailwind on this one for some reason. Feel free to leave a comment, or maybe even a like! ❤️
Interactive rating component using SvelteKit
#svelte- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen! I present to you this lovely Interactive rating component, which I've built using SvelteKit. I think it's rather nice, I hope you think it is too!
Pricing component with toggle
- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen! Here's my version of the Pricing component with toggle using plain old HTML, CSS and Javascript. Hope you like it!
Todo app using Next.js, sortablejs and localStorage
#next#accessibility- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen, I present to you a fully featured todo list app. It has some lovely features like marking an item as completed and you can even re-order the todos with a splendid little drag and drop. It will even remember whether a todo is completed and what order you dragged it to. I hope you like it! 😅
Fylo landing page with two column layout
- HTML
- CSS
0Byron1,950SubmittedHello ladies and gentlemen, it's been a while since my last challenge. I recently got a new job so I've had less time to work on challenges. Here's one of the early landing pages, which I've done using plain HTML, CSS and a sprinkling of Javascript for the validation. Feel free to drop a like! 😄
Advice generator app using SvelteKit
#svelte- HTML
- CSS
- JS
- API
0Byron1,950SubmittedHello ladies and gentlemen! I've built this advice quote generator app using SvelteKit. Fairly straightforward api call to get the quote on the page. There's probably a 'better' way to get a new quote when clicking the dice button, but I settled for a simple
<button onClick="window.location.reload()">
to refresh the page instead. Hope you like it!Interactive pricing component using Sveltekit and currency.js
#svelte- HTML
- CSS
- JS
4Byron1,950SubmittedHello ladies and gentlemen, here's my version of the Interactive pricing component! I've recently been getting some lovely practice in with Sveltekit. Also learnt about the
<output>
element, which can be used alongside the range input to output range values. All in all, quite a splendid little project. Leave a like, or maybe even a cheeky comment!Huddle landing page with curved sections
- HTML
- CSS
0Byron1,950SubmittedHello ladies and gentlemen! This one was really straight forward. Just some good old fashioned HTML, CSS and vanilla Javascript (for the footer email validation). I hope it gives people a fairly good idea about how to create a nice landing page. Right, I'm off to the pub! 😆
IP Address Tracker using SvelteKit
#svelte- HTML
- CSS
- JS
- API
10Byron1,950SubmittedHello ladies and gentlemen! I've had a stab at doing this IP tracker with the map using SvelteKit. I'm a bit of a noob with SvelteKit at the moment, so I've probably bodged it quite a bit. At least the styling is on point, though! 😅
Intro component with sign-up form using JustValidate
- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen! This is my last
newbie
challenge, unless FE Mentor releases a new one. I've used JustValidate for some basic form validation. That's about it really, enjoy!Oh, and leave a like, or ask me which challenge I should do next.
QR code component using SvelteKit
#svelte- HTML
- CSS
0Byron1,950SubmittedHello ladies and gentlemen! I thought I'd completely over engineer this QR code component by using SvelteKit. Enjoy and leave a like 🤪
Base Apparel coming soon page using the picture element
- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen! Here's my version of the Base Apparel page using the
<picture>
element to swap between the hero images on mobile and desktop. Not much more to say about this one, other that it's fantastic. Please leave a like!Social media dashboard with theme switcher using grid and localStorage
- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen! I have built this dashboard theme switcher app using localStorage. The browser should remember what theme is set even if you refresh or close the window. As always, feel free to leave a like or maybe even a comment. Thanks!
Easybank landing page challenge hub using Sass
#sass/scss- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen, I present the Easybank landing page! I've added a few little extras, like a fixed header and some hovers on the latest thumbnails. Feel free to leave lots of likes, please! Thanks 👍
Ping single column coming soon page using HTML, CSS and Javascript
#accessibility- HTML
- CSS
- JS
2Byron1,950SubmittedHello ladies and gentlemen, thought I'd smash a quick one out before bed! 😉 Here's my version of the Ping coming soon page with some primitive vanilla Javascript validation for the email. Hope you like it!
Job listings with filtering using React and Tailwind
#react#tailwind-css- HTML
- CSS
- JS
2Byron1,950SubmittedHello ladies and gentlemen! Here's another React project with Tailwind. Getting the filtering to work properly was quite tricky 😅. Really please with the final result for this one! Feel free to leave a like and maybe even a comment as well. Happy coding everyone!
Huddle landing page with a single introductory section using HTML, CSS
- HTML
- CSS
0Byron1,950SubmittedHello ladies and gentlemen, here's a nice simple one using plain HTML and CSS. Hope you like it! Smash that like button, if you'd be so kind!
Project tracking intro component using Sass
#sass/scss- HTML
- CSS
- JS
1Byron1,950SubmittedHello ladies and gentlemen, here's my attempt at the project tracking intro component. I ran this through google lighthouse and got 100%, which was nice. Hope everyone has a great New Year!
Single price grid component using a utility approach with CSS
- HTML
- CSS
0Byron1,950SubmittedHello ladies and gentlemen! I decided to keep it really simple by using lots of little CSS utilities for this single price grid component. Feel free to give that like button a little tickle! 🤭
Manage landing page using Sass and Swiper JS
#sass/scss#webpack- HTML
- CSS
- JS
2Byron1,950SubmittedHello ladies and gentlemen! Here's my version of the Manage landing page using Sass, Swiper JS for the testimonials carousel, and vanilla JS for the mobile menu and primitive form validation in the footer. Hope you like it! Maybe even leave a lovely comment 👌
Social proof section using Vanilla HTML and CSS
- HTML
- CSS
1Byron1,950SubmittedHello ladies and gentlemen! Here's a quick one for today, took me a couple hours to do. Vanilla HTML and CSS, nothing too special but I think I've nailed the design. Drop a like and a comment, thanks! 👍
URL shortening API landing page using Sass and localStorage
#sass/scss#fetch- HTML
- CSS
- JS
- API
4Byron1,950SubmittedHello ladies and gentlemen! This was a rather nice challenge to do. I chose to use Sass without any CSS framework just for a laugh (also saves weight and there's one less dependency). Vanilla JS for the mobile menu, validation, copy to clipboard and fetch api. Also added a little fancy mobile menu toggle animation. It probably doesn't work in IE11, but who still supports that browser anyway? No one. 😆
Like always, please leave a like and maybe a lovely little comment as well. Thanks!
Update: I've added
localStorage
so the links should now persist!Four card feature section using HTML and CSS
- HTML
- CSS
1Byron1,950SubmittedHello ladies and gentlemen! This was a nice little fun one. I used flexbox with some transforms to get the layout right on desktop. I also added some bonus hover states as well. Please leave a like and maybe even a cheeky comment!
Room homepage using Sass and Bootstrap 5
#bootstrap#sass/scss- HTML
- CSS
- JS
2Byron1,950SubmittedHello ladies and gentlemen! Here's my version of the Room homepage using a pretty standard Bootstrap setup with Sass and Laravel mix. Hope you like it!
REST Countries API with color theme switcher using React and Tailwind
#react#tailwind-css- HTML
- CSS
- JS
- API
1Byron1,950SubmittedHello ladies and gentlemen! This is my first React app on here. There's a couple of bits I struggled with so I've just left them out:
- The border links on the country detail page
- Having proper slugs for each of the country detail pages e.g.
/country/czech-republic
Also, tried looking into using local storage to persist some react state so that it remembers whether dark mode is on or not, but I sacked that off as well.
I'm open to some lovely feedback from all of you. Thank you! 😅
Fylo data storage component using vanilla HTML and CSS
- HTML
- CSS
0Byron1,950SubmittedHello ladies and gentlemen! I've coded up this lovely storage component using nothing but the finest HTML and CSS. Leave a like, and maybe even leave a comment! 😅
Coding bootcamp testimonials slider using Alpine.js
- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen! Here's my implementation of the testimonials slider using Alpine.js. You can even use the left and right keys to navigate the slides! Feel free to like, comment and follow. 😅
FAQ accordion card using Sass and vanilla Javascript
#accessibility#sass/scss- HTML
- CSS
- JS
2Byron1,950SubmittedHello ladies and gentlemen! This one was rather fun. Lots of 'left a bit right a bit' with the background images. Thought I'd add some animations/transitions in there, too. Leave a like if you like!
Testimonials grid section using CSS grid
- HTML
- CSS
2Byron1,950SubmittedHello ladies and gentlemen and welcome to my implementation of the testimonials grid section challenge. Hope you like it! Feel free to leave a comment or maybe even a cheeky like!
Article preview component using CSS grid and flexbox
- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen, here's my version of the article preview component! I've added a hover state on the image for some extra style points. Leave a like ❤️ and drop a comment 💬 to let me know what you think!
Stats preview card component using HTML and CSS
- HTML
- CSS
0Byron1,950SubmittedHello ladies and gentlemen! Here's my attempt at the Stats preview card component.
I think I nailed the background image with
background-blend-mode
, a violet colored pseudo element behind it and a touch of opacity. Leave a cheeky like, or maybe even a comment!Bookmark landing page using Tailwind and Alpine.js
#tailwind-css- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen, I present to you my version of the Bookmark landing page! Please have a look and drop a like! Maybe even leave a snazzy comment!
Launch countdown timer using HTML, CSS and Flip counter plugin
- HTML
- CSS
- JS
1Byron1,950SubmittedHere's my lovely attempt at a countdown timer, ladies and gentlemen. Please press like and maybe even leave a comment!
Time tracking dashboard using HTML, CSS and Javascript
- HTML
- CSS
- JS
0Byron1,950SubmittedHello ladies and gentlemen, feel free to drop a like and a comment!
3-column preview card component using HTML and CSS
- HTML
- CSS
0Byron1,950SubmittedHello ladies and gentlemen, I give to you the lovely 3-column preview card component. Feel free to comment and like!
NFT preview card component using HTML and CSS
- HTML
- CSS
0Byron1,950SubmittedHello ladies and gentlemen and welcome to my NFT preview card component! Smash that like button!
Profile card component using HTML and CSS
- HTML
- CSS
3Byron1,950SubmittedFeast your eyes on this magnificent profile card component, ladies and gentlemen! Don't forget to like, share and subscribe haha
Sunnyside agency landing page using Sass and Bootstrap 5
- HTML
- CSS
- JS
0Byron1,950SubmittedBehold my grand implementation of this Sunnyside agency landing page, it is top notch! Please smash the like button!
Order Summary Component using HTML and CSS
- HTML
- CSS
0Byron1,950SubmittedMy solution to this is perfect and there is no room for improvement. I AM THE BEST
E-commerce product page using Tailwind and Alpine.js
- HTML
- CSS
- JS
0Byron1,950SubmittedMostly playing around with Alpine.js so any feedback there would be cool. Any other feedback is welcome as well!