Lab 1
Objective:
Construct an advanced personal portfolio website with a deep focus on HTML and CSS.
- Develop a multi-page website (minimum 4 pages) with consistent, advanced styling.
- Use a variety of semantic HTML tags for structured, accessible content.
- Create a responsive 3x3 image gallery; use CSS for styling and hover effects.
- Detail your personal section with skills, experiences, and project descriptions.
- Design a dynamic navigation bar with active states and smooth page scrolling.
- Active States: An active state is when the currently selected or visited page is visually distinguished in the navigation bar. For example, if you're on the "About" page, the "About" link in the navigation bar might be highlighted or styled differently (e.g., bold text, different background color) to indicate it’s the active section.
- Smooth Page Scrolling: When users click on links that navigate to different sections of the page, instead of jumping abruptly, the page should scroll smoothly to the target section. This can be achieved purely with CSS. You don't need JavaScript for this feature (despite the fact that it can be acheived in Javascript)
- Develop a comprehensive contact form using
mailto:for submission. The form should include fields for name, email, and message, with clearly labeled fields to ensure accessibility. The emphasis here is on creating a complete, well-designed, and user-friendly form. This means it should be fully detailed, with a logical structure and an intuitive layout, making it easy for users to fill out and submit their information. - Organize the CSS file with advanced techniques** like CSS variables.
- Enhance user experience with interactive elements and basic CSS animations.
- Implement thorough responsive design for various devices and screen sizes.
- Add a comprehensive footer with a contact form link, social media icons, and quick navigation links. A comprehensive footer should provide essential information and links in a neat, structured way, enhancing the website’s usability and overall design.
- 4 pages (home, about, gallery, contact)
- header>nav&logo, main>articles, footer>links&small_nav
- Gallery page with 3x3 images (flexbox)
- About page with info ab. me and the purpose of this website
- Nav bar that highlights the current page, also has an animated dropdown menu with quicklinks to the article headers
- Contact page with a form that sends an email
- CSS variables for colors + "debug mode"
- Footer with fake ig, x, fb links, fake privacy-policy, tos, copyright, etc.
- html outline for every page
- html footer
- html nav
- get logos for social links
- css for header
- css for footer
- get logo and name for website
- fix links and templates for all pages
- fill abouts page with data
- make image gallery (copy the penguins)
- make a contact form
- fix footer links for home
- fix footer links for about
- fix footer links for gallery
- fix footer links for contact
- smooth scrolling
- Write some stuff about the page on the home screen
- Make css responsive
- <++>
- <++>
- <++>