|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/code-a-small-business-website-using-various-popular-web-frameworks/
课程评论：没有评论
课程名称：使用流行的网页框架编码小型商业网站 课程概述： 本课程面向初学者，旨在通过多次重建相同项目，以快速介绍各种流行的前端CSS框架。您将学习到Bootstrap 4、Bootstrap 5、Bulma、Semantic UI、Foundation 6和Materialize等最新版本的框架，这些都是当今全球网页设计师和开发人员广泛使用的工具。 在本课程中，您将逐步学习如何使用不同的前端CSS框架创建小型商业网站。每次使用一个框架，从零开始，完成相同项目的构建。尽管每个框架创建的项目具有相同的布局和设计，但由于各个框架的特性和样式，项目会在视觉上有所区别。通过用不同框架重建相同的项目，您将深入了解每个框架在代码结构、类和属性方面的不同之处，并学习每个框架如何影响组件的视觉风格。 项目内容： 该项目涉及创建一个小型商业网站。您将学习如何组织不同的内容、设计用户友好的界面，并通过使用响应式网格使网站在所有设备尺寸上都看起来很棒。项目包含以下页面： - 主页：菜单、下拉菜单、英雄部分、消息、亮点、响应式网格布局与卡片、带图标的页脚 - 服务：菜单、下拉菜单、响应式网格布局带大图像、文本和按钮、带图标的页脚 - 关于：菜单、下拉菜单、文本、响应式网格布局与图像、带图标的页脚 - 团队：菜单、下拉菜单、响应式网格布局与图像、图标和标题、带图标的页脚 - 联系：地址、营业时间、联系表单、嵌入谷歌地图 使用的框架： - Bootstrap 4 - Bootstrap 5 - Bulma - Semantic UI - Foundation 6 - Materialize 每个框架将涵盖其特定部分，如布局、内容、组件和实用工具。课程还包括使用Font Awesome 5添加图标和使用Google Fonts来添加网页字体的额外内容。 希望您在课程结束后能受到启发，创建您自己的小型商业网站。如果您完成了项目，请分享链接，我非常期待看到您的作品！
ABOUT THE COURSEThis course is for the beginner who wants to get a quick introduction to various popular front-end CSS frameworks by recreating the same project multiple times. By taking this course you'll get introduced to the latest versions of Bootstrap 4, Bootstrap 5, Bulma, Semantic UI, Foundation 6 and Materialize. These frameworks are some of the most popular ones used today by web designers and developers all over the world.In this course you'll learn how to create a Small Business Website using various popular front-end CSS frameworks. Using one framework at a time I will start from scratch and walk you through how to create the same project. The project created with each framework will have the same general layout and design, however there will be some small visual differences from project to project due to the specific features and styles of the various frameworks.The idea behind re-creating the same project with different frameworks is to learn how each framework use different code structure, classes and attributes to create the same kind of component. You will also learn how each framework differ in the visual style of each component, and learn what is possible and what isn't with each framework.ABOUT THE PROJECTThis project is about creating a Small Business Website. You'll learn how to structure various pieces of content, how to design a user-friendly interface, and how to make it look great on all device sizes by using a responsive grid.The project will contain the following pages:HomeMenu, dropdown, hero section, message, highlights, responsive grid layout with cards, footer with iconsServicesMenu, dropdown, responsive grid layout with large images, text and buttons, footer with iconsAboutMenu, dropdown, text, responsive grid layout with images, footer with iconsTeamMenu, dropdown, responsive grid layout with images, icons and headings, footer with iconsContactAddress, opening hours, contact form, embedded Google MapsABOUT THE FRAMEWORKSThe following frameworks will be used to create a Small Business Website:Bootstrap 4 (compatible with the latest version v4.6.0)Bootstrap 5 (compatible with the latest version v5.1.0)Bulma (compatible with the latest version v0.8.0)Semantic UI (compatible with the latest version v2.4.2)Foundation 6 (compatible with the latest version v6.5.3)Materialize (compatible with the latest version v1.0.0)Bootstrap 4:We'll use the following parts of Bootstrap 4:Layout: Containers, Grid systemContent: Typography, ImagesComponents: Alert, Button, Card, Dropdown, Forms, Input Group, Jumbotron, NavbarUtilities: Border, Embed, Flex, Spacing, TextBonus:As a bonus you'll also learn how to use Font Awesome 5 to add icons to your project and how to use Google Fonts to add web fonts to your project.Bootstrap 5:We'll use the following parts of Bootstrap 5:Layout: Containers, Grid systemContent: Typography, ImagesComponents: Alert, Button, Card, Dropdown, Forms, Input Group, NavbarUtilities: Border, Embed, Flex, Spacing, TextBonus:As a bonus you'll also learn how to use Font Awesome 5 to add icons to your project and how to use Google Fonts to add web fonts to your project.Bulma:We'll use the following parts of Bulma:Modifiers: Color Helpers, Typography HelpersLayout: Columns, Container, Footer, Hero, SectionForms: General, Input, Select, TextareaElements: Button, Content, Icon, Image, Notification, TitleComponents: Card, Dropdown, NavbarBonus:As a bonus you'll also learn how to use Font Awesome 5 to add icons to your project.Semantic UI:We'll use the following parts of Semantic UI:Elements: Button, Container, Header, Icon, Image, Input, ListCollections: Form, Grid, Menu, MessageModules: Dropdown, EmbedViews: CardFoundation 6:We'll use the following parts of Foundation 6:General: XY Grid, Forms, IconsUtilities: Prototyping UtilitiesControls: ButtonNavigation: Top Bar, MenuContainers: Callout, Card, DropdownMaterialize:We'll use the following parts of Materialize:CSS: Color, Grid, Helpers, MediaComponents: Buttons, Cards, Footer, Icons, NavbarJavaScript: Dropdown, SidenavForms: Select, Text Inputs--I hope you will be inspired to create your own Small Business Website afterwards. Please send me a link if you do so. I would love to see it!
