DEV Community: tinayanuk

Push and deploy Front End projects to GitHub Page step by step

tinayanuk — Mon, 23 Nov 2020 16:39:50 +0000

In the terminal:

git init    //.git file
git config --global user.name "my git user name"
git config --global user.email "my git user email"
git add .

Go to GitHub, create repository:
create New Repository,

git commit --m "first commit"
git remote add origin ..... //copy and paste
git push -u origin master //copy and paste

Deploy to gh-pages
In package.json:

“homepage”: “https://tinayanuk.github.io/appname”
“scripts”: {
“deploy”: “gh-pages -d build”
}

In terminal:

npm run build
npm run deploy

From Normal Menu to Hamburger Menu

tinayanuk — Thu, 23 Jul 2020 18:46:35 +0000

The position of the hamburger menu-btn, absolute.
.menu-btn {
cursor: pointer;
position: absolute;
top: 20px;
right: 30px;
z-index: 2;
display: none;
}

Media query:
@media(max-width:700px) {
.menu-btn {
display: block;
}

/* move the search & cart icons */
.main-nav ul.nav-right {
margin-right: 50px;
}

/* move the horizontal nav menu to left side, with slide in effect animation */
.main-nav ul.nav-menu {
display: block;
position: absolute;
top: 0;
left: 0;
background:#f2f2f2;
width: 50%;
height: 100%;
border-right: #ccc 1px solid;
opacity: 0.9;
padding: 30px;
transform: translateX(-500px);
transition: transform 0.5s ease-in-out;

}

.main-nav ul.nav-menu.show {
    transform: translateX(-20px);  
}

/* CSS of the left menu */
.main-nav ul.nav-menu li {
padding: 10px;
border-bottom: #ccc solid 1px;
font-size: 14px;
}

.main-nav ul.nav-menu li:last-child {
    border-bottom: none;
}

}

/* Add JS to the btn click function -- toggle class .show*/

document.querySelector('.menu-btn').addEventListener('click', ()=&gt; document.querySelector('.nav-menu').classList.toggle('show'));

Daily Reflection CSS 1

tinayanuk — Wed, 22 Jul 2020 17:33:21 +0000

Today, I officially began my daily reflection.
每天都要记下自己的思考。

About the Netflix Clone project, I found this difference:
/* codes */
.container {
max-width: 70%;
margin: auto;
overflow: hidden;
padding: 0 2rem;
}

About overflow: hidden, if the things in the container are bigger than it, they will not be all shown, some of them will be cut off, and the sizes of the photos will not change.

So I changed it to overflow: initial, now everything is in the container, and the photos' sizes are adjusted.

Inspired by other successful stories

tinayanuk — Mon, 18 May 2020 15:18:52 +0000

I have read some successful stories from my real life, not only from the Internet. Man, I got to say they work hard and they are lucky.
Hope I can get this lucky some time.