신미 프론트 엔드 엔지니어가 신세를 지고 있는 사이트 정리

소개

이번 달부터 프런트 엔드 엔지니어로서 일하기 시작한 하쿠시오입니다.
업무로 진행해 나가는 가운데 자신이 평소 참고로 하거나 공부로 사용하고 있는 사이트를 나열해 나가려고 합니다.

「이런 것 참고로 하고 있는 동안은 안 돼!」라고 소리도 있을지도 모릅니다만 용서해 주세요

HTML편

HTML Reference - A free guide



태그가 매우 알기 쉽게 구분되어 있어(알파벳순) 화상대로, 그 태그가 inline要素인가block要素인지 등이 시각적으로 매우 알기 쉬워지고 있습니다.

그대로 태그를 클릭하면 그 태그에 대한 설명이 기재되어 있습니다.
사용소나 샘플 코드까지 타고 있으므로 엄청 추천의 사이트입니다.
영어 사이트가 됩니다만 Chrome의 확장 기능등으로 충분히 이해할 수 있는 레벨로 번역되므로 영어 알레르기가 있는 분도 꼭!

HTML 중첩 치트 시트

그 이름대로 HTML5의 각 요소가 중첩할 수 있는 「자식 요소」, 포함될 수 있는 「부모 요소」의 리스트의 룰을 시각화해 표시해 줍니다.

CSS편

CSS Reference - A free guide

네. 방금 사이트의 자매 사이트입니다.
HTML Reference의 CSS 버전이라고 생각하면 문제 없습니다.
여기에 오랫동안 설명 쓰는 것보다 원래의 사이트 날아 주면 가장 알기 쉽다

Sass

네. CSS 메타 언어 (CSS 전 처리기) Sass입니다.
읽는 방법은 서스입니까, 서스입니까, 지금은 알고 있지 않습니다.

갑자기 탈선했습니다만 추천 사이트는 이쪽이 됩니다.
SassMeister


이렇게 입력한 Sass의 코드를 실시간으로 CSS로 컴파일해 주는 툴입니다. Sass가 사용할 수있는 환경을 구축하지 않고도 Sass를 쉽게 시도 할 수 있습니다.

유명해서 알고 있는 분도 많을까 생각합니다.
즉시 컴파일 결과가 출력되므로 Sass의 취급에 익숙하지 않은 동안은 특히 좋다고 생각합니다.

자바스크립트

공부 사이트뿐입니다.

현대 자바스크립트 자습서
그 이름대로 튜토리얼입니다.
기본적인 것부터 고급 주제까지 다루어지고 있기 때문에 개인적으로 강추 사이트입니다.

그러나 상당한 볼륨이 있으므로 매일 조금씩 해 나가는 것이 좋다고 생각합니다.
덧붙여서 추천하고 있는 본인은 끝나지 않습니다. 죄송합니다


js-primer

두 번째는 이쪽
저서는 유명한 azu씨입니다. 2016년부터 Angular 일본 유저회 대표를 맡고 있는 것 같습니다(굉장히...

이쪽도 JavaScript를 배우기 시작하는 초보자에게 추천합니다!
해외 튜토리얼을 번역한 느낌의 위화감? 어떤 느낌이 아니라 처음부터 일본인이 쓰여 있기 때문에 자연스럽게 읽을 수 있습니다!

끝에

우선 딱 생각나는 것만이지만 나열해 보았습니다.
그 밖에도 이런 사이트 있다구나 이 사이트도 추천이나. 같은 것이 있으면 코멘트로 가르쳐주세요!

그럼 모두 잘 지내고