edited readme for meet landing page
This commit is contained in:
parent
1c54ac076b
commit
4b515a74bc
|
|
@ -11,12 +11,8 @@ This is a solution to the [Meet landing page challenge on Frontend Mentor](https
|
||||||
- [My process](#my-process)
|
- [My process](#my-process)
|
||||||
- [Built with](#built-with)
|
- [Built with](#built-with)
|
||||||
- [What I learned](#what-i-learned)
|
- [What I learned](#what-i-learned)
|
||||||
- [Continued development](#continued-development)
|
|
||||||
- [Useful resources](#useful-resources)
|
- [Useful resources](#useful-resources)
|
||||||
- [Author](#author)
|
- [Author](#author)
|
||||||
- [Acknowledgments](#acknowledgments)
|
|
||||||
|
|
||||||
**Note: Delete this note and update the table of contents based on what sections you keep.**
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|
||||||
|
|
@ -29,20 +25,16 @@ Users should be able to:
|
||||||
|
|
||||||
### Screenshot
|
### Screenshot
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.
|
Screenshots of the page showing the desktop, tablet and mobile versions of the page.
|
||||||
|
|
||||||
Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it.
|
|
||||||
|
|
||||||
Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
|
|
||||||
|
|
||||||
**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.**
|
|
||||||
|
|
||||||
### Links
|
### Links
|
||||||
|
|
||||||
- Solution URL: [Add solution URL here](https://your-solution-url.com)
|
- Solution URL: [Github](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/meet-landing-page)
|
||||||
- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
|
- Live Site URL: [tarasis.github.io](https://tarasis.github.io/FrontendMentor/newbie/meet-landing-page/)
|
||||||
|
|
||||||
## My process
|
## My process
|
||||||
|
|
||||||
|
|
@ -51,61 +43,27 @@ Then crop/optimize/edit your image however you like, add it to your project, and
|
||||||
- Semantic HTML5 markup
|
- Semantic HTML5 markup
|
||||||
- CSS custom properties
|
- CSS custom properties
|
||||||
- Flexbox
|
- Flexbox
|
||||||
- CSS Grid
|
|
||||||
- Mobile-first workflow
|
- Mobile-first workflow
|
||||||
- [React](https://reactjs.org/) - JS library
|
|
||||||
- [Next.js](https://nextjs.org/) - React framework
|
|
||||||
- [Styled Components](https://styled-components.com/) - For styles
|
|
||||||
|
|
||||||
**Note: These are just examples. Delete this note and replace the list above with your own choices**
|
|
||||||
|
|
||||||
### What I learned
|
### What I learned
|
||||||
|
|
||||||
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
|
The main thing I learnt is that neither Firefox or Safari support tabbing in an HTML page by default on a Mac. For Safari you have to open `Settings`, go to the `Advanced` tab and check `Press Tab to highlight each item on a web page`
|
||||||
|
|
||||||
To see how you can add code snippets, see below:
|
|
||||||
|
|
||||||
```html
|
Firefox on a Mac requires manually adding a preference. But I haven't gone through with adding it given the warnings on the page. I'm content with being able to test on Chrome / Polypane and Safari.
|
||||||
<h1>Some HTML code I'm proud of</h1>
|
|
||||||
```
|
|
||||||
```css
|
|
||||||
.proud-of-this-css {
|
|
||||||
color: papayawhip;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
```js
|
|
||||||
const proudOfThisFunc = () => {
|
|
||||||
console.log('🎉')
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more.
|
[Article Mac Browser Keyboard Navigation](https://www.a11yproject.com/posts/macos-browser-keyboard-navigation/)
|
||||||
|
|
||||||
**Note: Delete this note and the content within this section and replace with your own learnings.**
|
|
||||||
|
|
||||||
### Continued development
|
|
||||||
|
|
||||||
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
|
|
||||||
|
|
||||||
**Note: Delete this note and the content within this section and replace with your own plans for continued development.**
|
|
||||||
|
|
||||||
### Useful resources
|
### Useful resources
|
||||||
|
|
||||||
- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
|
[Article Mac Browser Keyboard Navigation](https://www.a11yproject.com/posts/macos-browser-keyboard-navigation/) - for setting up Safari for tab. Note I did not need to enable `Keyboard Navigation` in macOS 13's System Settings.
|
||||||
- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
|
|
||||||
|
|
||||||
**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.**
|
- [Stackoverflow answer "How to Allow Keyboard focus of links in Firefox"](https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox/11713537#11713537) - This led me to finding out what to do.
|
||||||
|
|
||||||
## Author
|
## Author
|
||||||
|
|
||||||
- Website - [Add your name here](https://www.your-site.com)
|
- Website - [tarasis.net](https://tarasis.net)
|
||||||
- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername)
|
- Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
|
||||||
- Twitter - [@yourusername](https://www.twitter.com/yourusername)
|
- Twitter - [@tarasis](https://www.twitter.com/tarasis)
|
||||||
|
|
||||||
**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**
|
|
||||||
|
|
||||||
## Acknowledgments
|
|
||||||
|
|
||||||
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
|
|
||||||
|
|
||||||
**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**
|
|
||||||
|
|
|
||||||
|
|
@ -35,10 +35,10 @@
|
||||||
Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.
|
Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.
|
||||||
</p>
|
</p>
|
||||||
<p class="btn-block">
|
<p class="btn-block">
|
||||||
<a class="btn btn-download" href="#">
|
<a class="btn btn-download" href="https://rmcg.dev">
|
||||||
Download<span>v1.3</span>
|
Download<span>v1.3</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="btn btn-info" href="#">
|
<a class="btn btn-info" href="https://rmcg.dev">
|
||||||
What is it?
|
What is it?
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -86,7 +86,7 @@
|
||||||
Stay connected with reliable HD meetings and unlimited one-on-one and group video sessions.
|
Stay connected with reliable HD meetings and unlimited one-on-one and group video sessions.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<a class="btn btn-download" href="#">
|
<a class="btn btn-download" href="https://rmcg.dev">
|
||||||
Download<span>v1.3</span>
|
Download<span>v1.3</span>
|
||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
|
|
@ -29,6 +29,17 @@
|
||||||
"title": "Newbie",
|
"title": "Newbie",
|
||||||
"cssClass": "frontEndMentorChallenges",
|
"cssClass": "frontEndMentorChallenges",
|
||||||
"challenges": [
|
"challenges": [
|
||||||
|
{
|
||||||
|
"title": "meet Landing Page",
|
||||||
|
"url": "/FrontendMentor/newbie/meet-landing-page/",
|
||||||
|
"description": "",
|
||||||
|
"techUsed": [
|
||||||
|
"html5",
|
||||||
|
"css3",
|
||||||
|
],
|
||||||
|
"screenshotURL": "/FrontendMentor/newbie/meet-landing-page/screenshots/desktop.png",
|
||||||
|
"screenshotAltText": "meet Landing Page Challenge from FrontendMentor"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"title": "BASE Apparel Coming Soon Page",
|
"title": "BASE Apparel Coming Soon Page",
|
||||||
"url": "/FrontendMentor/newbie/base-apparel-coming-soon/",
|
"url": "/FrontendMentor/newbie/base-apparel-coming-soon/",
|
||||||
|
|
@ -38,7 +49,7 @@
|
||||||
"css3",
|
"css3",
|
||||||
"js"
|
"js"
|
||||||
],
|
],
|
||||||
"screenshotURL": "/FrontendMentor/newbie/base-apparel/screenshots/desktop.png",
|
"screenshotURL": "/FrontendMentor/newbie/base-apparel-coming-soon/screenshots/desktop.png",
|
||||||
"screenshotAltText": "Base Apparel Coming Soon page Challenge from FrontendMentor"
|
"screenshotAltText": "Base Apparel Coming Soon page Challenge from FrontendMentor"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue