강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

[Introduction to Web Development] HTML and CSS developed by yourself with Carrot Market

This course is designed to help you learn HTML/CSS on your own, along with essential concepts.

(4.7) 3 reviews

46 learners

  • mjcoding
웹개발
웹퍼블리싱
html
css
HTML/CSS

What you will learn!

  • Make sure you have a solid grasp of HTML/CSS fundamentals

  • How to create a website

  • Building strength to develop and grow your own skills

  • Carrot Market website creation

The core of creating web pages, HTML and CSS!
Learn with lectures that take practical use into account 📖

Lecture Topics 📖

When you think of the div tag, what comes to mind? Does the concept of dividing layouts come to mind? This is all we learned in the basic course. However, this level of understanding isn't enough to fully utilize the div tag. The div tag is a block tag, so its block attribute is more important .

I wanted to create my own webpage. I took several HTML/CSS courses and practice-oriented classes and tried to create one myself, but I found myself unable to create the webpage I wanted. I wondered what the problem was.

And I realized that just knowing a little about HTML/CSS isn't enough to truly apply it . It's difficult and unnecessary to know all the features of HTML/CSS. At the very least, you need to create a solid blueprint before development to create and apply the pages you want.

I experienced these hardships and, frustrated, created this HTML/CSS course. While it might be a bit tedious at first compared to a course where you learn by doing, I think you'll find it even more enjoyable once you complete the course, as you'll be able to create your own. The goal is to empower you to utilize HTML/CSS independently and, by consulting the web development bible, MDN, to develop the ability to solve problems on your own .

3 Steps to Effectively Utilize HTML and CSS 📌

HTML/CSS
Summary of essential contents

Web page development
Essential Core Concepts

Carrot Market site
Clone Coding Practice


I recommend this to these people 🙋

Those considering getting started with web development

Anyone who wants to create a web page

Anyone who wants to learn HTML and CSS

Those who have studied HTML/CSS but have difficulty using it

Join us for this lecture! 😁

  • If you're learning React or JavaScript without any prior knowledge of HTML/CSS, you'll definitely come back to learn HTML/CSS. We'll teach you step-by-step so you can build and utilize your own websites .
  • If you're struggling to learn and use HTML/CSS, it's likely because you haven't mastered the basic concepts or haven't had enough practice to build websites. Even after completing the essential concepts and lectures, we'll help you stay active in your learning . Later, if you encounter any questions or issues, you'll be able to use developer tools and MDN documentation to help you identify them on your own.
  • While learning-by-doing courses are fun because they yield immediate results, they can be challenging to organize. In the highly flexible HTML/CSS field, understanding and practicing essential concepts is essential. Let's start with a solid grasp of the concepts.

Lecture Features ✨

#1.
Core Fundamentals
Solidly

This course isn't about learning by doing. It covers the essential concepts needed to create web pages, enabling you to directly utilize HTML and CSS. If you don't grasp the concepts in this course, it's like building a castle on sand.

#2.
All the process
Confirm with your eyes

When learning, you'll be learning visually in an actual browser. Ultimately, we'll need to create web pages to be displayed in a browser.

#3.
With practical training
finish

After learning the concepts, you'll gain practical experience by creating a real-world project, Carrot Market. This hands-on experience will help you get a feel for website creation and equip you to create your own websites using HTML and CSS even after the course.


What you'll learn 📚

1. From basic essential concepts

  • You will learn essential HTML/CSS concepts with Kind explanations based on MDN, which is used as the official documentation for web development worldwide.
  • Learn concepts that are easy to miss, but essential to know when developing (block level features, normal flow, etc.).
  • Since you learn based on MDN, you can open the documentation whenever you need it during actual development.

2. All learning is done with real eyes.

  • The goal of learning HTML/CSS is to create websites viewable in a web browser. During the course, you'll learn by observing actual behaviors in code and in a browser.
  • Sample code is also provided, so you can try out various exercises right on your computer.

3. With a practical project

  • After you've mastered all the essential concepts, you'll gain experience with practical projects.

  • As shown in the photo, we will distribute it so that you can create your own Carrot Market and generate a URL.


Expected Questions Q&A 💬

Q. Can I practice on a Mac?

You can practice on any operating system as long as you use the Chrome (or Safari, Firefox) browser.

Q. Can non-majors also take the course?

This is an introductory course in web development that even non-majors can take :)

Q. Do I need to install a separate program for the practice?

We'll be using your current internet browser and a coding tool called VSC. I'll walk you through installing VSC during the lecture.

Q. What can I do after taking this course?

You can create a website using HTML/CSS! You'll learn how to deploy it and even create a URL you can share with others.

Q. Does it include responsive design content?

I didn't include responsive design content. For those just starting out in web development or HTML/CSS beginners, I think responsive design might be a bit much. What you need now is to learn essential concepts, not just responsive design. As you practice through the lectures and use HTML/CSS, you'll naturally learn on your own as needed.


Introducing the Knowledge Sharer ✒️

History

  • Current Mozilla open source committer
  • Former Fintech startup developer
  • Former Global Professional Developer at the Ministry of Science and Technology
  • Former) Hyosung Billing Development Team (Settlement DB Development)

Things to note before taking the course 📢

Practice environment

  • Operating System and Version (OS) : Windows 10 (can be practiced on any operating system, macOS, or Linux)
  • Tools used: Firefox/Chrom browser (you can practice with Firefox, Chrom, and Safari), Visual Studio Code

Recommended for
these people

Who is this course right for?

  • For those who are new to coding

  • For those new to web development

  • People who have difficulty using HTML/CSS

Hello
This is

3,751

Learners

152

Reviews

33

Answers

4.7

Rating

3

Courses

안녕하세요. MJ코딩입니다😀

강의에 관심과 수강을 해주셔서 감사합니다 :)

강의 내용은 처음 접할 때는 가볍지만은 않은 내용이지만, 이해를 하실 수 있고 실제로 사용하실 수 있도록 준비를 하였습니다.

커리어와 실무에 도움이 되셨으면 하는 마음입니다.

프로그래밍 학습을 위한 유튜브 채널도 함께 운영을 하고 있습니다. (유튜브 링크 클릭)

필요한 내용을 보시고 참고 하여 도움이 되셨으면 좋겠습니다.

감사합니다^^

Curriculum

All

37 lectures ∙ (8hr 19min)

Published: 
Last updated: 

Reviews

All

3 reviews

4.7

3 reviews

  • 시골햄스터님의 프로필 이미지
    시골햄스터

    Reviews 10

    Average Rating 5.0

    5

    100% enrolled

    클론코딩 재밌어요

    • MJ코딩
      Instructor

      시골햄스터님 안녕하세요 :) 도움이 되신 것 같아 기쁜 마음이며 강의를 수강해주셔서 감사합니다 😀 강의 내용을 기반으로 다른 사이트도 "직접" 만들어 보시면서 더욱더 훌륭한 실력을 쌓으셨으면 좋겠습니다. 감사합니다 ^^

  • 임채성님의 프로필 이미지
    임채성

    Reviews 1

    Average Rating 5.0

    5

    62% enrolled

    • choisy030님의 프로필 이미지
      choisy030

      Reviews 1

      Average Rating 4.0

      4

      97% enrolled

      $22.00

      mjcoding's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!