[코드프렌즈] 코딩 교육플랫폼 사용후기, 홈페이지 만들기 독학 코딩

 

Hello, World!

 

저는 공대생이긴한데...부끄럽지만 해본 코딩이라고는

-HTML 편집

-파이썬

-C++

정도라서 스스로 홈페이지를 만들 생각을 못했었어요

 

 

하지만 커리어에 있어 최종 목표가 창업이라서

언젠가 홈페이지 만드는 방법을 배워야겠다~

생각만 하다 미루고 미루다가

(...)

 

 

 

얼마전 좋은 기회로 코딩 교육플랫폼인

[코드프렌즈]에서 협업을 문의해주셔서,

이를 활용한 독학을 다짐하게 되었습니다

직접 사용해본 후 남기는 후기로,

✔ 자유자재로 블로그를 꾸미고 싶은 블로거 분들

✔ 홈페이지 제작에 관심이 있으신 분들

✔  코딩을 쉽게 독학하고 싶으신 분들

이 참고하시면 좋을 것 같아요

 

 

 

 

 

 

 

---

1. 코드프렌즈

홈페이지

코드프렌즈 | 가장 실용적인 코딩 첫걸음

 

 

코드프렌즈는 '실용적인 코딩'을 지향하는 사람들에게 안성맞춤인 교육플랫폼입니다

에듀테크 브랜드, 긱하우스(Geek Haus)에서 운영하는 코딩 교육 서비스에요

 

 

 

 

 

 

 

 

 

 

 

2. 수업 들어보기

강의

 

웹 코딩 입문 과정은 총 8개의 강의(Course)로 구성되어 있어요.

 

웹 기초 이론

강의 1. 오리엔테이션 (현재 강의)

강의 2. HTML 입문

강의 3. CSS 입문

강의 4. JavaScript 입문

 

실습

강의 5. 자기소개 홈페이지 만들기

강의 6. 포트폴리오 만들기

강의 7. 홍보페이지 만들기

강의 8. 갤러리 만들기

 

 

들을 수 있는 수업들이 많은데,

일단 저는 머리에 든게 많이 없어서 기초부터 차근차근 시작해보겠습니다

먼저 각 기능들을 천천히 살펴보았어요

 

 

 

 

각 용어의 의미

• HTML, CSS, JavaScript는 웹에서 다음과 같은 역할을 합니다.
  • HTML : 웹 페이지의 골격으로, 웹의 구조를 담당
  • CSS : 웹 페이지의 옷으로, 웹의 디자인을 담당
  • JavaScript(JS) : 웹 페이지의 두뇌로, 웹의 동작을 담당

 

 

 

AI 튜터

 

AI 선생님이 계시는데(?)

무려 24시간동안 붙어서 튜터링해주시네요

( 24시간 함께 하는 AI 튜터에게 궁금한 내용을 언제든지 질문해 보세요. AI 튜터 메뉴의 

FAQ 버튼을 누르면, 수업별 자주 묻는 질문을 확인하실 수 있어요. )

 

 

 

그리고 왼쪽부터 3개의 system으로 나누어보면

1(가장 왼쪽)- 튜토리얼

2(중앙)- 코드

3(가장 오른쪽)- 실행결과 실시간 확인

구조입니다

 

 

 

 

 

 

그런데 시바견 나보다 두 살 많고

MBTI 똑같으시다 저도 엔티제라

내적친밀감 생김...ㅎㅎ

 

 

 

 

 

수업 노트

노트랑 필기구 들고다니면서 필기하기 되게 번거로운데

(경험담_스타벅스같이 책상 좁은 카페에서는 노트필기 불가....ㅎ)

수업 노트 기능이 있어서 바로바로 필기하기

너무 편한 것 같아요

 

 

 

 

 

 

HTML

• HTML, CSS, JavaScript는 웹에서 다음과 같은 역할을 합니다.
  • HTML : 웹 페이지의 골격으로, 웹의 구조를 담당
  • CSS : 웹 페이지의 옷으로, 웹의 디자인을 담당
  • JavaScript(JS) : 웹 페이지의 두뇌로, 웹의 동작을 담당

 

먼저 저는 HTML을 파이썬, c++보다도 일찍 접했었어요

티스토리 하시는 블로거분들이라면 HTML 편집기가 있다는

것을 잘 아실텐데, 이 편집기를 잘 다루면 다채롭게 블로그를

꾸밀 수 있습니다

→ 저같은 경우는 제 블로그 첫페이지 (스킨)을 편집할 때,

그리고 글을 쓸 때에도 Instagram 피드를 삽입할 때

종종 활용했습니다

 

 

개요

HTML은 HyperText Markup Language의 약자로, 웹페이지의 구조와 내용을 정의해요

 

 

 

 

태그

구성요소의 내용을 묶어주는 태그

 

 

제가 인스타그램 피드를 HTML편집기에 삽입할 때에도

<center>인스타그램 Embed 태그</center>

이 형태로 삽입하는데, <> 이 기호의 의미가 태그였어요

(Embed 태그는 제 피드의 코드라고 보시면 됩니다)

 

 

 

 

 

 

 

 

 

 

 

Instagram에서 이 게시물 보기

 

 

 

 

 

 

 

 

 

 

 

이가영(@young_claudialee)님의 공유 게시물

 

 

 

종종 저에게 블로그 댓글로 

어떻게 이렇게 인스타 피드를 글에 나타내는지

물어보시는 분들이 꽤 있었는데,

HTML을 활용해 이런식으로 인스타그램

피드를 글에 나타날 수 있게 

할 수 있습니다~~!

 

 

 

 

 

 

강의 여러 개 듣다보면 이렇게 퀴즈도 풀 수 있게 나와서,

효율적으로 공부하기 너무 좋은 것 같아요

 

 

 

틀리면 왜틀렸는지 / 혹은 힌트

맞았다면 자세한 정의를 제공해주어

다시 한 번 짚고 넘어갈 수 있습니다

 

 

 

 

 

 

 

CSS

• HTML, CSS, JavaScript는 웹에서 다음과 같은 역할을 합니다.
  • HTML : 웹 페이지의 골격으로, 웹의 구조를 담당
  • CSS : 웹 페이지의 옷으로, 웹의 디자인을 담당
  • JavaScript(JS) : 웹 페이지의 두뇌로, 웹의 동작을 담당

 

 

 

 

개요

 

CSS는 "Cascading Style Sheets"의 약자로 웹페이지의 디자인(Styling)과 레이아웃을 담당해요.

 

 

기본 구조

선택자 {
  속성: 값;
}

 

→ C++에서

int main(void) {

          실행문

}

의 형태를 갖추는 것처럼,

CSS도 특정 위와 같은 구조를 가져요

 

특정 HTML 요소를 선택하기 위해 선택자(Selector)를 사용하고, 선택된 요소에 스타일을 정의하는 속성(Properties) 부여.

 

 

 

왼쪽에서는 엄청 깔끔하게 이해가 쏙쏙 되게 설명이 잘 되어있고,

오른쪽 코드 실행부분에서도 빈칸에 옅게 보이는 코드들을 직접 입력해보면서

익힐 수 있게 되어있어서 (떠먹여줌...ㅋㅋ) 좋아요

 

 

 

 

 

주석(Comment)

 

특정 코드에 대한 설명을 기록하고 싶을 때,

개발자 -> 다른 개발자에게 정보를 주고 싶을 때

'주석'이라는 것을 사용합니다

 

 

/* */ 형태이고, 이 기호들 사이에는 어떤 코드나 글자를

넣어도 실행되지 않습니다

아래는 예제입니다

 

 

/* 이것은 CSS 주석입니다. */

/* 메인 배경색 설정 */

/* TODO: 반응형 디자인에 맞게 폰트 크기 조절 필요 */

 

 

 

 

 

 

 

 

 

 JS 

• HTML, CSS, JavaScript는 웹에서 다음과 같은 역할을 합니다.
  • HTML : 웹 페이지의 골격으로, 웹의 구조를 담당
  • CSS : 웹 페이지의 옷으로, 웹의 디자인을 담당
  • JavaScript(JS) : 웹 페이지의 두뇌로, 웹의 동작을 담당

 

개요

 

자바스크립트는 웹사이트에 동적인(Dynamic) 기능을 추가하는 프로그래밍 언어예요.

 

 

 

연산자

파이썬, C++처럼 자바스크립트도

동일한 원리로 연산, 출력을 할 수 있어요

 

 

 

 

변수 선언 키워드 - var

 

var는 JavaScript에서 변수를 선언할 때 사용하는 키워드

 

var 변수 = '값' 구조

 

 

왼쪽처럼 코드를 짜면 -> 오른쪽처럼 실행이 된다

 

 

3. 자기소개 홈페이지 만들기

먼저, 홈페이지 만들기가 부담스러운 면이 있었는데

템플릿이 있어서 진입장벽을 확 낮춰주는 것 같아요

 

 

 

 

(전) 템플릿

이렇게 기본 템플릿을 설정했고

 

 

 

 

 

(전) 원래 이렇게 있던 화면에서

제 기호에 맞게 코드를 조정해보았습니다

(사실상 그냥 텍스트만 바꾸기....ㅎ)

 

 

 

 

+) 연습장 활용  방법

이때 강의노트에 코드 붙여놓으면서

연습장으로 썻는데 필기용으로 말고도,

이렇게 실행문 작성 전에 연습장으로도

활용하기에 너무 좋은 기능같아요 :)

 

 

 

 

(후) 만든 홈페이지

(후) 요렇게 바꿨어요

아주아주 간단하게 뚝딱뚝딱 가능

 

 

 

 

 

 

 

업로드 기능을 이용하여 이렇게 Hello World 사진도

불러와보았습니다

 

 

 

 

배포

마지막으로, URL을 만들어서 배포까지 가능해요 !!!!!! 

 

 

 

 

 

 

 

 

4. 기타

홈페이지 말고도 포트폴리오 만들기, 비즈니스 홍보 페이지 만들기

등 다양하게 제가 직접 만들어볼 수 있다는 점에서 좋았어요

 

 

 

그리고 이렇게 '브랜딩을 위한 웹사이트에 대한 내용'까지

슥슥 읽어볼 수 있어 너무 만족스러웠습니다

 

 

 

 

 

5. 후기 요약

코드프렌즈는 사용하면 사용할수록 정말 개발자분들의 피땀눈물이 느껴질정도로

정교하고 잘 다듬어진 플랫폼이라는 생각이 강하게 들었습니다 

정말 알짜배기 핵심내용만 쏙쏙 들어있고, 설명이 이해하기 쉽게끔 깔끔하게 되어 있어요

 

 

코딩을 공부하기에 정말 간단하고, 무엇보다 내용이 어렵지 않으니

재밌게  간단하게 배울 수 있다는 점이 큰 장점인 것 같아요

→ 정말정말 진입장벽이 낮으니, 코딩에 거부감 드시는 분들도 10000% 독학하기 좋으실 거에요!

(플랫폼 구조 자체가 너무 가독성 있고 사용하기 쉬워서 적응도 얼마 안걸렸던 것 같아요)

 

 

 

 

 

+) 제언

코드프렌즈를 사용하는 소비자 입장에서 생각해보았을 때,

전반적으로 강의들이 되게 포괄적이라고 느껴져서

제가 HTML 편집으로 Instagram 피드를 삽입하는 것처럼

이러한 활용성 높은 '구체적인' 세부 내용들을 따로 다양하게

강의를 올려주시면  스타터분들이 다양하게 시도해보기 좋을 것 같다는 생각이 들었습니다

 

ex. 홈페이지 레이아웃을 시각자료로 제공하고 (핑크 테마 등)- 이에 대한 코드와 그 코드에 대한 설명

 

 

 

 

 

 

---

 

모두 미루지말고 해보자구요~

 

 

 

 

 

 

  ʕتʔ

코드프렌즈 측으로부터 협업을 문의받아 작성한 글입입니다

 

 

 

 

 

 

 

 

 

이 글의 저작권은 필자에게 있으며,

허가 없이 일부만을 발췌하더라도

법적인 제재를 받을 수 있음을 밝힙니다.

Copyright ⓒ 2023 All rights reserved by @IDEALIFE.

All pictures and contents cannot be copied without permission.