All solutions

This is a FrontEnd Mentor project

This project was bootstrapped with Create React App.

Specifically:

> npm create-react-app news-letter --template typescript

This project requires the following additional npm install:

> npm install sass

This project contains the following components:

• src index.tsx //The primary react-app standard starting code and creates a flex-box to center the main UI App.tsx //Sets up, and contains the initial ParentFrame components

• Components ParentFrame //The primary container which holds the two Components: <ComponentsContainerFrame> more specifically

ComponentsContainerFrame //One holds the image, the other holds the frame for all the marketing text and email input.

MarketingMaterialFrame and MarketingImageFrame: The marketing information in the two <ComponentsContainerFrame>

Popup component //This is just the popup when the user submitts their email.

Have the components which need to be worked through to iron out the layout isolated from the content.

Then, have the components which display data isolated from issues with the overall layout of the primary page.

Though this architecture and the number of components may seem overkill for this project, I want to start designing as if the project were larger. Not certain this is the right concept at this point or not.

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about deployment for more information.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Hello, This was a great project! Though, I ran into a couple of issues.

If anyone can take a look and give some feedback, your time and help would be greatly appreciated.

Thank you, Jeff

1. Getting the large image to size properly on the desktop home page. HomePageStyle.scss line 68

2. Getting the animation from the JSX to change between the hamburger menu button and the 'X' NavbarFrame.tsx lines 16 and 24

Hello everyone, I've put this project together using the datafile but added in some Firebase so that anyone who my be trying to work with Firebase will have an example project to work from.

I did this in the hopes of helping someone out so please feel free to copy, use, etc anything you find that helps you in your learning and profession projects.

Had some issues getting height of the answer text frame to resize properly.

This logic occurs with the class '.data-info-hidden' in DataInfoElementStyle.scss on line 75 with the corresponding tag in DataInfoElement.tsx on line 34.

Would like to have the height transition as well, but setting the height seemed to have no effect.

What is typically the issues you see developers are making when this is happening?

Any input would be greatly appreciated as I run into this a lot.

Still have some issues getting elements to center, left, or right justfy.

Question:
	When using FlexBox and Grid but all the following properties do nothing to move an element's alighnment:
	* align-items
	* justify-items
	* align-content
	* justify-content
	* justify-self
	* align-self

What is typically the issues you see developers are making when this is happening?

Any input would be greatly appreciated as I run into this a lot.

On line 12, I'm trying to vertically center the image and the text for the user's portrait and their name. I don't this that's the best way and I'm just not certain what I'm missing as I initially thought vertically aligning an image would be rather straight forward. Any suggestions on what I did wrong and how to fix it would be very much appreciated. Thank you.

This project may seem over architected but I was trying to envision a larger project and how I might actually separate out the components. I would love to hear others' thoughts on this.

I did have some issues configuring font for multiple paragraphs and you can see this in the /src/Components/DisplayElements/Styles/ContentDisplayStyle.scss on lines 39 & 45. Wasn't sure if this was the right way to do this or not.

Also, the image in desktop view scales fine, but I'm not sure I did this in the best way possible. I use background-size cover but again, not certain this is the best way to do things.

It felt like I was over doing it with a bunch of extra height, max-height, width, max-width, and funky margin vs padding work arounds. Wasn't entirely certain how to clearly fix it properly, but did get everything to work.

From a Jr CSS dev, it seems this is the way to do thing, but I think seasoned professional CSS devs would do this differently.

I greatly appreciate any and all feedback how I can improve.

Thank you in advance for your time and feedback you can give on my solution.

Thank you for your time and interest in taking a look at my project.

Two things that I wasn't certain about:

1. In the About.tsx - In order to get a new line after every sentence as shown in the design, it seems there's a better way than using the <br/> tags like I did.

2. When in mobile, the Signup component seemed to shrink in-spite of the fact that I configured the grid to have 3 rows all at 1fr. This is set-up in "ParentCardFrame.scss" on line 21. I know I'm missing something but I can't really tell what.

This is a React version of the solution using SASS. The primary component is the ComingSoonPage.tsx which resides in the src/Components directory. The main SASS file supporting the format of the component are the ComingSoonPage.scss and the AllComponents.scss styling files.

I put this together but I will think there's something wrong with the alignment of the "Learn More" buttons and for some reason the justify-content on the grid elements doesn't seem to center align the grid.

I tried to create this one without any media queries. Also, wasn't sure if using 'aspect-ratio' is the best way to keep the card looking nice on both large and small screens.