Project: Creating Personal Webpage 자기소개 페이지 만들기

My very first webpage created by using HTML and CSS !

생활코딩으로 얕은 개념만 알고 있었던 HTML 과 CSS. Udemy의 Anglela's bootcamp 강의를 다시 들으며 실제 동작 방식을 배웠다. 직접 코드를 치면서 원하는 화면을 구현하려니 이미지를 원하는 위치에 놓는 것 하나도 크나큰 챌린지였다.

PC 화면과 모바일 화면은 화면 비율에 따라 responsive 할 수 있도록 배치해서 이모티콘의 배열이 달라짐.

What I learnt from this project

1. fixed positioning
   고정된 상단 바를 만들기 위해 사용함.

2. auto sizes
   화면 비율에 따라 변경되는 사이즈

3. hover
   마우스 포인터를 올렸을 때 다른 텍스트 색상, 배경색 등으로 변경할 수 있음

4. little dots in the middle
   박스의 스타일을 변경하여 점선처럼 표현 할 수 있음

5. 리소스
   사진 호스팅, 이모지 아이콘, 폰트 등은 인터넷 리소스를 이용하여 해결가능

Useful websites and resources

1. Positioning Guide Line
   It shows you all the guide lines and boxes for adjusting the position on your page. It's a Chrome extension, hence only works on Chrome browser.
   Pesticide

2. Color Palette
   Designers picked color combinations for you. Simply paste the hex values such as #d9e4dd from the palette.
   Color Hunt

3. CSS references
   Index for CSS
   CSS reference

4. Icon
   Database for all icons
   Flaticon

5. Emoji
   Database for all emojis available on major platforms such as apple, samsung and...etc
   Emojipedia

6. Hosting Photos
   Simply upload your own photos and paste the address at <img src=>
   Google Photos

7. Button Generator
   Easy way to make your own button for your page.
   CSS Button Creator

8. Font
   Select multiple fonts and implement all at once
   Google Fonts