|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/responsive-portfolio-website-using-html5-css3-javascript-bootstrap5/
课程评论:没有评论
课程名称:响应式投资组合网站的HTML5、CSS3和JavaScript(2024) 课程概述:欢迎参加Cheetah Academy培训课程。本课程旨在帮助前端Web开发领域的初学者提升编程技能,制作出优秀的个人投资组合。若您对HTML5、CSS3、SASS、Bootstrap5和JavaScript有基本了解但不知道如何构建个人网站,本课程将为您提供必要的指导。 课程内容包括: 1. **Figma的角色**:学习如何利用图形应用程序(如Photoshop、Sketch、Adobe XD和Figma)设计网站,并由前端开发人员将其转换为静态网站。课程将教授如何从Figma提取、转换图像、颜色和字体大小等信息。 2. **HTML5的角色**:作为现代网站的基础,HTML5引入了语义标签,使得网页结构更加明确。课程将指导如何使用HTML5构建网站的基础结构。 3. **CSS3的角色**:学习如何使用CSS3为网站增加视觉吸引力,包括过渡、动画和阴影等功能,以增强网页美观性。 4. **SASS的角色**:掌握SASS这款CSS预处理器,加快CSS代码编写,利用其变量、嵌套和继承等特性,提高工作效率。 5. **Bootstrap5的角色**:利用Bootstrap5构建响应式网站,确保网站在不同设备上良好展示。课程将介绍Bootstrap的网格系统及其灵活性。 6. **JavaScript的角色**:深入学习JavaScript,提升编程技能。本课程避免使用jQuery,而是聚焦在原生JavaScript的应用,以帮助学生打好基础。 网站特点: - 可切换暗黑与亮色模式。 - 包含流星雨动画效果。 - 个人简历部分展示关键技能和工作经验。 - 作品集展示及客户反馈。 - 个人社交网络链接及简历下载功能。 通过这个课程,您将逐步提升自己的前端开发能力,最终创建一个专业的个人投资组合网站。
Welcome to this Cheetah Academy training course. I hope that it will be a beneficial course for you and you will learn a lot from it and, as a result, improve your programming skills. This course aims to help people who are beginners in Front-End Web Development, do not have an acceptable portfolio to offer, or can not create a final product. In this training course, we intend to teach you the following items:Improving your skills and taking a few steps to be professional.Helping you learn the basic skills to create a valuable product.Assisting you in creating a good and presentable portfolio.If you know the basics of HTML5, CSS3, SASS, Bootstrap5, and JavaScript, but you do not know how to use them to create a personal website, this course will help you. This course will teach you how to create a personal website using HTML5, CSS3, SASS, Bootstrap5, and JavaScript. The following is the role of each of the tools, libraries, programming languages, and frameworks:What is Figma's role in this tutorial?First, the website should be created using graphic applications such as Photoshop, Sketch, Adobe xd, and Figma. Then it will be coded by a Front-End Web Developer using languages, libraries, and web frameworks like HTML5, CSS3, SASS, Bootstrap5, JavaScript, jQuery, Vue.js, React, and Angular to become a static website. All components, colors, font sizes, margins, paddings, etc., are determined by Figma, and you must extract these values from the Figma file and convert them to code. In this course, we will turn a template implemented in Figma into a beautiful website, and you will learn how to extract photos, colors, font sizes, etc., from Figma.What is HTML5's role in this tutorial?Most websites are now HTML-based, and it is the basis of today's websites and web applications. Semantic tags such as MAIN, SECTION, HEADER, FOOTER, and ASIDE have been added to the last version of this language to differentiate sections of a website, called HTML5. It had been done by the DIV tag already, and the website's page had been divided into different sections, and these DIV tags were distinguished using CLASS and ID.What is the CSS3's role in this tutorial?HTML without CSS has no visual attractiveness, and you should use CSS to give a website color, glaze, and beauty. In this tutorial, we will use the third version of CSS called CSS3. In this version, many attractive features such as transition, animation, embedded fonts, and shadows have been added, by which you can make a website more attractive. This course uses CSS3 features extensively to improve your CSS3 knowledge.What is the SASS's role in this tutorial?When we work with CSS, we can write CSS code faster using a special tool called SASS. SASS is a preprocessor for CSS and includes features such as variables, nesting, and inheritance to speed up the writing of CSS code. The browsers do not understand SASS codes, so when we write these codes, they are converted to CSS by a compiler to be understandable for the browsers. In this course, you will learn to work with SASS practically, improving your skill in SASS. Today, Front-End Web Developers should have the ability to work with a CSS preprocessor in their list skills.What is Bootstrap5's role in this tutorial?When you create a website using HTML and CSS, you should create it responsive to make it visible properly on various devices such as mobile phones, tablets, laptops, and monitors with different dimensions. You can use media queries to do this, but an easier way is to use Bootstrap, which has a premade grid structure built in if you follow Bootstrap rules. Therefore, you will have a responsive website that displays well on different devices with different dimensions. When we recorded this tutorial, the latest version of Bootstrap was the fifth version, Bootstrap5. In this version, like the previous version, flex is used to create grids, and it has almost the same features as Bootstrap4 with minor changes. The most significant change is the removal of jQuery; in contrast, raw JavaScript has been employed.What is JavaScript's role in this tutorial?The most popular programming language globally is JavaScript, and in this course, we will utilize JavaScript. We want to improve your JavaScript skills; the more you watch and practice this course, the more you practically learn JavaScript skills. We will not use jQuery and its plugins in this course because we want you to learn raw JavaScript. As you know, JavaScript is the basis of all JavaScript libraries and frameworks such as jQuery, React, Vue.js, Angular, and Svelte, so if you want to learn any of these libraries and frameworks, you should first learn JavaScript sufficiently. We want to improve your JavaScript skills because we believe JavaScript is the heart of the Front-End!What are the features of this website?This website has two dark and light modes; by clicking on a button, the website theme goes from dark to light and vice versa using JavaScript.Meteor shower animation is included on this website.Existence of a biography section to show critical skills, foreign languages, programming skills, years of experience in each field, and display other information.Ability to display educational background and work experience in the resume section.View the portfolio and details of each portfolio in the portfolio sectionDisplay customer feedback in the Testimonial sectionPersonal resume download linkPersonal social network links