Personal Portfolio Landing Page

Know Your Project

Day 1:

Introduction to Web Development and HTML Basics

• Understanding the Web and HTML
• Setting Up the Development Environment
• Introduction to HTML and HTML elements
• Building the structure of our web page
• Default Styling and layout of the HTML
• Quiz Session

Day 2:

CSS Fundamentals and Styling (2 hours)

• Recap of Day 1 and Quiz Review
• Introduction to CSS and its Role in Web Development
• Different Style Resources
• CSS Selectors and Properties
• CSS Box Model
• Key Features of the CSS
• CSS Flexbox
• Exercise: Adding more content and styles to portfolio sections
• Quiz Session

Day 3:

Advance CSS & Responsive Design

• Recap of Day 2 and Quiz Review
• CSS Animations
• CSS Transitions
• Responsive Web Design
• Media Queries and Viewport Meta Tag
• Adding Responsiveness
• Quiz Session

What you'll learn

Resources

In the `/design` folder, you will find the final designs files for both mobile and desktop versions of the landing page. Please take a moment to review these thoroughly before diving into the workshop. In the `/Wireframes` folder, you will find the design/sketches each section os the portfolio website. Please refer to these as you work though this project. The designs are in static JPG format, so you'll need to use your judgment for styles like `font-size`, `padding`, and `margin`. The `/assets` folder contains all the necessary assets, which are already optimized for use in the project, they are going to be in SVG format because vector-based images scale way better than pixel-based images. **Note** : We will refer to the `style-guide.md` file for essential information, such as the color palette and fonts to be used.

Start Learning