zerotocode
1.0.0
Zero to Code는 HTML, CSS 및 JavaScript (HTML, CSS 및 JavaScript)를 사용하여 웹에서 물건을 만드는 것에 대한 무료 온라인 과정 입니다. 나는 ZTC가 코드로 물건을 만드는 법을 배우기 위해 웹에서 가장 좋은 장소가되기를 원합니다. Code ~ Code는 코드 프레임을 학습 환경, 공유 성, 빠른 피드백 루프 및 기초에 중점을 둔 학습 환경으로 사용합니다.
이것은 모든 개방형 커리큘럼을 포함하여 0 대 코드의 Hugo 사이트를 포함하는 소스 저장소입니다. 웹 사이트에서 프로젝트 자체에 대한 자세한 내용을 읽을 수 있습니다.
Code ~ Code는 Hugo와 함께 제작 된 정적 사이트입니다. Hugo는 정적 사이트 생성기로 Markdown 문서와 HTML/CSS/JS 템플릿을 가져 와서 정적 사이트를 형성하는 정적 HTML/CSS/JS 파일의 번들을 생성합니다. gohugo.io에서 hugo를 사용하는 방법에 대해 자세히 알아볼 수 있습니다. README 의이 섹션은 ZTC의 저장소에서 Hugo와 함께 작업하는 방법을 다룹니다.
hugo 실행하여 템플릿과 Markdown 페이지에서 새 버전의 정적 사이트를 생성 할 수 있습니다.
$ hugo
...
[some info about the generated files] 글을 쓰고 페이지를 작성하거나 템플릿을 수정할 때 결과를보고 싶다면 hugo server -D 로 개발 서버를 실행할 수 있습니다.
$ hugo server -D
... serving development server at localhost:1313 이 방법으로 서버를 시작하면 브라우저에서 localhost:1313 으로 이동하여 편집 할 때 사이트의 라이브로드 버전을 볼 수 있습니다.
Zero to Code에는 튜토리얼을보다 효과적으로 만들기 위해 Hugo의 베어 기능 위에 사용하는 몇 가지 사용자 정의가 있습니다.
ZTC가 Hugo 위에있는 가장 중요한 사용자 정의는 구문 하이라이트 코드 블록을 구축하는 방법입니다. Markdown의 Triple-Backtick 구문을 사용하는 대신 Hugo의 사용자 정의 구문을 사용하여 구문 강조 표시된 코드 블록을 정의합니다.
{{<highlight html>}}
<h1>this is a highlighted block</h1>
{{</highlight>}}
또한 html 대신 css 또는 javascript 코드 블록을 정의 할 수 있으며 Hugo에게 "hl_lines=N1 N2 N3-N5" 구문으로 특정 라인을 강조하라고 말할 수 있습니다.
{{<highlight javascript "hl_lines=1">}}
console.log('hi');
{{</highlight>}}
single.html 페이지 (단일 자습서 페이지)에서 이러한 방식으로 강조 표시된 코드 블록을 정의하면 모든 코드 블록의 오른쪽 상단에있는 .highlight ed 코드 블록을 사용하는 스크립트 도 있습니다.
때로는 페이지에 코드 프레임 편집기의 라이브 대화식 인스턴스를 포함시키기를 원합니다. 현재이 작업을 수행하는 가장 좋은 방법은 Overview 레슨 의이 예와 같이 코드 프레임 편집기 URL을 가리키는 <iframe> 요소가 포함 된 .fixed.button.liveEditorContainer div를 작성하는 것입니다.
< div class =" liveEditorContainer fixed button " >
< iframe src =" https://codeframe.co/new " frameborder =" 0 " class =" liveEditor " > </ iframe >
</ div >이것은 URL에 의해 지정된 CodeFrame 편집기를 페이지에 올바른 크기로 포함시킵니다.
button 클래스와 그림자가있는 상자 대부분의 대화 형 요소와 강조된 요소 (강조 표시된 코드 블록 및 이미지와 같은)는 그림자로 페이지 표면에서 올라갑니다. Codeframe의 스타일 시트에서 가져온 .button 클래스는이 apperance를 담당합니다. Codeframe의 버튼과 같은 상자 그림자로 요소를 올리려면 .button 클래스를 사용하십시오.
요소가 대화식이되지 않으려면 .fixed.button 클래스를 요소에 적용하여 버튼에서 호버 및 활성 애니메이션을 비활성화 할 수 있습니다.
제로 대표 코드 프로젝트가 마음에 들면 내가 앞으로 나아가는 것을 지원하려면 PayPal 또는 Venmo를 통해 코드로 기부하는 것을 고려하십시오.
또는 CS Education Space, Khanacademy, Hack Club 및 Stutech에서 훌륭한 일을하는 최고의 비영리 단체에 기부하는 것을 고려하십시오.
