A Complete Guide to Creating a Publisher Personal Portfolio Website (PDF)

Personal portfolio homepage content composition and UI/UX design
It should be created from the perspective of the hiring manager who selects the applicant, not from the perspective of the applicant.

Hello. This is Coding Works.

Website publishing is difficult. Among them, I think personal portfolio homepages are the most difficult to make. For example, if you make a shopping mall, there are general types of shopping malls. And there are so many websites to refer to. So even inexperienced publisher applicants can easily get ideas and do UI/UX design. Most of the results are not bad. However, there is no set personal portfolio homepage. Not only that, there are almost no websites to refer to. So I don't know where or how to start. In addition, the standards for making a well-made personal portfolio homepage are vague. That's why I think it's difficult to make.

The national publishing course lasts about 5 months. The first 2 weeks are usually spent learning graphic tools and the remaining 4 and a half months are spent learning publishing and creating a portfolio. There may be different parts for each instructor, but most are like that. In my experience, the most difficult class, the most talkative, and the most preparation required during the 4 and a half months is the last 3 weeks of the course. Coding Works starts making personal portfolio homepages 3 weeks before the end of the course and completes them before the end of the course. So the course is conducted tightly so that students can interview and get a job quickly without the so-called term.

As mentioned above, it is really difficult to teach how to create a personal portfolio homepage without any set rules. Since each person has different tastes and skills, the instructor cannot decide on one or two things and tell them to do this. It is difficult because it is about making students aware of the basic framework and purpose of a personal portfolio homepage and guiding them to create it themselves. Of course, it is not an easy process for students. However, since they receive continuous help from experienced people for three weeks, most of them produce good results.

For those who are preparing for a publisher job through self-study or who have completed a national publishing course but were unable to create a personal portfolio homepage during the period, you have no choice but to create a personal portfolio homepage on your own. It is extremely difficult. It is difficult even if you receive continuous help from an experienced person for three weeks. However, it is truly difficult to create this on your own without any guide. Of course, it is not difficult to create it. It is difficult to create a personal portfolio homepage that anyone can see as good. That is why Coding Works has included all the contents of the personal portfolio homepage creation class that is taught during the three-week national publishing course in the relevant PDF textbook.

Anyone with a certain publishing skill can create a personal portfolio homepage. However, most people are very proud of the results they create and show off without any purpose. However, they do not receive interview calls. Even if they do receive interview calls, they cannot take the initiative in terms of working conditions or salary. A well-made personal portfolio homepage is not just for the purpose of getting a job, but it is the most important specification for publisher applicants who can confidently work in interviews and with good working conditions.

I believe that in the <Complete Guide to Creating Personal Portfolio Homepages PDF Textbook> that was recently produced, I will share many know-hows and tips, just like the last three weeks of the national publishing course. In particular, it is composed of content that is faithful to the purpose of being produced from the perspective of the HR manager who selects applicants. I believe that through <Complete Guide to Creating Personal Portfolio Homepages PDF Textbook>, publisher applicants will be able to create a really good personal portfolio homepage on their own.

• Understand the concept and production process of creating a personal portfolio homepage
• Understand the structure of your personal portfolio homepage sections
• Understanding the essential folder structure/absolute vs. relative address concepts in practice
• Detailed writing of a functional definition + HTML wireframe for systematic publishing
• Essential Theory and Know-How for Responsive Web Development
• Description of the recommended UI/UX prototype website creation by Coding Works that anyone can start with
• Understand practical publishing by section (iframe, font icon, layout, detailed CSS)
• Understanding the final step: Hosting your personal portfolio homepage
• Essential theories and know-how for creating mobile web publishing

Q. Is any prior knowledge or preparation required?

This is not suitable for those who are just starting to learn for publisher employment. This lecture is suitable for students who have learned some publishing theory and feel the need to prepare a personal portfolio homepage for publisher employment. Of course, even those who are just starting out will eventually need to create a decent personal portfolio homepage for publisher employment. The [Personal Portfolio Homepage Publishing Work Creation Roadmap] section of the PDF section explains in detail how to prepare and create a publishing portfolio. If you look at it in advance, you will have a clear direction for how to prepare publishing results in the future and at the end of your studies.

Q. Who needs this book?

I think this is the most necessary lecture for those who are new publisher applicants who need to create a decent personal portfolio homepage, or web designers or graphic designers who need a decent personal portfolio homepage for a job transfer to a publisher. In particular, it is for those who are preparing for a publisher job through self-study, or those who attended a national publishing course but graduated without creating a decent publisher job personal portfolio homepage.

Q. How many pages and what is the content?

The entire page consists of 221 pages, and all the contents are 100% produced by Coding Works. There is absolutely no material copied from the Internet and processed. The coding screen, each letter, and the captured screen are all purely produced by Coding Works' own source. In particular, it consists of a detailed analysis of good personal portfolio homepage cases among recent Coding Works national publishing course students and specific directions. In particular, the practical content explained in the PDF textbook can be downloaded in the complete file from the student download section.

I am confident that this is not the common content that anyone can do on the Internet, but rather a valuable resource that faithfully contains Coding Works' many years of know-how.

Q. What is the core content that differentiates you?

Most of the content is differentiated, but in particular, it explains in detail the essential function definition document + HTML wireframe structure creation for improving publishing skills and creating a decent publisher job personal portfolio homepage. And in the practical section creation that creates all sections, we do a core code review of HTML+CSS+JS code. The completed version of the practical section creation is also available for download in the student download section.

During the three weeks of the national publishing course, we talk a lot about web terminology, production know-how, practical production tips, file management, folder management, thumbnail image creation, etc. that students are taught when creating a personal portfolio homepage. These parts are included in the PDF textbook.

Q. Are there any updates after downloading?

Due to the nature of e-books, frequent updates are rare. However, if there is information that you need to know as a publisher employment guide, the PDF file will be revised and uploaded, and students will be notified of the new information right away.

Q. How is it different from the video lecture <Creating a 'Publisher Personal Portfolio Homepage' that Attracts Interviews and Employment> among the Coding Works lectures?

The overall lecture purpose and content are similar. Both lectures are the same content, with the goal of creating a good publisher employment personal portfolio homepage and quickly getting a publisher job with good conditions. Both are lectures that Coding Works has made with all its heart, but the differences are as follows.

Video lectures have the advantage of being intuitively understandable and naturally completing results while learning through videos, but there are limitations to students' ability to think and solve problems on their own and creatively build their own personal portfolio homepage.

On the other hand, PDF lectures are more detailed with valuable reference contents, know-how, and tips that Coding Works could not include in the video lectures while calmly writing this book. For example, it was difficult to explain in detail in the video lectures the detailed production method of the function definition book + HTML wireframe structure, the essential theories and know-how of responsive web production, and the essential theories and know-how of mobile web publishing production, but in the PDF lectures, these parts are explained in detail through multiple pages. In particular, the video lectures were produced a year and a half ago, and the current PDF lectures are 100% updated with the actual cases and explanations of students taught by Coding Works.

Q. Should I take the video lecture or the PDF lecture?

I think students can choose between video and PDF lectures depending on their preferences.
In the case of video lectures, the actual published parts such as Full Screen Modal, Slick Slider, UIkit usage, CSS Mobile Mockup, etc. are covered in detail through videos and explanations. On the other hand, the difference with PDF lectures is that the parts that are explained through print rather than videos and explanations are different.

If you need a video lecture on how to use Full Screen Modal, Slick Slider, UIkit, or create a CSS Mobile Mockup, you can supplement it with the video lecture <Creating a 'Publisher Personal Portfolio Homepage' that Attracts Interviews and Employment>.

Q. Is this different from the PDF materials provided to students in the video lectures?

The PDF provided in the video lecture is a material produced 1 year and 6 months ago and has a total of 104 pages. The overall content of the PDF provided in the video lecture is similar. However, since it is a reference material for the video lecture, the explanation for each page is not as detailed as the <Complete Guide to Creating a Publisher's Personal Portfolio Homepage (PDF)> material. <Complete Guide to Creating a Publisher's Personal Portfolio Homepage (PDF)> consists of a total of 221 pages and includes all the content of the PDF provided in the video lecture while explaining it in more detail. In particular, the content added in line with the latest trends in the most recent 1 year and 6 months and actual student work have been updated much more.

❤ 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

Section 1. Notes & Cautions Before Creating a Personal Portfolio Homepage

• Understanding the Portfolio Concept
• Must-reads and precautions you must know
• Personal Portfolio Homepage Production Process (Road Map)
• Why You Need Photoshop UI Design Skills as a Publisher
• Publishing Fundamentals and Desirable Coding Habits for Employment and Workplace Adaptation

Section 2. Personal Portfolio Homepage Section Composition/Folder Structure/Absolute Address vs. Relative Address

• Whole section composition
• The Importance of Folder Structure
• Absolute vs. Relative Addresses
• Creating a folder structure

Section 3. Layout and content composition by section of personal portfolio homepage

• Intro Section
• About Section
• Skill Section
• Mobile Web Publishing Section
• Mobile Web Sub Page
• Website Publishing Section
• Clone Coding Section
• Practical Coding Section
• SCSS(SASS) Publishing
• Graphic Works Section
• Epilogue Section

Section 4. Creating a Responsive Web / Functional Definition / HTML Wireframe

• Essential Media Queries for Responsive Web Work
• Essentials and Tips for Responsive Web Work (Tip)ip)
• Scope of use of jQuery plugins
• Full website feature definition & HTML wireframe
• Mobile Web Feature Definition & HTML Wireframe
• Real-world publishing HTML wireframes

Section 5. Roadmap for Creating a Personal Portfolio Home Page Publishing Work

• Before going into details,
• Types and Number of Portfolio Results for Publisher Jobs
• Preparing Practical Publishing Results - Category Types and Numbers
• Categorizing the results of real-world publishing (1) - Card UI
• Categorizing the results of practical publishing (2) - Navigation
• Categorizing the results of real-world publishing (3) - CSS keyframe animation
• Categorizing the actual publishing results (4) - Tab content & accordion content
• Categorizing the actual publishing results (5) - Working with form elements
• Categorizing the results of real-world publishing (6) - Mouse hover effect
• Categorizing the actual publishing results (7) - Prototype web page
• Categorizing Practical Publishing Results (8) - SCSS (SASS) Practical Example
• An efficient way to produce real-world publishing results
• Translate real-world publishing examples into your own skills and results

Section 6. Finding a Target Design / Coding Works Recommended UI/UX Prototype Website

• Even those with design experience can design based on target design.
• Find your target design on our demo website
• Designing UI in Photoshop with Target Design
• Website Capture Chrome Extension - Awesome Screenshot and Screen Recorder
• These are the most difficult sections to design for new applicants.
• Section Design Application Examples (01-05)
• Example of a complete version of a content-friendly section UI publishing (01-03)
• Coding Works Recommended UI/UX Prototype Website Practice

Section 7. Section-by-section practical publishing (iframe, font icon, layout, detailed CSS)

• Understanding the iframe tag
• Using Font Icons
• All CDNs in the world
• Tips on Font Formatting
• Things You Should Never Do on Your Personal Portfolio Homepage
• Reduce image size
• Copyright free download site summary
• Monitor Resolutions Publishers Must Understand
• Dual Monitor Work Environment that Increases Productivity by 200%
• Section-by-section practical publishing - Full Screen Modal
• Showing content by section - UIkit Lightbox
• Showing content by section - UIkit Slider
• Show content by section - Show results in full screen modal
• Showing content by section - Creating mobile web publishing work
• Showing content by section - Creating thumbnails for real-world publishing results
• Section-by-section practical publishing - How to practice
• Section-by-section practical publishing - Practice the clone coding section
• Practical Publishing by Section - Practice the Mobile Web Publishing Section
• Section-by-section practical publishing - Practice the website publishing section
• Practical Publishing by Section - Practice the Practical Publishing Section
• Intermediate-Advanced Level Practice - jQuery load method, using callback functions, checking navigation
• Change header design after scroll using jQuery & JavaScript

Section 8. Hosting Your Personal Portfolio Homepage Web Hosting

• Apply for Cafe24 web hosting and get your personal homepage domain
• Download, install, and use FTP program FileZilla
• After logging in to Cafe24, go to My Service Management
• Verify FTP Password and Initialize (Format) Personal Hosting Content

[Student Download] Completed PDF and reference materials to help you learn

• [Functional Definition PDF] HTML Wireframe + Functional Definition
• [Functional Definition PDF] HTML Wireframe Only
• [Recommended Template PDF] Publisher Job Skills
• Example of full folder structure (userid.cafe24.com)
• [Finished file] 2 mobile mockups (iPhone, Galaxy)
• [Complete file version] Complete version of publishing UI for sections that are good for storing content
• [Completed Practice File] Coding Works Recommended UI UX Prototype Website
• [Completed Practice File] Section-by-section practice publishing (font format)
• [Completed Practice File] Mobile Web Wireframe UI Design Transition
• [Completed Practice File] Mobile Web Section (Load Method, Navigation Check)
• [Complete Practice File] Changing Header Design After Scrolling Using jQuery & JavaScript
• [Section Practice File Completed Version] Section-by-Section Practical Publishing 01 (Clone Coding Section)
• [Section Practice File Completed Version] Section-by-Section Practical Publishing 02 (Mobile Web Section)
• [Section Practice File Completed Version] Section-by-Section Practical Publishing 03 (Website Publishing Section)
• [Section Practice File Completed Version] Section-by-Section Practical Publishing 04 (Practical Publishing Section)

✒ Introducing the knowledge sharer

Coding Works , the creator of the [HTML+CSS+JS Practical Portfolio (Season 3)] course , has taught publishing theory, application, and personal portfolio homepage creation to over 300 national publishing course students. In particular, the instructor has specialized in publishing lectures for several years, perfectly guiding all preparation processes for publisher employment from A to Z, allowing most students to get jobs right after completing the course. In addition, he has been receiving positive reviews from Inflearn students for being very helpful in his publishing-related lectures.