anniecat73 / dev-camp-learning Goto Github PK

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

I had an idea for a fictional landing page for an online course platform specialising in Web ( and design) Development. I designed and coded it from scratch into a responsive live website.

Users should be able to:

• View the optimal layout for the site depending on their device's screen size.
• See hover states for all interactive elements on the page. -Navigate between sections and/or pages.
• Send email via the form in the contact section.

• Live Site URL: https://dev-camp-learning.pages.dev/

• Planning – who is this website for and its goals and target audience?
• How can I accomplish its goal through my development and design options?
• Draw mockups of components and sitemap, then decide which section and content to keep.
• Which responsive layout pattern serves each section best, CSS Grid or Flexbox?
• Are there any reusable components or classes we can use?
• Mobile-first approach. I used CSS resets and CSS variables, then set global styles, utility classes, typography and layouts for each section.
• Javascript added for interactivity.

• Semantic HTML5 markup
• CSS resets
• CSS custom properties
• Utility classes and reusable components
• Flexbox
• CSS Grid
• Mobile-first workflow
• Javascript for menu, carousel and sign-up form

After completing this project from scratch my CSS layout skills improved a lot and I got a lot of good practice in how to build and complete a project from the beginning to the end. This project was also a good way to incorporate utility classes to my CSS stylesheet.

I will continue to improve with my layout skills. My aim is to get more comfortable with CSS grid and add more Javascript for functionality!

• This landing page was inspired by what I was taught in Kevin Powell’s CSS Demystified course. This course improved my CSS skills! My layout skills are transformed and I am forever grateful!

• Website - https://www.annie-indreiten.com/
• Github – https://github.com/AnnieCat73
• LinkedIn - https://www.linkedin.com/in/annie-indreiten777/