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

Finally, the long-awaited (?) Coding Works publishing lecture,
HTML+CSS+JS Practical Portfolio Season 2 has opened.

Season 2 is centered around completely new practical examples that do not overlap with the practical publishing examples of Season 1. This is a lecture suitable for those who want to skill-up their publishing skills to intermediate or higher , as it involves creating publishing portfolio results for employment.

Q. Can I take Season 2 right away without taking HTML+CSS+JS Practical Portfolio Season 1?

You don't have to take Season 1. However, Season 1 explains publishing basics in detail, while Season 2 minimizes such parts and covers more in-depth content. You can look at the examples in Season 1 first, and then go straight to Season 2 if you are at a level where you can create them yourself. However, since the content explained in Season 1 and the examples produced do not overlap with Season 2, I recommend that you take Season 2 after completing Season 1.

HTML+CSS+JQUERY Portfolio Practical Publishing (Season 1)
Learn publishing fundamentals with a variety of practical examples

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

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

※ Before starting the lecture video, unzip the downloaded compressed file and delete the index.html and style.css files to start. You can create the basic HTML structure from the beginning, excluding the source and images folders. If you need to refer to the finished version, you can always unzip the compressed file again and look at it.

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

First, you need a basic understanding of HTML+CSS . For example, if you don't understand the float and position properties, it will be difficult to follow along. In Season 1, these parts are repeatedly explained in the lecture, but Season 2 is a lecture designed with those who have basic publishing skills in mind. Please take note!

Also, jQuery JavaScript prerequisite skills are not required. However, understanding of the essential core theories of jQuery is required. (Class control, element navigation, etc.) The entire lecture creates interactions based on jQuery, and JavaScript is used for experiencing examples, so you do not have to worry about JavaScript skills.

Q. What text editor do you use in class?

This course was created using Visual Studio Code . Visual Studio Code is a free program with no usage restrictions. If you do not use Visual Studio Code, you may use a text editor that you are comfortable using.

_{Download Visual Studio Code (click)}

※ We highly recommend that you watch the Visual Studio Code related video below before starting to create an example. Install all the extensions in the Visual Studio Code extension installation PDF file if possible.

Q. Are the images used in the example production copyrighted?

The images used in the example production are images without copyright. I searched Pixabay and Freepik and used the images needed for the example. Students, please use the attached images for the first time in the lecture video example production, but if you upload it to your personal portfolio homepage, please change the images in Pixabay and Freepik and upload them.

• Pixabay (click)
• FreePik (Click)

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

There is no need to follow the exact order of the example studies. You can study the examples you want in the section you want. The order of the sections does not go from easy to difficult. The types of examples are just different. However, since the process of creating a website prototype and a real-life responsive website require a lot of learning, we recommend that you start with them and continue to learn them all the way through.

You don't necessarily have to study Season 2 [Essential Theory] video and Season 1 [Essential Theory] video first and then move on to creating real-life examples. If you are creating a real-life example and the content from the example is in the Essential Theory video, it would be good to watch it again for learning purposes. Since it is impossible to include all the theories used in creating real-life examples in the Essential Theory, please watch the real-life examples and Essential Theory together.

[TMI] There are a lot of theories that you need to know when studying publishing and creating practical examples. I would like to organize all the theoretical parts and make a video, but realistically, there are some difficult parts.. Please fill in the missing parts by watching the Season 1 and Season 2 theory videos, the theory videos on the Coding Works YouTube channel, and your own Googling.

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

There are some people who ask on the Q&A board where to download the finished version. All the finished files (html, css, js, image files, etc.) created in the class videos can be downloaded in the last section shown below.

🙋🏻‍♂️ Expected questions and must-reads related to Season 2 lectures

Q) Is there a video explaining intermediate CSS theory while creating examples ?
A) This course is not about creating a beginner publishing example. This course is about creating an intermediate publishing example. So you should have some knowledge of CSS beginner-intermediate theory. But you don't have to know it all. We will continue to repeat CSS beginner-intermediate theory while creating examples. And there is a detailed video of essential intermediate theory needed for creating examples on the playlist called [Intermediate Theory] CSS Intermediate Theory on the Coding Works YouTube Publishing Channel, so it would be good to learn intermediate theory while taking this course.

Q) If I take this course, will I be able to work as a publisher in the field?
A) If you understand and can use all the publishing content in this course well, it is possible. However, publishing requires sufficient experience to work in the field. I think it would be enough to study a few more things like the current course and study a few of the entire website production processes. Of course, you should also create a personal portfolio homepage. The barrier to entry for publishing is higher than you think. Since watching a video once does not mean that all the content and know-how will be conveyed to the student, I hope you will make it your own through the learning method explained above.
If you have a thorough understanding of HTML+CSS+JS Portfolio Practical Publishing (Season 1) and HTML+CSS+JS Portfolio Practical Publishing (Season 2), the next learning roadmap will naturally emerge.

Q. Where can I ask questions if I don't understand something while studying?
A. If you have any questions, please post a post on the [Questions & Answers] board and I will answer you as soon as I confirm it, even if it is not right away. Also, please be as specific as possible with your questions. It is not easy to give a sufficient answer when your question is not specific. So when you ask a question, it will be much easier to answer if you attach a screenshot of the HTML, CSS, and JQUERY coding screen you are writing along with the content you are curious about.

Q. There is a course on creating responsive websites. Which one should I take first?
A. Before taking the course to create a full responsive website, I recommend that you sufficiently improve your theoretical and practical example creation skills in this course and Season 2 before coming to the course to create a full responsive website. Since it is a course to create a full responsive website, it is difficult to cover each part in detail like this course, so I think that if you are sufficiently trained in the practical publishing course and then come to the course to create a full website, your understanding will be much higher.

Q. Instructor, would it be a good idea to first look at the Publisher Job Search Real Practical Guide during class?
A. It is important to learn more publishing skills, but it is important to first establish the basics as a publisher. In the e-book (PDF) of the Publisher Employment Practical Guide, the publishing basics are thoroughly organized into the content that you must know as a publisher, such as desirable coding habits and principles, and publishing like an experienced person. We recommend that you first look at the e-book (PDF) of the Publisher Employment Practical Guide and study the publishing basics to gain a sufficient understanding. Click on the image below to see the class introduction.

[01] CSS Buttons & Navigation

_{3-type top navigation}

_{Dropdown navigation (CSS style, 3 types)}

_{Dropdown navigation (jQuery style, 3 types)}

[02] CSS Keyframe Animation

_{Circle loading animation}

_{Asiana Airlines loading animation}

_{Font Icon Text Shadow Filter Animation}

_{Font Icon Text Shadow Filter Animation - Application}

[03] CSS Hover Effect

_{Outline text}

_{Clip-path image overlay}

_{Creating a Tooltip - Basic}

_{Creating Tooltips - Applied}

[04] CSS Section UI Design

_{Font Awesome UI}

_{FontAwesome Gradient Service Price List}

_{Flex Grid Card UI (World Best Cities)}

_{Smart Item Shopping Mall}

_{Personal Profile Card (Dark Mode)}

_{Pretty table design}

_{Custom checkbox login form}

[05] CSS Website Prototype
(Web Site Prototype)

_{Website Prototype - Naver Responsive Membership Registration Form}

_{Fullscreen navigation responsive portfolio
with jQuery}

<sub>Fullscreen Navigation Responsive Portfolio with jQuery
- Animation transformation</sub>

_{English Academy Header Dropdown Navigation}

_{Portfolio CSS Grid Layout (Responsive) - PC ver.}

_{Portfolio CSS Grid Layout (Responsive) - Tablet ver.}

_{Portfolio CSS Grid Layout (Responsive) - Mobile ver.}

[06] JavaScript &
jQuery

jQuery Responsive Animated Modal

_{jQuery Front Back Transition Screen Change}

_{Controlling sound playback}

_{Validity check animation login form}

_{jQuery Front Back Transition Screen Change (Prototype #01)}

_{jQuery Front Back Transition Screen Change (Prototype #02)}

_{Expand the search box}

_{Netflix FAQ with jQuery}

[07] Real-life responsive website-
Netflix official website

_{Netflix official website PC ver.}

_{Netflix official website Mobile ver.}

[08] Real-world responsive website -
Download Chrome Browser

_{Chrome browser download official site PC ver.}

_{Chrome Browser Download Official Site Mobile ver.}

Q) Can't I use the Brackets text editor?

In the previous version, Brackets was no longer usable due to many problems such as not being able to install extensions after being dropped by Adobe. However, with the release of the new version of Brackets text editor, everything is now working properly.

Brackets is now available again with Visual Studio Kodi.

Please uninstall the existing version and download and install the new version (Version 2) from the official website.

Brackets Official Website: https://brackets.io/

Q) What text editor do you use in class?

This lecture was created using Visual Studio Code . Visual Studio Code is a free program with no usage restrictions. All lecture videos are explained based on Visual Studio Code.

_{Download Visual Studio Code (click)}

The video below is a free video of the HTML+CSS+JS Portfolio Practical Publishing (Season 1) course .
Even if you didn't take Season 1, you can still learn by listening. The lecture videos below contain a lot of content that is necessary for Season 2, so I highly recommend watching them!

• ^{All About Publishing! HTML Inline Elements, Block Elements, Inline-Block Elements}
• ^{Horizontally aligning HTML with CSS (float, overflow, clear, inline-block)}
• ^{Getting started with jQuery (folder structure, linking method)}
• ^{jQuery Essential Core Theory (Creating Basic Syntax, Selectors)}
• ^{jQuery Essential Core Theory (Function)}
• ^{jQuery Essential Core Theory (Method)}
• ^{jQuery Essential Core Theory (Effect Methods – slideDown, slideUp, fadeIn, fadeOut)}
• ^{jQuery Essential Core Theory (Class Control Methods – addClass, removeClass, toggleClass)}
• ^{jQuery Essential Core Theory (Element Search Method – children, siblings)}
• ^{Creating a practical example using CSS keyframe animation 01 (Circular size change loading animation)}
• ^{Creating a practical example using CSS keyframe animation 02 (rectangle coordinate change loading animation)}
• ^{Practical Publishing Using CSS Keyframe Animation 03 (Double Border Radius Animation)}
• ^{Basic dropdown navigation that properly understands virtual class hover}
• ^{Virtual Class Before After Practical Publishing Using Virtual Class 01 (Before After Basic Usage)}
• ^{As a publisher, you must know JavaScript, variables (var) and conditional statements (if) - 20-year-old adult check}
• ^{Chrome Extension Recommendations for Web Publishers (Part 1)}
• ^{Chrome Extension Recommendations for Web Publishers (Part 2)}
• ^{Create an A-Tag Anchor and Smooth Scrolling in Two Ways (JQuery Plugin, CSS Property)}
• ^{Distinguishing between good and bad publishing instructors (understanding display properties)}
• ^{Understanding relative font size em and rem units}
• ^{Understanding inherit, which inherits the value of the parent element}
• ^{CSS calc() Arithmetic expressions (basic operations)}
• ^{Using variables var() in CSS}
• ^{How to use the virtual class flower (:before :after)}
• ^{Creating an image map with hardcoding}

❤ News of passing the publisher exam for Coding Works students

▲ A student who studied under me for about 4 and a half months in a nationally funded publishing course received a KakaoTalk message saying that he got a job.

▲ I received a KakaoTalk message about the interview results for students who took the offline course on creating a personal portfolio at Coding Works (April 24, 2023).

❤ Email sent by a Coding Works student after getting a job at a publisher

Hello teacher :)

Teacher, I am Kim O-jeong, a student who was taking Inflearn's lectures.
I am a student who sent an email this summer asking for advice on my personal portfolio.
Do you remember?😊😊

It's nothing else than,
I'm sending this email to tell you that I successfully landed a job at a publisher with the portfolio I received advice on from you!

Even!!
The company contacted me first after seeing the portfolio I posted on Saramin, and I was interviewed via Zoom and passed!
The company matched my desired salary, and I was able to join a company where I could do only publisher work, not design or development work.

It was a company looking for an experienced publisher, and they contacted me, a new employee, and asked me why they contacted me.
He said that he looked at a lot of other people's portfolios, but he contacted me because the "Functional Definition" in my portfolio caught his eye.

I think this is all thanks to the teacher's lectures.
If I hadn't taken the teacher's class, my portfolio would have just been ordinary, but I was able to successfully get a job thanks to the great tips the teacher gave me!

Although I have never actually met him,
While creating my portfolio, I relied on it a lot, trusted it, and worked hard while watching the teacher's lectures!

I feel like my skills have improved a lot in the three months I spent listening to the teacher's lectures and creating a portfolio, more than the skills I built up while taking long classes at the academy.

I desperately wanted it,
I believed and did as the teacher said and the results were really good.

Thank you so much!

Be careful of corona
I hope to see you again with another great lecture :)

Hello teacher~ I'm Inflearn student OOO~ I found out the email address from another student's answer..😊😊

I just wanted to say thank you 😊😊

I've had a hard time taking your class and submitting my resume for about two weeks now...
I passed the interview at a company and decided to come to work.. Thank you so much..😭😭

Actually, I was worried because I'm 32 years old. I submitted a lot of resumes, but I didn't get any calls.
But this company's HR manager said that he doesn't like people who graduated from private academies 😊😊
The company I decided to join is small, but it has developers and web designers.
They said they would train them for three months and then put them into practice.
It's a bit far and the salary is low, but I'm going to study hard and try to increase my salary~ 😊😊

Thank you so much for everything. You answered my questions so well, and I am so amazed that I got a job after taking this online class.

I will continue to study and improve my skills by listening to your lectures. Fighting~!

🙋🏻‍♂️ Please read before asking questions~!!

If you have any questions while learning, please ask. When asking questions, you must upload the content that is not working, the code, and a screenshot of the browser result. In the case of code, you must upload all HTML, CSS, and JS codes so that we can give you an accurate answer.

If you only describe your problem in text without any code in your question, it will be difficult to give you an accurate answer unless it is really simple. Then, I will have no choice but to reply again saying, 'Please upload HTML, CSS, JS code and browser capture~', which will be cumbersome and take more time to find a solution.

▲ Please check the frequently asked questions in the relevant lecture community first~

⚡ For effective learning, please refer to the Coding Works Publishing YouTube channel!

Please watch the theory video lectures on the Coding Works Publishing YouTube channel in parallel. Of course, not all theory videos are on the YouTube channel, but most of the important theory videos are there. Since there are many videos, it is recommended to search for videos as in the example below.

Coding Works Publishing YouTube Channel: https://www.youtube.com/codingworks

Curriculum

Section 0. Season 2 - Lecture introduction and preview of the finished version & production notes

• [Introduction video] Preview of the finished product and production notes

Section 1. How to use Visual Studio Code and required extensions

• How to use and set up Visual Studio Code
• How to use Emmet in Visual Studio Code
• Prevent Full Reload from going up when modifying CSS in Visual Studio Code
• Visual Studio Code Essential Settings, Shortcut Key Changes, Essential Extension Installation (PDF)

Section 2. [Essential Theory] Theory and Tips for Creating Publishing Practical Examples

• Align child elements freely with the Flex property
• Video Background Section (Flex Layout)
• Create anchors and navigate to them with smooth scrolling (plugin, CSS property)
• Media Queries for Responsive Web Creation
• How to use font icons (FontAwesome 4.7)
• How to use font icons (XEICON)
• How to use web fonts (Google Web Fonts, Nunnu Korean Web Fonts)
• Image Optimization is essential before uploading to the server.
• Using an iframe to load another html inside the body
• Change image color freely with the filter property
• Using img as background with object-fit and object-position
• Input attribute selector, adjacent selector, and sibling selector for creating tab menus
• Using inline JavaScript (onclick JavaScript event)

Section 3. Season 2 - CSS Buttons & Navigation

• CSS Buttons & Navigation - 3-Type Top Navigation
• CSS Buttons & Navigation - Dropdown Navigation (CSS+JQUERY)

Section 4. Season 2 - CSS Keyframe Animation

• CSS Animation - Font Icon Text Shadow Filter Animation
• CSS Animation - Asiana Airlines Loading
• CSS Animation - Circle Loading (1)
• CSS Animation - Circle Loading (2)

Section 5. Season 2 - CSS Hover Effects

• CSS Hover Effects - Outline Text
• CSS Hover Effects - Creating Tooltips (Basic)
• CSS Hover Effects - Creating Tooltips (Applied)
• CSS Hover Effects - Clip-path Image Overlay

Section 6. Season 2 - CSS Section UI Design

• CSS Section UI Design - FontAwesome UI
• CSS Section UI Design - Pretty Table Design
• CSS Section UI Design - FontAwesome Gradient Service Price List
• CSS Section UI Design - Smart Item Shopping Mall
• CSS Section UI Design - Flex Grid Card UI (World Best Cities)
• CSS Section UI Design - Personal Profile Card (Dark Mode)
• CSS Section UI Design - Custom Checkbox Login Form

Section 7. Season 2 - Creating a Website Prototype

• WebSite Prototype - Naver Responsive Membership Registration Form
• WebSite Prototype - Fullscreen Navigation Responsive Portfolio with jQuery
• WebSite Prototype - English Academy Header Dropdown Navigation
• WebSite Prototype - Portfolio CSS Grid Layout (Responsive)

Section 8. JavaScript & jQuery Practical Examples

• Difference between jQuery and JavaScript, What is Vanilla JavaScript?
• jquery responsive animated modal
• JavaScript & jQuery - jQuery Front Back Transition Screen Change
• JavaScript & jQuery - Footer Family Site Select Custom Style
• JavaScript & jQuery - Extending the search box
• JavaScript & jQuery - Netflix-FAQ with jQuery
• JavaScript & jQuery - Validation Check Animated Login Form
• JavaScript & jQuery - Controlling Sound Playback

Section 9. Season 2 - Real Responsive Website - Netflix Official Site

• Real-world responsive website - Netflix official site (1) - Production notes and essentials
• Real-world responsive website - Netflix official site (2) - Creating the basic structure
• Real-world responsive website - Netflix official site (3) - Header & Welcome
• Real-world responsive website - Netflix official site (4) - 4 sections in the same format
• Real-world responsive website - Netflix official site (5) - FAQ Section
• Real-world responsive website - Netflix official site (6) - Footer
• Real-world responsive website - Netflix official site (7) - Login Modal
• Real-world responsive website - Netflix official site (8) - Mobile conversion work

Section 10. Season 2 - Real-world Responsive Websites - Download Chrome Browser

• Real-world responsive website - Chrome browser download (0) - Production notes and essentials
• Real-world responsive website - Chrome browser download (1) - Basic structure - Header
• Real-world responsive website - Chrome browser download (2) - Welcome Section
• Real-world responsive website - Download Chrome browser (3) - Feature Section
• Real-world responsive website - Download Chrome browser (4) - CallAction & Footer
• Real-world responsive website - Download Chrome browser (5) - Footer Copyright
• Real-world responsive website - Chrome browser download (6) - jQuery interaction
• Real-world responsive website - Chrome browser download (7) - Mobile layout conversion (1)
• Real-world responsive website - Download Chrome browser (8) - Mobile layout conversion (2)
• Real-world responsive website - Download Chrome browser (9) - Mobile layout conversion (3)

Section 11. Download the complete version and reference materials

• [Download the complete version] Season 2 - [01] CSS Buttons & Navigation
• [Download the complete version] Season 2 - [02] CSS Keyframe Animation
• [Download the complete version] Season 2 - [03] CSS Hover Effect
• [Download the complete version] Season 2 - [04] CSS Section UI Design
• [Download the complete version] Season 2 - [05]Web Site Prototype
• [Download the complete version] Season 2 - [06] JavaScript & jQuery
• [Download the complete version] Season 2 - [07] Real-life responsive website - Netflix official site
• [Download the complete version] Season 2 - [08] Real-life responsive website - Download Chrome browser