강의

멘토링

로드맵

BEST
Programming

/

Front-end

Frontend lectures for backend developers, by backend developers - Basics

For job seekers who have created a portfolio as a backend developer but have nothing to show but an API, we will provide the experience of adding a frontend to create a web service.

(5.0) 20 reviews

255 learners

  • foo
백엔드개발자
frontend
javascript
html
css
HTML/CSS
JavaScript
Bootstrap

Reviews from Early Learners

What you will learn!

  • Attribute Frontend Development for Backend Developers

  • Basic concepts of HTML, CSS, and JavaScript

FE that backend developers need to know,
We'll quickly tell you only the 'real key points'!

Attention beginner backend developers!
Are you having any of these concerns?

🤔

I'm a backend developer, but do I really need to know frontend ? I have absolutely no basic knowledge of the subject...

😥

The API is well-made, but I don't know how to write the front-end code that uses the API .

🤨

I'm preparing for a job as a backend developer, and I think I'll need to create a fully functional web service .

So, in this lecture!

  • ✅ The course is structured so that backend developers can quickly get started with frontend development.
  • ✅ You will learn the front-end so that you can quickly implement only the necessary level of functionality.

Even if you only know how to write simple FE code,
It will help you with your job search and career!

Having mentored and observed many people seeking employment as backend developers for a long time, I've noticed that many feel the frontend is too difficult to get into or consider it a low priority. However, there's a huge difference between building an API service as a portfolio and building a single "web service" that combines backend and frontend .

1️⃣

I can create a complete web service by writing FE code that uses the API server I created.

2️⃣

Client-centric API design enables better backend development .

3️⃣

You will be able to collaborate better and more closely with front-end developers.

4️⃣

After joining the company, you can develop backend/frontend simultaneously and at high speed when developing in-house systems.

I planned this lecture with the idea that by making the front-end more accessible, those preparing for employment or a career change as a back-end developer will be able to create more plausible and attractive portfolios .

We'll give you the experience of creating a web service by adding front-end capabilities to your API development skills!


Only in this lecture
Take a look at the features.

01
Motivation is also OK

Before we begin the lecture, let me explain why it is good for backend developers to know frontend .

02
Just the key points, concisely

We've covered only the core content required for front-end development, and boldly removed unnecessary content .

03
Practical perspective content

I've incorporated into the lecture points to keep in mind when developing front-ends, based on my experience (encoding settings, etc.).

04
Perfect for beginners

The ratio of theory to practice is approximately 4:6. This course is designed for beginners and novice developers who have never worked with front-end development, or who have tried it but are unable to create the UI they envisioned.

Would you like to learn more?

I've noticed that many people preparing for backend jobs wonder, "Do backend developers really need to know frontend?" However, I believe that having some frontend knowledge actually helps backend developers.

So, for those of you who are thinking like this, let me explain why backend developers need to know frontend .

When backend developers build frontends, they often have to decide whether to use a template engine like Thymeleaf or another method. Here, we'll explain the differences between each approach and our recommended method .

Do you think developer tools are the exclusive domain of front-end developers? We'll explain how to use developer tools that are essential for both front-end and back-end developers.

We'll cover the basics of HTML, essential for UI construction, and frequently used tags . While you won't learn every tag, once you understand the most common tags, you'll be able to implement most UIs yourself through simple searches.

It is structured to help you quickly learn JavaScript grammar based on the differences between JavaScript and Java grammar.

This course covers the essential CSS fundamentals for creating attractive UIs. It also covers frequently used selector syntax, essential for controlling HTML elements with CSS and JavaScript.

I'll walk you through the process of figuring out what UI you need, how to find and apply that UI, testing the CSS properties found through developer tools, and then reflecting them in your source code. By following this process, you'll be able to find and apply even UI properties you've never tried before.

Building a decent UI from scratch can be challenging, right? Let's explore how to customize your UI using Bootstrap, a widely used front-end framework.

Front-end development has become easier with the introduction of ChatGPT! This is something I've experienced in my own practice, so even those new to front-end development will find UI development easier with ChatGPT .

Of course, you need a basic understanding of the frontend to utilize ChatGPT. This course will teach you the basics. Then, with that foundational knowledge, you can use ChatGPT to quickly and easily write frontend code.

Foo(푸) The person who created this lecture

In recent years, I've noticed that those preparing for backend developer jobs through bootcamps and other programs seem to be focusing solely on backend development, neglecting frontend development. Of course, since they're aiming for a backend developer position, the backend is naturally more important.

However, I believe even backend developers should be able to do at least a minimal amount of frontend development. As I discuss in my lectures, there are many advantages to having a backend developer who also knows frontend.

Therefore, through this course, I hope to enable backend developers who are still completely new to frontend development to quickly learn the basic frontend concepts necessary for backend development. I hope this course will help backend developers acquire basic frontend development skills that will be helpful in their employment and work. 😄


Q&A 💬

Q. Why should backend developers learn frontend?

While this may be subjective, there are several reasons. First, not all backend developers work with frontend developers. Second, developing a UI allows you to understand how users interact with your service, which allows you to create better APIs. Third, for job seekers, frontend proficiency is advantageous both for portfolio preparation and for interviews. Fourth, only those who know frontend can independently create a web service. Fifth, observing data exchanged between the backend and frontend, header behavior, and other aspects will help you better understand HTTP.

We've previewed the "Why Backend Developers Need to Know Frontend" course at the beginning of the curriculum. Please refer to the content for a more detailed explanation.

Q. To what extent do you cover the front-end?

As outlined in the curriculum, you'll quickly and easily learn only the essentials of HTML, JavaScript, and CSS, and then develop a UI for a simple API project. While the course covers the necessary development skills, it doesn't cover a wide range of topics. However, it does cover the core principles, so you'll be able to learn more on your own and create a UI for your own API project.

Q. What level of learner is suitable for this course?

Experience building a backend API server is recommended. While this tutorial focuses on Java, experience developing an API server using JSON will also be helpful when learning frontend development.

📢 Please check before taking the class

  • The training will be conducted based on Windows 10, Intellij Community 2023.2, and Google Chrome environments.
  • Example code can be found on GitHub .
  • This course is ideal for those who have experience creating backend API servers.
  • If you have any questions while taking the course, please leave a question. I'll update the information if necessary.
  • Some of the examples and content used in this lecture are included in my introductory book on backend development, which is scheduled for publication in the second half of 2023. This lecture expands on the material in the book.

Recommended for
these people

Who is this course right for?

  • Anyone who wants to add a frontend to the API server I created and make it into a single service

  • People who have no knowledge of front-end development such as HTML, CSS, and JavaScript.

Need to know before starting?

  • Experience developing an API server, even if it is simple

Hello
This is

5,388

Learners

241

Reviews

108

Answers

4.9

Rating

9

Courses

안녕하세요.

멘토링을 하면서 주니어 개발자들이 어려워 하는 개념들에 대해 어떻게 하면 쉽게 전달할 수 있을지에 대해서 많은 고민을 하고 있는 푸(Foo)라고 합니다.

잘 부탁 드리겠습니다.


이력

  • 2019. 08 ~ 현재 : 카카오 자바 백엔드 개발자

  • 2021. 08 ~ 현재 : programmers 백엔드 데브코스 멘토

  • 2021. 12 ~ 현재 : F-Lab 자바 백엔드 멘토

 

  • 이것이 취업을 위한 백엔드 개발이다 with 자바(링크)

 

기타 이력 및 타 플랫폼 강의들은 아래 GitHub 링크에서 확인할 수 있습니다.

GitHub - https://github.com/lleellee0

Curriculum

All

28 lectures ∙ (5hr 19min)

Published: 
Last updated: 

Reviews

All

20 reviews

5.0

20 reviews

  • 동해물과백두산이마르고닳도록님의 프로필 이미지
    동해물과백두산이마르고닳도록

    Reviews 503

    Average Rating 5.0

    5

    32% enrolled

    프론트엔드 지식 외에도, 백엔드 개발자가 어떤 방식으로 화면 개발을 해나가면 좋을지에 대해 의견을 말씀해주셔서 좋았습니다. 특히, 화면을 직접 만들어 본 경험이 있는 백엔드 개발자일수록 더 좋은 API 스펙을 설계할 수 있다는 의견에 많이 공감 되었습니다. 실습 역시 VSCode 가 아닌 IntelliJ 를 이용하는 등 세심하게 배려해주신 부분들 덕분에 무난하게 따라가며 배울 수 있었습니다. 이전에도 Foo 님께 여러모로 도움 받았는데, 이번에도 좋은 내용으로 강의를 준비해주셔서 감사합니다. 감사히 잘 먹겠습니다 :D

    • 이준형(Foo)
      Instructor

      ㅎㅎㅎ haero77님 강의에 대한 디테일한 수강평 감사합니다! 앞으로도 좋은 강의로 보답하겠습니다. (_ _)

  • 이승욱님의 프로필 이미지
    이승욱

    Reviews 34

    Average Rating 4.8

    4

    96% enrolled

    잘들었습니다 감사합니다!

    • 이준형(Foo)
      Instructor

      이승욱님 수강평 남겨주셔서 감사합니다! :)

  • 따뜻한 당나귀님의 프로필 이미지
    따뜻한 당나귀

    Reviews 12

    Average Rating 5.0

    5

    71% enrolled

    안녕하세요. 강의 너무 잘 듣고 있습니다. 프론트엔드에서는 지식이 전무해서 곤란했는데 덕분에 많은 도움이 되었습니다. 다름이 아니라 이번에 강의를 통해서 api 를 활용한 간단한 프로젝트를 만들어 보았는데 뭔가 하면 할수록 java script 의 api(json)를 능숙히 다루고 싶어지더라구요. 그래서 혹시 어떤 기술을 배우면 좋을지 한번 여쭈어보고 싶습니다. 감사합니다.

    • 이준형(Foo)
      Instructor

      따뜻한 당나귀님 수강평 남겨주셔서 감사합니다. 강의가 도움이 된 것 같아서 다행이네요. :) 질문주신 내용은 결국 프론트엔드를 어떤걸로 해보면 좋을지에 대한 질문인 것 같은데요, 여러가지 프론트엔드 프레임워크가 있지만 가장 무난한 선택은 리액트를 하는걸 추천드립니다. 레퍼런스도 찾기 쉽고 필요하면 하이브리드 앱으로 만들기도 쉬워서요~ 저도 회사에서 내부 운영툴은 만들때 UI로 리액트를 주로 사용하고 있습니다. 궁금하신 내용에 대한 답변이 됐을까요? 또 궁금한 내용 있으면 질문 남겨주세요. 감사합니다.

  • uugold님의 프로필 이미지
    uugold

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    • 이준형(Foo)
      Instructor

      uugold 님 수강평 남겨주셔서 감사합니다. (_ _)

  • youngji jang님의 프로필 이미지
    youngji jang

    Reviews 2

    Average Rating 5.0

    5

    32% enrolled

    혼자서 하나의 서비스를 구축해보고싶어서 간단한 프론트 강의 찾다가 수강하게 되었습니다. 군더더기 없고 깔끔합니다. 백엔드 개발자로서 헷갈렸던 프론트 개념도 집고 넘어갈 수 있어서 좋았어요. 추천합니다.

    • 이준형(Foo)
      Instructor

      youngji jang님 수강해주셔서 감사합니다 ㅎㅎ 프론트엔드가 포함된 서비스 잘 만들어보셨으면 좋겠네요!

Limited time deal ends in 5 days

$19,800.00

25%

$20.90

foo's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!