웹 프런트엔드 학습 경로: 웹 프런트엔드 개발에 대한 빠른 소개
- PHPz원래의
- 2017-06-01 16:38:464129검색
2017년 웹 프런트엔드 학습 경로: 웹 프런트엔드 개발에 대한 간략한 소개입니다. 우선 제 경험을 공유하고 싶습니다. 뭔가를 잘하려면 노력을 기울여야 합니다. 그런 다음 더 많이 배우고, 더 많이 생각하고, 더 많이 소통하고, 더 많이 요약하고, 자신의 문제를 찾아야 합니다. 그런 다음 이를 극복해야 합니다. 좋은 상황에서는 제때에 조정이 필요한 경우가 많습니다. 초보자가 프론트엔드를 배우면 왜 배우고 싶은지, 자신의 사고방식은 어떤지 생각해보고 자리를 잘 잡고, 더 많은 전문가에게 조언을 구하고, 자신보다 못한 사람들을 더 많이 가르쳐야 할 것입니다. 종종 그가 성장할 수 있도록 허용하고 서두르지 마십시오. 초보자는 소개 비디오 튜토리얼을 시청한 후 책을 구입하고 작은 프로젝트를 수행할 수 있습니다. 투자하는 방법, 현재 상황과 능력을 분석하고 실시간 조정하는 방법을 배워야 합니다. 자신만의 아이디어가 있어야 하고 혁신하는 방법을 알아야 합니다. . 여기에서 자신을 분석하고 적합한 학습 방법을 찾아야 합니다.
1. WEB 프론트엔드 - 학습오해
웹페이지 제작은 컴퓨터 전문 학생들이 대학에서 접하게 되는 과정입니다. 웹 페이지 제작을 배우기 위해 사용되는 최초의 통합 개발 환경(IDE)은 Dreamweaver일 것입니다. 이 WYSIWYG "폭발적인" IDE는 우리에게 훌륭한 웹 페이지를 만들어줍니다. 편의.
빠른 시작과 빠른 결과 덕분에 나도 모르게 웹페이지 제작에 푹 빠져들게 되었습니다. 이때 많은 사람들이 오해를 하게 되는데, 이렇게 멋진 IDE의 도움으로 마우스로 메뉴를 클릭하면 웹페이지를 빠르고 편리하게 만들 수 있다는 것이다.
그렇다면 우리는 왜 여전히 HTML, CSS, JavaScript, jQuery 및 기타 하드 코드를 배워야 하는가? 이것은 단순함보다 복잡함을 추구하는 것이 아닌가?
그러나 연구가 깊어질수록 우리는 딜레마에 빠졌다는 것을 알게 될 것입니다. IDE에 과도하게 의존하면 구현의 본질을 알지 못하게 되고, 알면서도 그 이유를 알지 못하게 됩니다.
그래서 페이지 효과에 문제가 생기면 어떻게 페이지를 최적화하고 좀 더 발전된 애플리케이션을 완성할지는 고사하고 막막해집니다. 그 이유는 분명합니다. 스마트 IDE는 우리의 게으름을 채워주어 멋진 웹 페이지 뒤의 가장 중요한 콘텐츠인 코드를 무시하게 만듭니다.
쓸데없는 노력보다 올바른 방향이 낫다
개미 두 마리가 벽의 한 부분을 넘어서 벽 반대편에 있는 음식을 찾으세요. 개미는 벽의 기슭에 도달하면 거침없이 올라갑니다. 그러나 반쯤 올라갈 때마다 피로와 피로로 인해 넘어지게 됩니다. 낙담하지는 않았지만 몇 번이고 넘어지고, 빠르게 적응하여 다시 오르기 시작했습니다.
다른 개미는 이를 관찰하고 벽을 돌아다니기로 결정했습니다. 곧 개미는 벽을 돌아 음식을 먹기 시작했고, 다른 개미는 계속 넘어지고 다시 시작했습니다.
성공에는 용기와 인내 외에도 방향이 필요한 경우가 많습니다. 어쩌면 좋은 방향으로 나아가면 성공은 생각보다 빨리 찾아올지도 모릅니다. 잘못된 길로 달려간다면 아무리 노력해도 헛수고가 될 것입니다. 웹 프론트엔드 학습도 마찬가지입니다. 먼저 올바른 학습 경로를 선택해야 합니다.
2. WEB 프론트엔드 - 학습 경로
첫 번째 단계 - HTML 학습
하이퍼텍스트 마크업 언어(줄여서 HTML)는 웹페이지의 뼈대이며, 정적 웹페이지이든 동적 웹페이지이든 궁극적으로 브라우저에 반환되는 것은 HTML 코드입니다. 브라우저는 렌더링되어 사용자에게 표시되는 HTML 코드를 해석합니다. 그러므로 우리는 HTML의 기본 구조와 공통 태그 및 속성을 숙지해야 합니다.
HTML 학습은 기억과 이해의 과정입니다. 학습 과정에서 Dreamweaver의 "분할" 보기를 사용하여 학습을 지원할 수 있습니다. "디자인" 뷰에서 효과를 보고, "코드" 뷰에서 본질을 익히고, 다양한 뷰의 장점을 극대화하는 이러한 비교 학습 방법은 단순히 HTML 태그와 속성을 외우는 지루함을 보완하는 데 유용할 것입니다. 어린 친구들 모두에게 좋을 것 같습니다!
HTML을 배운 후 다양한 "원재료"의 제작 방법을 마스터했습니다. 건물은 여전히 우리의 설계 계획에 따라 이러한 "원자재"를 결합하고 배치하고 일부 미화를 수행해야 합니다.
php 중국어 웹사이트 추천 강좌:
매뉴얼: HTML 개발 매뉴얼
HTML은 배우기 쉽습니다! 빨리 배우실 거라고 확신해요! HTML 예제 이 튜토리얼에는 수백 개의 HTML 예제가 포함되어 있습니다. 이 사이트의 편집기를 사용하면 온라인에서 쉽게 HTML을 수정하고 예제 결과를 볼 수 있습니다.
동영상: HTML을 단번에 배우는 동영상 튜토리얼
"HTML을 단번에 배우는 동영상 튜토리얼"은 가장 기본적인 개념부터 시작하여 더 깊이 있게 진행됩니다. 단계별로 모든 사람이 HTML을 배우고, 일반적으로 사용되는 다양한 태그의 의미와 기본 사용법을 이해하고, HTML 지식을 학습하여 향후 학습의 기반을 마련하도록 유도하십시오.
두 번째 단계 - CSS 학습
CSS는 English Cascading Style Sheets의 약자로 Cascading Style Sheets라고 불리며 웹의 성능을 제대로 구현해 낼 수 있습니다. 페이지와 콘텐츠 분리를 위한 스타일 디자인 언어입니다. 기존 HTML의 성능과 비교하여 스타일을 재사용할 수 있어 개발 속도가 크게 향상되고 유지 관리 비용이 절감됩니다.
동시에 CSS의 상자 모델, 상대 레이아웃, 절대 레이아웃 등을 사용하면 웹 페이지에 있는 각 개체의 위치와 레이아웃을 픽셀 수준에서 정밀하게 제어할 수 있습니다. . 이 학습 단계를 통해 우리는 "건물"의 건설을 성공적으로 완료할 수 있습니다.
"건물"이 완성된 후 사용자에게 넘겨 사용할 수 있습니다. 하지만 사용자가 더 나은 경험을 하길 원한다면 추가로 "장식"할 수도 있습니다. "건물"이 좀 더 "고급스러워" 보이도록 말이죠.
php 중국어 웹사이트 추천 강좌:
설명서: CSS 온라인 설명서
《CSS 온라인 매뉴얼》CSS를 사용하면 웹 개발의 효율성을 크게 향상시킬 수 있습니다! 이 CSS 온라인 매뉴얼에는 수백 개의 CSS 온라인 예제가 포함되어 있습니다. 이 사이트의 온라인 편집기를 통해 온라인으로 CSS를 편집하고 수정된 효과를 온라인으로 볼 수 있습니다.
동영상: 손끝에서 CSS를 배우는 방법에 대한 동영상 튜토리얼
"손끝에서 CSS를 배우는 방법에 대한 동영상 튜토리얼 " CSS 메소드 사용법, CSS 선택자의 차이점, CSS와 HTML의 일반적인 사용법을 알아봅니다.
세 번째 단계 - JavaScript 학습
JavaScript는 클라이언트 측에서 널리 사용되는 스크립트 언어로 몇 가지 내장 함수, 객체를 제공합니다. 및 DOM 작업을 통해 우리는 클라이언트 측 특수 효과, 확인, 상호 작용 등을 구현하여 페이지를 덜 지루하게 만들 수 있습니다. Diaosi는 부자와 잘생긴 사람들에게 즉시 반격할 수 있습니다! "이 효과는 ×× 브라우저에서 호환되지 않습니다. 다시 시도하십시오..."
"호환되지 않습니까?" 즉시 석화되었나요?
“안돼, 날 속이고 있잖아! 밤새 수백 줄의 코드를 작성해서 피를 토했어!”
JavaScript의 호환성과 복잡성은 때때로 우리에게 골칫거리이지만 다행히도 이를 캡슐화하는 데 도움을 주는 "마스터"가 있습니다.
php 중국어 웹사이트 추천 강좌:
설명서: JavaScript 참고 매뉴얼
"JavaScript 참고 매뉴얼"은 공부하거나 일할 때, JavaScript에 대한 지식이 이해되지 않으면 와서 상담할 수 있는 참고 매뉴얼입니다. 우리 매뉴얼에는 누구나 참조하고 배울 수 있는 많은 예제가 있습니다.동영상: JavaScript 초등 동영상 튜토리얼
"Javascript 초등 동영상 튜토리얼"에서는 JavaScript 기본 변수, 구문, 지식 등을 소개합니다. 조건부 판단, 루프문, 배열, 함수, 객체 BOM 및 DOM
jQuery는 무료 오픈 소스 경량 JavaScript 라이브러리이며 다양한 브라우저와 호환됩니다(jQuery2.0 및 후속 버전에서는 IE6/7/8 브라우저에 대한 지원을 포기했습니다). 선택할 수 있는 jQuery 기반 플러그인은 풍부한 동적 효과를 구현할 때 더 편리하고 빠르며 개발 시간을 크게 절약하고 개발 속도를 향상시킵니다. 이는 또한 적게 쓰고 더 많은 작업을 수행한다는 핵심 목적을 완전히 반영합니다. 정말 기분 좋은 일이잖아요?
"고급 건물"이 땅에서 솟아오르는데, 건물이 날마다 이렇게 지어지고 있는데, 해마다, 너무 지루해요! 건물을 지을 때 건물의 모든 구성 요소를 블록처럼 쌓아서 조립할 수 있을까요?
이 아이디어는 웹 프론트엔드 개발에도 적합해서 다양한 프론트엔드 프레임워크가 등장했습니다. 여기 계신 모든 분들께 추천드리는 것이 바로 부트스트랩입니다.
Bootstrap은 프런트 엔드 개발을 위해 Twitter에서 출시한 오픈 소스 툴킷으로, CSS/HTML 프레임워크이며 반응형 레이아웃을 지원합니다. 출시된 이후 매우 인기를 얻었으며 GitHub에서 항상 인기 있는 오픈 소스 프로젝트였습니다.
프로젝트 개발 과정에서 Bootstrap에서 제공하는 CSS 스타일, 컴포넌트, Java 플러그인 등을 활용하여 페이지 레이아웃과 스타일 설정을 빠르게 완료할 수 있으며, 스타일을 미세 조정하고 프레임워크를 기반으로 개발하면 개발 주기가 크게 단축됩니다.
php 중국어 추천강좌:
설명서: jQuery 중국어 참조 매뉴얼
"jQuery 중국어 참조 매뉴얼"은 jQuery 지식을 기초부터 고급까지 배울 수 있도록 도와줍니다. 매뉴얼에는 다수의 jQuery 온라인 예제가 포함되어 있습니다. 예제를 직접 실행하여
비디오: jquery 기본 비디오 튜토리얼
3. WEB 프론트엔드 - 학습 제안
마지막으로 웹 학습에 대한 몇 가지 제안과 방법에 대해 말씀드리겠습니다. 프론트엔드.CSS를 레이아웃할 때 주의해야 할 문제는 많은 학생들이 페이지 레이아웃에 대한 전반적인 분석이 부족하고 거시적인 관점에서 페이지 내 상자 간의 중첩 관계를 파악하지 못한다는 것입니다. , 그래서 그들은 그렇게 하고 싶어합니다. 이렇게 하면 페이지의 요소 간의 관계가 매우 혼란스러워지고 떠 있을 때 상자가 잘못 정렬되기 쉽습니다. 레이아웃할 때 먼저 여러 개의 상자를 사용하여 페이지를 전체적으로 나눈 다음 점차적으로 상자 내에 상자를 계속 중첩시키는 아이디어를 채택하는 것이 좋습니다.
"신사는 남과 다르지 않고, 가짜를 잘 아는 사람이다. 학습 과정에서 더 좋은 사이트를 찾아보고 분석도 잘해야 한다." 그리고 그들의 디자인 아이디어를 활용하고 레이아웃 방법에 있어서는 많은 것을 봐야만 지식을 얻을 수 있고, 그런 다음 그것들을 통합하고 다른 것을 우리 자신의 용도로 활용할 수 있습니다.
동시에 Firebug를 도구로 잘 활용해야 합니다. 한편으로는 Firebug를 사용하여 학습 과정에서 자신의 페이지를 디버깅할 수 있고, 다른 한편으로는 다른 사람의 웹사이트 소스 코드를 쉽게 보고 분석할 수도 있습니다.
사람마다 성장과 기반이 다르기 때문에 각자의 실제 상황에 맞춰 실행해야 합니다. 다시 한번 말씀드리지만 프론트엔드의 핵심은 js와 css입니다. 어렵지는 않지만 축적이 필요합니다. 프런트 엔드는 이렇게 보입니다.
CSS는 와인 한 병과 같습니다. 제품을 받으세요
html과 css는 모두 태그와 선택기 속성에 관한 것이지만 확장 가능하고 강력하며 유지 관리가 가능한 페이지를 작성하는 것은 쉽지 않습니다. 이제 페이지의 기본 조건 반영을 작성할 때 어떻게 하면 빨리 완료할 수 있느냐가 아니라, 인터페이스를 수정해야 할 경우 최소한의 코드 수정으로 필요한 작업을 어떻게 빨리 완료할 수 있을지 고민하게 됩니다. 이것은 프론트엔드 지구력, 체력, 지능에 대한 삼중 테스트입니다.
js는 칼과 같아서 갈아야 합니다
js는 그냥 경험상, 기술과 사회의 발전으로 인해 맡은 역할이 점점 더 중요해지고 있습니다. 처음 jQuery를 시작했을 때 js를 이미 알고 있다고 느꼈지만 실제로는 빙산의 일각에 불과했습니다. js에 대해 점점 더 많이 알수록 변태적이고 귀엽고 재미 있고 제어하기 어렵습니다. 호환성 문제가 많지만 호환성을 해결하는 것이 우리의 기본 생존 방법입니다. ajax부터 jsmvc까지 쭉 보면 고부하의 조짐이 점점 높아지고 있습니다
인생은 꿈입니다. 꿈을 꾸어야 합니다
기술은 삶의 일부일 뿐입니다. , 하지만 이제는 고개를 숙이고 코드를 작성합니다. 바꿀 수 있는 것은 바꾸고, 바꿀 수 없는 것은 받아들이자. 인생은 제한되어 있습니다. 형제들은 밤낮으로 싸우고 있습니다. 인생 학습에 대한 태도는 조급하지도 조급하지도 않으며 빠르지도 느리지도 않습니다. 인내하고 자신을 믿으세요. 세상을 바꾸려고 하지 말고, 자신의 삶을 바꾸려고 노력하세요. 빠른 걸음을 요구하지 말고 한 번에 한 걸음씩 요구하십시오. 고통 덕분에 우리의 내면은 더 강해집니다. 좌절 덕분에 우리는 계속해서 성장하게 됩니다. 버그 덕분에 우리의 생각은 더욱 깊어집니다. 프런트 엔드 덕분에 그는 하늘을 받치려면 18가지 무술이 필요하다는 사실을 더욱 믿게 만들었습니다.
우리는 IT를 사랑하는 젊은이들의 그룹입니다. IT와 HTML5 개발도 좋아한다면 www.php.cn에 로그인하여 온라인으로 배우고 의견을 들려주세요. 우리의 꿈을 함께.
관련 권장 사항: