강의

멘토링

로드맵

BEST
Programming

/

Web Development

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

Through various practical examples of HTML+CSS+JQUERY publishing for beginners and intermediate levels, you will learn the basics of publishing for intermediate publishing skills. In particular, through various practical examples, you will gain confidence in publishing by experiencing sufficient explanations and practical work. This is a publishing class that provides a sufficient amount of study time of over 41 hours. (It is more effective if you study CSS intermediate theory on the Coding Works YouTube publishing channel.)

(4.9) 174 reviews

3,552 learners

  • codingworks
HTML/CSS
jQuery

Reviews from Early Learners

What you will learn!

  • Improve your basic publishing skills with the core theories of HTML+CSS+JQUERY

  • Improve your website publishing skills and know-how

  • Accurate concept and use of block elements and inline elements

  • The exact concept and use of the position attribute

  • hover before after checked active Understanding and using virtual classes

  • How to use the text editor Brackets and Emmet

  • How to use the text editor Visual Studio Code and Emmet

  • Using Flex and the concept and use of the Transform property

  • Understanding and using adjacent selectors, attribute selectors, and checked virtual classes

  • Various mouse hover effects

  • Understanding and using Font Awesome

  • CSS tab menu content, JQUERY tab menu content creation ability

  • Understanding and using JavaScript variables (var) and conditional statements (if)

Coding Works, HTML+CSS+JQUERY Portfolio Intermediate Practical Publishing Course

' 143 classes total on publishing essential theories and practical examples'

' Nearly 42 hours total Practical publishing lecture video'

' Skill Up Essential Course for Publisher Employment'

' Hardcoding class for real skills in practical publishing'

📔 Hard coding skills are real publishing skills.

Publishing that is dynamic and flashy using jQuery plugins is not real publishing.

Real publishing skills are those that can meticulously design the layout with HTML, arrange and design in detail with CSS, and even create interaction with jQuery that you wrote yourself.

If you rely on the flashiness of using jQuery plugins and do not study the basics, it is not easy to get a job as a web publisher. Even if you get a job and start working, it is likely that each day will be difficult as a publisher.

Being able to hard code, that is, code each line of code yourself, is the real publishing skill.


Coding Works' lectures are thorough and accurate.

1. Publishing! Don't be too scared. Start with confidence. Getting started is half the battle .

2. Publishing! I can't say it's easy to get on track, but it definitely pays off .

3. Basic HTML+CSS+JQUERY hardcoding skills are important for getting a job as a publisher.

  • Coding Works publishing lectures do not use code that students cannot understand. We believe that a good lecture is one that allows students to understand the principles, and Coding Works lectures are produced that way.
  • For those who are new to web coding, we hope that you will gain confidence in publishing through easy and friendly lectures on core theories and practical examples.

I have something to say to those who are starting out with HTML+CSS+JQUERY publishing.

It's not easy to develop publishing skills to create a good website by hardcoding it all by yourself. It's hard, to be exact.

There are many theories to know, and you should have enough practical experience creating based on theories. You should also have some Photoshop UI design skills. Only then can you become a skilled person who can create a website worth seeing on your own.

However, you should not follow the 'Follow the Portfolio Website Creation' method without expanding your skills through faithful theoretical study and example creation using the theory mentioned above.

Of course, if you follow along diligently, you will get a result called a 'clone portfolio that copies someone else's work', but it will not lead to real skill.

If you are looking for a job as a web publisher or if you are a designer and want to be competitive with web publishing skills, you definitely need a personal portfolio website. Even if you create a personal homepage by following along without the thorough theoretical study and practical production experience I mentioned earlier, if you do not have hard coding skills, even if you get a job, you will quickly find out that you lack basic skills.

Before creating a personal portfolio website, please gain sufficient theoretical knowledge and experience creating various publishing examples using the theory.


📔 Guide to learning methods

The way I think about 'improving publishing skills' is...

When making a practical publishing example, first, just watch how to make it without any burden, the second time, make it while watching and following along, the third time, do it on your own without watching, and when you really can't remember, refer to the video and make it. Only then will it be recorded as your true skill.

※ Recommended learning method when studying publishing practice examples (1st to 4th learning and creating a final report)

  • 1st time - Just watch the video until the end without thinking about anything and without stopping in the middle. (The purpose is to understand the flow of production. To save time, watch it at about 1.5x speed.)
  • 2nd time - Watch the video and follow along, then stop, write your own code, check the browser, play it again, and so on.
  • 3rd time - Prepare only the source files (images, texts) without watching the video and create it yourself without the help of the video. (If you really can't think of anything, just watch it for a moment.)
  • 4th - For the personal portfolio homepage work that you will create later, prepare different text and images in the same format as the source file of the video but with a different subject, and create a personal work that does not deviate significantly from the production method and code of the video.


🙋🏻‍♂️ Expected questions and required reading related to the lecture

Q. Is there a video explaining intermediate CSS theory while making examples ?
A. ' There are a lot of intermediate theories that are not covered in the basic theory when making examples. Where can I take intermediate theory classes? ' This question is frequently posted on the bulletin board.

This course is not about creating a beginner publishing example. It is about creating a beginner to intermediate publishing example. So you should have some knowledge of CSS beginner and intermediate theories. But you don't have to know them all. We will continue to repeat CSS beginner and intermediate theories while creating examples. And there is a detailed video of the essential intermediate theories needed for creating examples in the playlist called [Intermediate Theory] CSS Intermediate Theory on the Coding Works YouTube Publishing Channel, so it would be good to learn the intermediate theories while taking this course.

Q. If I take this course, will I be able to work as a publisher in the field?
A. If you understand and can utilize all the publishing content in this course well, it is possible. However, publishing requires sufficient experience to work in the field. I think it would be enough to study a few more things like the current course and study a few of the entire website production processes. Of course, you should also create a personal portfolio homepage. The barrier to entry for publishing is higher than you think. Since watching a video once does not mean that all the content and know-how will be conveyed to the student, I hope you will make it your own through the learning method explained above.

Q. While creating a practical example, are there any parts in the theory section that aren't explained?
A. The basic theory videos for beginners are uploaded so that you can refer to them if you feel there is any theory that you lack. In the video of making a practical example, there is content that is not in the theory part. If you ask why there is content in the example that is not in the theory part, it will be difficult for me to answer.

Q. Where can I ask questions if I don't understand something while studying?
A. If you have any questions, please post a post on the [Questions & Answers] board and I will answer you as soon as I confirm it, even if it is not right away. Also, please
be as specific as possible with your questions. It is not easy to give 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 a screenshot of the HTML, CSS, and JQUERY coding screen you are writing along with the content you are curious about.

Q. There is a course on creating responsive websites. Which one should I take first?
A. Before taking the course to create a full responsive website, I recommend that you sufficiently improve your theoretical and practical example creation skills in this course and then come to the course to create a full responsive website.
Since it is a course to create a full responsive website, it is difficult to cover each part in detail like this course, so I think that if you are sufficiently trained in the practical publishing course and then come to the course to create a full website, your understanding will be much higher.

Q. Instructor, would it be a good idea to first look at the Publisher Job Search Real Practical Guide during class?
A. It is important to learn more publishing skills, but it is important to first establish the basics as a publisher. In the e-book (PDF) of the Publisher Employment Practical Guide, the publishing basics are thoroughly organized into the content that you must know as a publisher, such as desirable coding habits and principles, and publishing like an experienced person. We recommend that you first look at the e-book (PDF) of the Publisher Employment Practical Guide and study the publishing basics to gain a sufficient understanding. Click on the image below to see the class introduction.


📔 Update Guide

[Update Guide, Learning Method Guide] HTML+CSS+JQUERY Portfolio Publishing Essential Theory and Practical Example Production Course

Thank you for taking the Coding Works, HTML+CSS+JQUERY Portfolio Publishing Essential Theory and Practical Example Production Course. And thank you in advance to all those who will take the course in the future..^^

This course will be continuously updated for the time being. If there is an update, we will notify you through 'Inflearn News'. Please follow the existing theory and practical publishing well until the final update. ^^


📔 Section 4. HTML+CSS Practical Publishing Production (Part 2) - Updated (2020.08.18)

  • 01. Creating a practical example using virtual class hover (basic drop-down navigation)
  • 02.before after Creating a practical example using a virtual class (navigation hover effect - Border)
  • 03.before after Creating a practical example using a virtual class (navigation hover effect - content attr)
  • 04.before after Creating a practical example using a virtual class (navigation hover effect – Rotate)
  • 05. Styling radio buttons and check boxes as custom check boxes (using background images)
  • 06. Styling radio buttons and checkboxes as custom checkboxes (using FontAwesome icons)
  • 07. Creating a practical example using the virtual class for order check (personal profile card UI hover effect)
  • 08. Practical publishing using virtual classes related to forms (full screen search window with background image)
  • 09. Practical publishing using virtual classes related to forms (login screen)


📔 List of upcoming intermediate to advanced level Jump Up publishing theories and tips

We continuously update not only theories essential for creating practical examples, but also core theories and tips necessary for publishing skill up. If there is an update on the core theories and tips videos necessary for skill up, we will notify you through new news.

The core theories and tips videos needed for Skill Up will be sequentially updated in Section 7. Even if you haven't received any new news, please come to Section 7 and check if there are any videos you need to learn. Fighting~^^

※ You can receive a zip file of the completed learning examples studied in the Jump Up Publishing Theory and Tips video by clicking on the lesson materials in the upper right corner of the video.

Section 7. Intermediate to Advanced Level Jump Up Publishing Theory and Tips

  1. Chrome Extension Recommendations for Web Publishers (6) (Completed, 2020.05.31)
  2. Two ways to smoothly find the desired part with the A tag anchor (jQuery plugin, CSS property) (Completed, 2020.07.25)
  3. Using iframe to load and display another html inside the body (Completed, 2020.07.25)
  4. CSS click event created with :checked and extended selectors (adjacent selectors, sibling selectors, attribute selectors) of input tags (Completed, 2020.07.25)
  5. Using inline JavaScript (linking href to div, going back, going forward, refreshing, closing window) (Completed, 2020.07.26)
  6. Distinguishing between good and bad publishing instructors (understanding display properties) (Completed, 2020.08.2)
  7. Understanding relative font size em and rem units (Completed, 2020.08.2)
  8. Understanding Folder File Paths You Must Know When Creating a Website (Absolute Address vs. Relative Address) (Planned)
  9. Creating an Image Map that finds coordinates directly and codes them directly without relying on a generator (planned)
  10. Fully understanding the flower (before, after) of the virtual class that designs the front and back of an element (planned)

📔 Complete list of updated real-world publishing examples

  1. Publishing tab menu content with JQUERY (style 01) (Completed, 2020.05.30)
  2. As a publisher, you must know JavaScript, variables (var) and conditional statements (if) - 20-year-old adult check (Completed, 2020.06.02)
  3. Practical Publishing with JavaScript Variables and Conditional Statements for Star Ratings with jQuery (Completed, 2020.06.02)
  4. How to use Visual Studio Code and Emmet (Completed, 2020.06.05)
  5. Tab Menu Content - Style 02 (Prototype) with jQuery (Completed, 2020.06.07)
  6. Tab Menu Content - Style 02 (Practical Production) with jQuery (Completed, 2020.06.07)
  7. Changing the background image on mouse hover Publishing prototype with jQuery (Completed, 2020.06.07)
  8. Shopping Mall Item UI Hover Effect with jQuery (Completed, 2020.06.07)
  9. Coding Works Lecture Features Accordion Content Slide with jQuery (Completed, 2020.06.10)

💡 Section 6. Login Screen UI Design (Completed, 2020.06.20)

  1. [Part 01] Login screen UI design (production notes, HTML structure design, favicon insertion)
  2. [Part 02] Login Screen UI Design (CSS Design - Resizing and Positioning)
  3. [Part 03] Login Screen UI Design (CSS Design - Button Design and Checkbox and Label)
  4. [Part 04] Login screen UI design (CSS design - before and after divider design)

The Login UI Design Practical Web Page Publishing video has been updated. This updated lecture video consists of a total of 4 parts in Section 7. The complete version has also been uploaded for downloading. When practicing, download the complete version, delete index.html and style.css, and follow along slowly from the beginning of the video.

Publishing a login UI design is a static publishing without jQuery interaction, but it is considered an optimal example for studying all CSS properties across the board, including the core CSS properties such as box model, border, background image, color, and using checkboxes and labels.


💡 Pure CSS content slider prototype (Completed, 2020.06.16)

  • Fullscreen tab menu content created with pure CSS without using JavaScript or jQuery
  • After creating a prototype using background color, a practical application example using background image and text animation

▼ Pure CSS Content Slider Prototype 01 (Fullscreen Tab Content Slider Prototype)

▼ Pure CSS Content Slider Prototype 02 (Fullscreen Tab Content Slider Application)


💡 Landing Page Practical Publishing with jQuery Using Video Background (Completed, 2020.06.14)

  • Use a video as a background to fill the body, add soft background music, and adjust the volume.
  • Create a CSS keyframe animation that gradually reveals content when it starts
  • Decorate text formats in various ways with Google Web Fonts, create pretty button designs with CSS
  • Create an animated hamburger button with CSS that activates full-screen navigation
  • Show full screen navigation with jQuery (toggleClass, fadeToggle)
  • Applying a gradient overlay to a video frame with the virtual class :before
  • Preview the finished version: https://youtu.be/tuVTiZtii0s
  • Final version production notes: https://youtu.be/LcIKADuM7TA


Publishing tab menu content with JQUERY (Style 01) (Completed)

▼ As a publisher, you must know JavaScript, variables (var) and conditional statements (if) - 20-year-old adult check (complete)

  • A class to understand the concepts of JavaScript variables (var) and conditional statements (if)

▼ Practical Publishing with JavaScript Variables and Conditional Statements for Ratings with jQuery (complete)

  • Practical publishing using the concepts of JavaScript variables (var) and conditional statements (if)
  • jQuery Methods: addClass() removeClass() text() html() val() prevAll() nextAll() index()

▼ How to use Visual Studio Code and Emmet (complete)

▼ Publishing tab menu content (style 02) with jQuery (complete)

  • Change the design of the search box placeholder text
  • When you click on the search box (:focus), make the placeholder gradually disappear and when you release the click, make it gradually appear.
  • Designing tab menu content with CSS (especially border design)
  • Writing scripts for jQuery tab menu content functionality - addClass(), removeClass(), siblings(), custom attributes data-alt, var, attr() methods to get attributes
  • It is divided into two parts: prototype production and actual production, so learn the prototype first and then watch the actual production video.

Publishing prototype with jQuery that changes the background image when the mouse is hovered over it (complete)

  • Adding a background image with CSS (backgorund property)
  • Creating a text navigation that is filled in using the content: attr() of the virtual class :before
  • How to change background image with CSS by loading value in custom attribute with jQuery mouseenter and mouseleave with attr()

▼ Shopping Mall Item UI Hover Effect with jQuery (Completed)

  • Positioning parent and child elements with CSS and designing in detail
  • Show product details when the mouse is over it and blur the image with the CSS filter property.
  • Change design by selecting size and color (addClass, removeClass)
  • When you press the Like button, change the content of the virtual class :before to FontAwesome Unicode (toggleClass)

Coding Works Lecture Features Accordion Content Slide with jQuery (Completed)

  • Center horizontally and vertically with flex
  • Virtual Class: After Positioning the KakaoTalk Logo Exactly Where You Want It
  • When the title is over, the design changes and the arrow font awesome icon design changes and rotates
  • Clicking on the title changes the design of the title and displays the corresponding content in a sliding manner (addClass, removeClass, slideDown, slideUp)
  • When you click on the title, replace the value of data-image specified in the custom attribute of the image title on the right through attr()

▼ jQuery Responsive Animated Modal


💡 Preview of HTML+CSS Practical Publishing Course Results

▼ 01. Creating a practical example using CSS keyframe animation 01 (Circular size change loading animation)

▼ 02. Creating a practical example using CSS keyframe animation 02 (rectangle coordinate change loading animation)

▼ 03. Practical publishing using CSS keyframe animation 03 (double border radius animation)

▼ 04. Practical publishing using virtual class hover 01 (Product list with detailed description when hovered)

▼ 05. Practical publishing using virtual class hover 02 (Creating a tooltip that appears when the mouse is over it)

▼ 06. Practical publishing using virtual class hover 03 (over-the-top menu and other blurred navigation)

▼ 07. Practical publishing using virtual class hover 04 (hover navigation effect that separates up and down)

▼ 08. Practical publishing using virtual class hover 05 (App UI layer 3D hover animation)

▼ 09. Practical publishing using virtual class before and after 01 (basic usage before and after)

▼ 10. Practical publishing using virtual class before and after 02 (Animation hover navigation effect)

▼ 11. Practical publishing using virtual class before and after 03 (SNS icon animation)

▼ 12. Practical publishing using virtual class before and after 04 (text navigation using content attr)

▼ 13. Practical publishing using virtual classes to decorate input field designs (input fields using Font Awesome)

▼ 14~15. Practical publishing using virtual class order check 01 (Animation skill progress, delay)

▼ 16. Practical publishing using the order check virtual class 03 (Gallery image accordion navigation using Flexbox)

▼ 17. Practical Publishing 01 (Creating an Animated Hamburger Button) with Extended Selector and Virtual Class Checked

▼ 18. Practical publishing with extended selector and virtual class checked 02 (Creating animated side menu)

▼ 19. Practical Publishing 03 (Creating Tab Menu Content) with Virtual Class Checked with Extended Selector

▼ 20. Practical Publishing 04 with Checked Virtual Class with Extended Selector (Tab Content - Opacity)

▼ 21. Practical Publishing 05 with Checked Virtual Class with Extended Selector (Tab Content – Opacity Application)

▼ 22. Practical Publishing 06 (Tab Content - Slide) with Virtual Class Checked with Extended Selector

▼ 23. Practical Publishing 04 (Testimonial Tab Slider) with Virtual Class Checked with Extended Selector

▼ Accordion with jQuery

▼ Modal with jQuery & :target

💡 Must-read before learning

Before learning, you need to learn CSS Essential Theory and CSS Intermediate Theory first.

This course is a course that focuses on learning through examples. You need to learn CSS essential theory and CSS intermediate theory first. Therefore, you should know at least CSS essential theory and learn how to create examples. If you continue to study examples, the difficulty of the examples will continue to increase. Therefore, it can be burdensome because the unknown theories will continue to increase.

If you ask questions that are too basic, you will end up posting a lot of questions in the future. As the person answering the questions, if you ask questions that can be easily found by searching on Google, it will be no fun to answer them.

I'm not saying that you shouldn't ask basic questions. I studied on my own, but studying on your own is hard. When you get stuck, there's no one to ask, and it's frustrating. However, if you get stuck and have questions, Google it first. There are many contents that Korean bloggers explain very well. If you search and study but still have questions, ask me about them, and I'll explain them in detail to the best of my knowledge.

In order to improve your skills in the future, you will need to learn a lot of things while studying publishing.

Your skills will improve a lot as you learn on your own. However, there may be some parts that are difficult to find and understand on your own. I will help you with those parts. And you can ask questions about the content of the code from the example production in this course.

Just in case, I would like to add that rather than doing the examples now, I recommend that you first learn the essential and intermediate CSS theories on the Coding Works YouTube channel and then do the examples.

🌏 Coding Works YouTube Channel Playlist - CSS Essential Theory
https://www.youtube.com/watch?v=-1_e38zLCXw&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99

🌏 Coding Works YouTube Channel Playlist - CSS Intermediate Theory
https://www.youtube.com/watch?v=PLrDCRrXdRk&list=PLv_UUi9AVBVvr9gODWpz6aZUS6VNvdsYq

For reference, there is a lecture called [All About CSS3 for Intermediate to Advanced Publishing] among the Coding Works lectures. If you take this lecture, you will have a perfect understanding of CSS theory. After that, if you come to other example production and website production courses, you will be able to learn while understanding most of the learning content, so I think the learning efficiency will be very good.

❤ 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 this 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.

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

👨🏼‍🏫 Instructor Introduction

  • (Currently) Freelance Frontend Publisher
  • Jo Eun Computer Academy Web Publishing Instructor
  • Now a Web Publishing Instructor at Computer Academy
  • Front-end publisher, front-end publishing specialist
  • Now, the Computer Academy Web Design Technician Practical Certification Course
  • Lakpia ICT Training Center Front-end Publishing Master Course Instructor
  • Easy & Edu Front-end Publishing, UI/UX Design
  • HTML+CSS+JQUERY publishing YouTube channel 'Coding Works' operation
  • Coding Works Publishing YouTube Channel - https://www.youtube.com/codingworks

💡 Curriculum

※ If you know basic publishing theory, you can learn practical publishing production.
You can refer to the essential theories when needed while learning practical publishing production .

Section 0. [Preview] Preview of the completed HTML+CSS practical publishing example

  • [Preview of the finished version] HTML+CSS practical publishing production
  • [Complete version production notes] HTML+CSS practical publishing production
  • [Complete version production notes] HTML+CSS practical publishing production with jQuery
  • [Finished version production notes] Practical publishing of landing pages using video backgrounds with jQuery

Section 1. Using Brackets and Visual Studio Code

  • How to use Brackets and use shortcut keys
  • How to use Emmet in Brackets and use shortcuts)
  • Brackets Live Preview (Creating Folder Structure)
  • How to use and set up Visual Studio Code
  • How to use Emmet in Visual Studio Code

Section 2. Section 01. HTML+CSS+JQUERY Publishing Essential Theory

  • How to use HTML5 core tags (paragraph, text format)
  • How to use HTML5 core tags (creating a list)
  • How to use HTML5 core tags (links, images)
  • CSS Core Theory (What is CSS, CSS Linking, Basic Grammar)
  • CSS Core Theory (Selectors, Selector Application Priority)
  • CSS formatting properties (text style)
  • CSS formatting properties (list style)
  • CSS descendant selector vs child selector, parent element vs child element
  • CSS Box Model (border, border-radius) for detailed design
  • CSS box model for detailed design (width, height, padding, margin, box-sizing)
  • CSS Box Model for Detailed Design (box-shadow, text-shadow)
  • All About Publishing! HTML Inline Elements, Block Elements, Inline-Block Elements
  • Horizontally aligning HTML with CSS (float, overflow, clear, inline-block)
  • Designing CSS layouts with HTML5 semantic tags (parent elements, child elements, sibling elements)
  • Understanding CSS Position Property Completely (Part 1) – Parent Element vs. Child Element
  • Understanding CSS Position Property Completely (Part 2) – Automatically Centering Horizontally and Vertically
  • Understanding CSS Position Property Completely (Part 3) – Positioning Outside the Parent Element
  • CSS required pseudo-classes – mouseover effects (hover, transition)
  • CSS required pseudo-classes – pseudo-classes that create order (nth-child, nth-of-type)
  • CSS Essential Pseudo-Classes – Pseudo-Classes that Create Order (first-child, last-child)
  • Getting started with jQuery (folder structure, linking method)
  • jQuery Essential Core Theory (Creating Basic Syntax, Selectors)
  • jQuery Essential Core Theory (Function)
  • jQuery Essential Core Theory (Method)
  • jQuery Essential Core Theory (Effect Methods – slideDown, slideUp, fadeIn, fadeOut)
  • jQuery Essential Core Theory (Class Control Methods – addClass, removeClass, toggleClass)
  • jQuery Essential Core Theory (Element Search Method – children, siblings)

Section 3. HTML+CSS+JQUERY Practical Publishing Production

  • Practical publishing using CSS keyframe animation 01 (Circular size change loading animation)
  • Practical publishing using CSS keyframe animation 02 (rectangular coordinate change loading animation)
  • Practical Publishing Using CSS Keyframe Animation 03 (Double Border Radius Animation)
  • Practical publishing using virtual class hover 01 (Product list with detailed description when hovered)
  • Practical publishing using virtual class hover 02 (Creating a tooltip that appears when the mouse is over it)
  • Practical publishing using virtual class hover 03 (overlapping menus and other blurred navigation)
  • Practical publishing using virtual class hover 04 (hover navigation effect separated into up and down)
  • Practical publishing using virtual class hover 05 (App UI layer 3D hover animation)
  • Practical publishing using virtual class before and after 01 (basic usage before and after)
  • Practical publishing using virtual class before and after 02 (Animation hover navigation effect)
  • Practical publishing using virtual class before and after 03 (SNS icon animation)
  • Practical publishing using virtual class before and after 04 (text navigation using content attr)
  • Practical publishing using virtual classes to decorate input field designs (input fields using Font Awesome)
  • Practical publishing using the order check virtual class 01 (Animation skill progress)
  • Practical publishing using virtual class order check 02 (Animation skill progress, delay)
  • Practical publishing using order check virtual class 03 (Gallery image accordion navigation using Flexbox)
  • Checked virtual class with extended selector Practical publishing 01 (Creating an animated hamburger button)
  • Checked virtual class with extended selector Practical publishing 02 (Creating animated side menu)
  • Checked virtual class with extended selector Practical publishing 03 (Creating tab menu content)
  • Checked virtual class with extended selector Practical publishing 04 (Tab content - Opacity)
  • Checked virtual class with extended selector Practical publishing 05 (Tab content – Opacity application)
  • Checked virtual class with extended selector Practical publishing 06 (Tab content - Slide)
  • Practical Publishing 07 (Testimonial Tab Slider) with Pseudo-Class Checked with Extended Selector
  • Pure CSS Content Slider Prototype 01 (Fullscreen Tab Content Slider Prototype)
  • Pure CSS Content Slider Prototype 02 (Fullscreen Tab Content Slider Application)

Section 4. HTML+CSS Practical Publishing Production with JQUERY

  • HTML+CSS Practical Publishing Production with JQUERY - Tab Menu Content (Style 01)
  • As a publisher, you must know JavaScript, variables (var) and conditional statements (if) - 20-year-old adult check
  • Practical Publishing with JQUERY: Rating Using JavaScript Variables and Conditional Statements
  • Tab Menu Content - Style 02 (Prototype) with jQuery
  • Tab Menu Content - Style 02 (Actual Production) with jQuery
  • Change background image on mouse hover with jQuery
  • [Part 01] Shopping Mall Item UI Hover Effect - Wireframe Design, Creating Important Features
  • [Part 02] Shopping Mall Item UI Hover Effect - Detailed HTML Writing and Detailed CSS Design
  • [Part 03] Shopping Mall Item UI Hover Effect - Creating jQuery Interactions
  • [Part 01] Accordion Content Slide - Wireframe Design
  • [Part 02] Accordion Content Slide - Publishing Details
  • [Part 03] Accordion Content Slide - Interactive jQuery

Section 5. Practical Publishing of Landing Pages Using Video Backgrounds with jQuery

  • [Part 01] Landing page using video background - Web fonts, video control, logo
  • [Part 02] Landing page using video background - Creating animated content
  • [Part 03] Landing page using video background - Full screen navigation (trigger, modal design)
  • [Part 04] Landing page using video background - Full screen navigation (modal window jQuery interaction)
  • [Part 05] Landing page using video background - Overlaying video, inserting audio, and adjusting volume

Section 6. Practical Web Page Publishing - Login Screen UI Design

  • [Part 01] Login screen UI design (production notes, HTML structure design, favicon insertion)
  • [Part 02] Login Screen UI Design (CSS Design - Resizing and Positioning)
  • [Part 03] Login Screen UI Design (CSS Design - Button Design and Checkbox and Label)
  • [Part 04] Login screen UI design (CSS design - before and after divider design)

Section 7. Intermediate to Advanced Level Jump Up Publishing Theory and Tips

  • Chrome Extension Recommendations for Web Publishers (6)
  • Create an A-Tag Anchor and Smooth Scrolling in Two Ways (JQuery Plugin, CSS Property)
  • Using an iframe to load another html inside the body
  • Extended selectors using input and checked (adjacent selectors, sibling selectors, attribute selectors)
  • Using inline JavaScript (onclick JavaScript event)
  • Distinguishing between good and bad publishing instructors (understanding display properties)
  • Understanding relative font size em and rem units
  • Understanding inherit, which inherits the value of the parent element
  • CSS calc() Arithmetic expressions (basic operations)
  • Using variables var() in CSS
  • How to use the virtual class flower (:before :after)
  • Creating an image map with hardcoding

Section 8. [Download] Source files and finished version used to create the example

  • [Complete Version] HTML+CSS Practical Publishing
  • [Complete Version] HTML+CSS Practical Publishing with jQuery
  • [Finished Version] Landing Page Practical Publishing with jQuery Using Video Background
  • [Finished Version] Practical Web Page Publishing - Login Screen UI Design
  • [Download] Visual Studio Code and Emmet

Interview and employment-inducing publisher personal portfolio homepage production, scss, sass, flex, grid, html, css, html/css, website, web publisher, publisher employment, website, coding, coding, jquery, javascript, jquery, javascript, layout, interactive web, interactive web, web design, web design, portfolio, publishing, responsive web, web design technician practical exam, bootstrap, bootstrap, css frameworks, framework

Recommended for
these people

Who is this course right for?

  • If you are new to web coding

  • Those who want to make website maintenance and corrections themselves

  • Those who want to change their career from web design to web publishing or strengthen HTML+CSS+JQUERY publishing

  • Web planners who want to increase their understanding of web publishing

  • Developers who want to improve their understanding of front-end publishing

  • Those preparing for the Web Design Technician practical exam

Need to know before starting?

  • Basic computer skills and internet browser skills

  • Basic English typing skills for coding

Hello
This is

12,603

Learners

743

Reviews

2,113

Answers

4.9

Rating

23

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

142 lectures ∙ (41hr 42min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

174 reviews

4.9

174 reviews

  • Bam Bee님의 프로필 이미지
    Bam Bee

    Reviews 2

    Average Rating 5.0

    5

    48% enrolled

    냉정하게 말해드립니다. 모학원 150만원내고 6개월 듣느니 이 강의 5만원내고 그냥 하루2시간씩 1달만 꾹꾹 참고 들어보세요. (2회독추천) 따분한 이론같은거 없이 진짜 알맹이,핵심만 알려줍니다. (F모 온라인강의에서 첫강의에 HTML 역사하는거보고 1초컷 환불함) 보통 온라인 강의하시다 강사분들이 실수하시는게 처음에 천천히하다가 뒤에 실전파트 어려운거나오면 설명하기 귀찮은건지, 페이스가 신나서 빨라지시는건지 모르겠지만 설명하지도 않은 코드쓰면서 속도는 4배속으로 빨라지는데 여기는 처음 페이스 그대로 초심자 맞춰서 끝까지 가줍니다. 난이도? 솔직히 중학교이상 졸업했는데 이 강의가 어려우면 퍼블리싱은 이번생에 인연이 아닌걸로 생각하셔도 될 정도로 친절하고 쉽습니다. 참고로 저는 문과에 C#만알고 HTML,CSS이라는 단어자체가 처음이였습니다. 바라는점 ? 1. 원페이지라도 웹페이지 하나 전체를 퍼블리싱하는 실무가 있었으면 좋겠습니다. (쇼핑몰처럼이라던지) 2. HTML,CSS 레이아웃을 보통 하나하나 만들기보다 어디선가 퍼오던데 그런꿀팁장소도 공유해주시면 감사하겠습니다. (설령 추가결제 강의로 나오더라도 구매의사있음)

    • 코딩웍스(Coding Works)
      Instructor

      안녕하세요. 코딩웍스입니다. 부족한 강의에 너무 과찬을 해주셔서 부끄럽습니다. 제가 지금 학원에서 강의를 하고 있지만 저의 철칙은 '모르는 코드 사용하고 학생들에게 외우세요' 라고 말하는건 절대 하지 않습니다. 모르는 코드를 쓰면서 결과를 내는건 결코 바람직하지 않다고 생각합니다. 저도 모르는게 많아서 학생들에게 이해시키려고 쉬운 방식을 항상 고민하고 있습니다. 지금 강의 들으시는 '실전 퍼블리싱 예제 제작 과정'에 이어서 말씀하신 원페이지로 반응형 웹사이트 전체 제작과정을 처음부터 끝까지 함께 만드는 강의는 레코딩 중 입니다. 웹사이트 전체를 퍼블리싱하는 강의이다 보니까 영상 제작 시간이 꽤 걸리더라구요. 원래 이거 먼저 오픈하려했는데 늦어지는 바람에 실전 퍼블리싱 강좌 먼저 오픈했습니다. 아시겠지만 퍼블리싱 중에서 가장 어려운 파트가 웹사이트 전체 레이아웃을 위한 HTML 와이어프레임 설계가 제일 중요한데 제가 특히 웹사이트 전체를 퍼블리싱하는 과정을 강의하는걸 잘하는 편이거든요. 열심히 준비하고 있으니 조금만 기다려주세요. 힘든 시기지만 퍼블리싱 열심히 공부하시는 만큼 반드시 충분한 보상으로 돌아갈거라 확신합니다. 좋은 후기 다시 한번 감사드립니다.^^

  • wodndi0321님의 프로필 이미지
    wodndi0321

    Reviews 13

    Average Rating 5.0

    5

    45% enrolled

    신입 퍼블리셔로 회사에 다니면서 정말 막막하고 잘 몰랐던 부분을 해소 시켜주기 딱 좋은 강의였던 것 같습니다. 우선 무엇보다 이해가 너무너무 잘 됩니다. 코딩웍스님 강의는 대체적으로 눈높이에 맞는 그리고 실무경험이 풍부하신 덕에 회사에서 도움이 될 만한 부분들이 정말 많았습니다. 강의도 무제한이니 까먹고 헷갈릴때마다 찾아서 볼 수 있어서 너무 좋구요, 다른 강의도 들어 볼 예정입니다. 정말 감사합니다 :)

  • 세계수님의 프로필 이미지
    세계수

    Reviews 4

    Average Rating 5.0

    5

    71% enrolled

    현재 코딩웍스 열공중인 프론트엔드 개발자 지망생입니다. HTML,CSS를 다른 책이나 강의로 한번봤지만 제대로 된 화면 하나 만드는게 많이 어려웠었습니다. 정말 우연히도 유튜브 알고리즘에 의해 코딩웍스 강의를 두개쯤 본 후 바로 결제했습니다. 이 강의 듣기전에는 분명히 강의도 보고 책도 봤는데 마크업이 낯설어 하기 힘들었지만 지금은 오늘 할 분량의 예제를 미리 실행시켜보고 구현하는 재미에 빠져있습니다. 리액트 공부해야되는데 마크업 작업을 더 열심히 공부하는 중이네요 ㅎㅎㅎ 저의 경우는 제이쿼리보다는 바닐라 자바스크립트로 DOM 제어를 하는게 편해 제이쿼리 강의는 듣진 않았지만 코딩 입문자 분들은 제이쿼리로 동적인 화면 만드는 것을 한번 경험해보시면 좋을거 같습니다. 현재 중급자 CSS 강의까지 같이 샀고 시즌1 어느정도 진행되면 같이 들을 예정입니다. 일단 1월말까지 시즌2와 중급자 CSS이론 완강을 목표로하고 있습니다. 이런 강의 만들어주셔서 감사합니다.

    • 구체적인 수강평이라 예비 수강생들에게 좋은 참고가 될 것 같습니다. 재밌게 공부하시고 궁금하신 내용 있으시면 질문주세요~!!

  • good love님의 프로필 이미지
    good love

    Reviews 1

    Average Rating 5.0

    5

    80% enrolled

    다른 강의도 듣고 있는데 수강평 쓸수있는 있는 강의를 못찾아서 여기 씁니다! 정말 정말 퍼블리싱 강의로 강추 드려요! 선생님 강의로 공부해서신입 퍼블리셔로 취업하고 어느덧 1년차가 되었어요! 이 강의로 실제 포트폴리오작업하고 면접까지 봤던 때가 생각이 납니다!! 작업하다가 궁금한 부분은 지금도 틈틈히 신청해놨던 강의들 찾아보고, 업데이트 올라온 강의 있으면 또 찾아보고 선생님 유튜브도 찾아보고 있어요 기초부터 탄탄하게 정말 쉽게 가르쳐 주셔서 잘 믿고 따라가시면 됩니다 ! 선생님 정말 감사하다는 인사드리고싶어서 수강평 남겨요! ㅠㅠ 앞으로도 꾸준히 강의 많이 해주셨음 좋겠습니다 !! 지금은 연봉 협상을 앞두고 있는데 flex, grid, scss 등 안가르쳐주신 게 없어서 저의 자신감의 근본이 되어주시는 선생님 입니다.. ㅠㅠ 제가 습득이 느린 편이라 여러모로 부족한게 많지만 더 열심히 할 마음으로 잘 배우겠습니다 연봉 올라갈 수 있게 응원해주세요!! ㅎㅎ 감사합니다 선생님

  • toisaj님의 프로필 이미지
    toisaj

    Reviews 7

    Average Rating 5.0

    5

    18% enrolled

    최고의강의입니다 이거 듣고 독학으로 취업해서 2년차입니다 ㅎㅎ

    • 늦은 수강평이지만 이런 수강평 보고 다른 수강생들이 힘 낼 수 있을 것 같습니다. 감사합니다~!!

$36.30

codingworks's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!