Welcome to the SmileSchool landing page project! This is a responsive website built with HTML5 and CSS3, showcasing modern web design techniques and best practices.
-
Irene Githundi
-
Rubansi Vincent
Authors
- Responsive Layout: Adapts to different screen sizes using media queries and flexible units.
- Semantic HTML: Utilizes semantic tags such as
<header>,<nav>,<main>,<section>, and<footer>for better accessibility and SEO. - Custom Fonts: Integrates Google Fonts for improved typography.
- Font Awesome Icons: Uses Font Awesome for scalable vector icons.
- CSS Flexbox & Grid: Layouts are managed with Flexbox and Grid for alignment and spacing.
- Buttons & Cards: Styled interactive buttons and card components for tutorials and team members.
- Image Gallery: Displays images with proper alt text for accessibility.
- Hover Effects: Adds interactivity with CSS hover states.
- FAQ Section: Structured with collapsible content for user engagement.
- Semantic elements (
<header>,<nav>,<main>,<section>,<footer>,<blockquote>,<ul>,<li>,<h1>-<h4>,<p>,<img>,<button>) - Accessibility features (alt attributes, proper heading structure)
- Linking external resources (Google Fonts, Font Awesome)
- Flexbox and Grid for layout
- Responsive design with media queries
- Custom classes for styling components
- Button and card styling
- Font and color customization
- Hover and active states
- W3Schools HTML Tutorial
- W3Schools CSS Tutorial
- MDN Web Docs: HTML
- MDN Web Docs: CSS
- GeeksforGeeks: HTML
- GeeksforGeeks: CSS
- Font Awesome Documentation
- Google Fonts
- Clone the repository.
- Open
index.htmlin your browser or use Live Server in VS Code. - To deploy, push to GitHub and enable GitHub Pages in your repository settings.
Feel free to explore the code and experiment with different HTML and CSS features. For more information, check the documentation links above.