강의

멘토링

로드맵

Programming

/

Front-end

James Coding Full Stack Development Introduction 5 Weeks

James Coding Course is a full-stack development introductory course that can help you learn the basics of web development before starting the full-stack intensive curriculum. By completing the 5-week James Coding full-stack development introductory course, you can solidify your foundation in programming and JavaScript.

(5.0) 15 reviews

72 learners

  • jamescoding
css
자바스크립트
html
프론트엔드
front-end
HTML/CSS
JavaScript
Git
Node.js

Reviews from Early Learners

What you will learn!

  • Learn HTML, CSS, and JavaScript, the foundations of web development.

  • Learn the latest JavaScript grammar and core concepts

  • Improving practical skills through various exercises and assignments

  • Create your own web application using DOM

  • Improving algorithmic skills through coding tests

If you want to grow into a developer with solid fundamentals!


James Coding's 5-Week Full-Stack Development Course
You will learn things like this:

This practical project builds the foundation of web development by building an MP3 player using only HTML/CSS and then enhancing it with JavaScript. Over the course of five weeks, you'll master the fundamentals of JavaScript through lectures and assignments, acquiring and establishing the fundamental framework for creating web pages.


Improve your algorithmic skills with coding tests 🔥

With coding test problems created by James Coding . ✍🏻

  • Variables, Functions, and Data Types Coding Test (8 Questions)
    • 01. Variable declaration, 02. Assignment, 03. Expression,
    • 04. Function, 05. Function definition, 06. Function call,
    • 07. Template literal, 08. Operations are of the same type
  • Conditional Statement Coding Test (16 questions)
    • 01. isAdult, 02. equalsZero, 03. isBiggerThan, 04.isOddNumber,
    • 05.isEvenAndAdult, 06. simpleCalculator, 07. fizzBuzz,
    • 08. simpleDaysInMonth, 09. leftPerson, 10. oddEvenBiggerThan,
    • 11. makeGrade, 12. before15minutes, 13. isTriangle,
    • 14. isTruthy, 15. andOperator, 16. orOperator
  • String Coding Test (16 questions)
    • 01. makeFullName, 02. ageVerification, 03. lengthOfWord,
    • 04. averageLengthOfTheWords, 05. averageLengthOfTheWords2,
    • 06. shortestString, 07. isEvenLength, 08. validation,
    • 09. cutString1, 10. cutString2, 11. compareAlphabet, 12. compareNumbers,
    • 13. compareNumbers2, 14. makeTimeString,
    • 15. compareNumbers3, 16. unconnectedTime
  • Loop Coding Test (18 questions)
    • 01. findZero, 02. multiply, 03. factorial, 04. sumMtoN, 05. power, 06. echoString,
    • 07. numberString, 08. multipleString, 09. maxNumber, 10. factorString, 11. findSubString
    • 12. isPrime, 13. primeString, 14. numberStringExceptArgs, 15. findRemain,
    • 16. makeTriangle, 17. makeTriangle2, 18. makeRhombus
  • Array Coding Test (20 questions)
    • 01. checkType, 02. getFirstElement, 03. getLastElement, 04. specificElement,
    • 05. addFirstElement, 06. addLastElement, 07. deleteFirstElement,
    • 08. deleteLastElement, 09. doubleArray, 10. splitString, 11. splitCharacter,
    • 12. addComma, 13. longestString, 14. multipleFilter,
    • 15. cutArray1, 16. cutArray2, 17. cutArray3, 18. mergeArray,
    • 19. getStringFromDoubleArray, 20. fibonacci
  • Object Coding Test (19 questions)
    • 01. getValueByKey, 02. addKeyValuePair, 03. deleteProperty,
    • 04. objKeyArray, 05. objEntryArray, 06. objAssign, 07. deleteFalsyProperty,
    • 08. deleteEvenProperty, 09. deletePrimitiveProperty, 10. findAdult,
    • 11. isProperty, 12. accumulateProperty, 13. theNumberOfKeys,
    • 14. objectStringArray, 15. relativePropertyArray, 16. inheritance,
    • 17. propertyFilter, 18. countCharacter, 19. frequentCharacter
  • Higher-Order Function Coding Test (20 Questions)
    • 01. functionReturningFunction, 02. functionInputtedFunction,
    • 03. applyNTimes, 04. compositeFunction1, 05. compositeFunction2,
    • 06. compositeFunction3, 07. conditionalCallback, 08. evenFilter,
    • 09. lessThan100Filter, 10. deleteElement, 11. getDoubleArray,
    • 12. getFullNameArray, 13. getAdultMembers, 14. getArraySum,
    • 15. getArrayMul, 16. getAverage, 17. entriesToObject,
    • 18. ascendingSort, 19. descendingSort, 20. sortByGrade
  • Stack/Queue Coding Test (5 questions)
    • 01. numberOfWalls, 02. bracket, 03. historyStack,
    • 04. josephusProblem, 05. crossingBridge
  • Recursive Coding Test (18 questions)
    • 01. factorial, 02. sumMToN, 03. remain, 04. fibonacci,
    • 05. sumArray, 06. cutArrayHead, 07. cutArrayTail,
    • 08. reverseArray, 09. findString, 10. matryoshka,
    • 11. flatArray, 12. maxNumber, 13. sequenceSumArray,
    • 14. hanoi, 15. makeSubSet, 16. duplicatePermutation,
    • 17. permutation, 18. combination

This is James Coding's full-stack development foundation reinforcement program . 👨🏻‍🎓

Coding learning curriculum. How and what should I study to complete it ?
We understand the challenges you face when learning to code.
Progress too quickly, content that suddenly becomes extremely difficult, and progress that passes without being organized.
In this way, difficulties gradually pile up and at one point, you give up.

James Coding's full-stack introductory course focuses on 'completing the basics' and 'completing the course.'
Properly in an online environment Try to 'finish' it.
Anyone who wants to learn and study coding properly, whether they are a non-major or a beginner with no background, is welcome. 🙌

Detailed feedback from actual students after five weeks of training (Lee Sang-won)

It was incredibly effective to be able to review and plan my schedule for the day, starting from 6 a.m. in the morning. By checking my schedule, setting goals, and reminding myself of my schedule, I was able to clearly organize what I needed to do that day, which helped me manage my time more efficiently.

Additionally, the habit of setting daily goals has been a huge help in improving self-management and a sense of accomplishment. Setting goals and striving to achieve them has encouraged me to persevere and not give up. By checking my daily schedule and reminding myself of my goals, I've been able to understand my current status, which has helped me identify areas where I need to further study and where I need to improve.

Additionally, keeping a daily journal was a great way to track my learning progress and record how far I've come in achieving my goals. By keeping a daily journal, I can see how much I've accomplished on assignments, how I've overcome challenges, and how I've improved. This motivates me to work harder the next day. It also helps me see myself growing by continuously striving without giving up.

such schedule Confirm , target Settings , Finishing journal Writing Habits are Simply One day Manage That Beyond more big Success It is On the day Help line It is . In everyday life Time efficiently Take advantage of it Goal Achieve For Make a plan Sewoon It is successful Life Leading core It's a principle . Continuously Schedule Check it out Goal Reminding and concluding Diary Writing Habits Keep it up . Through more ineffective hour Management and A sense of accomplishment Experience number There will be It is .

Code assignments utilizing TDD provided for each section 📌📈

TDD stands for Test-Driven Development and is one of the development methodologies.

In TDD, the code that implements a feature is written separately from the test code that verifies the correctness of that feature.

After writing the code, you perform tests on all the code to ensure that the product operates properly without errors.

This ensures that if a test fails, it can be made to pass with minimal code modifications.

Finally, we proceed with the process of refactoring the code that was successful.

Real-world examples of code assignments using TDD 📚📊


James Coding Full-Stack Development 5-Week Complete Curriculum 📚

Week 1 HTML Basics and Advanced

  • Understand and be able to explain what HTML is.
  • You can utilize frequently used grammar and elements in HTML.
  • You can design HTML structures
  • Able to understand and utilize semantic tags.
  • You can create a simple login page using 'Form'.

CSS

  • Understand and explain what CSS is.
  • You can style the basic CSS styles.
  • You can explain the CSS box model and use it to create layouts.
  • Understand and explain what CSS pseudo-elements are.
  • I can explain what CSS Transition and Animation are and how to use them in practice.

Javascript Basics

  • Understand and be able to explain what Javascript is.
  • Can explain the concept of variables.
  • Understand the rules for writing variable names and be able to create variable names.
  • Understand what types are and be able to utilize them.
  • Understand Javascript's declaration method, return value, and hoisting.
  • You can utilize basic Javascript grammar such as variables, types, and functions.

Week 2 Javascript Conditional Statements

  • You can understand and utilize conditional statements, which are basic Javascript grammar.
  • You can distinguish between different types of conditional statements.

Javascript string

  • Understand and explain what a string is.
  • You can understand and utilize basic string grammar.
  • You can do simple string manipulation (parsing).

Javascript loop

  • You can understand and utilize the basic Javascript grammar, loop statements.
  • You can distinguish between different types of loops and use them appropriately for the situation.

Javascript objects and arrays

  • Able to understand and utilize arrays and objects.
  • I can explain the difference between arrays and objects.
  • Can explain the index of an array.
  • It can describe the key and value of an object.

CLI, Node.js, NPM, NVM, Git

  • I can explain the difference between CLI and GUI.
  • You can use CLI commands and use administrator privileges appropriately.
  • You can proceed with the necessary environment settings according to your OS.
  • Understand and explain what Node.js, NPM, and NVM are.
  • I can understand what a package is,
  • You can install and use packages using NPM.
  • You can install and configure Git and understand the workflow.
  • You can use Git by linking your GitHub account.

Week 3: Core Javascript Concepts and ES6 Grammar

  • You can understand and explain primitive and reference data types in Javascript.
  • I can explain how data is stored in Javascript.
  • You can understand and utilize decomposition assignment, expansion syntax, and remaining parameters.
  • Able to understand and utilize ES6 grammar.

Javascript scope

  • Understand and explain what a scope is.
  • Explain the difference between global scope and local scope.
  • Explain the difference between block scope and function scope.
  • Be able to explain the difference between global and local variables.
  • Understand and explain what a scope chain is.
  • Understand and explain what lexical scope is.

Javascript execution context and stack

  • Understand and explain what a global execution context is.
  • Understand and explain what a function execution context is.
  • Understand what a stack is and explain the principles of a stack.

Javascript closures

  • Understand what closures are and explain their principles.

Week 4 Javascript DOM

  • Understand the concept of DOM and explain its structural form.
  • You can manipulate HTML by utilizing DOM elements.
  • You can understand and utilize CRUD of DOM elements.
  • You can perform DOM validation.

Javascript Class

  • Can explain the concepts of procedural and object-oriented programming.
  • Understand and be able to declare the basic structure of a class.
  • Understand and explain how to distinguish between classes and general functions.
  • Understand the role of the constructor function and be able to define properties and methods in a class.
  • You can understand the concept and characteristics of prototypes and check them directly using developer tools.
  • Understand and explain what a prototype chain is.
  • Understand built-in objects and explain their associated properties and methods.

Implementing an MP3 Music Web Player

  • You can implement your own music web player using HTML, CSS, and Javascript.
  • You can make improvements and supplement functions and create development logs.

Week 5 Higher-Order Functions

  • You can understand and explain higher-order functions.
  • You can use the built-in higher-order function map.
  • You can utilize the built-in higher-order function filter.
  • You can utilize the built-in higher-order function reduce.
  • You can use the built-in higher-order function sort.
  • You can use various built-in higher-order functions.
  • You can use this, call, apply, and bind.

Step-by-step self-check tests, coding tests 📝

Self-produced articles on parking star development provided ✍🏻

Improve your algorithmic skills with coding tests 🔥

With coding test problems created by James Coding . ✍🏻

  • Variables, Functions, and Data Types Coding Test (8 Questions)
    • 01. Variable declaration, 02. Assignment, 03. Expression,
    • 04. Function, 05. Function definition, 06. Function call,
    • 07. Template literal, 08. Operations are of the same type
  • Conditional Statement Coding Test (16 questions)
    • 01. isAdult, 02. equalsZero, 03. isBiggerThan, 04.isOddNumber,
    • 05.isEvenAndAdult, 06. simpleCalculator, 07. fizzBuzz,
    • 08. simpleDaysInMonth, 09. leftPerson, 10. oddEvenBiggerThan,
    • 11. makeGrade, 12. before15minutes, 13. isTriangle,
    • 14. isTruthy, 15. andOperator, 16. orOperator
  • String Coding Test (16 questions)
    • 01. makeFullName, 02. ageVerification, 03. lengthOfWord,
    • 04. averageLengthOfTheWords, 05. averageLengthOfTheWords2,
    • 06. shortestString, 07. isEvenLength, 08. validation,
    • 09. cutString1, 10. cutString2, 11. compareAlphabet, 12. compareNumbers,
    • 13. compareNumbers2, 14. makeTimeString,
    • 15. compareNumbers3, 16. unconnectedTime
  • Loop Coding Test (18 questions)
    • 01. findZero, 02. multiply, 03. factorial, 04. sumMtoN, 05. power, 06. echoString,
    • 07. numberString, 08. multipleString, 09. maxNumber, 10. factorString, 11. findSubString
    • 12. isPrime, 13. primeString, 14. numberStringExceptArgs, 15. findRemain,
    • 16. makeTriangle, 17. makeTriangle2, 18. makeRhombus
  • Array Coding Test (20 questions)
    • 01. checkType, 02. getFirstElement, 03. getLastElement, 04. specificElement,
    • 05. addFirstElement, 06. addLastElement, 07. deleteFirstElement,
    • 08. deleteLastElement, 09. doubleArray, 10. splitString, 11. splitCharacter,
    • 12. addComma, 13. longestString, 14. multipleFilter,
    • 15. cutArray1, 16. cutArray2, 17. cutArray3, 18. mergeArray,
    • 19. getStringFromDoubleArray, 20. fibonacci
  • Object Coding Test (19 questions)
    • 01. getValueByKey, 02. addKeyValuePair, 03. deleteProperty,
    • 04. objKeyArray, 05. objEntryArray, 06. objAssign, 07. deleteFalsyProperty,
    • 08. deleteEvenProperty, 09. deletePrimitiveProperty, 10. findAdult,
    • 11. isProperty, 12. accumulateProperty, 13. theNumberOfKeys,
    • 14. objectStringArray, 15. relativePropertyArray, 16. inheritance,
    • 17. propertyFilter, 18. countCharacter, 19. frequentCharacter
  • Higher-Order Function Coding Test (20 Questions)
    • 01. functionReturningFunction, 02. functionInputtedFunction,
    • 03. applyNTimes, 04. compositeFunction1, 05. compositeFunction2,
    • 06. compositeFunction3, 07. conditionalCallback, 08. evenFilter,
    • 09. lessThan100Filter, 10. deleteElement, 11. getDoubleArray,
    • 12. getFullNameArray, 13. getAdultMembers, 14. getArraySum,
    • 15. getArrayMul, 16. getAverage, 17. entriesToObject,
    • 18. ascendingSort, 19. descendingSort, 20. sortByGrade
  • Stack/Queue Coding Test (5 questions)
    • 01. numberOfWalls, 02. bracket, 03. historyStack,
    • 04. josephusProblem, 05. crossingBridge
  • Recursive Coding Test (18 questions)
    • 01. factorial, 02. sumMToN, 03. remain, 04. fibonacci,
    • 05. sumArray, 06. cutArrayHead, 07. cutArrayTail,
    • 08. reverseArray, 09. findString, 10. matryoshka,
    • 11. flatArray, 12. maxNumber, 13. sequenceSumArray,
    • 14. hanoi, 15. makeSubSet, 16. duplicatePermutation,
    • 17. permutation, 18. combination

Coding can only be completed if you have a solid foundation.

Meet James Coding, a company that focuses on the basics and even the introductory course.

What if you have these concerns?
The correct answer is James Coding!

😰

😲

😓

🤔

Self-study is difficult
I have fear
Non-major, no base
I'm a beginner
I need a systematic schedule Q&A
I need it

Frequently Asked Questions Q&A 💬

Q. Can I take the course without any prior knowledge?

Yes, it is possible.

Even if you're unfamiliar with programming languages or lack a background in development, you can still successfully complete this course if you're looking to develop your logical thinking and communication skills to independently explore and understand the unknown.

Q. Are there any qualification requirements?

There are no specific requirements for application (age, major, education, etc.). Anyone with a passion for immersive problem-solving and a commitment to self-management and self-development to become a continuously growing IT developer is always welcome to apply.

Q. Can I take this course while working or attending college?

James Coding Full Stack Course is an online course that you can take while attending work or school . You can take the class .

Things to note before taking the course 📢

To ensure smooth participation in the training, a personal laptop or PC is required .

Recommended for
these people

Who is this course right for?

  • I am a non-major and a beginner with no background.

  • I need a systematic schedule

  • I need to improve my algorithm skills through coding tests.

  • I want to improve my practical skills through various exercises and assignments.

  • I want to learn the latest JavaScript grammar and core concepts.

Hello
This is

72

Learners

15

Reviews

5.0

Rating

1

Course

강한 유대와 끝없는 동기 부여를 통해 성장을 추구하는 제임스코딩입니다.

제임스코딩은 현업 개발자 팀으로 구성되어 있으며 함께 플랫폼을 개발하며 강의를 제공하고 있습니다.

수강생분들의 꿈을 응원하고, 동료들과 상호 협력하는 교육 환경 시스템을 제공합니다.

정해진 일정동안 몰입하여 Front-End에서 Back-End까지 실무에 바로 투입될 수 있는 실력 있는 Full Stack 개발자 양성을 목표로 하고 있습니다.

 

문의
메일 : james.coding.school@gmail.com

Curriculum

All

159 lectures ∙ (7hr 35min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

15 reviews

5.0

15 reviews

  • 황동근님의 프로필 이미지
    황동근

    Reviews 1

    Average Rating 5.0

    5

    99% enrolled

    생에처음듣는 프론트엔드 강의로 js에 j자도 모르던 사람이 기초를 확실하게 알수있는 강의입니다. 체계적으로 정리된 커리큘럼이 존재하여서 중간에 강의를 듣다가 갑자기 난이도가 확상승하는 구간이 존재하지않습니다. 단 모든것을 a to z까지 알려주는 방식은 아닌 기타 필요한것은 본인이 어느정도 찾아봐야하는대 이는 오히려 내가 무엇을 모르고 강의 내용에서 더나아가 깊게 학습할수있는 경험을 주는 과정이였습니다. 이 강의를 들으면서 js가 왜 쓰이는지 js가 지닌힘등을 확실히 알게 되어갑니다.

    • 유예리님의 프로필 이미지
      유예리

      Reviews 1

      Average Rating 5.0

      5

      81% enrolled

      학습 콘텐츠가 다양해서 좋았습니다. 강의로 들은 내용을 강의록으로 다시 한 번 확인하고, 익힌 내용을 바로 바로 테스트할 수 있게 코딩테스트와 실습과제가 준비되어 있어 좋았습니다. 또한 과제 난이도와 양이 적절했던 것 같습니다. 집중해서 했다면 시간 내에 딱 풀 수 있게 계획된 적절한 난이도와 양의 과제였다고 생각합니다. 아침부터 시작하여 6시까지 오늘의 일정을 확인하고 계획을 세울 수 있었던 것은 매우 효과적이었습니다. 일정을 확인하고 목표를 설정하여 일정을 상기시킴으로써 오늘 해야 할 일들을 명확하게 정리할 수 있었고, 이를 통해 하루 동안 시간을 효율적으로 관리할 수 있었습니다. 섹션마다 있는 과제는 섹션이 끝났을 때 잘 학습 하였는지 확인하고, 더 깊고 폭넓은 이해를 도와 주었던 것 같습니다. 학습을 해결하면서 얻은 재미와 자신감을 바탕으로 뒤의 내용들을 마무리 하는데에도 도움이 되었습니다. 당일에 블로그를 정리하다 보면 학습내용이 복습 되기도 했고, 일주일에 한 번씩 회고를 작성하다 보면 내면의 나와 대화하는 느낌이 들어 자아를 성찰하는 데에 큰 도움이 되었던 것 같습니다. 날마다 해야하는 것들이 확실하게 정해져 있어서 학습을 따라가기 편했습니다. 구글 캘린더를 이용해서 일정을 짜 본적은 처음인데, 굉장히 유용한 툴이라는것을 깨달았습니다. 또한 시간에 맞춰 상세하게 일정이 짜여 있어 체계적인 하루를 보내는데에 도움을 많이 얻었습니다. 유동적인 상황에 맞춰서 학습 환경을 변경해주셔서 너무 감사했습니다. 의지가 약한 편이여서 금방 놓아버리는 성격인데 같이 으쌰으쌰 해주시고 응원해주셔서 너무 힘이 났습니다! 계속 강의 만들어주세요! 감사합니다!

      • 이상원님의 프로필 이미지
        이상원

        Reviews 2

        Average Rating 5.0

        5

        100% enrolled

        매우 만족스러운 경험이었습니다. 강의 커리큘럼은 체계적으로 구성되어 있었고, 강사님들은 전문적인 지식과 경험을 가지고 계셨습니다. 강의의 구성은 이론 강의와 실습 강의로 나뉘어져 있었습니다. 이론 강의에서는 Html, CSS, JavaScript의 기본 개념과 문법에 대해 자세히 설명해 주셨고, 실습 강의에서는 실제로 코드를 작성하면서 응용력을 향상시킬 수 있었습니다. 또한 코드 문제를 풀면서 스스로 생각하는 힘을 기를 수 있게 되었습니다. 웹 개발에 대한 기초 배울 수 있는 좋은 코스라고 생각하며 이 부트캠프를 추천드립니다. 감사합니다!

        • 조윤진님의 프로필 이미지
          조윤진

          Reviews 1

          Average Rating 5.0

          5

          47% enrolled

          정말 추천하는 강의입니다. Html부터 CSS, Javascript까지 체계적인 교육과정을 통해 개념을 확실하게 이해할 수 있게 강의가 진행됩니다. 모르는 부분이 나왔을 때는 멘토 분들이 같이 고민해 주시고 바로 답을 주는 것이 아닌 이해할 수 있도록 옆에서 서포트해 주십니다. 강의의 수준은 매우 높습니다. 기초 강의를 몇 개 듣다가 갑자기 난이도가 어려워지는 부분이 있어 쉽게 포기했었는데, 프리 칼리지는 천천히 난도를 높여가면서 어려운 부분이 나오더라도 어떻게 하면 해결할 수 있는지 방법을 알려줍니다. 그저 개념만 공부하는 것이 아닌 퀴즈와 코딩 테스트를 통해 어떻게 적용하는지까지 배울 수 있습니다. 또한 마지막 프로젝트를 통해 협업에 대해서도 알게 됩니다. 이 강의를 들으면서 너무 많이 성장했고 코딩에 대해서 재미를 느끼게 되었습니다! 감사합니다!

          • Ko렬님의 프로필 이미지
            Ko렬

            Reviews 1

            Average Rating 5.0

            5

            29% enrolled

            HTML, CSS, Javascript 전반에 대한 기초부터 기본기까지 학습할 수 있는 과정이었습니다. 강의 외에 코딩 테스트와 실습 등 다양한 컨텐츠가 활용되어 강의로 배운 지식을 몇 차례에 걸쳐 익히고 보강할 수 있었습니다. 이를테면 자체 플랫폼의 코딩 테스트의 경우 reference code가 제공되어 내 코드에 대해 피드백 받을 수 있었으며 실습 프로젝트의 경우 이전까지 배운 내용을 전체적으로 한 번 더 복습 및 활용할 수 있었습니다. 또한 학습 내용 뿐만 아니라 학습이 잘 이루어지는지 운영진 차원에서 계속적으로 관리 해주고 있어 과정을 성실히 이수하는데 도움이 되었던 것도 좋았습니다. 그 중에서도 가장 마음에 들었던 부분은 학습 중 어려운 부분이 있어 질문을 올릴 때면 교육 엔지니어 분들이 거의 실시간으로 답해주신다는 것이었습니다. 거의 온라인으로 학습했지만 관리와 피드백으로 오프라인에서 학습하는 느낌을 받고 과정을 잘 완주할 수 있었습니다. 본 과정을 통해 아직 프론트엔드를 접하지 못한 사람이라도 단시간 내 관련 언어에 대한 기본기를 충분히 얻어 가실 수 있다고 생각합니다.

            $34.10

            Similar courses

            Explore other courses in the same field!