The Best Frontend CSS Frameworks, UIkit

Minimalism, clean and sophisticated UI design

Personal portfolio results for publisher employment
It shows the most sophisticated and increases your competitiveness in employment.
The best CSS framework, UIkit
For the ability to utilize CSS Frameworks, which is essential for publishers.
Systematic learning and practical examples

Why? Should I use a CSS framework?

• You can improve your publishing and development process by using predefined classes and IDs for Forms, Grids, Components, Buttons, etc. using CSS framework.
• CSS frameworks are the best choice for cross-browser compatibility, rendering seamlessly across all browsers and browser versions.
• CSS frameworks can help you increase productivity and optimize your publishing and development workflows .
• Create clean, responsive layouts quickly and easily with the CSS framework's grid system.

You will learn in detail how to set up and use Live Sass Compiler in Visual Studio Code to use SCSS (SASS). In addition, you will learn in detail what to pay attention to in the settings, so that it can serve as a foundation for learning about core theories, examples of using core theories, and practical portfolio publishing that will follow.

Section 2. Practical publishing using UIkit framework components

We introduce various components provided by UIkit and learn in detail about HTML structure and CSS class for using individual components. We create a practical publishing example based on usage. We cover the most core UIkit components such as Accordion, Slideshow, Dropdown, lightbox, Off-canvas, Modal, Swicher, and Tab.

Section 3. Responsive web layout using UIkit framework components

Learn in detail about the HTML structure and CSS classes for using individual components related to responsive layout provided by UIkit. Create a practical publishing example of responsive layout using responsive layout components such as Column, Width, Grid, Slider, and Filter.

Section 4. Personal portfolio homepage created with UIkit components

In order to get a job as a publisher, it is essential to create a personal portfolio homepage. You cannot get a job simply by 'having' it. You must include various and rich publishing results on your personal portfolio homepage. And it is important to show the publishing results to the hiring manager in a sophisticated way. In order to show the publishing results in a sophisticated way on your personal portfolio homepage, you will learn how to compose the Mobile Web Section, Website Publishing Section, and Practical Coding Section by combining components such as Slider, Modal, Lightbox, Grid, and Width, and how to show the results through detailed explanations and examples.

Section 5. Download the completed version and student learning materials

You can download all the completed files created in Sections 2, 3, and 4, including the Student Reference Materials.

For a publisher job...

It is important to create a variety of publishing results.
And how stylishly you present your publishing results on your personal portfolio homepage is also very important for getting a job as a publisher.
UIkit is the CSS framework that allows you to create a personal portfolio homepage for publisher employment and display publishing results in the most sophisticated way.
You can create mobile web publishing work, website publishing work, and real-world publishing work by combining UIkit components such as Lightbox, Full Screen Modal, Slider, Slideshow, and Filter so that HR managers can view them conveniently and clearly without opening a new tab.

We recommend that you learn how to present your publishing results in the most sophisticated way through Coding Works' CSS framework, UIkit course.

Why does Coding Works recommend UIkit?

• Minimalism, clean and sophisticated UI design
• Support for various JavaScript components that are essential for publishers!
• An intuitive and easy-to-use CSS framework
• CSS coding method to control component options without JavaScript coding
• Components based on pure JavaScript (Vanila JavaScript) without using jQuery
• The best cross-browser CSS framework
• Ranked in the Top 5 CSS Frameworks Awareness and stability

UIkit official website : https://getuikit.com/docs/introduction

Best CSS Frameworks for Web Publisher Related
View Coding Works Inflearn blog post : https://www.inflearn.com/blogs/1071

UIkit official website component preview : https://getuikit.com/docs/accordion

▲ UIkit framework component - Accordion

▲ UIkit framework component - Alert

▲ UIkit framework component - Countdown

▲ UIkit Framework Components - Drop & Tooltip

▲ UIkit Framework Component - Heading

▲ UIkit Framework Components (Responsive) - Label & Link

▲ UIkit Framework Component - Leader

▲ UIkit framework component (responsive) - Lightbox

▲ UIkit framework component - Centered Modal

▲ UIkit Framework Component - Full Screen Modal

▲ UIkit framework component - Off-canvas

▲ UIkit framework components - Scroll & Totop

▲ UIkit framework component - Scrollspy (Scroll Reveal Animation)

▲ UIkit Framework Components (Reactive) - Slideshow

▲ UIkit framework components - Switcher & Tab

▲ UIkit Framework Components - Toggle

▲ UIkit Framework Component (Reactive) - Column

▲ UIkit Framework Components (Responsive) - Width & Grid

▲ UIkit Framework Components (Responsive) - Width & Grid

▲ UIkit Framework Components (Responsive) - Responsive Width & Grid

▲ UIkit Framework Component (Responsive) - Slider

▲ UIkit Framework Component (Responsive) - Content Slider

▲ UIkit Framework Component (Reactive) - Filter

▲ Showing personal homepage portfolio #01 (Mobile Web Publishing Section)

▲ Showing personal homepage portfolio #02 (Website Publishing Section)

▲ Showing personal homepage portfolio #03 (Practical Publishing Section)

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

First, you need to have some understanding of HTML+CSS and experience using it . This lecture is designed for those who have basic publishing skills. Please take note!

Additionally, since UIkit contains all of its scripts itself, no jQuery or JavaScript coding is required to learn and create practical examples, except in very special cases.

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 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 as a text editor, we recommend using it as much as possible since the Live Sass Compiler usage and environment settings are explained based on Visual Studio Code.

_{Download Visual Studio Code (click)}

※ There are detailed videos on how to use Visual Studio Code and extensions on the Coding Works YouTube channel, so be sure to watch them!

• 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
• How to install and use the Visual Studio Code essential extension

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

Q) Where can I download the complete theory examples, the complete practice examples, and reference materials?

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

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 them to your personal portfolio homepage, please change the images in Pixabay and FreePik and upload them. Pixabay / FreePik

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

The order of the example study is that you can study the individual lectures in whatever order you want without much difficulty. However, if you study by section, we recommend that you study them in order. 

For example, you should not study Section 3 and then study Section 2. Please study in the order of [Section 2] → [Section 3] → [Section 4] .

Q) Is there a video explaining intermediate CSS theory while creating examples?

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 theories. But you don't have to know them all. We will continue to repeat CSS beginner-intermediate theories while creating examples. And there is a detailed video of essential intermediate theories needed for creating examples on the [Intermediate Theory] CSS Intermediate Theory playlist on the Coding Works YouTube Publishing Channel, so it would be good to learn intermediate theories while taking this course.

❤ 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 Video] Best CSS Framework, UIkit Framework

• [Lecture Introduction Video] The Best Front-End CSS Frameworks, UIKit
• [Lecture Introduction Video] Comparing CSS Frameworks - Bootstrap vs UIkit

Section 1. Setting up and using the Live Sass Compiler in 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. Practical publishing using UIkit framework components

• How to install the UIkit framework and introduce the main components
• UIkit Components (How to Use) – Accordion
• UIkit Components (Practical Publishing) - Accordion
• UIkit Components (Usage and Practical Publishing) - Alert
• UIkit Components (Usage and Practical Publishing) - Countdown
• UIkit Components (Usage and Practical Publishing) - Cover
• UIkit Components (How to Use) - Drop & Tooltip
• UIkit Components (Practical Publishing) - Drop & Tooltip
• UIkit components (how to use and publish in practice) - heading (define titles with various styles)
• UIkit Components (Usage, Validation) - Label & Link
• UIkit Components (Practical Publishing) - Label & Link
• UIkit Components (Usage and Practical Publishing) - Leader
• UIkit Components (How to Use) – Lightbox
• UIkit Components (Practical Publishing) – Lightbox (Photo Gallery)
• UIkit Components (Practical Publishing) – Lightbox (Displaying Portfolio HTML Results)
• UIkit Components (How to Use) – Modal
• UIkit Components (Practical Publishing) – Modal (Subscribe to Newsletter Modal Window)
• UIkit Components (Practical Publishing) – Modal (iframe portfolio full-screen modal)
• UIkit components (how to use and publish in practice) - Off-canvas
• UIkit Components (Usage and Practical Publishing) – Scroll & Totop
• UIkit Components (Usage and Practical Publishing) - Scrollspy
• UIkit components (usage and practical publishing) – Slideshow (basic usage, Viewport)
• UIkit Components (Usage and Practical Publishing) – Slideshow (Content Overlay, Transition)
• UIkit Components (Usage and Practical Publishing) - Switcher & Tab (Tab Menu Content)
• UIkit Components (Usage and Practical Publishing) - Switcher & Tab (Tab Menu Content Application)
• UIkit Components (Usage and Practical Publishing) - Toggle
• UIkit Components (Usage and Practical Publishing) - Video

Section 3. Responsive web layout using UIkit framework components

• UIkit Components (How to Use) - Responsive Web Layout (Column)
• UIkit Components (Practical Publishing) - Responsive Web Layout (Basic Width Usage)
• UIkit Components (Practical Publishing) - Responsive Web Layout (Width Responsive Layout)
• UIkit Components (Practical Publishing) - Responsive Web Layout (Grid)
• UIkit Components (Usage and Practical Publishing) – Slider (Responsive)
• UIkit Components (Usage and Practical Publishing) – Filter (Coding Works Roadmap Filter)

Section 4. Personal portfolio homepage created with UIkit components

• Showcase your personal homepage portfolio #01 (Mobile Web Publishing Section)
• Showing off your personal homepage portfolio #02 (Website Publishing Section)
• Showcase your personal homepage portfolio #03 (Practical Publishing Section)

Section 5. Download the completed version and student learning materials

• [Finished Version] Section 2. Practical Publishing Using UIkit Framework Components
• [Finished] Section 3. Responsive web layout using UIkit framework components
• [Finished] Section 4. Personal portfolio homepage created with UIkit components
• Functional Description for Full Website Publishing (PDF)