Spense Landing Page

Remix Template

Web Developer Portfolio

Javascript30 Navbar

I can't believe how quickly you're finishing these challenges. They're all so well done! The slider is a nice touch, too.

Thanks for sharing your solution. I learned a lot from it.
There is one issue I found but could not overcome it. The section where there is "Secure your money with Escrow." heading, the hyperlink is not working in there.

These are just mockups (some with multiple pages, some not) so most of them have hrefs linking to nothing, that's why :) 

Well I am aware it is just mockups but even cursor is not changing when you hover the mouse on link.

Looking good, my only comment is to reduce the font-sizes for the headings. Can't really comment too much on the code since i'm not that good at coding myself so i'll leave that to someone else!

Just checked, looks like the image is taking the width and height of the container and is a higher z-index than the container so you can't really click it. 

Fixed it by adding this to the (max-w-2xl xl:py-8) div

z-index: 99;
position: relative;

Looks good, the logos seem to be really stretched out though, i'm on Safari if that helps!

Initial thoughts, it's really good! My feedback would be to center the nav items in the navbar, perhaps reduce to container's width (it's currently too wide). As for the April Earnings box, you could set the image to position relative, and position the box absolute to it. It shouldn't take too much time to implement.

Good job nonetheless! :D

Thank you @moeminm,
I’ve changed the navigation.
For the Earnings box, you’re right that’s exactly what I should do but I don’t have a separated Hero image without the April Earnings box.
Thank you for your time.


Navigation is looking much better! 

You're right, i've just added the hero image without the box in the Assets folder, make sure to re-download the files if you want access to it, and thanks for bringing this to everyone's attention! 

Thank you.
Downloaded and updated my assets as well as the implementation Earnings box.
Keep safe.

Looks awesome, love the little animation you've put for the logos, makes it pop up even more! :D

This is simply awesome! I love you mimicked the challenges pages in Codewell to present your projects. The animation on the TimeNow template is also really creative, one thing worth practicing is changing the data inside the pricing table when the toggle is used in the TimeNow template.

I have no suggestions to give but again, this is awesome! 🔥

Is there any way we can view the project live? :D

My only comment is to have the logos as a slider on mobile, currently it's taking too much space up, other than that, looks awesome!

I'm afraid there isn't. You need Xcode to view the project :(

I think you've done a wonderful job! I also like that in the hero you used an actual component for the 'withdraw' part in the image, a lot of people just use an image. Good job!

For only 5 days you're doing pretty well, keep at it! :)

Codewell must provide images for mobile and tablet versions also.

Hi Pritam, please re-download the files. I've just added the different sizes in the Assets folder, although, it's better if you just work with one image and have it responsive instead of loading 3 different sizes.

Hi Candra, I would like to say you've done well on this design. However, I noticed that your font was montserrat whereas this is one used the "Cabin" font as stated in the README file. Also in the text editor part of the promotion section, you should try the font-awesome arrow right icons as what you have doesn't meet the UI design. All in all I would say you have done a good job. I have learned a thing or two from checking your source code. Thanks for that. Keep working at it. And i would love to see the responsive version soon. cheers

👋Hi Moemin!

👍Good job on this one! I have some suggestions to improve this solution:
* For the company logos section, I recommend to make it one column on mobile, since right now they are too small on my mobile device.
* I recommend to always use double quotes instead of single quote for all HTML attribute, like this. It is just common practice.

<div class="container"></div>

* For all img tags, you need to have alt (alternative text) attribute. You can leave the `alt=""` empty if the images are decorative only.
* For the "Get Started" button, you should have `type="submit"` since that will be submit an email if this is a real website.
* I recommend to use `ul` and `li` tags for the list of links and the list of company logos. 
* Heading tags must go in order, which means you need to use h1, then h2, then h3, and so on.
* I recommend to use `rem` or sometimes `em` instead of `px`. Using `rem` or `em` will allow the user to control the size of your page based on their browser setting.
* I recommend to wrap all your content except the footer with `main` tag.
* For the `footer`, I recommend to use `footer` element instead of a `section` tag.

Tips for validating your code:
* Always validate your HTML first before you upload to the internet. You can use this official HTML validator from W3C
Link:
https://validator.w3.org
* Also for the CSS:
Link:
https://jigsaw.w3.org/css-validator/

That's it! And keep learning!

Quality feedback, thank you vanzasetia for taking the time to jot all this down. Can't say I disagree with anything, appreciate the support!

Hi brother, I believe you didn't push up all your changes. Your repo is pretty empty.

This is my first time partaking in a challenge recreating a simple landing page with HTML and CSS. Critics are very much welcome and appreciated. I hope you can also give me some advice like in what aspects should improve and practice more. Thank you.

Was this made for mobile only? Looks broken on Desktop for me.

hm looks good on my end! tested in both chrome and firefox. what were you testing on?

This is amazing, i'll feature this in the next community highlight on Twitter and the newsletter! 🔥

You should try to add object-fit: contain in the brand section to avoid warping the images

Good job!!! I think it will be better if you write logo as a tag with function onclick reload page  

Great work. Congratulations .
One thing , maybe the dark mode should be global and affect other pages as well.
Happy coding

Oh, thank you for your feedback. I'll do that.

Thank you for your feedback, ill look into it.

You changed the width of body that resulted in inresponsiveness of your website. Use padding in body for gap

Hi SauravHeavyCoder
Thank you for the feedback provided. much appreciated
I will try it in the future and if i understand you correctly i should rather use a 10% padding on the left and right and not a fixed width of 80% with a margin of 0 and auto.


Hover animation on navbar links is so cool. How you do it?

Nice bro. Just update your live website link.

You didn't set up GitHub Pages to see the website live.

Very great work and neat codes but you should try to reduce the width of the hero-image img so the hero image wont overlap the footer at full screen for desktop.
Also you can try reducing the (*) padding so the gradle menu in it can align well with the rest in the drop down menu 
great work!!! whoever you are

sorry the Repositorie is deleted by mistake check my another submission.
thankyou

I checked your source code and I have had similar issues.
You can try changing the way you added the images where you do something like this
<img src="Assets/Checkmark.svg" alt="checkmark"> instead of
<img src="../Assets/Checkmark.svg" alt="checkmark">
The first one will work locally and on deployment. 
If it works, you might try writing it down so it's easier to get next time.
I am looking forward to seeing the site once the images show. Cheers.


Hi Tomiwalex! This project looks great! The only thing I noticed was your min-height on your body was set at 200vh. I changed it to 100vh and the footer stayed at the bottom of the page. You really did a great job!

You did so well. I want to know a few things about Bootstrap5.

I had issues when I viewed the page on my mobile phone, it all changed from what it was on the developers tool screen size for mobile, the issue now is, I don't know the specific breakpoints in my source code that I'll track modified and correct so that the page won't have issues.
I don't know what breakpoints to track, how can I do that

Hello Nicholas, you should have tried hiding the get-in-touch button for the mobile design, asides that, the code is Perfect.


Also the link you provided to view the source code isn't for this developer portfolio challenge, try making an adjustment, as I'd also like to see the code and check for the possible ways I've made mistakes while writing my own code for the same challenge.

Moreover, what was the breakpoints you used in designing for mobile and desktop?

The designs I Made for my mobile doesn't seem like the mobile design when I published the challenge and viewed it on a mobile phone, I'd like to know how you did yours or if you experience the same difficulty.
Thank you

Uploaded wrong netlify link, not in the index.html

Correct link: https://dazzling-druid-2cd454.netlify.app

Hello friend. At least in mobile when you open the menu and then products, you can close the menu En products is still visible. You can keep scrolling the page and touching outside the menu and it won't disappear until you select a product. Hope little feedback helps

Hey FreshtaM you made a wonderful project  as same as design  is provided. I think you do more work on it's mobile first version you can clearly se that your nav bar is started breaking in 1222px so at that time you could hide it as it is not looking appealing at that time. And I think you forgot to add functionality (products) in nav bar as given in design.

Spense Challenge

{"ops":[{"insert":"Spense desktop website version using React js\n"}]}

Spense desktop website version using React js

{"ops":[{"insert":"I used vite with vue + windiCSS\n"}]}

Landing page

HTML and CSS with JS (for collapse navbar)

{"ops":[{"insert":"Spense landing page challenge with minimum dependencies\n"}]}

Spense landing page

Spense Landing Page With Improved Accessibility & Image Compression

{"ops":[{"insert":"Tailwind CSS + HTML\n"}]}

Spense Code Well Challenge

{"ops":[{"insert":"Hi! I tried building Spense app with UIKit on Xcode. Hope you enjoy my app!\n"}]}

Spense app built with UIKit

{"ops":[{"insert":"Built with HTML, CSS/SASS, JavaScript\n"}]}

Remix

Using pure html and css

Spense Landing Page Solution

Spense solution

{"ops":[{"insert":"Completed this challenge, nice design. I had a lot of fun doing it.\n"}]}

React with styled components solution

Spense using bootstrap

{"ops":[{"insert":"Challenge performed using html, css, css and javascript\n"}]}

Spense

{"ops":[{"insert":"I learned css and html in 5 days so i'm looking forward practicing\n\n"}]}

Solution

{"ops":[{"insert":"Simple landing page built with Sass\n"}]}

{"ops":[{"insert":"i swear this is the last one\n"}]}

MajeedAlray - Spense Landing Page

{"ops":[{"insert":"This is a good design to work with flex and grid.  \n"}]}

HTML, CSS, SASS, FLEXBOX

{"ops":[{"insert":"This website is done with html and css.\n"}]}

responsive layouts with css 

{"ops":[{"insert":"This prototype was made with HTML, SASS and JS.\n"}]}

Spense with HTML and SASS

Remix in the work

spense landing page made with html and css

Spense Landing Page  - Ayden Ashcroft

Spense Landing Page 

Spense starter store website

Spense starter

spense. web slicing challenge

Spense w/Youtube solution!

Created using CSS flexbox

React Spense Landing Page

Spense.Landing page

{"ops":[{"insert":"I did this project using React JS and Framer Motion \n"}]}

{"ops":[{"insert":"Spense landing page clone only using HTML and CSS\n"}]}

{"ops":[{"insert":"Spence Landing page with flexbox and css grid\n"}]}

Spence Landing page with flexbox and css grid

Spense Landing page

spense_landing_page HTML,CSS, and Javascript

{"ops":[{"insert":"I have used Bootstrap 5.1 for this project. Any feedback is appreciated.\n"}]}

Spense Landing Page solution using Bootstrap 5.1

First timer

Spense Landing Page Submission

Spence Landing Page

{"ops":[{"insert":"I tried to only use CSS in the hamburger menu, it looks good.\n"}]}

Slysux Spense-landing-page

{"ops":[{"insert":"Responsive landing page design\n"}]}

Spense-landing-page-by-anlo

Spense Landing Page Using SCSS & BEM 

{"ops":[{"insert":"Any suggestions would be great.\n"}]}

{"ops":[{"insert":"Thanks for the real life projects.\n"}]}

spense solution by Mr. Ravi

Spense Landing Page Solution by Hayden.

Remix Website

Spense Starter Files

spense landing page

{"ops":[{"insert":"Any feedback will be appreciated.\n"}]}

Created with HTML and CSS, added a little bit of JavaScript to toggle the menu

{"ops":[{"insert":"Made with HTML, CSS and Vanilla JS.\n"}]}

Remix solution by PSPLAWSKI

Developer-Portfolio

Spense Page

{"ops":[{"insert":"My version of Spense landing Page\n"}]}

{"ops":[{"insert":"a simple HTML & CSS Solution\n"}]}

Spense Starter

Demo Spence

{"ops":[{"insert":"Without Figma file.\n"}]}

{"ops":[{"insert":"Amazing Project.\n"}]}

{"ops":[{"insert":"Great for learn html and css, using javascript for hamburger menu only.\n"}]}

My Spense Solution

Mobile-first Spense Landing Page

a bit tricky for me

First Try Not So Responsive Spense

JavaScript30_Navbar

{"ops":[{"insert":"A responsive landing page of Ondeck - Video calling service app\n"}]}

Ondeck - Video Calling Service

{"ops":[{"insert":"Responsive Spense landing page coded using HTML, CSS, and JavaScript.\n"}]}

Remix-starter

{"ops":[{"insert":"Solution to On Deck landing page built with nuxt.js and fully responsive\n"}]}

On Deck solution built with nuxt.js

{"ops":[{"insert":"Ondeck - Javascript30 Navbar  Solution\n"}]}

Javascript30 Navbar Solution

{"ops":[{"insert":"solution to a codewell exercise\n"}]}

ondeck

{"ops":[{"insert":"it was all needed flexbox & Bootstrap for Navbar.\n"}]}

Spense-Landing-Page

Spense Web page

{"ops":[{"insert":"this is my solution to the exercise\n"}]}

Solution to codewell navbar with js

Ondeck

{"ops":[{"insert":"I have coded for desktop/pc.\n"}]}

HTML, CSS, Vanilla JS Solution

Barra de navegacion con JavaScript

JavaScript NavBar

{"ops":[{"insert":"Responsive, with grid and js. \nWithout figma file :( \n"}]}

CodeWell01 - Navbar

Javascript30 Navar

{"ops":[{"insert":"This project was a bit challenging 😅\n"}]}

Navbar javascript

{"ops":[{"insert":"Interesting project\n"}]}

js30NavBar

JavaScript30 Navbar 

javascript navbar

{"ops":[{"insert":"Gone pretty well ! added the responsive menu too.\n"}]}

Gone well

Spense submission

landing page navbar

navbar

{"ops":[{"insert":"This is my solution.\n"}]}

javascript30 navbar

{"ops":[{"insert":"I only use a little bit of Javascript for mobile navigation.\n"}]}

This is my solution

{"ops":[{"insert":"One challenge to get free challenges here all done,\nHappy coding guys\n"}]}

Spense landing page built with HTML and CSS

JS30 Navbar Challenge

Javascript30

Spence landing page with HTML, CSS and JS for burger.

{"ops":[{"insert":"First Challenge complete✌🏻"},{"attributes":{"header":2},"insert":"\n"}]}

LandingPage_Javascript30

Javascript30-Navbar

Spanse Landing Page

{"ops":[{"insert":"it was a little bit difficult adjusting the view for different screen size.\n"}]}

Spense Landing Page Solution

Spense landing page

Spense starter files