Bất kể bạn là nhà phát triển chuyên nghiệp hay người mới bắt đầu, bạn có thể thường xuyên gặp rắc rối khi làm việc trên một dự án phức tạp. Trong một số trường hợp, bạn có thể thấy khó tìm ra giải pháp chính xác cho một vấn đề đang làm bạn khó chịu. Vào những thời điểm khác, việc tìm ra một đoạn mã cụ thể cũng có vẻ khó khăn
Tất nhiên, bạn có thể hỏi xung quanh và tham khảo ý kiến của đồng nghiệp hoặc duyệt trực tuyến để tìm câu trả lời. Tuy nhiên, điều đó sẽ không đủ hoặc đôi khi đủ. Rõ ràng là cả người mới bắt đầu và người có kinh nghiệm đều cần một nguồn hoặc nền tảng đáng tin cậy và đáng tin cậy. Một nền tảng có khả năng giúp họ khi họ cảm thấy bối rối và choáng ngợp khi đối mặt với một vấn đề viết mã mới
CodePen là gì
Nhu cầu về một nền tảng như vậy đã được giải quyết vào năm 2012, khi CodePen được công bố. CodePen gọi hoặc tự quảng cáo là ‘Sân chơi dành cho nhà phát triển Front End’. CodePen ngay lập tức trở nên vô cùng phổ biến trong một khoảng thời gian ngắn. Ngày nay, CodePen thu hút khoảng 17 triệu khách truy cập trang web hàng tháng, một con số khổng lồ
CodePen có một thư viện phong phú gồm các đoạn mã cần thiết và hữu ích có thể đơn giản hóa dự án thiết kế của bạn. CodePen cũng đóng vai trò là nền tảng nơi các nhà phát triển có thể thử nghiệm và kiểm tra thiết kế của họ. Chẳng hạn, bạn có thể kiểm tra hoạt ảnh, nút, mã mới, v.v. thông qua CodePen
Các nhà thiết kế đăng ký trên CodePen có thể chia sẻ các đoạn mã HTML, JavaScript và CSS tùy chỉnh cho trang web. Các bộ mã CSS, HTML và JS, Bút này thường được cập nhật khi các nhà phát triển thử nghiệm với mã của họ. Sự sang trọng của việc thực hiện các chỉnh sửa hoặc thay đổi đối với bất kỳ bút công khai nào là điều khiến CodePen trở nên hấp dẫn hơn
Khả năng điều chỉnh và chỉnh sửa Public Pens mang đến cơ hội duy nhất cho các nhà phát triển và nhà thiết kế nâng cao kiến thức viết mã của họ. Tóm lại, nếu bạn đang tìm kiếm một điểm đến lý tưởng để khám phá các công cụ và ý tưởng mới, thì CodePen chính là con đường dành cho bạn
Cách chạy mã trong CodePen
Ban đầu, bạn sẽ cần tạo Bút hoặc đoạn mã JS, CSS và HTML để bắt đầu sử dụng CodePen. Bạn có thể hiển thị các Bút bạn đã tạo trên hồ sơ CodePen của mình. Bạn có thể thực hiện các chỉnh sửa và thay đổi mã theo ý muốn và đồng nghiệp của bạn sẽ có thể cung cấp cho bạn phản hồi về bút của bạn
Có thể xem các thay đổi hoặc chỉnh sửa mà bạn đã thực hiện đối với Bút của mình trong thời gian thực. Điều này sẽ cho phép bạn dễ dàng tìm ra sự kết hợp phù hợp và giúp bạn vượt trội khi làm việc với các dự án thiết kế web mới hoặc phức tạp. Cũng có thể nhúng các bản trình diễn CodePen trên các trang web. Đây là tập hợp các bước về cách chạy mã trong CodePen
- Mở Codepen. io
- Ở góc trên cùng của màn hình, bạn sẽ có thể tìm thấy tùy chọn Bút
- Nhấp vào Let's go make one nếu bạn muốn tạo một Bút mới
- Bây giờ, hãy nhập hoặc sao chép tập lệnh HTML, CSS và JS
- Lưu chúng, xem trước các thay đổi và tiếp tục thử nghiệm theo ý muốn của bạn
Ngã ba trong CodePen là gì
Một trong những thuật ngữ phổ biến mà bạn sẽ bắt gặp khi sử dụng nền tảng CodePen là Fork. Bản sao hoặc bản sao của toàn bộ Dự án hoặc Bút mà bạn có thể lưu vào hồ sơ CodePen cá nhân của mình và thực hiện các thay đổi cần thiết là Fork.
Mọi thứ mà nhà phát triển ban đầu đã viết sẽ có mặt trong phiên bản Đã rẽ nhánh hoặc sao chép. Chẳng hạn, các phần phụ thuộc và mã của bộ lập trình ban đầu sẽ có sẵn với bản sao Forked.
Với thế giới đang phát triển nhanh chóng từng phút, việc luôn cập nhật các kỹ năng theo yêu cầu là một nhiệm vụ to lớn. Phát triển web là một trong những kỹ năng gần như thiết yếu đối với nhà phát triển hiện đại. Với quy mô thị trường khoảng 40 tỷ đô la vào năm 2020, nhu cầu và cơ hội dành cho các nhà phát triển web chất lượng là rất rõ ràng
Cho dù bạn là người mới trong thế giới phát triển web hay một nhà phát triển tài ba, bạn có thể đã bắt gặp CodePen. CodePen là một cộng đồng trực tuyến để thử nghiệm và giới thiệu các đoạn mã HTML, CSS và JavaScript do người dùng tạo
Khi bạn đã có chỗ đứng tốt về HTML, CSS, JS/Jquery, bạn không cần phải thiết kế lại từng thành phần của trang web từ đầu. CodePen ngoài chức năng là một trình chỉnh sửa mã còn có chức năng độc đáo. Nó hoạt động như một môi trường học tập mã nguồn mở, nơi các nhà phát triển có thể tạo các đoạn mã, được gọi là "bút" và kiểm tra chúng. Hầu hết thời gian CodePen sẽ có rất nhiều “bút” do các nhà phát triển tạo ra mà bạn có thể thêm vào trang web của mình để làm cho trang web trở nên xa hoa hơn
Trong bài viết này, Chúng tôi sẽ xem xét một ví dụ nhỏ về cách bạn có thể sử dụng bất kỳ “cây bút” nào từ CodePen và thêm nó vào trang web của mình
Bước 1. Mở CodePen. io
Bước 2. Nhập bất cứ thứ gì vào hộp tìm kiếm
Bạn có thể nhập bất cứ thứ gì bạn muốn khi thêm vào trang web của mình. Nó có thể là thanh trượt đáp ứng, thẻ nhóm, phần giới thiệu, hoạt ảnh, v.v. Trong bài viết này mình sẽ thêm một thanh trượt đẹp. Vì vậy, hãy tiếp tục và tìm kiếm thanh trượt đẹp mắt trong hộp tìm kiếm
Bạn sẽ nhận được một lựa chọn tốt đáng kinh ngạc để lựa chọn. Chúng tôi đã chọn https. // codepen. io/supah/pen/zZaPeE
Bước 3. khai thác mã
Bây giờ, như bạn có thể thấy, trình soạn thảo Codepen cho chúng ta thấy đoạn mã tuyệt vời đã tạo nên thanh trượt này. Nhưng bạn có nghĩ rằng việc sao chép mã đơn giản từ trình chỉnh sửa này và dán mã đó vào trình chỉnh sửa của bạn sẽ hiệu quả không? . Hầu hết thời gian "bút" mà bạn nhìn thấy đều sử dụng các thư viện bên ngoài mà trình soạn thảo CodePen không hiển thị. Vì vậy, chỉ cần sao chép chúng sẽ dẫn đến sự không chính xác sẽ khó giải quyết nếu chúng tôi không nhập các thư viện này
Để làm điều đó, hãy điều hướng đến góc dưới bên phải màn hình của bạn và nhấp vào Xuất -> Xuất dưới dạng. khóa kéo. Điều này sẽ tải xuống một tệp zip của cùng một cây bút trong hệ thống của bạn. Giải nén nó bằng bất kỳ công cụ giải nén nào như Winrar/Winzip và xem các tệp
Zip chứa hai thư mục dist và src cùng với tệp văn bản readme và giấy phép. Bạn có thể khám phá/đọc chúng nếu bạn quan tâm. Bây giờ, hãy chọn thư mục “dist” và ở đó bạn sẽ thấy chỉ mục. html, kiểu. css và tập lệnh. tệp js. Mở tất cả những thứ này trong trình soạn thảo văn bản [Sublime, Atom, Chân đế, v.v.]
Khi mở tệp HTML bằng bất kỳ trình soạn thảo văn bản nào, chúng tôi thấy nhiều thư viện bên ngoài ngoài kiểu. css và tập lệnh. js
Thêm những dòng này vào trong chỉ mục của bạn. html cùng với phần nội dung [Tôi đã tạo một trang HTML mẫu với tiêu đề “Thanh trượt CodePen” theo sau là thanh trượt CodePen này] và bạn đã trích xuất thành công mã chính
Bây giờ hãy lưu tệp, đừng quên thêm “script. js” và “phong cách. css” trong cùng thư mục. Nếu bạn có các tệp đó ở bất kỳ vị trí nào khác, hãy cập nhật href và src theo vị trí đó
Bước 4. mở chỉ mục. tệp html
Thanh danh. Bạn chỉ cần thêm một “cây bút” vào trang web của mình. Vỗ nhẹ vào lưng bạn. Chơi xung quanh với mã. Thay đổi nguồn ảnh, text trên ảnh theo ý thích/yêu cầu
Phần kết luận
Trong bài viết này, bạn đã học cách sử dụng “bút” từ CodePen bên trong trang web của mình một cách dễ dàng. Nếu bạn muốn thêm bất kỳ “bút” nào ngoài ví dụ trong bài viết này, quy trình vẫn như vậy. Tiếp tục xây dựng các trang web đẹp. Cảm ơn vì đã đọc