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

/

Front-end

First Steps in Website Development for Non-Majors #HTML, #CSS

To become a developer who creates websites, there are many skills to learn. Among those many skills, I will explain HTML and CSS, which are the basics of website creation and the first things you should learn. You will learn how to write HTML and CSS, and at the end, you will do a project to create a website similar to the actual Amazon website. And you can create a URL of the project you made and distribute it.

2 learners are taking this course

  • banana7468
웹개발
웹사이트개발
html
CSS
HTML/CSS
github-desktop

What you will learn!

  • HTML Theory for Creating Web Page Elements

  • CSS theory for designing elements of a webpage

  • Coding project using HTML/CSS

  • Managing code created on the GitHub website with GitHub Desktop

  • Making your website an address like naver.com

First Steps in Website Development for Non-Majors ( HTML , CSS )

I want to become a developer who creates websites... but I don't know what to study first??

1. The first step in website development is HTML / CSS !

To build a home, you need to decide what elements should go into the home and how it should be designed .

The same goes for websites.

To build a house called a website, you need to use HTML to decide what elements will be included in the website.

Design that element with CSS .

Decide what elements go in HTML and design those elements with CSS.

Since HTML and CSS are the most basic languages for creating websites, they are the first computer languages that website developers must learn .


So if you look at the Stack Overflow survey of developers in 2024, you'll see that HTML / CSS is the second most popular computer language, because it's the most basic language to create a website!!

2. This course is for those who have no web development experience.

I recommend this to these people!

I'm not a major, and I've never coded before.

I'm a major, but this is my first time developing a website.

This HTML / CSS lecture is for those who have no experience in website development .

So, regardless of your major or coding experience, I recommend this course to anyone who is just starting out with website development.

No player knowledge required!!

3. Therefore, the lecture has the following characteristics :

- Easy to understand lectures

I tried to explain it as simply as possible . This lecture is for those who have no knowledge of website development , so I made it easy enough for elementary school students to understand .

- A lot of repetition

HTML / CSS is an easy language compared to other computer languages. However, for those who are new to coding, it may feel unfamiliar and there is a lot to memorize.

So, we repeat the same content many times through a lot of repetition during the lecture + review process after the lecture .

- Lecture summary provided

For those who are having trouble concentrating on the lecture while taking notes or are stressed out because of the summary , we provide a summary of the lecture !! (pdf file)

For those of you who have learned HTML / CSS before, you can skip this part if you have 100% knowledge of the content after reading the lecture summary!!

4. After attending the lecture, you can create results like this.

After completing the HTML theory lecture and CSS theory lecture, there is a clone coding project !!

This is a project to create a web page similar to the Amazon homepage !!

Also , create a URL address for the completed web page so that others can access it.

( The examples below have lower quality than the actual lecture)

Login page

  • ID and password input space

  • Submit Information Button

  • State change animation

Main Homepage

  • Page layout

  • State change animation, auto-run animation


Detailed product page

  • Page layout

  • State change animation, auto-run animation

Responsive web pages that change depending on the screen size

  • Change the layout of a web page depending on the screen size

  • Pages that also apply to mobile and tablets

5. Lecture Learning Contents

Learn how to create web pages , manage code , and deploy websites based on the basic theories of HTML / CSS.

The goal is also to develop the ability to search for and utilize additional information about HTML / CSS without the help of others .

Section 2: HTML Theory (Free!!)

Learn the basics of HTML, which determines what elements go on a web page.

  • HTML grammar (tags, attributes)

  • HTML Basic Structure

Section 3: CSS theory

Learn the basics of CSS , which is used to design elements defined in HTML .

  • CSS syntax (selectors, properties)

  • Layout configuration (box model, flex, position, media query)

Section 4: CSS In-depth theory

CSS is much more than HTML . Learn about additional commonly used syntax and how to add animations .

  • Additional CSS syntax (selectors, properties)

  • Creating animations (transition, transform, animation)

Section 5: Managing the code you created , tracking changes

When writing long code, I get confused about the process I went through to write the code. Also, it becomes difficult to collaborate on the code I wrote. To do this, I will learn how to use github to create a code storage space, manage the code , and track changes .

  • github , github-desktop , commit

Section 6: Amazon Clone Coding

Let's use everything we've learned so far to create a webpage similar to the overseas shopping site Amazon .

  • How to organize files , code writing conventions , additional syntax

Section 7: Deploying the Website , Creating an Address

With the help of github, you can create a completed project and distribute it to others by creating a webpage address like naver.com or google.com .

  • github hosting , deploy

Section 8: Creating a Responsive Website

(I originally planned to make it only up to Section 7... but I wanted to make the lecture more complete) Let's make our webpage work even on small screens like mobile screens.

  • Hide elements on small screens , change web page layout

6. Notes before taking the class

Learning Materials

  • Lecture summaries are uploaded for lectures 1 and 22 respectively.


Player Knowledge and Notes

  • Code written in a real project is provided.

  • The video has its own subtitles. Please turn off the subtitles on the Inflearn site.

  • I recommend that you read the lecture summary once before taking the lecture.

  • The copyright of the lecture and summary belongs to "Banana Coder"

Recommended for
these people

Who is this course right for?

  • For those who are starting website development for the first time

  • For those who don't know what to study first when developing a website

  • For those who are new to computer languages.

Hello
This is

Curriculum

All

77 lectures ∙ (12hr 25min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

$42.90

Similar courses

Explore other courses in the same field!