- 서브토픽
-
-
필터
-
Web Design for Beginners | FREE COURSE
If you're new to web design, this course on web design for beginners will teach you everything you need to know. ► Download creative digital assets with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
“How do I pick typefaces, how do I pick colors, what the heck is whitespace, and how do I position and size elements correctly?” These are exactly the kinds of questions which we’ll address in this beginner web design tutorial.
In terms of fundamentals, you’ll learn about color, typography, spacing, sizing, imagery, and responsive web design. We’ll discuss the theory, best practices, and some tools you can use to make your job easier.
When it comes to common web design patterns, you’ll learn about the elements you can use to design a web page—things like headers, hero areas, buttons, image galleries, contact forms, and more.
For each of these patterns, we’ll look at the definition and some use cases, and then we’ll apply that knowledge to a demo project: a three-page portfolio website designed specifically for this course.
► Check out this link for the project brief and course assignments: https://bit.ly/37YMk4W
► Read the course notes (and more!) for Web Design for Beginners on Envato Tuts+: https://webdesign.tutsplus.com/articles/web-design-for-beginners-epic-free-course--cms-41118?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Link to wireframe portfolio website with Figma: https://www.figma.com/file/Ak0JQMv65digqiASGnoLI0/Portfolio-Website?node-id=0%3A1
What You'll Learn:
00:00:00 Welcome!
00:04:31 Course brief and assignment
00:05:48 UI design vs. UX design vs. web design
00:14:08 Learning to work with project briefs
00:19:59 Working with wireframes
00:28:08 Picking the right design tool
00:33:53 Color theory
00:51:36 Color harmonies, psychology and tools
01:03:11 Creating a color palette for our project
01:20:00 Let’s talk about typography
01:31:11 Creating the typography for our project
01:46:01 Spacing and sizing in web design
01:54:47 Using icons and images in web design
02:03:33 Definition and use cases for headers
02:11:39 Let’s design a header
02:28:16 Definition and use cases for hero areas
02:33:06 Let’s design a hero area
02:39:08 Definition and use cases for buttons
02:44:46 Let’s design some buttons
02:57:27 Definition and use cases for image galleries
03:01:38 Let’s design an image gallery
03:12:34 Definition and use cases for footers
03:17:55 Let’s design the footer
03:26:37 Definition and use cases for testimonials
03:31:48 Let’s design some testimonials
03:44:15 Definition and use cases for tabs
03:48:11 Let’s design some tabs
03:59:47 Definition and use cases for accordions
04:04:03 Let's design an accordion
04:13:19 Definition and use cases for contact forms
04:18:17 Let’s design a contact form
04:32:49 What is a responsive website?
04:36:55 Making layout changes for tablets and phones
04:56:44 Making a component responsive
05:09:52 A quick word about prototyping
05:16:11 Next steps and key takeaways
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Don’t use 100vh for mobile responsive
Generally, we use height:100vh it is for fullscreen layout which is an easy hack and a convenient way to get better design. Here, the documentHeight function sets a new style property var(‘ —…
-
Writing Cleaner CSS using BEM Methodology
Have you ever come across this syntax and assumed it was autogenerated and didn’t give it much thought? There’s a good chance you have. That’s what we’ll look at in this article, where you’ll learn…
-
실무자를 위한 앱, 웹 UI 디자인 분석법 | 요즘IT
UI를 통해 원하는 정보를 얻기 위한 과정은. 수많은 선물박스 속에서. 내가 좋아하는 상품을 찾는 과정과 비슷합니다. 예를 들어 100개의 선물박스가 있다고 했을 때. 내가원하는 박스는 두개 정도라고 해볼게요. 다만 어디에 무엇이있는지는 모르다보니, 여러가지 방식을 써야합니다.
-
8
Responsive Website Using HTML CSS And JavaScript
Responsive website using HTML CSS And JavaScript
-
6
웹디자인기능사-실전편
웹디자인기능사 실기 레이아웃 짜기 입니다.
60점 이상이 목표인 자격증 시험을 위한 강의이며,
마이크가 강의용 마의크라 녹음 상태가 좋지 않은 점 양해 바랍니다.
강의자료가 필요하신 분은 yulssem_nim@naver.com 으로 메일주시면 보내드리겠습니다.
감사합니다. -
22
웹디자인 기능사
웹디자인 기능사 실기 준비를 위한 동영상입니다.
웹 디자인 기능사의 여러가지 유형을 익혀야 하며
기본적인 제이쿼리는 꼭 외워야 합격하는 시험입니다.
동영상만 보고 따라하면 누구나 딸 수 있도록 제작하였으며
일주일만 공부해도 딸 수 있다고 생각이 듭니다.
소스 다운로드
https://github.com/webstoryboy/webd -
2022년 웹디자인 트렌드 10가지 | Digital Marketing Curation
웹디자인은 방문자들의 비즈니스에 대한 첫 인상의 95%를 결정합니다. 훌륭한 디자인은 판매 실적을 높이는데 도움이 될 수 있습니다.
그렇기 때문에 마케팅 전략에 현대적인 웹디자인을 접목하는 것이 그 어느 때보다 중요한 것입니다.
아래 글에서는 2022년에 주목해야 할 10가지 웹디자인 트렌드를 소개합니다. -
![웹 디자인 피드백 [시청자 컨펌]](https://i.ytimg.com/vi/hgeWi1yKNfc/mqdefault.jpg)
59
웹 디자인 피드백 [시청자 컨펌]
구독자 및 시청자분들의 디자인을 피드백해주는 재생목록입니다. 다양한 의견들을 받고 신중하게 제 개인적인 소신을 말씀드리는 곳입니다. 컨펌을 받은 디자인은 유튜브에 업로드가 됩니다.
-
Top Portfolio Template Website Using HTML CSS And JavaScript | Dark/Light Mode
Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode | purple/green/pink color
포트폴리오 템플렛 웹 사이트 [샘플] -
Responsive Travel Website Design Using HTML CSS and JavaScript | Dark & Light Mode
Responsive Travel Website Design Using HTML CSS and JavaScript
-
[디자인] 고객을 모으는 웹디자인, 랜딩페이지의 비밀 전격공개
웹디자인에서 랜딩페이지는 무엇이며, 랜딩페이지를 통해 사용자의 마음을 훔치는 방법은 무엇일까요?
-
-
Complete Responsive Portfolio Website Using HTML & CSS & JavaScript
Complete Responsive Portfolio Website Using HTML & CSS & JavaScript
⭐️ Hostinger : http://www.hostinger.com/truecoder
- Use code "TRUECODER" for 91% off on all yearly hosting plans !!
Today, we got a special tutorial, we're going to learn how to create a complete personal portfolio website from from scratch, we're going to be using HTML, and modern CSS techniques such as CSS grid, flexbox, pseudo selectors, keyframes and more. We're also going to use JavaScript to add some some stunning animations to the website and make it interactive, not only that, we're going to see how we can make this website completely responsive on any device, so it stays responsive no matter what the size of the device is. And finally by the end of this video, I'm gonna show you quickly how you can deploy this website on Hostinger, and make it live on the internet.
Now if you find this video valuable, please make sure to leave a like, and subscribe to the channel, this is the best way you can support me to make more videos like this.
Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
💖 Please feel free to donate any amount you think is equal to the value you received from my tutorials. Donation link : https://paypal.me/truecoder
SOURCE CODE : https://github.com/sefyudem/portfolio-website
🚫 DON'T CLICK THIS : https://bit.ly/2SuCfW3
Inspired By Milton Deonath Design : https://bit.ly/3n8zRil
✉️ For Business inquiries : truecoder.business@gmail.com
👇 Timestamps:
0:00 - Intro
0:34 - Hostinger
2:27 - What are we going to build
5:29 - Setup
7:28 - Navbar
22:01 - Showcase area
45:24 - Services section
1:04:45 - Portfolio section
1:36:27 - About section
1:54:49 - Records section
2:10:37 - Blogs section
2:23:02 - Testimonials section
2:36:44 - Contact section
2:51:49 - Hire me section
2:53:08 - Footer section
3:16:36 - Making the website responsive
3:50:22 - Deployment
![[디자인] 웹디자이너에게 유용한 앱(APP)8](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F240FDB4158B79FBA0B)
![[디자인] 고객을 모으는 웹디자인, 랜딩페이지의 비밀 전격공개](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F25610F4D56DFC75709)
![[디자인] 모바일웹 디자인을 위한 필수 팁](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F2372773F557FB99601)
