Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Web Development

Properly Selling HTML CSS - by Yalco

A friendly and easy course that even coding beginners can follow! The ultimate course helping current developers become HTML & CSS experts!

(4.9) 119 reviews

2,826 learners

  • yalco
HTML/CSS

Reviews from Early Learners

What you will learn!

  • HTML and CSS: Basics to Advanced

  • Easy HTML Coding with Emmet

  • Web standards compliant publishing

  • Position, various layouts, selectors, etc., are difficult CSS concepts

  • Complex concepts such as inheritance and resetting, vendor prefixes, and focus-visible

  • Using Advanced Features: Variables, Web Fonts, Filters, Animations, etc.

  • Responsive Mobile Adaptation

  • Accessibility - Creating websites for diverse users

  • Proper site structure using semantic tags and BEM

  • Practical Knowledge Through the Final Project

⭐️ Do you have a university email account?
🎓 Go get the half-price coupon for college students (click) 👉


Learn these things! 📚

  • HTML and CSS From the basics for complete beginners to advanced usage and practical tips for working developers, and even difficult-to-understand theories, you can easily learn them.
  • Beyond just visual presentation, you'll learn how to create a "good" website that's considerate of a wider audience and great for collaboration with other developers.

Why I Created a 'Properly Selling' Course ⛏️

I wanted to create a series that would allow beginners to get started with their first coding experience.
As a first step, I chose HTML & CSS as my first topic because it is relatively easy to learn even without computer science knowledge .

On the other hand, HTML & CSS have a low entry barrier, but developers who study them in depth and use them 'properly' are not common. So, I wanted to make a course that can be of great help to developers and publishers in the field by delving into difficult concepts and detailed properties.

This course was created after a long period of research and preparation with the goal of creating a truly wonderful and informative course.


Who is teaching this course?
Would you like to hear it?
👨‍💻

For those new to programming

Web designer who wants to publish

Developers who want to be good at HTML/CSS

  • 🍼 People who are starting to learn coding
  • 🎨 Web designers who want to do their own publishing
  • 🎓 Developers who want to get better at HTML and CSS
  • ⛏️ Developers who want to study the in-depth theories of HTML and CSS
  • 💖 Developers who want to develop web development that is standards-compliant and accessible


Even in a book
It's out! 📙

image

I have pressed down on the lecture content so that you can check it at hand.
(ℹ️ This book covers only the basics of JavaScript, and only lightly.)

🛒 Go buy the book


Only in Yalko's lecture
What's special ✨

Quick and easy
Video lectures 🚀

We save your precious time with refreshing and simple lectures. (Please understand that some students may feel that the lectures are fast. Please listen to the free lectures and then take the course! )

Too much explanation
Detailed lecture 🎙️

We have prepared a detailed explanation of the functions of each tag and attribute, as well as their various uses, how to use them in accordance with web standards, and even theoretical principles, so that you can learn as much as possible.

Through the webpage
Convenient Practice 🖥️

For each lesson, the main points of the video and the copy-and-paste practice commands and codes are organized on the webpage , so you can follow and apply them to easily proceed with the practice.

Basic contents
Free to public 😎

To ensure that students can study without burden, the first 5 hours of content are available for free in advance.


Who is Yalko? 😀

I am a YouTuber who broadcasts the YouTube channel Yalpakhan Coding Dictionary and an author who writes IT books. Based on my experience as a full-stack developer, I create content that explains difficult programming concepts with analogies, easy examples, and sometimes animations so that beginners can easily understand them.

🎬 YouTube Shallow Coding Dictionary Channel (Click!)
📕 Go see Yalko's books (click!)


Specially made for lectures
⭐️ Playground ⭐️

  • The course webpage contains playgrounds organized by topic to make learning and reviewing CSS easier.

  • By adjusting the values of each property, you can directly see how they are reflected in elements on the web.

  • You can learn various examples of utilizing the CSS property by checking what types of values can be used.

If you take this lecture
What will change? 💪

  • Beginners and non-majors will lose their fear of coding.
  • You will gain the confidence to publish to any website.
  • You will gain a clear understanding of concepts you were only vaguely familiar with and functions you were using without knowing much about.
  • You will learn how to build a website 'properly', 'kindly' and 'thoughtfully'.

What content
Will I learn? 📚

Section 1: HTML Basics HTML tags and how to use them appropriately

  • Various web elements such as text content, lists, images, tables, links, and inputs.
  • Coding in compliance with web standards and recommendations
  • Fast coding with Emmet

Section 2: CSS Basics

  • Various application methods and basic selectors of CSS
  • Styling of various elements such as text elements, lists, colors, backgrounds, etc.
  • Core CSS concepts such as inline/block, box model, and position.
  • Web page structure using flex layout

Section 3: HTML Advanced

  • Page settings such as meta information, viewport, open graph, etc. in the header
  • Organize your pages systematically with semantic tags and BEM
  • Providing accessibility that accommodates diverse users
  • How to use SVG, video, and other media

Section 4: CSS in Depth

  • Practical concepts such as imports, variables, resetting, vendor prefixes, etc.
  • Layout using floating and grid
  • Transitions, animations, filters and many other CSS features
  • Create a responsive website
  • How to use external elements such as web fonts, icons, and frameworks

✅ Section 5: Final Project

  • We will practice creating a responsive webpage like the one above, using only HTML and CSS, without using JavaScript.

Frequently Asked Questions
Check it out 💬

Q. I'm new to programming. Can I still take the class?

A. HTML and CSS are the most suitable topics for beginners to start with. We will explain in detail everything from setting up the initial environment to using coding tools, and use easy-to-understand terms that allow for hands-on practice, so that even those who are new to coding can follow along.

Q. How helpful will this be if I already have some experience with web development?

A. Even the basic HTML tags and CSS properties that web developers often think they know and use are often studied in depth, and you will realize that there were many things you didn't know. You will be able to use the elements and functions that you only knew and used moderately, and you will be able to learn useful knowledge to create a beautiful site not only in appearance but also in terms of internal structure.

Q. The lectures are fast, so won’t it be difficult?

A. The video progresses quickly, but each lecture has a linked lecture page so that you can easily review and practice the video content. By utilizing examples and playgrounds throughout the page, you will be able to learn in a way that maximizes your time efficiency!

Recommended for
these people

Who is this course right for?

  • A person learning coding for the first time

  • Web designer wanting to handle publishing directly

  • Developer aiming to improve HTML/CSS

  • Developer who wants to learn the deep theory of HTML and CSS

  • Web developer aspiring to standards-compliant, highly accessible development

Hello
This is

29,708

Learners

1,513

Reviews

84

Answers

4.9

Rating

17

Courses

유튜브 채널 얄팍한 코딩사전을 방송하는 유튜버이자, IT서적들을 집필하는 작가입니다.  풀스택 개발자로 일해 온 경험을 살려, 어려운 프로그래밍 개념들을 초보자들이 이해하기 쉽도록 비유와 쉬운 예제, 때로는 애니메이션으로 설명하는 컨텐츠들을 만들고 있습니다.

🎬   YouTube 얄팍한 코딩사전 채널 (클릭!)
📕  얄코의 책들 보러가기 (클릭!)

Curriculum

All

54 lectures ∙ (11hr 16min)

Published: 
Last updated: 

Reviews

All

119 reviews

4.9

119 reviews

  • Hansh님의 프로필 이미지
    Hansh

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    Coursera에서 Johns Hopkins html/css/js 강의 듣다 일루 넘어왔다. 존스홉킨스가 명문대임에도 불구하고 형편없는 강의였다. 하지만 이 강의는 달랐다. 1. 첫번째로 강의를 평가할때 내용의 총 시간을 보는데, 시간이 짧은 강의들은 깊게 파고들지 않을 수 있어서 안본다. 하지만 이 강의는 12시간으로, html/css만 커버하는데 꽤 긴 시간이라 믿음이 갔다. 강연자 또한 빠르게 강의를 진행해서, 사실상 한 30시간을 압축시킨거라고 볼 수 있다. 2. 두번째는 강연자의 내용 전달력인데, 이 강의는 내용을 굉장히 효율적이고 깔끔한 방법으로 전달한다고 느꼈다. 강의의 흐름도 마음에 들었다. 그리고 핵심적인 부분은 물론, 알아만 둬도 괜찮은 부분까지 다 커버하고. 수월하게 이해를 시키기 위해 많은 노력을 한 것처럼 보인다. 3. 세번째는 여기서만 들을 수 있는 코딩 환경 셋팅 방법이랑, 여러가지 팁들, 그리고 혼자 어떻게 더 나아가서 공부 할 수 있는지 알려주는것이 좋았다. Coursera, Udemy 에서 유명하기만 하고 형편 없는 강의들만 듣다가, 간만에 실속있는 강의를 봐서 좋았다. 유명세와 강의력은 상관관계가 뚜렸하지 않다는걸 깨닳게 해줬다.

    • 얄팍한 코딩사전
      Instructor

      열심히 준비한 만큼 큰 보람 느끼게 해주셔서 감사합니다 ㅠㅠ 사실 똑똑한 교수님들일수록 본인들이 너무 탁월하시고 잘 아시기 때문에, 입문자분들이 듣기에는 오히려 그분들의 강의가 전달력이 높지 않은 경우가 많더군요. 부족한 머리를 가진 사람으로서, 어떻게 강의하면 남들이 잘 이해할까 많은 고민을 하면서 만들었는데 그만큼의 도움이 되어드렸다니 정말 기쁩니다. 앞으로도 더 좋은 강의들로 보답하겠습니다. 수강해주셔서 감사합니다!!

  • 하정원님의 프로필 이미지
    하정원

    Reviews 1

    Average Rating 5.0

    5

    31% enrolled

    자세히 가르쳐주시고 하나하나 훑어주셔서 좋았어요. 모든 공부가 그렇겠지만 자기만의 방법을 찾고 공부하니까 훨씬 집중이 잘되더라구요. 저 같은 경우에는 소스코드를 먼저 스스로 해석해보고 강의를 들었는데 이 경우에 내가 해석한게 맞는지 또는 모르는 문법은 어떤 것을 의미하는지 생각하고 강의에 임하다보니까 더 머리 속에 남았어요!

    • HDK님의 프로필 이미지
      HDK

      Reviews 6

      Average Rating 5.0

      5

      83% enrolled

      유튜브 구독자로서 Git 강의를 완강하고 html/css 강의도 이어서 구매하였습니다. 얄코님 강의의 강점은 깔끔한 커리큘럼과 전달력이 좋으셔서 내용이 귀에 쏙쏙 박힌다는 점입니다. 강의를 듣는 것이지만 마치 이야기를 듣는 것처럼 저도 모르게 빠져들어 듣게 됩니다. 이렇게 강의를 따라가다 보면 어느 순간 내용을 이해하고 습득한 자신을 볼 수 있게 됩니다. 돈이 전혀 아깝지 않은 강의라고 생각됩니다. 고민 중이시라면 구매하는 것을 강력 추천드립니다.

      • sky-j님의 프로필 이미지
        sky-j

        Reviews 5

        Average Rating 5.0

        5

        100% enrolled

        백엔드 쪽만 하다가 프론트쪽 디자인 하는데 너무 막히는 부분이 많아서 구매해서 듣게 되었구요. 처음 강의를 다 봤을땐 알쏭 달쏭 알듯 모를듯 상태에서 디자인 작업 하다가 문득 강의에서 들은 것 같은데 정확히 모르고 쓰고 있네? 할때마다 그부분 다시 찾아가서 다시 듣고 하니까 처음 들을때랑 다르게 다시 명확하게 이해하고 쓰게 되었어요. 좀 더 심화된 내용이 있다면 결제해서 들을 것 같습니다. (23-02-23) 지금 개발 하면서 뭐가 안 됐을 때 문제점 찾아서 원하는데로 명령어 넣으면 딱 바뀌는 모습이 너무 즐겁습니다. / TMI일수 있지만 저는 처음 강의 들을때 속도도 너무 빠르다고 생각했고 홈페이지에서 조작하면서 알려주시는 게 보면서 이해는 되도 남는 게 없을 것 같았는데 2회독 할 때 진가를 발휘합니다. 다른 분들도 꼭 1회독 하시고 디자인 해보다가 2회독 때는 정독 하시지 말고 안 되는 부분 카테고리 찾아가서 다시 보면 진짜 .... 진국 아닌 찐국입니다. // 시간이 조금 나면 깃허브, 자바스크립트 강좌 들어봐야겠어요

        • 실무에 도움이 되어드려 기쁩니다 ㅠㅠ 수강해주셔서 감사합니다!!!

      • with_all님의 프로필 이미지
        with_all

        Reviews 11

        Average Rating 5.0

        5

        100% enrolled

        결론부터 말씀드려서 아주 훌륭한 강의 입니다. 배우는 내용이 많아서 다시 복습을 해봐야 할 것 같습니다. 다음 강의들도 기대됩니다!

        $34.10

        yalco's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!