Danh mục UIUX Phần 3 - Danh mục Web đáp ứng
lizb
Bước thứ ba trong quy trình lập kế hoạch-thiết kế-triển khai - tạo mẫu danh mục đầu tư web đáp ứng
초급
Responsive Web, JavaScript, jQuery
Easy! Short! Strong! Preparing for the Web Design Technician Practical Exam
We have prepared a short and easy course for those preparing for the Web Design Technician practical exam. Even if it's not just for the exam, anyone interested in implementing a site that meets web standard formats is welcome.
What you will gain after the course
You don't need a high score to pass the certification exam! Just those who want to pass
Understanding the types of questions on the Web Design Technician practical exam
Web Design Technician Practical Problem Solving and Practice
For those who want to prepare for the exam by extracting only the necessary content in a short period of time
HTML/CSS+jQuery Core Theory Practice
Get ready for something easy, short, and strong!
Complete Guide to the 2021 Web Design Technician Practical Exam
Study short and powerfully for one month!
Study hard for about 30 days, you can pass even if you don't know the 'code' of coding.
Just pick out the content you need, study it, and you will pass.
Save time by extracting only the content you need to pass!
✅ You will discover the joy of coding through easy and fun lessons!
✅ One thing to note is that it is a good class to learn and study the basics of web standards. I would appreciate it if you took the HTML basics class on Inflearn and took the class!
✅ If you want to get a job in web design? In particular, those with a web design qualification are often given preference. That's because they are prepared.
What you will learn in this course ✔
- Identify and analyze the problem types, select only the necessary content, and learn easily!
- Web Design Technician Practical Exam Questions, Complete Guide Without Any Gaps
- Learn how to design HTML information
- Creating screen layouts with CSS
- Creating dynamic screens with jQuery (slides, navigation, tab menus, layer popups)
- You can memorize the parts you don't understand. Making slides isn't difficult!
- jQuery Slide Animations (Horizontal Slide, Vertical Slide, Fade-In/Out Slide)
- Essential Photoshop CS6 usage and image production video for the web design technician practical exam
- Download the final 12 production files
📚 Lecture Structure
Section 00. Introduction to the practical exam course for web design technician certification
- Introduction to the practical exam course for web design technician certification
- Web Design Technician Practical Examination Procedure, Tips, and Submission Method
Section 01. Learn how to use the editor used for coding
- How to use Brackets and use shortcut keys
- How to use Emmet in Brackets and use shortcuts)
- Brackets Live Preview (Creating a Web Design Technician Practical Exam Folder Structure)
Section 02. Creating content images using cs6
- How to create an image
- How to create slider images with improved readability
Section 04. Identify and create A, B layout
- Full Prototype Design
- Type 1) AB header CSS/Script
- Type 2) AB header CSS/Script
- Type 3) AB header CSS/Script
- Type 4) C header CSS/Script
- Type 5) C header CSS/Script
.gif) | .gif) |
.gif) | .gif) |
.gif) |
- Type 1) Slider (left-right type) CSS/Script
- Type 2) Slider (top-bottom) CSS/Script
- Type 3) Slider (Fade-in/out type) CSS/Script
.gif) | .gif) |
.gif) |
- Type 1) Content CSS/Script(Tab menu/popup)
- Type 2) Content CSS/Script(Tab menu/popup)
.gif) | .gif) |
- Footer CSS
.gif) | .gif) |
- Check the final completed file
Section 05. Essential Check! Raise your score
- Essential items for high scores on the web design practical exam (tips, deductions, error checks, etc.)
※ Download the completed version (follow along once for each type!)
- [01A-1] Completed production version
.gif)
- [02A-2] Completed production version
.gif)
- [03A-3] Completed production version
.gif)
- [04A-4] Completed production version
.gif)
- [01B-1] Completed production version
.gif)
- [02B-2] Completed production version
.gif)
- [03B-3] Completed production version
.gif)
- [04B-4] Completed production version
.gif)
- [01C-1] Completed production version
.gif)
- [02C-2] Completed production version
.gif)
- [03C-3] Completed production version
.gif)
- [04C-4] Completed production version
.gif)
Recommended for
these people
Who is this course right for?
If you have a fear of coding, we'll make it one stitch at a time!
If you want to learn the basic principles and coding that meets web standards
If you want to learn the core technologies of web standard coding!
Need to know before starting?
Basic HTML/CSS knowledge
778
Learners
42
Reviews
92
Answers
4.7
Rating
7
Courses
지식공유자의 오프라인 국기과정의 수강평 보기
"반응형 웹디자인 양성 과정" 수강후기 바로가기
(2022.03-2022.07)
3월부터 현재까지 길다면 길고 짧다면 짧은 시간이었겠지만 제 인생에선 정말 중요하고 값진 기간이었던 것 같습니다. 사전에 지식은 어느정도 있긴 했지만, 어떻게 해야할지, 어떤 방향으로 가야할지, 뭘 해야할지 아무것도 모르고 막막했는데 선생님께서 성심성의껏 가르쳐주셔서 기술면에서도, 취업면에서도 확고하게 큰 성장을 이룰 수 있었던 것 같습니다.덕분에 자신감도 많이 늘고, 취업 이후에도 잘 할 수 있을 것 같다는 생각이 들어요! 수업 진행해주신 방미정 선생님, 그 외 취업 당담 선생님들께 너무 감사합니다! :) 취업 잘 하고 갑니당! 이후 기수분들도 힘내시고 좋은 경험 얻어가시길 바랄게요! 화이팅 :)
3월부터 7월까지 웹 퍼블리셔 양성과정을 수강했습니다 :) 디자인 외에 아무것도 모르고 도전 했던 건데, 선생님과 동료들의 응원과 지지로 많은 걸 얻고 가는 거 같습니다. 학원에서 배운거 토대로 앞으로도 공부 열심히 해보겠습니당~~ 항상 친절히 알려주셨던 방미정 선생님, 그 외 취업 담당 선생님들께 너무 감사합니다!
"프론트앤드 개발자 양성과정" 수강후기 바로가기
(2020.11.17-2021.05.11)
6개월이라는 시간이 짧게 느껴질 정도로 훈련과정이 흥미로웠습니다. 아이디어를 내고 디자인을 하는 작업은 시간이 오래 걸렸었지만 훈련과정을 통해 요령도 생기고, 작업 시간을 많이 단축시켜가는 제 모습을 보며 실력이 점점 발전한 것 같아 뿌듯하였습니다. 직업의 방향성을 잘 잡지 못하던 저에게는 이 훈련과정을 통해 배운 학습들은 나만의 지식이자, 직업의 방향성을 잡아준 이정표였고, 6개월간 함께 공부했던 프론트앤드 개발자 양성과정 3강의실 언니 오빠 동생들과 방미정 강사님은 좋은 인연이자 버팀목이었습니다. 방미정 강사님과 취업 지원팀 분들, 행정직원분들께서 열심히 도와주셨기에 훈련과정을 수료하기 전에 취업을 하게 된 것 같아 너무 감사드립니다. 이 과정 이외에 다른 좋은 과정들 또한 많이 있어 대우직업능력개발원 이란 학원을 저처럼 취업에 대한 두려움이 있거나, 직업의 방향성을 잘 잡지 못하는 후배와 동생들에게 추천해주고 싶습니다.
처음 왔을 때 디자인도, 코딩도 한 번도 배우지 못한 제가 과연 이 과정을 듣고 취업을 할 수 있을까? 라는 걱정을 많이 했던 것 같습니다. 하지만 다니면 다닐수록 그런 걱정이 사라졌던 것 같아요. 일러스트, 포토샵, html, css, js, vue등 많은 것을 배웠습니다. 새로 배우는 게 많아서 초반에는 어려울 수도 있겠지만 열정 가득한 방미정 선생님께서 정말 잘 알려주셔서 걱정 안 해도 될 것 같아요.ㅎㅎ 다른 학원 후기를 보면 매년 같은 레파토리의 수업, 심지어 선생님께 질문해도 잘 모르는 경우가 있는데 선생님께서는 항상 열정을 가지고 새로운 것도 알려주려고 하시고 아는 것도 많으셔서 도움을 많이 받았습니다! 웹퍼블리셔, 웹디자이너가 되길 원하신다면 강추드립니다.~~
작년 2020년 11월 우연한 기회로 대우직업능력개발원이라는 훌륭한 기관을 알게되고 ,이곳에서 훌륭한 선생님을 만나 좋은교육을 수강할수있게된것에 정말 감사드립니다 만일 제가 이 교육훈련과정을 듣지 않았더라면 아마 지금과 같은 취업기회는 생기기 어려웠을것입니다. 대학졸업후, 취업의 갈림길에서 갈피를 못잡고 방황하던시기에 어디서도 교육받기 어려운 선생님의 실제 실무경험과 노하우가 담긴 5~6개월간의 교육과정은 웹개발이라고는 전혀 알지못했던 제게 큰 배움과 성장의 기간이 되었습니다. 이를 기반으로 다양한 디자인과 웹개발을배웠고 저만의 포트폴리오 또한 만들수있었습니다. 제게는 너무나 생소한 코딩언어들을 배우는 일이 어려워 중도포기하고 싶은 순간들이 여러번 있었지만 포기하지않고 열번이고 다시 가르쳐주시는 선생님의 열정과 이끄심 덕분에 6개월과정을 모두 수료하기 이전(80%이상 수강)에 조기취업이되며 교육과정을 잘 마무리 할 수 있었습니다. 이렇게 첫 직장을 구하고 새출발 하는것이 가능하도록 만들어주신 선생님과, 대우직업능력개발원 기관에 깊은 감사를드립니다.
비전공자도 이해하기 쉽게 알려주셨고 덕분에 취업도 잘했습니다. 이 과정을 듣게 되어 너무 기쁩니다.
디자인, 코딩 툴을 실무에서 사용할 수 있는 커리큘럼에 맞추어 차근차근 기초에 맞추어서 설명해 줍니다. 본인 스스로 작업할 수 있도록 선생님이 최선을 다해서 도와주셔서 많은 도움이 되었습니다. 국비로 하는 수업은 퀄리티가 떨어진다는 편견을 깰 수 있는 교육이었고 , 담임선생님도 매우 진취적이어서 늘 새로운 걸 가르쳐 주려고 하셔서 많이 배울 수 있었습니다.
비전공자도 이해하기 쉽게 알려주셨고 덕분에 취업도 잘했습니다. 이 과정을 듣게 되어 너무 기쁩니다.
기존에 알고 있던 왠만한 지식 플러스로 학원에서 교육을 받으며 다양한걸 알고 배웠습니다. 자격증도 딸 수 있도록 연습도 해주면서 저에게는 어려웠지만 코딩이란 단어도 왠만하면 알아들을 정도로 배웠습니다. 이곳을 수강하면서 취업도 같이 하게되어 마음이 놓이고 기쁩니다.
건축학을 전공했고 웹디자인과 인연을 맺은건 언 20여년이 넘었습니다. 실무와 강의를 병행하며 많은 희노애락 끝에 현재는 이 일을 많이 애정하게 되었고, 흥미와 성취감으로 더 매진하게 되었습니다. 제가 알고 있는 지식들을 공유하여, 좀더 많은 비전공자들이 쉽게 입문하기를 바라며, 그대가 원하는 모든 일들이 이루어 지길 기원합니다.
Lucete!
강의관련 문의 email : loo4love90@gmail.com
강의경력
2018.3 -현재. 웹 디자인/멀티미디어/프론트엔드 전문가과정 진행
엘리스 아카데미 `클래스가 다른 HTML / CSS` 오픈 준비중
엘리스 아카데미 `클래스가 다른 javascript` 오픈 준비중
□ 現 대우직업능력개발원 프론트엔드 / 멀티미디어 / 웹콘텐츠 과정 강의
□ 하이미디어 UI/UX 웹퍼블리싱 강의
□ 이젠컴퓨터 UI/UX 웹퍼블리싱 강의
□ 더조은컴퓨터학원 종로캠퍼스 웹디자인 강의
□ 더조은컴퓨터학원 강남캠퍼스 웹디자인/그래픽 강의
□ 영재직업전문학교 웹디자인 강의
자격증
□ 웹디자인기능사 자격증
□ 그래픽스운용기능사 자격증
□ KPC 자격지도자(GTQ,GTQi,GTQid) 자격증
□ 직업능력개발훈련교사3급(정보기술, 디자인,문화컨텐츠,정보기술전략·계획
정보기술운영)
□ 컴퓨터활용능력 1급
Curriculum
All
34 lectures ∙ (5hr 46min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
5 reviews
4.0
5 reviews
enyalife12235952Reviews 3
∙
Average Rating 5.0
5
18% enrolledCó thể hơi khó khăn với người mới bắt đầu nhưng sẽ không sao nếu bạn có một số kiến thức cơ bản. Nó giúp ích rất nhiều cho việc chuẩn bị cho kỳ thi lấy chứng chỉ kỹ thuật viên thiết kế web.
- lizbInstructor
Cảm ơn Tôi sẽ cổ vũ bạn để bạn vượt qua chứng chỉ.
- chloe360
Reviews 22
∙
Average Rating 5.0
- cherryberries6587
Reviews 1
∙
Average Rating 4.0
4
100% enrolledNếu bạn không biết những điều cơ bản về HTML và CSS, bạn sẽ không thể hiểu được bất cứ điều gì. Nó sẽ đi thẳng về phía trước mà không có lời giải thích ngắn gọn, vì vậy bạn phải tiếp tục tìm kiếm nó ngay cả khi bạn theo dõi, vì vậy tôi nghĩ bạn nên xem nó với một số kiến thức cơ bản. Nó thuận tiện hơn vẻ ngoài của việc nhanh chóng vượt qua kỳ thi thực hành trong một khoảng thời gian ngắn và dường như có nhiều nội dung có thể hữu ích hơn khi thực sự tạo một trang web, mặc dù nó có thể thuận tiện khi tạo một trang web thực tế bằng cách. sử dụng cấu hình đa dạng hơn các bài giảng khác, Những người đang cố gắng nhanh chóng đạt được chứng chỉ kỹ thuật viên hầu hết đều ghi nhớ nó, nhưng nếu bạn không tuân thủ đúng quy trình tổng thể, bạn sẽ không thể sử dụng nó và nó có thể phức tạp và khó để ghi nhớ và áp dụng nó trong một khoảng thời gian ngắn. Tôi muốn giới thiệu nó cho những ai muốn từ từ hiểu dòng chảy và sáng tạo thuận tiện hơn. Tôi nghĩ bây giờ tôi sẽ chỉ sử dụng những phần ngắn gọn, nhưng tôi nghĩ sẽ rất tốt nếu tôi xem lại và nghiên cứu thêm sau khi thực sự. tạo một trang web.
- lizbInstructor
Cherry, cảm ơn phản hồi của bạn ^^~ Tôi cũng ước mình đã suy nghĩ sâu sắc hơn và tạo ra bài giảng dưới góc nhìn của những người tham gia kỳ thi kỹ thuật viên, đồng thời làm cho nó dễ hiểu bằng mã có thể ghi nhớ một cách đơn giản. Như bạn đã nói, sẽ rất hữu ích nếu bạn tham gia lớp học khi có thời gian, nhưng tôi nghĩ tôi đã bỏ qua một thực tế là hầu hết mọi người đều chuẩn bị cho kỳ thi khi không còn nhiều thời gian! Nhân cơ hội này, tôi sẽ cố gắng suy nghĩ nhiều hơn từ góc độ của học sinh và tạo ra những bài giảng hữu ích. Chúng tôi cũng đã triển khai một khóa học cơ bản mới và tôi nghĩ khóa học mới này sẽ giúp ích rất nhiều cho những lĩnh vực còn thiếu sót. Cảm ơn phản hồi chân thành của bạn và tôi hy vọng bạn vượt qua!
- apollothegam3r1798
Reviews 2
∙
Average Rating 4.0
4
100% enrolledTrước hết, nếu bạn học bài này mà không biết căn bản về HTML, CSS và JavaScript thì sẽ khá khó khăn. Nhịp độ quá nhanh và những lời giải thích chỉ được đưa ra một cách trôi chảy. Ví dụ, lời giải thích tập trung vào việc ghi nhớ hơn là nguyên tắc và hiểu biết nên từ góc độ người xem, tôi mong muốn có nhiều lời giải thích hơn. Tôi giới thiệu nó cho những người có kiến thức cơ bản và muốn tìm hiểu thêm về mã JavaScript (Và bạn sẽ cần phải nhanh tay để xem các bài giảng.) Tôi mua khóa học vì muốn sao chép 12 ví dụ trong tệp do sinh viên cung cấp, nhưng có cảm giác như trang web được tạo ra với các thông số kỹ thuật cao hơn gấp mấy lần so với yêu cầu của bài kiểm tra kỹ thuật viên. dựa trên tiêu chuẩn..? Tóm lại, có vẻ như hồ sơ do thí sinh cung cấp có giá trị hơn bài giảng. Tôi nghĩ bạn sẽ hài lòng nếu học những điều cơ bản trong khóa học hoàn chỉnh dành cho người mới bắt đầu và xem bài giảng này.
- lizbInstructor
Tôi đồng ý với bạn rằng nó rất khó và lời giải thích chưa đầy đủ, tôi sẽ cố gắng phản ánh điều đó trong bài giảng tiếp theo. Khi tạo khóa học, tôi đã suy nghĩ rất nhiều về việc có nên thêm khóa học dành cho người mới bắt đầu hay không, nhưng tôi nghĩ rằng tôi đã bỏ lỡ phần đó vì có nhiều khóa học miễn phí tại Infrun và các khóa học khác. Tôi rất tiếc đã đưa cụm từ như vậy vào phần mô tả bài giảng chi tiết. Bây giờ tôi sẽ phản ánh nó. Apollo TV, bạn đã học tập chăm chỉ. Tôi hy vọng bạn có một ngày tốt lành.
- chocousb8145
Reviews 1
∙
Average Rating 2.0
2
24% enrolledBắt đầu ngay hôm nay Tôi nghĩ những người không có kiến thức cơ bản về HTML, CSS, v.v. sẽ hối hận khi tham gia lớp học. Mình đang học lớp 8/26, chắc phải nghe review tổng thể hơn mới biết được.
- lizbInstructor
Tôi đã đưa HTML và CSS cơ bản làm kiến thức tiên quyết. Có vẻ như bạn đã gặp khó khăn với lớp học này. Trong các bài giảng khác, tôi sẽ thưởng cho bạn những bài giảng dễ hơn và nhiều thông tin hơn.
$38.50
lizb's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế web강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![Chức năng phát triển thiết kế web [2025] Toàn bộ thực hành (có thể hỏi qua KakaoTalk)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[Phiên bản 2025] Kỹ năng Thiết kế và Phát triển Web - Thực hành: Hoàn thành trong 3 giờ! Master Class 24 bài với Flex강의 썸네일](https://cdn.inflearn.com/public/files/courses/339952/cover/01kcbxt5jcwsqamk5dxg5x3a7w?f=avif&w=420)
![[Chân lợn ảo] Từ thiết kế đến viết mã강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![Học JavaScript đúng cách: Lập trình hướng đối tượng hoàn chỉnh & Thực chiến AI Tic-Tac-Toe chiến lược Part2 [Phần trung cấp]강의 썸네일](https://cdn.inflearn.com/public/files/courses/336946/cover/01jv48md3p02hgkwt4yh1svf3j?f=avif&w=420)
![Spring Framework trong tay tôi [Soup Part 2]강의 썸네일](https://cdn.inflearn.com/public/courses/329630/cover/e05f1532-5d1d-440e-be03-c21c42cd5566/329630-eng.png?f=avif&w=420)
