Important
This is my deployment link. https://myportofolio.online/ https://jabennetwork.vercel.app/
-
💻 Html
-
🚀 CSS
-
⚛️ Javascript
-
- Icon
- Image
Install my-project with this following step
Go to https://github.com/samuelindraw/milestone1---JABEN
Git Clone https://github.com/samuelindraw/milestone1---JABEN
Open index.html or launch it with live server on visual studio code
If you want to modify it you can use fork my repository insted :
We are very happy if you are interested and also contributing to My portofolio project 🤗
Here are a few options:
-
Star this repo.
-
Create issues every time you feel something is missing or goes wrong.
Header | Description |
---|---|
Home |
Home is an introduction page |
On Sale |
Telling if any item on sale |
Shop |
Where shop catalog begin |
News |
News |
Footer |
More description here. |
Explain development stage from Scratch. The difficulty of create a website is the design, because without the design we never know how to create it, after finding the right design, then i focused to create the HTML structure and CSS. All i can think is using grid view as it will help me to determine the right spot to place my image or layouting the E-commerce shop list, After that i use some transition and animation using Javascript and CSS animation to make the page more lively. Here is the list of what i was doing :
- Create HTML Structure and HTML Sematic
- Create HTML Image and Media Elements
- Create CSS Styling to make it the page more convinient to see
- Create Typograhpy and Icon using remix icon
- Create Optimized Responsive Design
- Add javascript Animation
An external library is a collection of code (functions, classes, and other components) that extends the functionality of a programming language beyond what’s available in its core libraries. On my project i use :
- Remix Icon
Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2800+ icons are all elaborately crafted so that they are born with the genes of readability, consistency, and perfect pixels. Each icon was designed in "Outlined" and "Filled" styles based on a 24x24 grid. Of course, all the icons are free for both personal and commercial use.
I use remix icon to provide an icon in my website
- Font I use font from google api to make text preetier and match to the design pattern
- Javascript I use javascript to make carousel, dark mode using local storage and smooth slider
Specific Design that i was use, is changing hamburger button to magnifier and shopping card and also i use carousel using js since when i use css its not responsive
if you want your website to be accessible to other people you need to deploy it. in this case i was using vercel to deploy my website.
what is vercel ?
Vercel is a powerful cloud platform that simplifies web development and deployment for frontend developers.
You can register using Github account
Step 1: After register you will see dashboard of vercel site
Step 2: You can see, Your repository that connected to your github account and recent project
Step 3: You can also add new project by clicking Add New\
Connect to your own github repository
Vercel cannot takes from private repository, while revou repository is private so we mush clone to our public repository.
After forking from RevoU repository we need to create Project and Import our git repository to Configure Project
We need to configure our project, By Choosing repository name and set framework that we use, if we only use html or css we can use other option.
- insert Project Name
- Choose Framwork
- Deploy
here is what you see, when deployment was success
You can change domain or anything else after we finish deployment
- Check your project and click the settings
- You will see more action on left side, choose domain
- And there you can change vercel domain
Why we need domain ?
A domain is like your website’s street address. It’s the unique reference that identifies your website online. When customers type it into their browsers, they find your site.
you can register and login using your own gmail / github email
how to choose domain name
- Prioritize Brandability: A unique, brandable domain stands out.
- Keep It Short: Shorter domain names are easier to remember.
- You can pay using virtual account, bank transfer or etc
- After that you can verify your email.
- Check Dashboard and see if your domain name is activated
- On vercel, Click your recent project and click Domain
- Your can add your custom domain, Domain provider that you have buy.
- After adding custom domain, you will see that there was a list your custom domain, with some notice
Caution
Invalid configuration.
- Connect Vercel DNS to Domain Hosting
1 On name server choose use vercel DNS
2 Then Look at set the names apex domain to
3 Copy that and configure it on your custom domain site
Tip
AND YOU ARE SET, JUST WAIT AND YOU CAN USE YOUR CUSTOM DOMAIN !!!