HTML+CSS+JS Portfolio Practical Publishing (Season 3)

🚩 Lecture-related expected questions & must-reads

Q. Can I take Season 3 of the HTML+CSS+JS Practical Portfolio course without taking Season 1 or Season 2?

• You don't necessarily need to watch Seasons 1 and 2. However, while Seasons 1 and 2 offer detailed explanations of publishing fundamentals, Season 3 moves quickly through the theoretical parts. However, since it's designed for beginners and intermediate learners, I believe you'll be able to follow along.

• If you're confident you can create your own by reviewing the examples from Season 1 first, you can move on to Season 3. Please note that these Season 3 lectures feature entirely new examples, not duplicates from Seasons 1 and 2.

Q. Do you provide the completed HTML created in Season 3 of the HTML+CSS+JS Practical Portfolio?

• Yes. In the Student Resources Downloads section, you can download a zipped file containing all the practical examples produced in the video (HTML, CSS, JS, images, reference sites, source text, wireframe PDFs, etc.).

• Before starting the lecture video, unzip the downloaded compressed file and delete the index.html and style.css files. You can start by creating the basic HTML structure, excluding the source and images folders. If you need to refer to the finished version, you can always unzip the compressed file again and review it.

Q. What level of web coding skills are required before taking this course?

• First, a basic understanding of HTML and CSS is required. For example, those lacking a grasp of the float and position properties may find it difficult to follow. While Season 1 repeatedly covers these elements, Season 3 is designed for those with basic publishing skills. Please take note!

• No prior knowledge of jQuery or JavaScript is required. However, an understanding of the essential core theories of jQuery is recommended. The entire course relies on jQuery to create interactions, including class control and element navigation. JavaScript is used primarily for hands-on learning, so you don't need to worry about JavaScript proficiency.

  
  

Q. Is the order of studying examples to be learned in order from the beginning?

• There's no need to follow the exact order of the examples. You can start from any section you like.

• However, since the theory for creating practical examples is organized in the theory session, we recommend that you first briefly study the theory and then study the section on creating practical examples.

• There's no strict set difficulty level for each section. However, each video within a section is marked with a difficulty level, so feel free to start with the lowest difficulty level.

  
  

• [TMI] There's a lot of theory to understand when studying publishing and creating practical examples. While I'd love to compile a video that covers all the theory, it's often difficult. I encourage you to fill in any gaps by watching the Season 1 and 2 theory videos, the Coding Works YouTube channel, and using Google searches.

Q. Where can I download the complete set of practical examples and the complete set of theoretical examples?

• All the finished files (html, css, js, image files, etc.) created from the class videos can be downloaded from the last section (section 13) shown below.

  .

Q. Will there be future updates to the theory and practical examples?

• If there are updates to the theory and practical examples, we will notify you at the top of the lecture introduction what content was updated and when .

• After the update, you can re-download the files from Section 13. [Download] Download the completed version and reference materials and save them in the added update folder.

📖 Curriculum - HTML+CSS+JS Portfolio Practical Publishing (Season 3)

Section 2. Using a Text Editor (Visual Studio Code)

• How to use and configure Visual Studio Code

• How to install and use the Visual Studio Code essential extension

• How to Use Emmet in Visual Studio Code

  
  

Section 3. Web Publishing Theory and Application Examples

• Adding a list number using the CSS counter function

• CSS filter with filter generator

• CSS accent-color with label tag

• CSS backdrop-filter with Glass Morphism (translucent effect)

• CSS background-repeat, Multi background

• CSS mask-image, object-fit

• CSS min-content, max-content

• text-stroke to apply a border to text

• CSS variables

• Change image according to responsiveness (picture tag)

• Clamp function to automatically adjust responsive text size

• Responsive text size clamp function

• aspect-ratio auto-adjustment

• is pseudo-class to reduce selector duplication

• Sticky to fix a specific element after scrolling

• Mouse over up down (background, object-fit)

• Show hidden footer by scrolling (z-index, fixed)

• How to use sprite images

• 3 ways to make an element invisible (opacity, display, visibility)

• How to use the :has() and :not() pseudo-classes

• Creating a content slider with scroll-snap

• Single line ellipsis & multi-line ellipsis

• Creating a Gradient Border Button

• Creating three-dimensional shadows with neumorphism

• Pure CSS Selector Nesting 01 - Basic Usage without SCSS (SASS)

• Pure CSS Selector Nesting 02 - Usage Example (Login Form)

• JavaScript document loading script (installs two good extensions)

• Mobile Browser Detection JavaScript (Arrow Function, User Agent)

• Understanding Folder Structure (Absolute vs. Relative Addresses)

• Using Mondrian Layout to hone your layout skills

• [Must Read 01] Understanding and Utilizing the Position Attribute

• [Must Read 02] Understanding and Utilizing Display Properties

  
  

Section 4. Creating a Practical Web Publishing Example - Keyframe Animation & List Design

• Neon text typing effect

• Mouse wheel animation

• Fingerprint scan animation

• Yes24 Book Ranking List Design (CSS Counter)

• Fancy list design - counter(), attr()

  
  

Section 5. Creating a Practical Web Publishing Example - Fancy Section Design

• Simple typography design for the loading page

• Vivid real review header

• Dark Mode Basic (Greeting)

• Responsive multi-column news layout

• Fancy Section UI #01 - Image Shape Design Section

• Fancy Section UI #02 - Separated Grid Section

• Fancy Section UI #03 - Accordion Content Effect Section

  
  

Section 6. Creating a Practical Web Publishing Example - Card UI & Tab Menu Content

• Flex Responsive Card UI Section (Best Cities)

• Gradient Hover Card UI (Best Crew)

• Tab menu content (shopping mall product card UI single item)

• Tab Menu Content (Shopping Mall Product List Tab Menu Content)

  
  

Section 7. Creating a Practical Web Publishing Example - Navigation & Hover Effect

• Awesome Button Hover Effect Button 4 Types

• Horizontal tooltip (development language emblem icon hover)

• Vertical tooltip (hover over shopping mall shortcut icon)

• Hamburger navigation that unfolds to the right

• Change the navigation hover background image (Coupang)

• Icon Font 3D Flip Hover Effect

• SNS Icon 3D Hover Effect (Skew Property)

• Mobile Navigation Animation Indicator

• CSS Perspective Basics: CSS Perspective Card Flip

• [CSS Perspective Practical Example 01] Card Flip (Member Profile)

• [CSS Perspective Practical Example 02] Card Flip (Movie Poster)

• [CSS Perspective Practical Example 03] Card Flip (Ocean Beach)

• Glassmorphism Credit Card UI #01 (HTML, Front)

• Glassmorphism Credit Card UI #02 (Back, Tilt.js)

• Flex Image Gallery Hover Effect (Accordion Hover Navigation)

  
  

Section 8. Creating a Practical Web Publishing Example - Naver Tab Login Content

• [Naver Login] Creating HTML Wireframes with PPT & NotePad++

• [Naver Login] Coding HTML Wireframes with a Text Editor

• [Naver Login] Detailed CSS Design #01

• [Naver Login] Detailed CSS Design #02

• [Naver Login] Detailed CSS Design #03

• [Naver Login] Detailed CSS Design & Final Finishing #04

  
  

Section 9. Creating a Practical Web Publishing Example - Login Form Design

• Password Show Hide Login Form #01 (HTML Wireframe Creation)

• Password Show Hide Login Form #02 (Detailed CSS Design)

• Password Show Hide Login Form #03 (JQuery)

• Dual Login Form #01 (HTML Wireframe Creation)

• Dual Login Form #02 (Detailed CSS Design)

• Dual Login Form #03 (Detailed CSS Design)

  
  

Section 10. Creating a Practical Web Publishing Example - Jump Up (Web Publishing This and That)

• Loading animation with CSS variable var(--i) loop

• Creating a pure HTML accordion (details, summary)

• Typing Animation JS Plugin (Typed.js)

• [CSS Mockup Design] - MacBook

• [CSS Mockup Design] - iPhoneX

• Pure CSS Page Scroll Effects

• Form element label animation (Input Label Animation)

• CSS Scroll Animation (Infinite Scrolling Animation Gradient Overlay)

• CSS Conic Gradient Loading

• CSS Conic Gradient Pie & Donuts Chart

• Login Form CSS Validation (Form Validation) without JavaScript

• Custom Checkbox Style with CSS Variables

• Scroll padding, post-scroll design changes (jQuery), and temporary image usage

• CSS Education Career Timeline

• Border Animation with Lightbox Slide Gallery

• Simple tab menu content (jQuery only)

• Simple Image Gallery (JavaScript & jQuery)

  
  

Section 11. The Beginning and Completion of Publishing! Creating an HTML Wireframe Structure

• HTML Wireframe Structure with Class Names - Production Order and Method

• Creating a Dark Mode Webpage - HTML Wireframes

• Creating a Dark Mode Webpage - Publishing CSS Selector Nesting

• Transition Cross-Login Sign-up - HTML Wireframe Creation

• Transition Cross-Login Sign-up - CSS Selector Nesting Publishing Production

• Personal Resume Portfolio Homepage - Find UI Design Ideas

• Personal Resume Portfolio Homepage - HTML Wireframe Creation

  
  

Section 12. [Reference] Studying Websites to Help You Learn Web Publishing

• [Reference Website] 10015 Tools Key Feature Summary (10015.io)

• [Reference Website] Preview of all CSS properties

• [Reference Website] Background & Gradient Generator

• [Reference Website] Extracting Color Values

• [Reference Website] Using Temporary Images

  
  

Section 13. [Download] Download the Completed Version and Reference Materials

• [Download] Complete Collection of Season 3 Lecture Examples

• [Reference Materials] [Reference Materials] Required Reading & Key Theories

• [Reference] Required Settings for Visual Studio Code

• [Reference] Functional Definition for Publishing an Entire Website (Example)