Mobile Web Publishing Portfolio with Figma

"Essential theories and know-how for mobile web UI design and publishing production
"Systematic practical production"

Coding Works has accumulated the know-how in mobile web publishing production that it has taught to numerous offline academy students. We are confident that after completing the course, you will have significantly improved publishing skills!

🚩 Lecture update ( 2024.09.25 )

• Scroll padding, changing design after scroll (jQuery), using temporary images
• Mobile Browser Detection JavaScript (Arrow Function, User Agent)

🚩 Lecture Update (2023.07.06)

• Show empty cart as an additional action & select/deselect all cart checkboxes

▲ After creating an HTML+CSS mobile mockup, use iframe

▲ HTML+CSS mobile mockup production (3 completed mobile mockups provided)

💡 What are the other attractive points of this course?

1. You can acquire mobile web UI creation skills through practical production using Figma.
2. Learn detailed HTML wireframe writing techniques that will dramatically improve your publishing skills.
3. Learn the fundamentals of Clean Coding and publishing like a CodingWorks expert.
4. It has a variety of exercises and examples, easy-to-understand explanations, and in-depth explanations of concepts.
5. Explains everything students need to know for mobile web publishing.

🚩 Preloading page

1. Figma UI design and HTML wireframe structure creation
2. Show users the identity of the mobile web as the mobile web front page.
3. Automatically move to the page specified by JavaScript setTimeout
4. Linking an entire div to an html file using inline javascript

🚩 Login page

1. Figma UI design and HTML wireframe structure creation
2. Design various form elements in Figma and publish the results exactly as designed.
3. Detailed learning about the features and properties of HTML Form elements.
4. Learn CSS Interactions to Design Custom Checkbox or Custom Radio from Plain Form Elements
5. Create the GNB below as a separate file and load it with jQuery to include it (component work)
6. How to use SVG images
7. How to use and utilize font icons (Bootstrap Icons)

🚩 Membership registration page

1. Figma UI design and HTML wireframe structure creation
2. Like the login page, we designed various form elements in Figma.
3. Detailed learning about the features and properties of HTML Form elements.
4. Apply CSS properties to make plain form elements look pretty
5. Utilizing form element pseudo-classes (:focus ::placeholder)
6. Create the header above as a separate file and load it with jQuery.

▲ My Page / Main Page Slider / Main Page Tab Menu & Footer

🚩 My Page Page

1. Figma UI design and HTML wireframe structure creation
2. How to reuse existing card UI in various forms
3. Badge design and new card UI design and publishing
4. How to use and leverage Flex Layout
5. Using Unicode font icons with virtual classes :before and :after

🚩 Main Page

1. Figma UI design and HTML wireframe structure creation
2. How to manage complex HTML structures and create well-organized hierarchies (Clean Coding)
3. How to use Slick Slider and decorate Slick Slider beautifully with Custom CSS
4. Creating complex sliders in card UI format, not just main sliders
5. Create a Responsive Slider that responds to small mobiles, large mobiles, and tablets
6. Creating interactive CSS tab menus for content scalability on the mobile web
7. How to use the CSS property Object-fit in practice
8. Essential jQuery interaction methods (class control, element selection, event handlers, etc.)
9. How to use essential inline JavaScript
10. Numbering design using counter-reset with CSS pseudo-class

▲ Detail page (slider, product-related accordion, purchase button interaction)

🚩 Product Details Page

1. Figma UI design and HTML wireframe structure creation
2. How to manage complex HTML structures and create well-organized hierarchies (Clean Coding)
3. How to use Slick Slider and decorate Slick Slider beautifully with Custom CSS
4. Publishing bottom product-related accordion navigation with jQuery
5. jQuery modal that branches to shopping cart and buy now when the buy button is pressed
6. Font Icon Wish Button Design Interaction (toggleClass)
7. Creating a new Header as a separate file and loading it with jQuery

▲ Category page / Shopping cart page / Search page

🚩 Category Page

1. Figma UI design and HTML wireframe structure creation
2. Creating a jQuery Category Accordion
3. Change CSS style based on selected element
4. Using Unicode font icons with virtual classes :before and :after

🚩 Cart Page

1. Figma UI design and HTML wireframe structure creation
2. Shopping Cart Card UI Design and Publishing
3. Creating existing form elements with Custom CSS (select number)
4. Deleting and deleting all shopping cart items using jQuery
5. Various CSS3 properties (accent-color, zoom)

🚩 Search page

1. Figma UI design and HTML wireframe structure creation
2. Inserting a font icon into a search form element and using :focus ::placeholder
3. Using counter-reset with CSS pseudo-classes
4. Deleting search results and deleting all using jQuery
5. Numbering design using counter-reset with CSS pseudo-class

▲ Slick Slider CSS Change Know-how and GNB Navigation Check

🚩 Slick Slider CSS Change Know-how

1. Learn the exact location and selectors you need to modify through the developer tools.
2. Learn how to declare CSS selectors to avoid conflicts when using multiple slick sliders
3. Custom CSS Slider (dot navigation, previous/next navigation, etc.)

🚩 GNB Navigation Check

1. Clicked file opens and checks other designs with GNB navigation to locate the file (same way as Coupang app)
2. Automating the Back Button in the Header with Inline JavaScript

▲ Finishing publishing work

🚩 Finishing publishing work (add revisions and supplements after all publishing is complete)

1. Product Details (goods-detail.html) Overlay Issue
2. Resize full width (375px → 100%)
3. Issue with GNB(gnb.html) notification icon not being fixed
4. Front Slider Height Issue & Content Bottom Margin Cycle
5. Using the Slick Slider CDN
6. Linking HTML files with inline JavaScript
7. Linking forward and backward with inline JavaScript
8. Link GNB files & show all working pages without any errors
9. Check GNB enabled navigation in files connected to GNB
10. Large size mobile and tablet-friendly layout using variables (Var)
11. Create a nice mobile mockup with HTML+CSS and use it as an iframe

💡 How to use the download file and folder contents

① Download it when you start design work.
② Download it when you start publishing work.
③ If you are learning publishing, download it to compare it with the student code.
④ If you are creating a mobile mockup, please download it.

💡 Publishing work text editor <Visual Studio Code>

This lecture, <Mobile Web Publishing Portfolio with Figma> , was created using Visual Studio Code . Visual Studio Code is a free program with no usage restrictions. All lecture videos are based on Visual Studio Code.
Please learn the basic usage first through the Coding Works YouTube video below, and then learn <Section 3. Mobile Web Detailed Publishing (HTML+CSS+JS)>.

Download Visual Studio Code

Q. Is any prior knowledge or preparation required?

There is no special pre-requisite knowledge or preparation. If you have basic experience using HTML+CSS, you can follow along and achieve the expected level of skill improvement and results. However, since intermediate CSS theory is often used, you should have some knowledge of the learning content below.

😀 Coding Works YouTube Playlist - CSS Intermediate Theory for Mobile Web Publishing

Q. I have no experience using graphic programs. Can I design in Figma?

As mentioned in the introduction video, Figma has excellent performance compared to the effort. If you can handle PowerPoint to some extent, you can follow the Figma design class. However, in order to better understand the class, I recommend that you watch the video < [Must Read] Mobile Web UI Design Figma Basic Course > and do some preliminary learning through the YouTube channel introduced.

Q. What is the core content that differentiates you?

This is a design lecture at a level where even someone with no prior knowledge can make good use of Figma, rather than a design expert. So, the Figma design work class <Section 1. Mobile Web UI Design Creation with Figma> is at a level where someone who is just starting out with Figma can easily understand it rather than a class for experts.
However , the classes <Section 2. HTML Wireframe Structure for Mobile Web Publishing> and <Section 3. Detailed Mobile Web Publishing (HTML+CSS+JS)> are taught by an instructor who has been teaching publishing for a long time, and they are the most reliable and systematic way to improve publishing skills. And I think the key is that the classes are designed to help you gradually achieve high-level results from the unfamiliar and difficult task of mobile web publishing.

Q. Is this a course that non-design majors can also take?

It is possible. As shown in the video <[Must Read] Mobile Web UI Design Figma Basic Course> in Section 1, if you are good at handling PowerPoint, there is no problem at all in learning and utilizing Figma. I also learned how to use Figma in a short period of time for the course, and I was able to obtain good design results.

Q. I am a designer and I am good at Figma. Do I need to learn Figma Design in Section 1 ?

As I mentioned in the introduction video, I am not someone who has been using Figma for a long time or is good at it. So if you are confident in working with Figma, you can skip <Section 1. Creating Mobile Web UI Design with Figma> and go straight to <Section 2. HTML Wireframe Structure for Mobile Web Publishing> to learn.

Q. Why should I learn the mobile web publishing production process and what are the specific expected results ?

Mobile web is the most important as a personal portfolio work. Therefore, if you have mobile web work, you will be competitive in getting a job. In addition to serving as a job portfolio, most companies are currently working on mobile web projects and are planning to do so. From the perspective of these companies, I think a well-made mobile web portfolio will be a very good reference for job changes.

Mobile web is the most important as a personal portfolio work. Therefore, if you have mobile web work, you will be competitive in getting a job. In addition to serving as a job portfolio, most companies are currently working on mobile web projects and are planning to do so. From the perspective of these companies, I think a well-made mobile web portfolio will be a very good reference for job changes.

The specific expected effects are actually different for each person. However, what Coding Works can tell you for sure is that ' the ability to create HTML wireframe structures will be greatly improved . ' While creating various HTML wireframe structures, you will receive sufficient training on how to systematically organize complex HTML hierarchies. In addition, we will teach you in detail how to name and share consistent class names.

<Section 2. HTML Wireframe Structure for Mobile Web Publishing> trains you to create various HTML wireframe structures and <Section 3. Detailed Mobile Web Publishing (HTML+CSS+JS) > trains you to apply practical mobile web publishing , so you will gain confidence in creating various web UI layouts in the future.

Q. What level of content is covered in the class?

Due to the nature of mobile web, there are many files and folders. Therefore, a lot of content is progressed quickly. The level to which this is considered varies depending on the person's standards, but it is a class content that is sufficient for a publisher's personal portfolio. In addition, it is a class content that is sufficient for the level of mobile web work in practice.

Q. How long is the total lecture time?

The entire video lecture time is approximately 24 hours, which is enough lecture time for in-depth learning. In total, the preparation work for publishing and publishing work account for nearly 80% of the total, which is approximately 18 hours.
Figma UI Design - 5 hours 40 minutes / HTML Wireframe Structure - 4 hours 30 minutes / Publishing - 14 hours 15 minutes

Q. Are there any notes regarding taking the course (environment required, other things to keep in mind, etc.)?

The class content is extensive and progresses quickly. However, it does not go without sufficient explanation, but explains in detail. I think you will follow along well. However, I strongly recommend that you have a dual monitor environment rather than studying with a single monitor. Please refer to the video in Section 2 [Must Read] Why publishing skills do not improve despite effort for more details .

Introducing the knowledge sharer ✒️

Codingworks , the creator of the <Mobile Web Publishing Portfolio with Figma> course , has taught publishing theory, application, and personal portfolio homepage creation to over 300 national publishing course students. In particular, he is an instructor who has specialized in publishing lectures for many years, perfectly guiding all preparation processes for publisher employment from A to Z, so that most students can get jobs right after finishing the course. He has also been evaluated as being very helpful to Inflearn students by teaching publishing-related lectures at Inflearn.

❤ 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