正文

从零开始，学顾航前端，我的博客成长日记

/0 浏览量
0511

第一篇：初识前端，梦想起航

在我还是个对编程一无所知的小白时，我第一次接触到了前端开发。那时候，我对这个领域充满了好奇和向往。我开始在网上寻找各种资料，从基础的HTML、CSS到JavaScript，一步步地学习。我的博客，就这样在我对前端一知半解的状态下，开始了它的成长之旅。

HTML：构建网页的骨架

我的第一篇博客文章，就是关于HTML的基础知识。我详细介绍了HTML的结构、标签以及如何使用它们来构建一个简单的网页。我甚至亲手编写了一个简单的页面，展示了如何用HTML来组织文字、图片和链接。

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的博客</h1>
    <p>这里将记录我学习前端的心得和成长</p>
    <img src="image.jpg" alt="这是一张图片">
    <a href="https://www.example.com">访问我的网站</a>
</body>
</html>

CSS：美化网页的魔法师

随着对HTML的熟悉，我开始学习CSS。我了解到，CSS可以让我们将网页变得美观、吸引人。我尝试着给我的博客添加了样式，改变了字体、颜色和布局。我发现，CSS就像是一位魔法师，可以让我的网页焕然一新。

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

JavaScript：让网页动起来

当我开始学习JavaScript时，我感到既兴奋又有些迷茫。JavaScript可以让网页实现交互功能，比如动态改变内容、响应用户操作等。我尝试着在博客中添加了一些简单的JavaScript代码，让页面上的图片滚动起来。

function scrollImage() {
    var img = document.getElementById("movingImage");
    img.style.left = parseInt(img.style.left) - 1 + "px";
}

setInterval(scrollImage, 10);

第二篇：深入前端，探索更多可能性

随着对前端技术的深入学习，我开始尝试更多的可能性。我学习了响应式设计，让我的博客可以在不同的设备上正常显示。我还学习了框架和库，如Bootstrap和jQuery，它们让我的开发工作变得更加高效。

响应式设计：让网页适应各种设备

我意识到，随着移动设备的普及，响应式设计变得越来越重要。我研究了媒体查询和框架，如Bootstrap，它们可以帮助我轻松实现响应式设计。

@media (max-width: 600px) {
    body {
        background-color: #e0e0e0;
    }
}

框架和库：提高开发效率

我开始使用Bootstrap和jQuery来提高我的开发效率。Bootstrap提供了一套响应式、移动优先的前端框架，而jQuery则简化了JavaScript代码的编写。

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

第三篇：前端进阶，挑战自我

随着对前端技术的不断深入，我开始面对更多的挑战。我学习了Vue.js和React等现代前端框架，尝试着构建更复杂的应用程序。我也开始参与开源项目，与其他开发者交流和学习。

前端框架：构建现代应用程序

我学习了Vue.js和React等现代前端框架，它们提供了组件化、声明式编程等特性，让开发大型应用程序变得更加容易。

// Vue.js 示例
new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue!'
    }
});

开源项目：与其他开发者交流

我加入了GitHub，开始参与开源项目。通过与其他开发者的合作，我学到了很多宝贵的经验和知识。

# 克隆一个开源项目
git clone https://github.com/username/repo.git

总结

我的前端学习之旅还在继续，我的博客也在不断地成长。从最初的简单页面，到现在的复杂应用程序，每一步都充满了挑战和乐趣。我相信，只要不断学习、实践和探索，我一定能够成为一名优秀的前端开发者。

-- 展开阅读全文 --