virtuoushands
/
https-virtuoushands.github.io-Huddle-landing-page-with-a-single-introductory-section-
Public template
generated from virtuoushands/Huddle-landing-page-with-a-single-introductory-section
-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.md2
77 lines (43 loc) · 2.8 KB
/
README.md2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
# Frontend Mentor - Huddle landing page with single introductory section solution
This is a solution to the [Huddle landing page with single introductory section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/huddle-landing-page-with-a-single-introductory-section-B_2Wvxgi0). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the page depending on their device's screen size
- See hover states for all interactive elements on the page
### Screenshot
![](./hm.PNG)
### Links
Solution URL: [https://www.frontendmentor.io/solutions/mobile-first-workflow-css-grid-css-flexbox--lLZKZbuV](https://www.frontendmentor.io/solutions/mobile-first-workflow-css-grid-css-flexbox--lLZKZbuV)
- Live Site URL: [https://virtuoushands.github.io/huddle-landing-page-with-single-introductory-section-master/](https://virtuoushands.github.io/huddle-landing-page-with-single-introductory-section-master/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
### What I learned
I learnt how to cold and build projects in a more structured way and the steps to learning how to make a responsive webpage was a big plus.
### Continued development
I look forward to using flexbox , CSS grid to work on different responsive webdesigns as I hope to improve to the point of comfortably adding javascript language to my projects with better understanding.
### Useful resources
Mobile App for andriod: HTML & CSS Basics. This can be downloded on playstore: https://play.google.com/store/apps/details?id=com.webref.htmlbasics
## Author
- Website - [Mariam David-Alozie](https://medium.com/@Virtuoushands)
- Frontend Mentor - [@virtuous](https://www.frontendmentor.io/profile/virtuous)
- Twitter - [@Mariam DAvid-Alozie](https://www.twitter.com/y@Handzvirtuous)
## Acknowledgments
I am glad to give credit to : @madegilangaditya](https://www.frontendmentor.io/profile/madegilangaditya) got inspired via his finished project, how he made the webpage responsive and the use of flexbox and CSS grid was uite helpful. THank you too @Matt Studdert for the structured layout- template , design to guide one while building the project I feel so encouraged to keep coding ; this is the one opportunity have been searching for! I appreciate the entire frontEnd mentor team.