Everything You Need to Know About CSS3 for Intermediate to Advanced Publishing

In the lecture [ Everything about CSS3 for intermediate to advanced publishing ]
You can acquire a solid understanding of publishing theory.
An essential course for developing intermediate to advanced publishing skills!!

Transform your vague theoretical skills into intermediate-level skills!
A solid theoretical foundation makes the difference in publishing results.

This course covers everything about CSS3 for intermediate to advanced publishing, including practical skills and tips using CSS selectors, CSS floats and positions, the display property, the box model and table styles, CSS pseudo-classes, and useful CSS3 properties.

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

You will learn in detail how to use Visual Studio Code essentials and extensions. You will also learn in detail how to use Emmet, which is essential for using the text editor.

Section 2. All About CSS Selectors

Learn everything about selectors, which are the starting point of CSS and the standard that distinguishes between beginner and intermediate CSS, including basic required selectors, using selectors with tags, class nesting, adjacent sibling selectors, attribute selectors, matching selectors in media queries, and selector precedence.

Section 3. All About CSS Floats and Positions

Apart from your ability to use Flex and Grid, the float and position properties are fundamental to all publishing work. CSS Float and Position You will gain a complete understanding of the float and position properties, which are the foundation of publishing in everything.

Section 4. All About the Display Property

All CSS theories are important, but if I had to pick one, it would definitely be understanding the display property. You will learn everything about the display property, which affects all publishing tasks, from macroscopic publishing tasks such as layout design to button creation and detailed element placement .

Section 5. All About Box-Model and Table Styles

Learn everything about the box model of individual elements, including the size of the element, margins, and spacing . Also, learn table styles for pretty table designs .

Section 6. All About CSS Pseudo Classes

The essential theory for advancing to intermediate-level publishing skills is understanding and utilizing CSS pseudo-classes. Learn everything about CSS pseudo-classes used in publishing practice .

Section 7. Practical Skills and Tips for Using Highly Utilizable CSS3 Properties

There are numerous publishing skills and know-how that cannot be limited to theory. Knowing the theory well and being able to apply it in this way and that kind of situation are two different things. Based on solid theory, learn publishing skills and know-how that are absolutely necessary in practice.

Q) How is it different from Season 1 and 2 of [HTML+CSS+JS Portfolio Practical Publishing], a Coding Works lecture?

[HTML+CSS+JS Portfolio Practical Publishing] Season 1 and Season 2 lectures are lectures that focus on creating practical publishing examples. Of course, there are explanations of theories, but since the lectures are centered on creating examples, there is not much explanation of theories. However, [All About CSS3 for Intermediate-Advanced Publishing] lectures focus on learning CSS theories for practical publishing. Therefore, creating practical publishing examples is not given much weight. It is an intermediate-advanced CSS theory lecture that teaches intermediate-advanced publishing theories.

Q) How much improvement in publishing skills can I expect after completing the course?

It's an obvious answer, but it's case by case. However , the content of the course [All About CSS3 for Intermediate-Advanced Publishing] is almost all the skills that intermediate-advanced publishers working in the field know and are realistically applying in the field. It's a course that reduces the time spent entering HTML and teaches more theoretical content. Of course , there are many theoretical contents in the lecture, but I think it's the student's job to repeat and apply them to make them their own .

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

First, you need a basic understanding of HTML+CSS . It is possible for beginners, but it may be a bit difficult for beginners. I think beginners can learn the basics of HTML+CSS on the Coding Works YouTube channel and then come to the lecture to understand the lecture well.

Q) Does the video include the entire process of coding HTML and CSS?

This course has a lot of theoretical material to learn. So, in order to reduce typing time and increase the amount of learning, there is no separate time to type HTML code in the video. The HTML structure is shown at the beginning of the video, and if you input the HTML and prepare, the CSS coding is explained one by one while inputting it. So, it is recommended that you learn how to use Visual Studio Code and Emmet sufficiently and then study.

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)}

Q) Is the learning order to be learned in order from the beginning?

As you move from one section to the next, the content from the previous section will be mentioned and repeated. Therefore, we recommend that you study in the order of the sections.

However, students can take the lectures in Section 7. Practical Skills and Tips Using Highly Utilizable CSS3 Properties in any order they need.

Q) Where can I ask questions if I don't understand something while studying?

If you have any questions, please post a post on the [Questions & Answers] board and I will answer you as soon as I confirm, even if it is not right away. Also, please be as specific as possible with your questions. It is not easy to get 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 the HTML, CSS coding screen you are writing, and a browser capture screen along with the content you are curious about .

❤ 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 0. Introduction to the Course

• [Course Introduction] Everything about CSS3 for intermediate to advanced publishing

Section 1. How to use Visual Studio Code

• How to use and set up Visual Studio Code
• How to use Emmet in Visual Studio Code
• How to install and use the Visual Studio Code essential extension
• Prevent Full Reload from going up when modifying CSS in Visual Studio Code

Section 2. All About CSS Selectors

• Basic required selectors, using selectors with tags, using nested classes
• Why Selector Priority Matters (Responsive Web Media Query Syntax)
• Adjacent sibling selector (input, checked pseudo-class)
• Attribute selectors 01 (basic format and cautions)
• Attribute selectors 02 (Using string check)

Section 3. All About CSS Floats and Positions

• Float property (horizontal placement, float property inheritance)
• Float property (find the height value of the parent element, perform arithmetic operations with the calc function)
• Position property (static, relative, absolute, fixed, sticky)
• Position attribute (establishing a parent element child element relationship)
• Position attribute (difference between absolute, fixed, and sticky)
• Position attribute (position) Positioning inside and outside the parent element
• Position property (z-index and position property priority)

Section 4. All About the Display Property

• display property (inline, inline-block, block features)
• display property (Easily create HTML structure using the display property)
• display property (non-web standard coding that occurs when there is no understanding of the display property)
• display property (3 ways to make an element invisible and their differences)
• display property (essential additional information for a complete understanding of the display property)
• display property (list-item, table, FLEX and GRID, importance of SCSS (SASS) utilization ability)

Section 5. All About Box-Model and Table Styles

• Box Model properties (width, height, auto, inherit)
• Box Model Attributes (box-sizing)
• Box Model properties (margin, padding, margin overlap, negative margin)
• Box Model properties (border, border-radius)
• Table style properties (all properties for table design)

Section 6. All About CSS Pseudo Classes

• hover pseudo-class (a tag state pseudo-class, everything about button design)
• hover pseudo-class (button design, drop-down navigation & content created by hover)
• Pseudo-classes that check the order (nth-child, first-child, last-child)
• Pseudo-classes that check order (nth-child, nth-of-type, other order-checking pseudo-classes)
• Practical example (hover pseudo-class, order check pseudo-class, position, display properties)
• before after Virtual Class (Basic Usage, List Bullet and Badge, Icon Font Unicode)
• before after Virtual Class (Basic Usage, List Bullet and Badge, Icon Font Unicode)
• before after virtual class (creating shapes and buttons, utilizing positions)
• before after virtual class (creating shapes and buttons, utilizing positions)
• before after virtual class (using overlay on background image)
• before after Virtual Class (User-defined properties and attr function - Notice Badge)
• before after virtual class (custom properties and attr function - Swap Hover Button)
• before after virtual class (automatic numbering counter function)
• Real-world example (vivid review header UI design using animation before and after)
• Pseudoclasses used for form elements (basic understanding of form elements)
• Pseudo-classes for form elements (required form pseudo-classes, login form CSS design) 01
• Pseudo-classes for form elements (required form pseudo-classes, login form CSS design) 02
• Pseudo-classes for form elements (required form pseudo-classes, login form CSS design) 03
• Using font icons in form element input (i tag, before Unicode)
• Pseudo-classes for form elements (validation, read-only pseudo-classes)
• A very useful pseudo-class to know (not to exclude certain selectors)
• Pseudo-classes that are very useful to know (is to reduce selector duplication)

Section 7. Practical Skills and Tips for Using Highly Utilizable CSS3 Properties

• All About CSS Centering (position, flex, grid, vertical-align, transform, place-items)
• All about img tags (2 ways to insert temporary images, removing image margins)
• Everything about using CSS background images, using images and gradients at the same time
• Reduce and reuse repetitive code using variables
• Filter property and filter property value automatic generator that provides various visual effects
• The column-count property for dividing into columns (vertically) (theory, responsive layout)
• The column-count property splits into columns (vertically) (Practical example - Responsive web layout)
• Disable mouse events pointer-events (Practical example - Card UI Hover Effect)
• Virtual class for decorating the first letter: first-letter
• text-overflow, white-space properties to create overflowing text truncation
• Set text writing direction to landscape or portrait (writing-mode, transform-origin)
• aspect-ratio sets the ratio of elements

Section 8. Essential CSS Core Theory and Utilization (Coding Works YouTube Link) and Download

• Must-learn! Introduction to the list of Coding Works YouTube lecture videos
• [Download] Completed publishing version (profile card, vivid review, login form, login form: is virtual class)
• [Download] Complete Publishing (Practical Skills and Tips Using Highly Utilizable CSS3 Properties)
• [Download] Everything about CSS3! Theory Video Explanation Text (PDF)

Coding Works

■ [Current] Freelance Front-end Publisher
■ [Currently] Operating HTML+CSS+JQUERY publishing YouTube channel 'Coding Works'
■ Green Computer Academy Web Publishing Instructor
■ Jo Eun Computer Academy Web Publishing Instructor
■ Now a Computer Academy Web Publishing Instructor
■ Front-end publisher, front-end publishing specialist instructor
■ UI/UX Web Design Portfolio Lecture
■ Web Design Technician Practical Certification Course
■ Easy & Edu Front-end UI/UX design and publishing

🌏 Coding Works Publishing YouTube Channel - https://www.youtube.com/codingworks
🌏Coding Works Publishing Blog - https://www.inflearn.com/users/@codingworks/blogs