code bucks

code bucks

1663079179

Build awesome๐Ÿ”ฅ landing page for Apple iphone using ThreeJS + ReactJS

Tutorial๐Ÿ˜‡ to create Apple iPhone 14 landing page using ThreeJs + ReactJS

Demo Link๐Ÿ–ค:  https://apple-iphone14.netlify.app/

Blog๐Ÿ“–:  https://dev.to/codebucks

Hi there ๐Ÿ‘‹,

In this video, 
We are going to create cool landing page for Apple iPhone 14 Pro Max where we will render 3D model using ThreeJs and add scrolling animations using GSAP. 
Here I have used different libraries to render 3D model in a React application and made a unique design, You can check the demo link.

For this project, we're going to use,
โ–ถ๏ธ React JS (CRA)
โ–ถ๏ธ GSAP for scrolling animations
โ–ถ๏ธ styled-components for styling
โ–ถ๏ธ react-three-fiber and react-three-drei to render 3D model

https://youtu.be/cT160dOzpG

#reactjs #javascript #css3 #web-development #HTML 

Build awesome๐Ÿ”ฅ landing page for Apple iphone using ThreeJS + ReactJS
tito ash

tito ash

1662441794

green dashboard - Bootsrap 5

โœ… List of Components used in this Tutorial

๐Ÿš€ Component Name Docs
๐Ÿš€ Navbar Navbar Docs
๐Ÿš€ Collapse Collapse Docs
๐Ÿš€ Offcanvas Offcanvas Docs
๐Ÿš€ Card Card Docs
๐Ÿš€ Input Group Input Group Docs
๐Ÿš€ Bootstrap Icons Bootstrap Icons Docs
๐Ÿš€ Chart.js Chart.js Docs
๐Ÿš€ DataTables DataTables Docs

 Skills :
- JQuery
- HTML5
- CSS3
- bootsrap 5 + Bootstrap Icons

----------------------Github Code Source ------------- 
https://github.com/titoashelias/green-dashboard

#bootstrap #vue #HTML #dashboard #admin #web-development #laravel #css #tailwindcss #html5 

green dashboard - Bootsrap 5
w3hubs com

w3hubs com

1661626407

Display Current Time Using HTML,CSS And JavaScript

In this Display Current Time, we were Using HTML, CSS And JavaScript. We used the javascript inbuild function for a time, and to display, we used javascript DOM. To show the live time, we used javascript setInterval functions.

Also Read:- Bootstrap Progress Bar Percentage Using Jquery

For the responsive side, we used CSS media queries. Also, to make it more attractive, we used a background image with an opacity background.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

 

#javascript #JavaScript #html #HTML 

Display Current Time Using HTML,CSS And JavaScript
Xander  Crooks

Xander Crooks

1661082420

Himalayausa Clone using React JS and Redux

Inspired from Himalayausa.com

Project-code: closed-birthday-4512

Tech Stack Used

#React.js

#Redux

#Chakra-UI

#React Slick

#JavaScript

#HTML

#CSS

#Heroku

#Versel

#NPM

Deploy link:- Versal

This website was originally inspired from Himalayausa.com Our Team made Tremendus efforts and build this website within 5 consicutive days. We used React.js library for the UI part and used REDUX store for maintaing the states of the components. We used Heroku server API for getting the Mock Data and used Versel to deploy.

sneak peeks of the project...

Landing page...

Alt text

Shop By Category ...

Alt text

Best Seller ...

Alt text

Navbar ...

Alt text

Footer ...

Alt text

About Page ...

Alt text

Login page ...

Alt text

Signup page ...

Alt text

product page ...

Alt text

Single Product ...

Alt text

Cart page ...

Alt text

Checkout page ...

Alt text

Main Contributors

#Anurag Dinkar Pawar GitHub

#Veena Sahu GitHub

#Narayan Chatalwar GitHub

#SHILAJIT PAUL GitHub

#Govind Lakhotiya GitHub


Author: AnuragPawar-132
Source code: https://github.com/AnuragPawar-132/closed-birthday-4512

#react #javascript #Redux 

Himalayausa Clone using React JS and Redux
Meggie  Flatley

Meggie Flatley

1661023560

Learning Resources App: A Simple Web Application Built using Vue js

About

  • Learning Resources App is a simple web application built using Vue js, HTML, CSS, and JavaScript.

website description

it's a simple website that allow us to share different learning resources that help us and the other to know multible informations from different resources, it helps us to study.

  • If you would like to share what you're working on, add the title, description, and link in the "Add Resource" section.
  • If you would like to see what other working on, got to "Stored Resource" section.

Project setup

  • npm install

Compiles and hot-reloads for development

  • npm run serve

.browserslistrc

> 1%
last 2 versions
not dead
not ie 11

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

.gitignore

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

Website link

ScreenShots:

Main Screen

Capture

When you click "Add Resource" button

Capture 2PNG

then if you add title, description, and url

Capture3

it will appear in Resources, When you click "Stored Resource" button

Capture4

if you want to delete it, press 'delete' button

Capture5

it will disappear

Capture6


Author: asmaaadel0
Source code: https://github.com/asmaaadel0/The-Learning-Resources-App

#vuejs #javascript #HTML #CSS 

Learning Resources App: A Simple Web Application Built using Vue js

A Full-featured interactive Web Application In HTML, CSS and React JS

My Diet Diary

A full-featured interactive web application in HTML, CSS and React JS that keeps track of usersโ€™ diet plans.

Link to the hosted website: https://my-diet-diary.web.app

Descrption

MyDietDiary is our team project for the course INFO 340 - Web Programming.
Our group decided to focus on tracking BMI data and diet plans because we noticed that people's eating
habits in modern days lack specific categories of food, with mostly only fat, starch, and sugar for a meal.
Busy schedules also lead to people eating on the run, which results in poor nutritional intake.
We hope MyDietDiary will help users achieve a healthier lifestyle by monitoring BMI results
and tracking daily food intake.

Features

Calculate & Track BMI

You can caculate your BMI by providing your weight and height,
And your BMI will be recorded and shown in a trending chart!

Make Diet Plan

You can add the food items into your diet plan with a date.
The search food and filter food catogery functions can help you find the results quickly.
If your desired food does not exist in the database, you can customize one using "adding food to database" button!

View Diet Plan

You can view your added food items based on selected date.
All information regarding the food items will be displayed.
If you have accidently added wrong items, you have the option to remove them from your plan!


 

Credit: INFO 340 Group A6


Author:  hongjie-qiu
Source code:  https://github.com/hongjie-qiu/My-Diet-Diary

#react #javascript #HTML  #CSS 

A Full-featured interactive Web Application In HTML, CSS and React JS
w3hubs com

w3hubs com

1659020113

Bootstrap 5 Custom Alert

Bootstrap 5 Custom Alert


In this custom alert, we used unique background colours. Also, we modify the bootstrap class CSS properties in this custom bootstrap 5 alerts.

Also Read:- On Hover Bottom to center Text Effect Using CSS

You can use this alert in the admin dashboard or any message you want to show in the notification view. For the mobile view, we change only font size and reset it like a desktop view.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

 

Source Code

 

#bootstrap #css #CSS  #HTML 

Bootstrap 5 Custom Alert
Jillian  Corwin

Jillian Corwin

1658322000

TypeWizard: Open-source Typing Website with Multiple Features

TypeWizard v1.2.0

TypeWizard is an open source, easy to use typing game fully made in HTML, CSS, and Javascript inspired by Miodec's MonkeyType.

Visit the site!

Features

  • Simple design
  • Multiple themes
  • Multiple language support
  • Open-source project
  • And upcoming features in the future!

Showcase

HomepageSettingsAbout


Author: devrusty
Source code: https://github.com/devrusty/TypeWizard
License:

#HTML #CSS  #Javascript #graphql 

TypeWizard: Open-source Typing Website with Multiple Features
Jillian  Corwin

Jillian Corwin

1658307600

Simon Game: Simon Game in Full Vanilla JavaScript

Simon Game

Simon Game in full vanilla JavaScript. This is my CS50x Final Project.

Play Here:

https://devabdee.github.io/Simon-Game/

Tech Stack

Client: HTML, TailwindCSS, JavaScript.

๐Ÿ”— Links

What is Simon Game?

Simon is a game of short-term memory skill. The device creates a series of tones and lights and requires a user to repeat the sequence. If the user succeeds, the series becomes progressively longer and more complex. Once the user fails or the time limit runs out, the game is over.


Author: DevABDee
Source code: https://github.com/DevABDee/Simon-Game
License:

#TailwindCSS #JavaScript #HTML #graphql 

Simon Game: Simon Game in Full Vanilla JavaScript

How to Create Checkout & Orders Page for Store Website Using PHP PDO

How to make complete responsive online grocery store website design using html css vanilla javascript php PDO and mysql database from scratch.
create a complete responsive e-commerce grocery store website design template with multi-role based login system, wishlist, add to cart, product crud and dashboard using html css vanilla javascript php pdo mysqli database tutorial step by step

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1b_WNJogKLycjxm2IlNfFIAqqt3T2JfB0/view?usp=sharing

Timestamp:
0:00 demo
8:49 file structure
9:08 checkout page
49:52 orders page
1:00:09 final demo

#HTML #CSS #JavaScript #PHP #MySQL

How to Create Checkout & Orders Page for Store Website Using PHP PDO

How to Create Wishlist & Shopping Cart Page for Website Using PHP PDO

How to make complete responsive online grocery store website design using html css vanilla javascript php PDO and mysql database from scratch.
create a complete responsive e-commerce grocery store website design template with multi-role based login system, wishlist, add to cart, product crud and dashboard using html css vanilla javascript php pdo mysqli database tutorial step by step

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1b_WNJogKLycjxm2IlNfFIAqqt3T2JfB0/view?usp=sharing

Timestamp:
0:00 demo
8:49 file structure
9:08 wishlist page
30:20 shopping cart page

#HTML #CSS #JavaScript #PHP #MySQL

How to Create Wishlist & Shopping Cart Page for Website Using PHP PDO

How to Create Shop, Category, About, Contact, Search Page Using PHP

How to make complete responsive online grocery store website design using html css vanilla javascript php PDO and mysql database from scratch.
create a complete responsive e-commerce grocery store website design template with multi-role based login system, wishlist, add to cart, product crud and dashboard using html css vanilla javascript php pdo mysqli database tutorial step by step

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1b_WNJogKLycjxm2IlNfFIAqqt3T2JfB0/view?usp=sharing

Timestamp:
0:00 demo
8:49 file structure
9:08 category page
13:47 shop page
19:40 about page
29:21 contact page
39:37 search page

#HTML #CSS #JavaScript #PHP #MySQL

How to Create Shop, Category, About, Contact, Search Page Using PHP

How to Create Home, Quick View Page for Website Using PHP PDO

how to make complete responsive online grocery store website design using html css vanilla javascript php PDO and mysql database from scratch.
create a complete responsive e-commerce grocery store website design template with multi-role based login system, wishlist, add to cart, product crud and dashboard using html css vanilla javascript php pdo mysqli database tutorial step by step

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1b_WNJogKLycjxm2IlNfFIAqqt3T2JfB0/view?usp=sharing

Timestamp:
0:00 demo
8:49 file structure
9:08 home 
14:12 home category
19:18 home products and quick view

#HTML #CSS #JavaScript #PHP #MySQL

How to Create Home, Quick View Page for Website Using PHP PDO

How to Create Admin Orders, Accounts, Messages for Website Using PHP

How to make complete responsive online grocery store website design using html css vanilla javascript php PDO and mysql database from scratch.
create a complete responsive e-commerce grocery store website design template with multi-role based login system, wishlist, add to cart, product crud and dashboard using html css vanilla javascript php pdo mysqli database tutorial step by step

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1b_WNJogKLycjxm2IlNfFIAqqt3T2JfB0/view?usp=sharing

Timestamp:
0:00 demo
8:49 file structure
9:08 admin orders
28:26 user accounts
39:4 admin messages

#HTML #CSS #JavaScript #PHP #MySQL

How to Create Admin Orders, Accounts, Messages for Website Using PHP

How to Create Add & Update Product for Grocery Store Website Using PHP

How to make complete responsive online grocery store website design using html css vanilla javascript php PDO and mysql database from scratch.
create a complete responsive e-commerce grocery store website design template with multi-role based login system, wishlist, add to cart, product crud and dashboard using html css vanilla javascript php pdo mysqli database tutorial step by step

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1b_WNJogKLycjxm2IlNfFIAqqt3T2JfB0/view?usp=sharing

Timestamp:
0:00 demo
8:49 file structure
9:08 add products
28:00 show products
37:29 delete products
42:29 update products

#HTML #CSS #JavaScript #PHP #MySQL

How to Create Add & Update Product for Grocery Store Website Using PHP