[3] (기초)프론트엔드 공부에 도움될 사이트

세번째 글은 수업했던 일부 코드를 가져오려했으나 새로운 것을 배운게 아니라 배웠던 것들을 활용하는 수업이였어서

 

글로 남기기엔 애매했다. 그래서 오늘은 이전 프론트엔드 공부할때 도움이 됐던 사이트들을 소개하려한다.

 

1. w3school

   너무나도 유명하며 유용한 사이트이다. 프론트엔드에 관련된 html,css,javascript등을 웹상에서 테스트 할수 있으며 코드사용의 예등, 여러 교육용 자료를 제공하는 사이트이다.

W3Schools Free Online Web Tutorials

 

2. CSS Dinner(CSS)

   CSS를 공부하다보면 선택자라는 것을 배울텐데, 선택자는 내가 원하는 특정의 것들만 선택해 요소를 바꾸게 해주는 것이다. 특정의 것들만 선택하는것은 의외로 어렵다. 그것을 게임처럼 재밌게 연습할 수 있도록 만들어진 사이트이다.

CSS Diner

 

 

3. FLEXBOX FROGGY(CSS)

   이 사이트 또한 CSS의 flexbox에 대해 게임처럼 연습할 수 있도록 만든 사이트이다. 많은 것을 배워야할 아직은 부족한 개발자인 본인의 시선에서 보자면 '박스를 잘 쌓았다면 프론트엔드업무의 절반은 다한게 아닌가?' 라는 생각을 할정도로 박스 쌓는일은 중요하다고 생각한다. 아무튼 박스 쌓는 훈련을 할 수 있는 좋은 사이트인것 같다.

Flexbox Froggy

 

4. GRID GARDEN(CSS)

   위에서 본 flexbox는 한방향의 레이아웃을 설정하는 것이라면 grid는 두방향(가로,세로)의 레이아웃을 설정할 수 있다. 이 부분은 flexbox가 숙달되면 더 쉽게 이해하며 사용할 수 있기에 flexbox가 숙달된 후 연습하면 좋을것 같다.

Grid Garden

여러분의 프론트엔드 공부에 조금이나마 도움이 되길 바라며 모두들 좋은 하루 보내길, 보냈길 바랍니다.