|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/projects-in-css/
课程评论：没有评论
课程名称：CSS项目实践 课程概述：成为前端开发的高手，参与Eduonix提供的这一独特课程。该课程涵盖了CSS和HTML设计的所有技巧与窍门，通过构建十个精彩项目，帮助你掌握前端编程的不同方面，并展示最佳的开发实践。以下项目经过精心挑选，作为本课程的一部分。 项目介绍： 1. **登录页面设计**：创建一个具有响应式设计的HTML5/CSS登录页面，包括头部和尾部、图片列表、HTML5表单和客户推荐块。使用CSS3媒体查询确保页面适应各种屏幕尺寸。 2. **响应式无表格日历**：利用HTML5/CSS设计一个无表格的网页日历，完全响应式并适应小屏幕的子布局。 3. **纯CSS图片滑块**：构建一个完全依靠CSS的功能性图片滑块，通过缩略图点击实现大图的滑动展示，并使用CSS动画和关键帧。 4. **过渡下拉菜单**：使用CSS过渡效果构建多级下拉菜单，结合少量JQuery实现动态元素的添加。 5. **CSS时间线**：创建一个HTML5/CSS制作的时间线，展示年份和事件的描述，可用于专业或个人事务的跟踪。 6. **SASS表格**：利用CSS预处理器SASS创建网络托管套餐的定价表，使用变量、混合宏和嵌套样式。 7. **CSS图片库**：构建一个带有JQuery的图片库，使用CSS样式布局，通过JQuery实现动态类别过滤和图片灯箱效果。 8. **动画汽车**：使用CSS3动画和关键帧制作汽车行驶的效果，实现图片的主动定位和动画展示。 9. **动画Bootstrap模板**：构建自定义的Bootstrap模板，并使用JQuery和CSS实现滚动初始化的动画效果。 10. **使用LESS的新闻通讯设计**：采用CSS预处理器LESS创建一个餐厅的新闻通讯模板，运用变量、混合宏、嵌套样式及文件导入等功能。 本课程专为希望提升前端开发技能的学习者设计，提供实践经验和最佳的开发实践指南。
Be the front end wizard with this unique course from Eduonix. We bring together a curriculum where you will learn all the tips and tricks of CSS and HTML design while building ten awesome projects. It will help you master different aspects of front end programming and will show you all the best development practices. The following projects have been specially selected to be part of this course. Project 1 - Landing Page Design Description: We will create an HTML5/CSS landing page which will feature a header & footer, a list with image bullet points, an HTML5 form and a testimonial block. The page will be completely responsive and will adapt to any screen size by using CSS3 media queries. We will be using the Eric Meyers reset file as well. Features/Technologies: HTML5, CSS3, Web Forms, Lists, Reset Files, Responsive Web Design Project 2 - Responsive Tableless Calendar Description: We will create a web calendar page using HTML5/CSS. Unlike many calendars which use HTML tables for positioning and presentation, our calendar will use only CSS. The calendar will be completley responsive and will have a sub-layout for smaller screen sizes. Features/Technologies: HTML5, CSS3, Lists, Responsive Web Design, Table-like layout using CSS only, Box Spacing, Padding & Margins Project 3 - Pure CSS Image Slider Description: Most image sliders that you see around the Web are powered by JavaScript or a JavaScript library like JQuery. We will build a fully functional image slider with pure CSS. We will have thumbnails which when clicked, make the bigger image slide into place. We will use CSS animation/keyframes to achieve this. Features/Technologies: HTML5, CSS3, Animation, Keyframes, z-index & Positioning Project 4 - Transition Drop Down Menu Description: We will build a multi-level dropdown menu using CSS transitions for the dropdown animation effect. We will use just a bit of JQuery to dynamically add a div element Features/Technologies: HTML5, CSS3, Nested Lists, Responsive Web Design, CSS Transitions, JQuery Project 5 - CSS Timeline Description: In this project we will build a timeline using HTML5/CSS. This project will steer away from the common box-like layouts we see all the time. There will be points for years and events with descriptions. This could be used for many things such as professional/employment and personal/lifestyle tracking. Features/Technologies: HTML5, CSS3, Responsive Web Design, Fluid Layout, Background Images & Positioning Project 6 - Tables with SASS Description: SASS is a CSS pre-processor that allows us to do great things like use variables, mixins and nested styles. We will create some pricing tables for web hosting packages Features/Technologies: HTML5, CSS3, Lists, Responsive Web Design, Fluid Layout, Installing, Configuring & Working With SASS Project 7 - CSS Image Gallery Description: We will build an image gallery with the help of JQuery. The layout will be styled with CSS and we will use JQuery for dynamic category filtering and image lightbox. We will also create a very simple logo in Photoshop Features/Technologies: HTML5, CSS3, Responsive Web Design, Fluid Layout, JQuery, JQuery Fancybox Plugin Project 8 - Animated Car Description: We will focus on CSS3 animation and keyframes to position and animate images. We will use an image of a car and make it appear to be driving down the street Features/Technologies: HTML5, CSS3, Animation, Keyframes, Image Slicing in Photoshop, Background Images & Positioning Project 9 - Animated Bootstrap Template Description: Twitter Bootstrap is the most popular HTML5/CSS framework available. We will be building a custom Bootstrap template along with some animation including scroll initialized animation using JQuery and CSS Features/Technologies: HTML5, CSS3, Animation, Keyframes, Twitter Bootstrap, JQuery Project 10 - NewsLetter Design with LESS Description: LESS is another CSS pre-processor like SASS. We will be creating a smooth newsletter template for a restaraunt. We will implement LESS and use features like variables, mixins, nested styles and importing.less files. Features/Technologies: HTML5, CSS3, Node.js Installation, Installing, Configuring and Working With LESS
