レスポンシブ ウェブサイト ポートフォリオ (App Official Landing Website)
レスポンシブウェブサイトポートフォリオ(App Official Landing)の制作過程はHTML+CSS+JQUERYパブリッシングで、レスポンシブウェブサイト全体の製作過程を通じてパブリッシング中級実力に行く基本基をしっかりして実戦パブリッシングのノウハウを持つようになります。特に、ウェブサイト全体の制作過程を十分な説明と実践作業で経験し、個人ポートフォリオウェブサイトの制作に自信を持つようになります。必要に応じて使用する必要があるジェイクエリプラグインで、Scroll Reveal AnimationとSlickスライダの使い方を学びます。レスポンシブ制作方式は、従来方式のfloatとpositionを利用したレスポンシブレイアウト制作方式で製作します。しかし、ある特定の要素ではFlexを使用する部分もあります。
03) 講義セクション別14個の段階別完成本とUIデザインPSDファイル提供 ※Photoshop UIデザインはPhotoshop CC 2019バージョンで製作されました。
04) 合計22時間以上の製作講義
05)理論学習と制作のためのテキストエディタ 今回のレスポンシブウェブサイト制作講義で使用されたテキストエディタは、ビジュアルスタジオコード(Visual Studio Code)とブラケット(Brackets)です。もちろん、他のテキストエディタを使用しても大丈夫です。受講生がおなじみのテキストエディタを使用してください。ただし、リアルタイムプレビュー機能を持たないテキストエディタはフォローしてください。
Q. このコースを受講すれば、実務でパブリッシャーとして働くことができますか? A. このプロセスにあるパブリッシングの内容をすべて理解し、よく活用できれば可能です。しかし、パブリッシングというのに十分な経験と様々な種類のウェブサイトを作った経験がなければ、実務で働くことができます。今、コースのような講義をさらに勉強し、全体のウェブサイト制作過程をいくつか勉強すれば良いと思います。もちろん個人ポートフォリオのホームページ制作もしていただく必要があります。パブリッシングの進入障壁が思ったより高い方です。映像 一度ご覧いただくとその中に内容とノウハウが共に学生に伝わるわけではありませんので、上記の学習方法を通じて私のものにする過程をお願いします。
Q. ウェブサイト制作しながら出てくる理論を説明する理論パーツが別にありませんでしたか? A. 今受講されるコースは入門、初級コースではなく、中級レベルのレスポンシブウェブサイト全体制作パブリッシング講義です。基本理論パートと実戦例制作学習は、異なるコースを通じてスキルアップすることをお勧めします。
Q. 勉強して知らないことがあれば質問はどこにありますか? A. ご質問がございましたら、[質問&回答]掲示板に文を残すとすぐではなくても確認されれば答えをいたします。そして質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。だから質問するときは、気になる内容と一緒に作成中のHTML、CSS、JQUERYコーディング画面をキャプチャして添付していただくと、回答がずっと簡単です。
Q. 講師様授業中<パブリッシャー就職本当の実戦ガイド>を先に見ればいいでしょうか? A. パブリッシングスキルをより身につけることも重要ですが、まずパブリッシャーとして基本基を備えることが優先されなければなりません。パブリッシャー就職実践ガイド電子ブック(PDF)では、パブリッシング基本基とは、好ましいコーディング習慣と原則、キャリアのようにパブリッシングするなどパブリッシャーとして必ず知っておくべき内容を慎重にまとめました。パブリッシャー就職実践ガイド電子ブック(PDF)をまずご覧になり、パブリッシング基本基についての理解度を十分に持って学習することをお勧めします。下の画像をクリックすると、授業紹介内容をご覧いただけます。
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 ■ [현재] 프리랜서 프론트엔드 퍼블리셔 ■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영 ■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사 ■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사 ■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사 ■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사 ■ UI/UX 웹 디자인 포트폴리오 강의 ■ 웹디자인 기능사 실기 자격증반 강의 ■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
Before taking the class, I thought I had to make a homepage! and when I started coding, the structure didn't turn out as I had planned, and I made it crooked and gave -230px to the margin and then made it fit in somewhere else. And then I kept repeating, "Ah~ I guess I'm not related to Front~"........
When I watch the video, the overall picture is drawn well, and since the instructor talks about infinite repetition, I think I can understand what the instructor is going to say as I listen.
For example, when the instructor says, "Give float to the child element.", what follows unconditionally is "Give float to the child element, so the parent element loses its height value, so give overflow:hidden to the parent." It comes out almost every time. Even if you don't try to memorize it separately like this, the structure will be in your head because the parent overflow hidden will be repeated so much that you can memorize it like a machine even if only the plot appears in the plot.
In the lecture introduction, the learning method is to look at the section 3 (header~mobile) work comfortably, but I couldn't do that in the previous lecture, and I was satisfied with the result. So when I saw the result I made with the instructor, I thought it was my own..ㅎ But when I saw the result and thought, "I'm proud~ Let's try something else!!".. When I actually tried to do it alone, it didn't work well. So this time, I just emptied my mind and watched it while lying in bed, while eating tangerines, while doing laundry, and on the bus. When I really had time, I thought I would fill the lecture time instead of YouTube, and I watched it all the time. I watched it in the most comfortable position I could find when I sat in front of the PC..(..ㅎ Isn't this the advantage of online?) As I listened, I inevitably came across content that I didn't know well. When I listen to those things again, I will probably remember them vaguely, but when I learn them once, I lightly open a notepad or (if listening on a PC) write notes on the right side of the Inflearn lecture and add simple notes, so I listen to them without getting sleepy (<s>Sleep Slave</s>) and my hands are not idle, so I remember them better. And, when I say 'I finished the lecture today~', I organize the contents I learned today that I really didn't know in my notepad, so I can easily look at them and understand them, and it's also convenient when I review them.
And then, when I read them a second time, when I look at them while inputting the code myself, rather than making them at the same speed as the instructor, I think it's fun to first look at the finished version + basic structure, make them, quickly add CSS, and compare how I added them differently from the instructor. That way, I think I can tell if they're completely mine or if I just practiced typing. Also, I think this way, there will be good questions.
After reading it twice, I think it would be good to look at various sites and make it yourself without pressing F12. However, after reading it twice (including the previous lecture), I saw myself imitating the structure of most sites because I could see it!!
Therefore, rather than thinking, “I’m going to finish it in one reading because I’m pressed for time!”, I think it’s an excellent learning method to read it once in the most comfortable position in the world, and when you input the code directly in the second reading, first create it and compare it while referring to the vague memories + notes you wrote. Anyway, I think it’s a lecture that even an idiot like me can follow to some extent, so it’s a lecture worth challenging for anyone!!!!
p.s) By the way, this lecture is for beginners, but is this a beginner video..?...... (Is the end of publishing still far away? ㄷㄷ....... )
aToring-nim~ Your course review is really thorough and detailed.
There has never been a course review this long and detailed before, and I don't think there will be a course review this long and detailed in the future.^^
As much as you work hard, you will soon get good results. Fighting!!
This is the third time I learned the practical site creation part of Coding Works' lecture.
Since I took the Flex site creation lecture before this lecture, I didn't use float and just set the layout with flex.
Since I had some time, I made a separate logo and changed the design a little bit.
I got a more solid concept of SlickRider this time.
I think I learned a little more about the concept in the js part.
Since there were a lot of animations, that part was especially impressive this time, and the FAQ part, such as how to create an accordion and how to create a tab menu by connecting input and label, was also very helpful to me.
One thing that was a little disappointing was that I was working on a monitor with a resolution of 3840.
When I set the vertical on the main screen to 90vh, the gap between the next paragraph, CEO access, and the next paragraph was too wide.
Also, when I worked with flex, when there was a left-right animation, the horizontal scroll occurred and the screen broke, and the fixed header at the top of the screen sometimes moved back and forth or disappeared. At first, I didn't know why the scrolling happened, so I spent the whole day looking at the source code and pulling my hair out.
Later, I found out that it was probably because of that.
So, I changed all the parts that were in flex to float in relation to animation, and there was no problem.
Anyway, I really enjoyed the passionate lecture,
and I wish you continued success.
Thank you!
I didn't even turn on the sound, and at work... I only roughly watched the PC version of the flow. I really only know the flow...
Now I'm curious to see how much it will change if I watch the lecture properly and follow along, and if I don't watch it. Will it really be possible?? I'll edit the bottom later. As a side note, I'm still bored because I only do design work at work. I hate it.
This is a much better lecture than any other lecture I have ever taken. The instructor explains it really, really well, in a way that is easy to understand both theory and practice!! Thank you so much, instructor! I am so satisfied that I want to listen to all the lectures that are uploaded!! ^^
Hello mm
I'm so glad that the lecture was helpful.
Thank you for being interested in other Coding Works lectures.
If you have any questions about Let's Study, please ask. Thank you for your review~
Seunghoon, you've already completed the course? It's only been a week since the lectures were uploaded, but you've been working hard and diligently. I think it would be good to change the work you've done this time and make it into a personal portfolio. Thank you for your course review~^^