К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Build Mini Projects in JavaScript · LearnSpace
Назад в каталог
courseraПрограммирование

Build Mini Projects in JavaScript

Курс от Scrimba
Средний≈ 13.2 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

Are you ready to elevate your JavaScript skills with a project-based approach? This course is designed to guide you through fundamental and advanced JavaScript concepts using practical, real-world challenges. Through hands-on projects, you'll explore functional methods such as .map() and .reduce(), key logical operations such as the ternary operator and short-circuiting, form submission, and much more. Next up, you'll explore increasingly advanced JavaScript concepts including loops, filter(), imports, and object destructuring by building three full projects; A meme picker, a cookie consent banner and an X/Twitter clone. You’ll learn to write cleaner, more efficient code and tackle challenges that solidify your understanding of JavaScript. By the end of this course, you'll have a solid understanding of powerful JavaScript methods and techniques ready to apply directly to your coding projects and in your coding career.

Навыки, которые вы освоите

JavascriptEvent-Driven ProgrammingWeb Content Accessibility GuidelinesUser Interface (UI)Data ValidationData ManagementInteractive DesignWeb ApplicationsComputational LogicWeb DevelopmentData MappingData Import/ExportData Structures

Программа курса

4 модулей · 157 учебных материалов

01Essential JavaScript Mini Projects50 материалов

Playlist/section title

Intro to Mini ProjectsPLUGINWelcome to interactive lessons!PLUGINObject DestructuringPLUGINObject Destructuring ChallengePLUGIN

Учитесь у экспертов

Tom Chant

Instructor at Scrimba

Build Mini Projects in JavaScript
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 13.2 ч

4 модулей

Язык: Английский

Часть программы вашего университета
The .map() MethodPLUGIN
The .map() Method ChallengePLUGIN
The .join() MethodPLUGIN
The .join() Method ChallengePLUGIN
.map() vs .forEach()PLUGIN
For loop Break and ContinuePLUGIN
The dangers of innerHTMLPLUGIN
Beyond Function Declarations 1: Function ExpressionsPLUGIN
Beyond Function Declarations 2: Function Expression ChallengePLUGIN
Beyond Function Declarations 3: Arrow FunctionsPLUGIN
Arrow Functions ChallengePLUGIN
Inline Arrow Functions ChallengePLUGIN
Import Export (named)PLUGIN
Import Export (default)PLUGIN
The .reduce() MethodPLUGIN
The .reduce() Method ChallengePLUGIN
The .reduce() Method with ObjectsPLUGIN
The .reduce() Method with Objects ChallengePLUGIN
Default ParametersPLUGIN
Super Challenge Set-upPLUGIN
Super Challenge SolutionPLUGIN
The Ternary OperatorPLUGIN
The Ternary Operator for Complex ConditionalsPLUGIN
Ternary Operator ChallengePLUGIN
Twimba Ternary RefactorPLUGIN
The Rest ParameterPLUGIN
The Rest Parameter ChallengePLUGIN
Spread Syntax (...)PLUGIN
Spread Syntax (...) ChallengePLUGIN
Short-circuiting with OR (||)PLUGIN
Short-circuiting with OR (||) ChallengePLUGIN
Short-circuiting with AND (&&)PLUGIN
Short-circuiting with AND (&&) ChallengePLUGIN
Switch StatementsPLUGIN
Constructors: Date()PLUGIN
The Error() ConstructorPLUGIN
Objects with Methods and 'this'PLUGIN
Objects to Constructor FunctionsPLUGIN
Constructor Function ChallengePLUGIN
Constructor Functions to ClassesPLUGIN
Constructor Functions to Classes ChallengePLUGIN
Debugging: Errors (new)PLUGIN
Debugging: console.errorPLUGIN
Debugging: try...catchPLUGIN
RecapPLUGIN
JavaScript Essentials QuizЗадание
02Build an Annoying Cookie Consent32 материалов
Cookie Consent IntroPLUGINPosition the modalPLUGINAside: setTimeoutPLUGINSet the timerPLUGINAside: element.stylePLUGINMake the modal reappearPLUGINClose the modalPLUGINAside: FormsPLUGINAdd a form 1PLUGINAside: Forms - submittingPLUGINAside: Forms - challengePLUGINAside: Validation AttributesPLUGINSubmit the formPLUGINAside: preventDefaultPLUGINpreventDefault ChallengePLUGINButtons in forms - weird behaviourPLUGINAdd modal messagePLUGINAdd modal messages 2PLUGINAdd modal messages 3PLUGINAside: FormDataPLUGINForm Data 1PLUGINAside: FormData methodsPLUGINForm Data 2PLUGINAside: Disabling elementsPLUGINDisable the close buttonPLUGINThere is no choice 1PLUGINAside: classlist.togglePLUGINAside: Classlist Toggle ChallengePLUGINThere is no choice 2PLUGINAccessibility IssuesPLUGINRecapPLUGINBuild an Annoying Cookie Consent Graded AssignmentЗадание
03Build a Cat Meme Picker38 материалов
IntroPLUGINWhat a horrible for loopPLUGINAside: for ofPLUGINUse a for ofPLUGINNest the for ofPLUGINRender out the emotions 1PLUGINRender out emotions 2PLUGINAside: import the dataPLUGINImport the dataPLUGINAside: Radio InputsPLUGINRender the radios inputsPLUGINAside: .includes()PLUGINremove duplicatesPLUGINAside: e.targetPLUGINGet the id of the clicked optionPLUGINAside: parentElementPLUGINAside: classlist add/removePLUGINAdd colour to the selected emotionPLUGINAside: getElementsByClassNamePLUGINRemove the highlight classPLUGINAside: querySelector and why it's usefulPLUGINConnect the buttonPLUGINHas an emotion been chosen?PLUGINAside: checkboxPLUGINisGifPLUGINAside: filter()PLUGINAside: filter() 2PLUGINFind matches with .filter()PLUGINAnimated GIFs OnlyPLUGINIntroducing two important functionsPLUGINIf there's only one cat...PLUGINIf there's more than one cat...PLUGINrenderCat()PLUGINClose the modalPLUGINThe order of thingsPLUGINAside: Select ElementPLUGINRecapPLUGINBuild a Meme Picker Graded AssignmentЗадание
04Build an X/Twitter Clone37 материалов
IntroPLUGINImport the dataPLUGINAside: TextAreaPLUGINAdd TextAreaPLUGINTweet BoilerplatePLUGINTweet Boilerplate ChallengePLUGINAside: forEach()PLUGINUse forEach to build the htmlPLUGINRender the tweets to the feedPLUGINAside: CDN Font AwesomePLUGINAdd some awesome iconsPLUGINLike a tweet part 1: explanationPLUGINAside: Data attributesPLUGINAside: Data Attr JS and ChallengePLUGINAside: Data Attribute Naming IssuesPLUGINLike a tweet part 2: data attributesPLUGINLike a tweet part 3: eventListenerPLUGINLike a tweet part 4: handleLikeClick()PLUGINLike a tweet part 5: find the tweet objectPLUGINAside: Copying objects and arraysPLUGINLike a tweet part 6: render the incrementPLUGINUnlike a tweetPLUGINFlip a booleanPLUGINRetweet a tweetPLUGINAside: Conditionally render CSS classPLUGINColor the iconsPLUGINReplies 1: get uuids of tweets with repliesPLUGINReplies 2: HTML string for replies and add to parent divPLUGINReplies 3: toggle hiddenPLUGINRefactor the tweet btnPLUGINAside: UUIDPLUGINBuild the new Tweet objectPLUGINRender a new tweetPLUGINUX fixesPLUGINRecapPLUGINDeploy TwimbaPLUGINBuild an X Clone Graded AssignmentЗадание