Spense Landing Page

IndieBrew Landing Page

TimeNow Landing Page

{"ops":[{"insert":"Great template to practice your CSS transform and flex skills.\n"}]}

Hosterr Waitlist Page

Multi Step Form 

{"ops":[{"insert":"Practice your CSS, loops, and fetch Javascript skills with this challenge.\n"}]}

Contrast Directory

Workside Job Board

YelpCamp by Colt Steele

Web Developer Portfolio

{"ops":[{"insert":"Perfect for practicing modular components and responsive design.\n"}]}

Personal Blog

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.

This is awesome, love the little animation you've added in the hamburger menu on mobile as well!

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;

Great job, looks like the content isn't constrained to a certain container, though!

Got the same feedback as yours, everything looks great except the hamburger menu, maybe you could even add a placeholder to the email field.

Great job!

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 really good, I don't have any comments design-wise! Great job :D

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!

Both the pages in one:
https://codepen.io/ignitis/pen/PomKLRZ

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, did you have a problem with your images?

Mine has a weird background thing, I can't get rid of.

Great work!
I can't for the life of me get rid of the weird background thing my images have


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.

Well done Jaspal, your solutions are always so well done! 🚀

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?

Thank you so much brother, means alot 😁

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

Really good job man. Try to cap the size of the image on the right side though. Just so it doesn't overflow on larger screens. Maybe flexbox would help make the positioning easier?

Good job Ait, just one note, viewing campgrounds shouldn't prompt users to login, they should be able to view campgrounds without logging in.

Thank you @moeminm,
I've made the changes to meet your requirements.
So user can see campgrounds. but needs to authenticate in order to add a campground or review one.

Project completed.
Users can register, login, add their own campgrounds, and review others campgrounds.
For the image I added an image file upload instead of typing the image url.

Thank you Codewell for this challenge.

There was an issue on post comment, some users kept tapping the post comment button.
 Fixed now, I added a spinner and disabled the Post comment button on form submit. Thank you everyone and happy coding.

Could you share your solution with me? I'm rather new to coding and this would be a great learning experiance for me. 

You can click on 'View Source Code' to see the solution.

Great job Shin, looks like newly added camps are not persisting when you reload the page, perhaps that's something you could Google & learn more about!

Nice work ! You’re definitely not a learner 😮‍💨. I’m done designing the whole project but no JavaScript skills yet. Learning that atm. Anyways where did you get your react training from ? 👀

It's great. I really like your idea for the mobile sidebar.

Awesome work! Everything looks great and I love how you've handled the search function, viewing camps throws me an error though! "Application error: a client-side exception has occurred (see the browser console for more information)." — this happens whenever I view any camp. 

yea i was working on comment section now it's working fine 🚀🚀

it's not responsive only good in mobile view but open in big screens everthing breaks

yes, I forgot to mention that while submitting, only mobile version is ready and also missed search functionality.
Currently working on another urgent project but I submit semi final for review and feedback about current status.

How did you figure out the colors and the gradient? Great work btw!

Thanks bro, I took colors from figma file, gradient form previous solutions 🥺, or make it on special service(i dont remeber exactly)

New Link:
https://bluedeepart.github.io/codewell-challenge/

thats good 

i have one advice instead of using 

Hey, really great solution provided! I just have one piece of feedback, can you try and fit the page in 100vh? Because I think that's what is needed in the challenge

don't know where i am going wrong with my submission.

Every image have include alt attribute :)

Thanks. On a scale of 1 to 10 please rate my work.
Can I show this to recruiters?

create with flexbox and grid methods to help on operation on mobile phones.

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.


The desktop mode on mobile has issues with proper alignment 

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

Nice bro. Just update your live website link.

https://webdevporto-codewell-bef.netlify.app/

updated hamburger menu with small javascript code

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

sorry for this ill be deleting this i've made a mistake in choosing the right link


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

Please Download first then open document 

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.


Hello, can anybody help me? I  finished the desktop view of this project using Bootstrap. Really simple: one row, two cols, and flex column layout for the text, but in order to make it responsive the way it's displayed on the picture * logo, picture, and description* cannot be done the way it's coded. I would have to put the logo outside of the row which is not a good option.. Any solutions? Same thing for the table view. Thank you

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!

Spense Challenge

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

Spense desktop website version using React js

I used this challenge to try out mint. 

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

Landing page

Excellent gradient and flexbox practice. 

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":"I build this is site with Scss.\n"}]}

Time Now

Basic vanilla landing page

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

Spense Code Well Challenge

{"ops":[{"insert":"Comments and suggestions are welcome.\n"}]}

Hosterr Landing Page

Build Using SCSS

{"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"}]}

Using pure html and css

{"ops":[{"attributes":{"code-block":true},"insert":"\n"}]}

InderBrew -Codewell

Spense Landing Page Solution

Spense solution

INDIE BREW solution

{"ops":[{"insert":"Purely used the Bootstrap 5 base classes to structure and style the form.\n"}]}

Hosterr page with Bootstrap 5

{"ops":[{"insert":"it's a good challenge,i learned more from it , and I advice anyone to do it\n"}]}

Website (html5 css3 bootstrap)

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

React with styled components solution

Hosterr Starter Landin page with  HTML, CSS, JavaScript &  GSAP

 TimeNow/Pricing with Bootstrap 5

{"ops":[{"insert":"Build with react, tailwind css and styled component. \n"}]}

React Tailwind css

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":"Hosterrr Landing page.\n"}]}

Hosterrr

{"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

spense landing page made with html and css

Spense Landing Page  - Ayden Ashcroft

Hosterr Waitlist Page with HTML, CSS and JS

IndieBrew (HTML/CSS) by Njorthr

{"ops":[{"insert":"This was encode with practically effective HTML and CSS language........\n"}]}

Hosterr website design 

Hosterr waitlist landing page

Spense Landing Page 

Spense starter store website

IndieBrew Responsive Code With HTML Tailwind CSS and JS

Spense starter

Free Hosterr Waitlist Page

spense. web slicing challenge

TimeNow Challenge (HTML/CSS) by Njorthr

Spense w/Youtube solution!

{"ops":[{"insert":"Made it using html and css , responsive for mobile devices to laptop . \n"}]}

IndieBrew landing page and sign-up page

Created using CSS flexbox

Hosterr Waiting Page by nadineamanda.com

React Spense Landing Page

{"ops":[{"insert":"Responsive IndieBrew landing page. Build with HTML&CSS.\n"}]}

IndieBrew Landing page 

{"ops":[{"insert":"Html and CSS only\n"}]}

IndieBrew landing page

Responsive Design using Tailwind CSS and Fetch API

Spense.Landing page

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

Multistep form concept with Drag and Drop API

{"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

Finished Using Tailwind CSS and Semantic Tags

{"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":"Built with Grid css and Flexbox.\nI hope your feedback\n"}]}

{"ops":[{"insert":"TimeNow pages made using html , css and bootstrap\n"}]}

TimeNow main page and Price page

{"ops":[{"insert":"Hosterr page using Grid and flexboxx\n"}]}

Hosterr Page using Grid

Hosterr Website

{"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 

YelpCamp Codewell Challenge

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

{"ops":[{"insert":"I made this challenge using html, css and js.\nAny feedback would be great.\n"}]}

{"ops":[{"insert":"I have learn a lot by making this real life template with starter files.\n"}]}

indiebrew solution

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

Y.E.L.P.C.A.M.P.

Yelp Camp

YelpCamp challenge from codewell