Name: Mobile Web Publishing Portfolio with CSS Nesting
Price: 79200 KRW

Mobile Web Publishing Portfolio with CSS Nesting

Page 19, Total 22 different mobile layouts While creating various mobile layouts, you can improve your mobile web creation skills, which are the most competitive in the publisher industry and publisher practice. You can learn almost all the production methods and know-how for creating mobile web as a publisher. In the mobile web publishing class, we will explain in detail the detailed writing method of HTML wireframes, which is the strongest part of the class. Through the lecture, your HTML wireframe creation skills will greatly improve. In particular, you can learn enough about the CSS nesting method. You will acquire sufficient intermediate to advanced CSS practical skills centered on Flex layout.

What you will learn!

Pure CSS Nesting Publishing Capability
Intermediate to advanced CSS practical coding focused on Flex & Grid layouts
19 pages, total 22 different mobile layouts created
Essential theories and know-how for mobile web publishing production, and practical production
Creating a mobile-optimized layout using CSS variables (Var)
The Definitive Guide to Clean Coding: Publishing Like a Pro
How to use Slick Slider and CSS change tips
Creating HTML+CSS mobile mockup and using iframe

" CSS Nesting Method for Mobile Web Publishing Production
Essential theory and know-how, systematic practical production "

Step 01. Detailed production of HTML wireframes for a total of 19 pages and 22 different mobile layouts
Step 02. Create various layout publishing using CSS nesting method
Step 03. Publishing finishing work to make the completed publishing results more perfect

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. In particular, you will gain great confidence in CSS Nesting method coding.

It could only be used in SCSS (SASS)
Coding CSS nesting style in plain CSS!

This lecture [Mobile Web Publishing Portfolio with CSS Nesting] was created using the latest CSS nesting technique, not the general CSS coding method. CSS Nesting was only available in SCSS (SASS) until a year ago, but now it can be used without using SCSS (SASS). I think you will grow considerably while publishing mobile web projects with CSS Nesting.

Preparation is required to use the existing SCSS (SASS). Along with preparation, a compilation process is also required to create CSS that the browser recognizes. The main reason for using SCSS (SASS) is selector nesting. Of course, SCSS (SASS) has various functions, but the most important function is nesting. Now, you can code with CSS nesting without using SCSS (SASS).

Lecture Topics 📖

Through Codingworks' <Mobile Web Publishing Portfolio with CSS Nesting>, you can improve your mobile web production skills, which are most competitive in publisher employment and publisher practice. And as a publisher, you can acquire almost all production methods and know-how for producing mobile web.

Pure CSS nesting publishing capabilities
Intermediate to advanced CSS practical coding focusing on Flex & Grid layouts
Essential theories and know-how for mobile web publishing production, practical production
After creating an HTML+CSS mobile mockup, use the iframe
Create a mobile-optimized layout using CSS variables (Var)
How to use Slick Slider and change CSS know-how
Clean Coding: Publishing Like an Experienced Professional

Provides various files 🗂

📝 Design files, source files, published version, lecture notes

[CSS Nesting] Design work image source
[CSS Nesting] Mobile Web HTML Wireframe (TXT)
[CSS Nesting] Mobile Web Design Work (PSD)
[Download] 3 HTML+CSS Mobile Mockups (iPhone, Galaxy)
Design Individual Screen (PNG) [CSS Nesting] Mobile Web Design Individual Screen (PNG)
Source text and reference website [CSS Nesting]
CSS Nesting Mobile Web - Lecture Notes

▲ CSS Nesting Mobile Web Production Video - PPT lecture materials used in video lectures provided

The basics of clean coding 🧽

I think that while taking the <Mobile Web Publishing Portfolio with CSS Nesting> course, you will develop your skills in many ways, such as the ability to create HTML wireframes and the ability to use Flex for publishing. These parts are also very important, but the most important part is that you will learn the ' Clean Coding Principles for Publishing Like an Experienced Person '. All publishing in the course is written under these principles.

<The Essentials of Clean Coding for Publishing Like an Expert> includes inserting necessary comments where necessary, coding CSS selectors in the right order according to the order they appear in HTML, and organizing common CSS selectors in a place called Common CSS for later maintenance... If you learn these coding principles and habits, they will be of great help in the field. In particular, when applying for a job, the HR manager or a similar person will look at the source code after reviewing the applicant's publishing results. In this case, they can judge the applicant's publishing fundamentals just by looking at the source code for a moment.

💡 What are the other attractive points of this course?

You can acquire the ability to create code using the new technology, CSS Nesting.
Learn detailed HTML wireframe writing techniques that will dramatically improve your publishing skills.
Learn the fundamentals of Clean Coding and publishing like a CodingWorks expert.
It has a variety of exercises and examples, easy-to-understand explanations, and in-depth explanations of concepts.
Explains everything students need to know for mobile web publishing.

Mobile Web Full UI Design

CSS Nesting Publishing 📚

▲ Intro page with Overlay / Intro page

🚩 Intro page with Overlay

Creating HTML wireframe structures using CSS Nesting
Full screen layout
Show/Hide Toast Overlay

🚩 Intro page

Creating HTML wireframe structures using CSS Nesting
Intro Slick Slider
Get started

▲ Welcome page / Login page

🚩 Welcome Page

Creating HTML wireframe structures using CSS Nesting
Login button design

🚩 Login page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Handling form elements

▲ Membership registration page / Password search page

🚩 Membership registration page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Handling form elements

🚩 Password Retrieval Page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Handling form elements

▲ My Fresh Main Page / Member Information View Page

🚩 My Fresh Main Page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Using font icons, ::before ::after usage

🚩 View member information page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Using font icons, using ::before ::after

▲ Member information confirmation page / Member information modification page

🚩 Membership information confirmation page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Use font icons, use adjacent selectors

🚩 Member information modification page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Use font icons, use adjacent selectors
CSS Custom Switch Button
CSS Custom Checkbox

▲ Address book management page / shopping cart page

🚩 Address Book Management Page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement

🚩 Cart Page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Use font icons
Handling form elements

▲ Order payment page / Wish list page

🚩 Order payment page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Use font icons
Using Unicode font icons with virtual classes :before and :after

🚩 Wishlist page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement

▲ Recently viewed product page / order list page

🚩 Recently viewed product pages

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Using font icons, ::before ::after usage

🚩 Order List Page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Using font icons, using ::before ::after

▲ Search page / Category page

🚩 Search page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Using font icons, ::before ::after usage

🚩 Category Page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Use font icons
Using Unicode font icons with virtual classes :before and :after

▲ Home Main Page / Product Details (Product Description) Page

🚩 Home Main Page

Creating HTML wireframe structures using CSS Nesting
Home Main Slick Slider
Product List Slider
Flex layout placement
Using font icons, ::before ::after usage
Badge Design

🚩 Product Description Page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Utilizing the tab menu content feature
Smoothly move to top of JavaScript function
Using font icons, using ::before ::after

▲ Product Details (Review) Page / Product Details (Inquiry) Page

🚩 Product Details (Review) Page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Using font icons, using ::before ::after
Badge Design

🚩 Product Details (Inquiry) Page

Creating HTML wireframe structures using CSS Nesting
Flex layout placement
Use font icons
Using Unicode font icons with virtual classes :before and :after

💡 Publishing work text editor <Visual Studio Code>

This lecture, <Mobile Web Publishing Portfolio with CSS Nesting> , 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 and publishing through the Coding Works YouTube video below.

Download Visual Studio Code

✅ Visual Studio Code theme used in creating the lecture: One Dark Pro

Q&A 👨‍🏫

If you have any questions, please post them on the community Q&A board for the relevant lecture and we will do our best to answer them.

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. What is the core content that differentiates you?

[Mobile Web Publishing Portfolio with CSS Nesting] This course was created using the latest CSS Nesting technique, not the standard CSS coding method. CSS Nesting was only available in SCSS (SASS) until a year ago, but now it can be used without using SCSS (SASS). I think you will grow considerably while publishing mobile web projects with CSS Nesting.

As an instructor who has been teaching publishing online and offline classes for a long time, I teach in the most reliable and systematic way to improve publishing skills. And I think the key is that the class is designed to help you gradually achieve high-level results from the unfamiliar and difficult task of mobile web publishing.

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.

The specific expected effects are actually different for each person. However, what Coding Works can tell you for sure is that your 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.

Create various HTML wireframe structures in detailed production of various mobile layout HTML wireframes. We train you up to the stage of applying 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 is it different from the existing lecture [Mobile Web Publishing Portfolio with Figma]?

The existing mobile web lecture and this mobile web lecture are both the same in that they create mobile webs using CSS. The biggest difference is that the existing lecture uses CSS methods that list parent elements every time, while this lecture uses CSS nesting methods that only use parent elements once. The difficulty level is about 1.5 times higher than the existing lecture, so you can create more pages and more diverse layouts, which will help you improve your mobile web publishing skills.

✅ Differences between this mobile web development course

No Figma design work in class.
Create HTML wireframes and publish right away while looking at the finished design
CSS Nesting Coding Style
More than double the amount of production and learning (9 pages for the basic lecture, 19 pages for this lecture)
Create 22 different layouts, all different
Various slider creation methods (Slick Slider)

Q. How long is the total lecture time?

The total video lecture time is approximately 16 hours, providing sufficient lectures for in-depth learning.

How to Create a Pre-Read Video and Mobile Web HTML Wireframe Structure - 2 hours
[Practical Production] Mobile Web HTML Wireframe Structure with PPT - 3 hours
[Practical Production] Mobile Web Detailed Publishing with CSS Nesting - 10 hours
[Reference] Using a completed mobile web as a portfolio - 1 hour

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 .

Section 1. Introduction

[Course Introduction] Mobile Web Publishing Portfolio with CSS Nesting
[Preview of the finished version] Mobile Web Publishing Portfolio with CSS Nesting
[Must Read] Pure CSS Selector Nesting 01 - Basic Usage of CSS Nesting
[Must Read] Pure CSS Selector Nesting 02 - CSS Nesting Utilization Example (Login Form)

Section 2. [Must Read] How to Create a Mobile Web HTML Wireframe Structure

[Must Read] Why Publishing Skills Don't Improve Despite Effort
[Must Read] How to Create an HTML Wireframe Structure and Know-How
[Practice] Practice creating HTML wireframes (custom checkbox login form)
[Must Read] HTML Wireframe Structure (Border Box and Class Naming Tips)
[Reference] Understanding the concepts of mobile web and mobile app

Section 3. [Practical Production] Mobile Web HTML Wireframe Structure with PPT

HTML Wireframe Structure (Join - Getting Started, Login, Sign Up, Find Password)
HTML Wireframe Structure (Myfresh 01 - Myfresh Main)
HTML Wireframe Structure (Myfresh 02 - View Member Information Confirm Modification)
HTML Wireframe Structure (Myfresh 03 - Shipping Address Management, Order Payment)
HTML Wireframe Structure (Myfresh 04 - Shopping Cart)
HTML Wireframe Structure (Myfresh 05 - Wishlist, Recently Viewed Products, Order List)
HTML Wireframe Structure (Search, Category)
HTML Wireframe Structure (FAQ - Frequently Asked Questions)
HTML Wireframe Structure (Customer Center)
HTML Wireframe Structure (Home - Main Page)
HTML Wireframe Structure (Detail - Product Description, Detailed Information, Reviews, Inquiries)

Section 4. [Practical Production] Mobile Web Detailed Publishing with CSS Nesting

[Must Read] Setting width and height in mobile web publishing
[Must Read] Creating Folder Structure, Reset, Variables
[Practical Publishing Production] Intro 01 (Intro Screen, Slider, Slider Custom CSS)
[Practical Publishing Production] Intro 02 (Toast Overlay, Absolute Address vs. Relative Address)
[Practical publishing production] Join 01 (Welcome
[Practical Publishing Production] Join 02 (Login)
[Practical publishing production] Join 03 (membership registration, password retrieval)
[Practical Publishing Production] My Fresh Main 01 (Page Header, Content Layout)
[Practical Publishing Production] My Fresh Main 02 (Detailed Content, gnb)
[Practical Publishing Production] My Fresh Main 03 (gnb included)
[Practical publishing production] Organizing container heights (auto, 100vh)
[Practical Publishing Production] Member Information 01 (View Member Information)
[Practical Publishing Production] Member Information 02 (Member Password Confirmation)
[Practical Publishing Production] Member Information 03 (Member Information Modification)
[Practical publishing production] Delivery address management
[Practical Publishing Production] Modifying Intermediate Code (Common CSS)
[Practical publishing production] Shopping cart
[Practical Publishing Production] Order Payment (:not :has Virtual Class)
[Practical Publishing Production] Wish List
[Practical Publishing Production] Recently Viewed Products
[Practical Publishing Production] Order List
[Practical publishing production] Search, Category
[Practical Publishing Production] Home 01 - Main Slider, Category, Banner, Footer
[Practical Publishing Production] Home 02 - SNS, Ppakkomi Product Slider
[Practical publishing production] Product description 01 - Check the tab button, tab menu function, and wish list button
[Practical Publishing Production] Product Description 02 - Product Details, Product Information
[Practical Publishing Production] Product Description 03 - Product Review, Product Inquiry
[Practical publishing production] Adjusting and modifying width and height per page (check on mobile devices)
[Publishing Modification and Supplement] Move smoothly to the top of the product description page
[Publishing Modification and Supplement] - Linking Files & Checking GNB Navigation
[Publishing Modification and Supplement] Home Main Slider Count, Product Slider Tablet Size

Section 5. [Reference] Using the completed mobile web as a portfolio

Create a nice mobile mockup
Using iframes for mobile mockups (multi-view, single-view)
Mobile Browser Detection JavaScript (Arrow Function, User Agent)
Apply the mobile web created after completion to the portfolio (View Coding Works Student Portfolio)

Section 6. [Download] Student Reference Materials

[Download] Download student reference materials (Mobile Web with CSS Nesting)
[PDF Textbook] Mobile Web - HTML Wireframe (PDF)
[PDF Textbook] Mobile Web - Lecture Notes

🙋🏻‍♂️ 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.

✒ Introducing the knowledge sharer

Coding Works 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, so that most students can get jobs right after completing the course. In addition, the instructor has been evaluated as being very helpful to Inflearn students by conducting publishing-related lectures at Inflearn.

Recommended for
these people

Who is this course right for?

If you need a mobile web UI design and publishing portfolio
Those who need practical experience for mobile web publishing work

Need to know before starting?

Basic HTML+CSS usage experience

Hello
This is

12,637

Learners

745

Reviews

2,114

Answers

4.9

Rating

Courses

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

Curriculum

All

56 lectures ∙ (16hr 19min)

Course Materials:

Lecture resources

Section 1. Course Introduction

4 lectures ∙ (1hr 7min)

Section 2. [Must Read] How to Create a Mobile Web HTML Wireframe Structure

5 lectures ∙ (56min)

Section 3. [Practical Production] Mobile Web HTML Wireframe Structure with PPT

9 lectures ∙ (2hr 47min)

10. HTML Wireframe Structure (Join - Start, Login, Sign Up, Find Password)
24:40
11. HTML Wireframe Structure (Myfresh 01 - Myfresh Main)
15:10
12. HTML Wireframe Structure (Myfresh 02 - View, Confirm, and Modify Member Information)
26:51
13. HTML Wireframe Structure (Myfresh 03 - Delivery Address Management, Order Payment)
13:55
14. HTML Wireframe Structure (Myfresh 04 - Shopping Cart)
13:12
15. HTML Wireframe Structure (Myfresh 05 - Favorites, Recently Viewed Products, Order List)
19:25
16. HTML Wireframe Structure (Search, Category)
10:46
17. HTML Wireframe Structure (Home - Main Page)
18:08
18. HTML Wireframe Structure (Detail - Product Description, Detailed Information, Reviews, Inquiries)
25:20

Section 4. [Practical Production] Mobile Web Detailed Publishing with CSS Nesting

31 lectures ∙ (10hr 18min)

Section 5. [Reference] Using the completed mobile web as a portfolio

4 lectures ∙ (1hr 9min)

Section 6. [Download] Student Reference Materials

3 lectures

Published:

Last updated:

Reviews

All

3 reviews

5.0

3 reviews

ggo
Reviews 1
∙
Average Rating 5.0
5
32% enrolled
- 코딩웍스(Coding Works)
  Instructor
  수강평 감사합니다.
김경민
Reviews 1
∙
Average Rating 5.0
5
30% enrolled
- 코딩웍스(Coding Works)
  Instructor
  수강평 감사합니다.
bellmore
Reviews 1
∙
Average Rating 5.0
5
30% enrolled
- 코딩웍스(Coding Works)
  Instructor
  수강평 감사합니다.

Mobile Web Publishing Portfolio with CSS Nesting

What you will learn!

" CSS Nesting Method for Mobile Web Publishing Production
Essential theory and know-how, systematic practical production "

It could only be used in SCSS (SASS)
Coding CSS nesting style in plain CSS!

Lecture Topics 📖

Fully supported on all browsers
CSS Nesting Style Coding

Provides various files 🗂

The basics of clean coding 🧽

Mobile Web Full UI Design

CSS Nesting Publishing 📚

✅ Visual Studio Code theme used in creating the lecture: One Dark Pro

Q&A 👨‍🏫

Q. Is any prior knowledge or preparation required?

Q. What is the core content that differentiates you?

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

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

Q. How is it different from the existing lecture [Mobile Web Publishing Portfolio with Figma]?

Q. How long is the total lecture time?

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

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

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

✒ Introducing the knowledge sharer

Recommended for
these people

Hello
This is

Curriculum

Reviews

codingworks's other courses

Similar courses

Mobile Web Publishing Portfolio with CSS Nesting

What you will learn!

" CSS Nesting Method for Mobile Web Publishing Production Essential theory and know-how, systematic practical production "

It could only be used in SCSS (SASS) Coding CSS nesting style in plain CSS!

Lecture Topics 📖

Fully supported on all browsers CSS Nesting Style Coding

Provides various files 🗂

The basics of clean coding 🧽

Mobile Web Full UI Design

CSS Nesting Publishing 📚

✅ Visual Studio Code theme used in creating the lecture: One Dark Pro

Q&A 👨‍🏫

Q. Is any prior knowledge or preparation required?

Q. What is the core content that differentiates you?

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

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

Q. How is it different from the existing lecture [Mobile Web Publishing Portfolio with Figma]?

Q. How long is the total lecture time?

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

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

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

✒ Introducing the knowledge sharer

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

codingworks's other courses

Similar courses

" CSS Nesting Method for Mobile Web Publishing Production
Essential theory and know-how, systematic practical production "

It could only be used in SCSS (SASS)
Coding CSS nesting style in plain CSS!

Fully supported on all browsers
CSS Nesting Style Coding

Recommended for
these people

Hello
This is