Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Web Development

映画前売りサイトの作成：コーディング編

ウェブ標準とレスポンシブサイト作り講義によく従ってきたら今は実戦練習番！映画前売サイト制作をデザイン編とコーディング編に分けて学習します。

（4.9）受講レビュー 11件

受講生 1,524名

  • webs
example
Responsive Web
Thumbnail

学習した受講者のレビュー

こんなことが学べます

  • Photoshopを活用してサイトをデザインする

  • レスポンシブウェブサイトの作成

  • プラグインを活用して画像スライドを作成する

  • APIをインポートしてビデオを表示する

  • JavaScriptで機能を実装する

映画前売りサイト
私の手でパチパチ⚒️🔧

Webパブリッシャーの夢の木のための講義✏️

ここまで来たあなたはすごくよく育っているパブリッシャーの夢の木！今回の講義も一緒です。 💪

本講義は、映画前売りサイトをデザイン・コーディング編に分けて進める授業です。メガボックスの旧バージョンページに従って作ってみます。今回の講義は以前の講義で学んだサイトデザインをもとに本格的なパブリッシングをすることになります。 ひとつずつついてみるとサイトをどう作るべきか感が取れるんです。

「Web標準サイトの作成」と「 レスポンシブサイトの作成」の受講後に本講義を聞くことをお勧めします。 基礎を固め、Web標準とレスポンシブWebについてより速く理解するために。

頑強に向かって！皆さんの熱工を応援します。

📢受講時の参考資料のご案内

Webパブリッシャードリームロードマップ🌲

*各画像をクリックすると、その講義ページに移動します。

1. [Webパブリッシング実習] Web標準サイトの作成

サイトの作り方についての感覚を捉えることができる講義です。

2. [ウェブパブリッシング実習] レスポンシブサイトの作成

Web環境に応じて自由自在にスクリーンサイズを変更するレスポンシブWebを製作します。

3. 映画前売りサイト作り：デザイン編

今は本番だ！映画前売サイト制作第1弾、デザイン編です。

4. 映画前売りサイトの作成: コーディング編現在講義

今は本番だ！映画前売サイト制作第2弾、コーディング編です。

予想される質問 Q&A 💬

Q.非専攻者も聞ける講義ですか？

はい！基礎的な内容を扱う講義なので、初めて学ぶ方も十分に聞くことができます。

Q.講義を聞く前に準備すべきことはありますか？

あなたの情熱だけを準備してください。^^

Q.授業内容をどのレベルまで扱いますか？

HTMLとCSSを活用して簡単なレイアウトをとるほどになればついてくるレベルです。^^

こんな方に
おすすめです

学習対象は
誰でしょう？

  • ウェブサイトを最初から一つ一つフォローして作りたい方

  • グリッドやヘッダー、フッター、バナーまで様々なレイアウトを反応型で制作したい方

  • 実際にあるサイトに沿って作ってみてコーディングに対する感覚を身につけたい方

  • Webパブリッシャー職務を希望する方

前提知識、
必要でしょうか？

  • Web標準サイトの作成(オプション)

  • レスポンシブウェブサイトの作成(オプション)

  • 映画前売りサイト作り：デザイン編（選択）

こんにちは
です。

7,299

受講生

95

受講レビュー

1

回答

4.9

講座評価

4

講座

안녕하세요! 🧑🏻‍💻

웹에 관심이 많고, 강의를 하고있는 
웹 스토리보이입니다.

유튜브 채널 Webstoryboy에서 
여러가지 강의를 제작합니다.

포기하지 않고 마지막 강의 까지 저와 함께 하나 하나씩 잘 따라와주면
웹 퍼블리셔에 한 발짝 더 다가가실 수 있을 거예요. 꼭 직접 해보셔야 실력이 늘 것입니다.

어렵거나 틀려서 잘 안 된다고, 모르겠다고 포기하시면 다른 사이트 만들 때도 힘이 들겠죠?
따라하시다가 틀리거나 안 되는게 있으시면 본인이 코딩한 것과 제 강의 소스를 비교하시면서

스스로 어디가 틀렸는지 찾아보세요. 그것 또한 공부가 될 거랍니다 🧚🏻‍♀️
오늘도 여러분의 열공을 응원하며, 화이팅입니다!

カリキュラム

全体

23件 ∙ (12時間 22分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

11件

4.9

11件の受講レビュー

  • Jang Jaehoon님의 프로필 이미지
    Jang Jaehoon

    受講レビュー 498

    ∙

    平均評価 4.8

    5

    13% 受講後に作成

    감사합니다!

    • Leo님의 프로필 이미지
      Leo

      受講レビュー 24

      ∙

      平均評価 4.5

      4

      61% 受講後に作成

      사이트 작업을 경험해 보는 좋은 시간이였습니다. 감사합니다.

      • 초록님의 프로필 이미지
        초록

        受講レビュー 6

        ∙

        平均評価 5.0

        5

        30% 受講後に作成

        정말 꼼꼼하게 알려주셔서 잘 따라서 배울 수 있었습니다. 웹표준사이트만들기, 반응형 웹 사이트 강의 다 듣고 지금 강의도 듣고 있는데요 너무 만족스럽습니다 감사합니다!!!

        • 갤럭시유저01님의 프로필 이미지
          갤럭시유저01

          受講レビュー 4

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          모르는거 알게되었습니다

          • Eun님의 프로필 이미지
            Eun

            受講レビュー 82

            ∙

            平均評価 5.0

            5

            9% 受講後に作成

            퍼블리싱에 가까운 내용이네요. 좋은 강의 감사합니다

            無料

            websの他の講座

            知識共有者の他の講座を見てみましょう！

            영화 예매 사이트 만들기: 디자인편講義サムネイル

            영화 예매 사이트 만들기: 디자인편

            webstoryboy

            웹 표준과 반응형 사이트 만들기 강의를 잘 따라왔다면 이제는 실전 연습 차례! 영화 예매 사이트 제작을 디자인편과 코딩편으로 나누어 학습합니다.

            初級

            初級

            Photoshop, 반응형 웹

            영화 예매 사이트 만들기: 디자인편講義サムネイル

            영화 예매 사이트 만들기: 디자인편

            webstoryboy

            [웹 퍼블리싱 실습] 반응형 사이트 만들기講義サムネイル

            [웹 퍼블리싱 실습] 반응형 사이트 만들기

            webstoryboy

            모바일, 태블릿, 웹 환경에 따라 자유자재로 스크린 사이즈를 변경하는 반응형 웹을 제작해봅시다.

            初級

            初級

            반응형 웹

            [웹 퍼블리싱 실습] 반응형 사이트 만들기講義サムネイル

            [웹 퍼블리싱 실습] 반응형 사이트 만들기

            webstoryboy

            [웹 퍼블리싱 실습] 웹 표준 사이트 만들기講義サムネイル

            [웹 퍼블리싱 실습] 웹 표준 사이트 만들기

            webstoryboy

            이왕 만들거면 제대로 만들자! 공식 웹 표준을 지키며 만드는 퍼블리싱 강의입니다🧑🏻‍💻

            入門

            入門

            HTML/CSS

            [웹 퍼블리싱 실습] 웹 표준 사이트 만들기講義サムネイル

            [웹 퍼블리싱 실습] 웹 표준 사이트 만들기

            webstoryboy

            似ている講座

            同じ分野の他の講座を見てみましょう！

            영화 예매 사이트 만들기: 디자인편講義サムネイル

            영화 예매 사이트 만들기: 디자인편

            webstoryboy

            웹 표준과 반응형 사이트 만들기 강의를 잘 따라왔다면 이제는 실전 연습 차례! 영화 예매 사이트 제작을 디자인편과 코딩편으로 나누어 학습합니다.

            初級

            初級

            Photoshop, 반응형 웹

            영화 예매 사이트 만들기: 디자인편講義サムネイル

            영화 예매 사이트 만들기: 디자인편

            webstoryboy

            부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기講義サムネイル

            부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기

            유용한IT학습

            디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의입니다.

            初級

            初級

            Bootstrap, 반응형 웹

            부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기講義サムネイル

            부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기

            유용한IT학습

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프講義サムネイル

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

            영코디 킴쌤

            디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

            初級

            初級

            Bootstrap, 반응형 웹, 웹 디자인

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프講義サムネイル

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

            영코디 킴쌤

            [웹 퍼블리싱 실습] 반응형 사이트 만들기講義サムネイル

            [웹 퍼블리싱 실습] 반응형 사이트 만들기

            webstoryboy

            모바일, 태블릿, 웹 환경에 따라 자유자재로 스크린 사이즈를 변경하는 반응형 웹을 제작해봅시다.

            初級

            初級

            반응형 웹

            [웹 퍼블리싱 실습] 반응형 사이트 만들기講義サムネイル

            [웹 퍼블리싱 실습] 반응형 사이트 만들기

            webstoryboy

            TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!講義サムネイル

            TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

            짐코딩

            한 강의로 끝내는 TailwindCSS 입문부터 실전까지! 두 개의 프로젝트와 함께 레이아웃 구성부터 반응형 디자인! 다크모드! 까지 완벽하게 배워보세요.

            初級

            初級

            HTML/CSS, TailwindCSS, JavaScript

            TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!講義サムネイル

            TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

            짐코딩

            UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오講義サムネイル

            UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오

            LIZ.B

            기획-디자인-구현 프로세스의 세번째 과정 - 반응형 웹 포트폴리오 템플릿 제작

            初級

            初級

            반응형 웹, JavaScript, jQuery

            UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오講義サムネイル

            UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오

            LIZ.B

            부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프講義サムネイル

            부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

            영코디 킴쌤

            부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

            初級

            初級

            Bootstrap, 반응형 웹, 웹 디자인

            부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프講義サムネイル

            부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

            영코디 킴쌤

            Tailwind CSS로 만드는 멋진 웹 UI 스타일링講義サムネイル

            Tailwind CSS로 만드는 멋진 웹 UI 스타일링

            코딩웍스(Coding Works)

            [Tailwind CSS로 만드는 멋진 웹 UI 스타일링] 강의는 현재 가장 핫한 프레임워크인 Tailwind CSS v3.4.1을 이론부터 실전 반응형 웹사이트까지 19시간 충실하게 다루고 있습니다. 수업 시간이 길다고 좋은 강의는 아닙니다. 하지만 해당 강의는 시간도 긴 좋은 강의라고 자부합니다. 특히, Tailwind CSS 모든 이론을 8시간 30분 동안 상세하게 다루기 때문에 CSS 이론이 부족한 사람에게 CSS 이론을 충실히 학습할 수 있습니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

            初級

            初級

            TailwindCSS, 반응형 웹, HTML/CSS

            Tailwind CSS로 만드는 멋진 웹 UI 스타일링講義サムネイル

            Tailwind CSS로 만드는 멋진 웹 UI 스타일링

            코딩웍스(Coding Works)

            기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스講義サムネイル

            기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

            볼드 UX

            기초부터 실무까지, 피그마 하나로 끝내는 UI 디자인 올인원 클래스! 오토레이아웃·컴포넌트 핵심 기능부터 반응형 디자인, 효율적 핸드오프, 협업까지 실무 스킬을 완벽 마스터합니다. 지금 시작해서 당신의 디자인 역량을 한 단계 업그레이드하세요!

            入門

            入門

            웹 디자인, 프로토타이핑, Figma

            기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스講義サムネイル

            기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

            볼드 UX