본문 바로가기
닫기
토픽 주제별 분류
서브토픽
필터

  • Web Design for Beginners | FREE COURSE

    youtube.com

    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
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    AriRaNg

  • Don’t use 100vh for mobile responsive

    medium.com

    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(‘ —…

    dracure

  • Writing Cleaner CSS using BEM Methodology

    medium.com

    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…

    dracure

  • 실무자를 위한 앱, 웹 UI 디자인 분석법 | 요즘IT

    wishket.com

    실무자를 위한 앱, 웹 UI 디자인 분석법 | 요즘IT

    UI를 통해 원하는 정보를 얻기 위한 과정은. 수많은 선물박스 속에서. 내가 좋아하는 상품을 찾는 과정과 비슷합니다. 예를 들어 100개의 선물박스가 있다고 했을 때. 내가원하는 박스는 두개 정도라고 해볼게요. 다만 어디에 무엇이있는지는 모르다보니, 여러가지 방식을 써야합니다.

    yuli_kim

  • Responsive Website Using HTML CSS And JavaScript

    8

    youtube.com

    Responsive Website Using HTML CSS And JavaScript

    Responsive website using HTML CSS And JavaScript

    yuli_kim

  • 웹디자인기능사-실전편

    6

    youtube.com

    웹디자인기능사-실전편

    웹디자인기능사 실기 레이아웃 짜기 입니다.
    60점 이상이 목표인 자격증 시험을 위한 강의이며,
    마이크가 강의용 마의크라 녹음 상태가 좋지 않은 점 양해 바랍니다.
    강의자료가 필요하신 분은 yulssem_nim@naver.com 으로 메일주시면 보내드리겠습니다.
    감사합니다.

    yuli_kim

  • 웹디자인 기능사

    22

    youtube.com

    웹디자인 기능사

    웹디자인 기능사 실기 준비를 위한 동영상입니다.
    웹 디자인 기능사의 여러가지 유형을 익혀야 하며
    기본적인 제이쿼리는 꼭 외워야 합격하는 시험입니다.

    동영상만 보고 따라하면 누구나 딸 수 있도록 제작하였으며
    일주일만 공부해도 딸 수 있다고 생각이 듭니다.

    소스 다운로드
    https://github.com/webstoryboy/webd

    yuli_kim

  • 2022년 웹디자인 트렌드 10가지 | Digital Marketing Curation

    thedigitalmkt.com

    2022년 웹디자인 트렌드 10가지 | Digital Marketing Curation

    웹디자인은 방문자들의 비즈니스에 대한 첫 인상의 95%를 결정합니다. 훌륭한 디자인은 판매 실적을 높이는데 도움이 될 수 있습니다.

    그렇기 때문에 마케팅 전략에 현대적인 웹디자인을 접목하는 것이 그 어느 때보다 중요한 것입니다.

    아래 글에서는 2022년에 주목해야 할 10가지 웹디자인 트렌드를 소개합니다.

    yuli_kim

  • 웹 디자인 피드백 [시청자 컨펌]

    59

    youtube.com

    웹 디자인 피드백 [시청자 컨펌]

    구독자 및 시청자분들의 디자인을 피드백해주는 재생목록입니다. 다양한 의견들을 받고 신중하게 제 개인적인 소신을 말씀드리는 곳입니다. 컨펌을 받은 디자인은 유튜브에 업로드가 됩니다.

    yuli_kim

  • Top Portfolio Template Website Using HTML CSS And JavaScript | Dark/Light Mode

    youtube.com

    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
    포트폴리오 템플렛 웹 사이트 [샘플]

    yuli_kim

  • Responsive Travel Website Design Using HTML CSS and JavaScript | Dark & Light Mode

    youtube.com

    Responsive Travel Website Design Using HTML CSS and JavaScript | Dark & Light Mode

    Responsive Travel Website Design Using HTML CSS and JavaScript

    yuli_kim

  • [디자인] 웹디자이너에게 유용한 앱(APP)8

    freemoa-blog.com

    [디자인] 웹디자이너에게 유용한 앱(APP)8

    웹디자이너에게 유용한 앱들을 모아봤습니다.

    김새롬

  • [디자인] 고객을 모으는 웹디자인, 랜딩페이지의 비밀 전격공개

    freemoa-blog.com

    [디자인] 고객을 모으는 웹디자인, 랜딩페이지의 비밀 전격공개

    웹디자인에서 랜딩페이지는 무엇이며, 랜딩페이지를 통해 사용자의 마음을 훔치는 방법은 무엇일까요?

    김새롬

  • [디자인] 모바일웹 디자인을 위한 필수 팁

    freemoa-blog.com

    [디자인] 모바일웹 디자인을 위한 필수 팁

    모바일웹 또는 반응형 디자인을 고민하고 계시는 여러분에게 프리모아가 필수적인 팁을 갈쳐드립니다.

    김새롬

  • 블로그 꾸미기 알려드립니다:) 총 정리 1편

    3

    naver.com

    블로그 꾸미기 알려드립니다:) 총 정리 1편

    안녕하세요. 브랜딩 블로그 디자인 전문가 옐로우디자이너입니다. 블로그 꾸미기 질문받은 내용을 모두 정리해 보았습니다.

    김새롬

  • Complete Responsive Portfolio Website Using HTML & CSS & JavaScript

    youtube.com

    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

    yuli_kim

라이브러리에 저장

좋아하는 강좌들을 수집하고 관리하고 공유하세요

닫기