Once you (and the other aspiring developers who commented on this thread) land your first developer job, please let me know. I maintain a Twitter list of several hundred people who (like myself) who got their first developer job after age 30. There are quite a few in their 40s and 50s, too. https://www.freecodecamp.org/news/stories-from-300-developers-who-got-their-first-tech-job-in-their-30s-40s-and-50s-64306eb6bb27/
A while back, we had three campers (that I know of) get coding jobs in the same week: https://www.quora.com/Career-Advice/Has-anyone-landed-a-job-after-completing-a-project-with-Freecodecamp/answer/Quincy-Larson
There was an announcement in December that they were no longer going to try to push for January 1st because it would require the team to grind through the holidays rather than spend time with their families.
However, last week they opened up early access to the Python projects on a limited scale. (Note: Only the final projects are ready, the practice challenges building up to them will be part of the new curriculum.)
A Smarter Way to Learn JavaScript by Mark Myers is amazing. You don't just read a book about JavaScript - you read a short chapter (1 - 4 pgs max), and then do interactive exercises on the internet. 1,200 reviews and 5 stars on Amazon, you be the judge!
I tried reading Jon Duckett's book but reading alone != competency IMO, using and applying after reading does lead to competency.
Also running through Code Academy's JS section can be pretty beneficial.
On a side note I think Daniel Cleveland's structured approach to the FCC front end cert. is an in interesting read.
FreeCodeCamp plans to make money down the line through it's Job Board and from the Employers who hire graduates. This quora post is the best overview from Quincy Larson himself:
https://www.quora.com/What-is-the-business-model-for-Free-Code-Camp
Edit: The actual blog post he refers to - http://blog.freecodecamp.com/2014/10/free-code-camp-doesnt-make-money-and.html
> GIT does not have free private repos.
Do you mean Github? Git does not offer hosting itself, but allows other people to do it. Bitbucket has free private repos (i believe up to 5). Also GitLab might be worth looking into.
Then there are lots of ways to set up a free local private git repo, example - https://bonobogitserver.com/
Props up on codewars challenges, not so many people use them to train. I also like how you split them with tags.
Consider adding:
Here is my tribute page to Anthony Bourdain.
https://codepen.io/bjswing/full/mPWQoy/
Took me some time to get through this one. I think I tried to be too fancy for a first go. I still can't figure out how to optimize it for smaller screens. Any feedback is appreciated!
edit: Looked more in to media queries and figured out how to make it more responsive. Thanks for all the feedback!
Howdy!
The most similar thing I found is this section.
Try to see if this is what you wanted: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ .
Have a good day!
Yep, they currently have a JS course that deals with those topics:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/
I'd suggest mastering two of the building blocks of web (HTML and CSS) before diving deep into Javascript. Read more about HTML Semantic Elements, Shadow DOM and for CSS learn about animations, grid, flexbox and some of its best practices such as BEM CSS.
Free Code Camp has a great chat room:
https://www.freecodecamp.org/news/introducing-freecodecamp-chat/
You can get help more immediate help with coding, as well as the support of an amazing community.
I will say that it's totally normal to feel overwhelmed when learning to program. It's probably been a long time since you've learned something "from scratch", especially something which requires you to learn a new way of thinking.
So long as you are able to "solve" the challenges, I suggest that you keep moving forward. Once you get well and truly "stuck", then you can reach our for help.
Yeah, it's nice question and interesting for me too.
I've found some statistics in Quincy's answer on Quora:
> As of November 17, 2015, no one has completely finished Free Code Camp's curriculum - though 22 people have earned a Full Stack Development Certification. > > After you complete the first 400 hours of Free Code Camp, you'll earn your Front End Development Certification. So far 208 campers have earned this. > > Then, after the completing the next 400 hours of Free Code Camp, you'll earn your Full Stack Development Certification. So far 22 campers have earned this. > > The last half of Free Code Camp involves building 4 full stack applications for nonprofits. This amounts 800 hours of real world work experience, working with an agile team (two developers, a professional Agile Project Manager, and a nonprofit stakeholder). > > Through these projects, our open source community has also provided about half a million dollars worth of pro bono coding work for nonprofits. 13 projects have been completed, and 4 more are currently active. > > No camper has completed more than 1 nonprofit project so far, because at that point, they are generally able to go get a software engineering job. We're hopeful that we can get more campers to come back and continue doing pro bono coding after they accept job offers.
Now more than a month passed from that date and maybe /u/quincylarson has something more to say.
RE: How Many have been Completed - As of Nov 17th: > Through these projects, our open source community has also provided about half a million dollars worth of pro bono coding work for nonprofits. 13 projects have been completed, and 4 more are currently active.
Completed Projects:
http://www.freecodecamp.com/nonprofits/directory
Full Details here:
https://www.quora.com/How-many-people-have-finished-the-FreeCodeCamp-curriculum-so-far
The problem FCC has is not a lack of Non-Profit projects, it's people getting jobs before they can participate on them. I think that's a problem I don't mind having.
It has been a busy few months. For anyone who wants to see the code, it's in the SRC folder here: https://github.com/ttches/TwitchFavoritesReact
You can also see my original here: https://codepen.io/ttches/pen/mOXXeg
My app now saves changes to local storage and has the functionality to delete streamers which I wasn't able to figure out on my first attempt. Aside from that, the app is MUCH faster and I think less ugly. Thanks for checking it out and I appreciate any feedback, this is one that I'll hopefully be showing to future employers.
The best alternative is Github Pages, let each developer unleash their own creativity in publishing their blog. Is this centralization of all content in one place really necessary?
There are third party APIs that track client IP info. You don't have to use Navigator and you can bypass user permission.
https://ipinfo.io/developers/getting-started
JSON responses will look like this:
{
"ip": "8.8.8.8",
"hostname": "google-public-dns-a.google.com",
"loc": "37.385999999999996,-122.0838",
"org": "AS15169 Google Inc.",
"city": "Mountain View",
"region": "California",
"country": "US",
"phone": 650
}
Tip: Make sure to turn off CodePen's auto-reload feature, which is on by default. Otherwise you'll quickly burn through your daily rate limit.
Team Treehouse has a pretty good intro to AJAX course. Although it's a subscription site you can get a free week trial and then cancel your membership (this is what I did).
Team Treehouse Basic AJAX Course
I found that following along with project tutorials from this YouTube channel very helpful. However he doesn't' actually use an API for the random quote generator, but I believe he does for the local weather project.
There were 2 problems:
Cross-origin requests happen when you use external services like JSBin or CodePen. Read about it here.
Getting location from that API request didn't work. Unsure why, but even with a CORS affix on the API url, no data was getting sent back. Typically, you should ask a user to share their location, so I implemented another way of getting the user's location:
https://codepen.io/kylemh/pen/GEdBRM?editors=0011
Additionally, if you use CTRL+F to search for NOTE, CHALLENGE, or FEATURE - I've left some tidbits in there for you to accomplish.
I reorganized your code a bit and spruced up the syntax. Hope this helps!
Nevermind, i tried out Wunderground's API and it seems to do the trick! - https://www.wunderground.com/weather/api/d/pricing.html?MR=1
Here's my version 2 of my weather app, it just took maybe 20mins of testing and editing to move to the new API - https://codepen.io/Fattox/pen/mPxzgg?editors=0010
the idea of smallest common multiple is actually simple.There are procedures taught in grade school how to find this, but the most elegant is this theorem in number theory.
Given two nonzero integers a,b, a*b = gcd(a,b)*lcm(a,b)
Therefore, lcm(a,b) = (a*b)/gcd(a,b)
So a pseudocode for this is
Step 1: Compute gcd(a,b). One option is to use Euclid's Algorithm. https://crypto.stanford.edu/pbc/notes/numbertheory/euclid.html
Step 2: Compute a*b
Step 3: Compute a*b/gcd(a,b)
The challenge is how to implement this in JavaScript because the Bonfire in question involves arrays.
I think they are intentionally difficult and rightfully so.
Bonfires test how you think algorithmically; it also tests your problem-solving ability
They test how, as well as help you learn to become, intimate with JavaScript syntax.
Item #2 is learning more and more about JS syntax in particular but also CS principles in general. Thus, JS waypoints help, as well as more advanced JS books.
Item #1 is probably the rationale why Computer Science curricula have courses in mathematics and physics, even though many programmers don't actually use the content of these courses in their day-to-day programming tasks. It's just that these courses provide a playground for problem solving.
A famous book on problem-solving is How to Solve It by George Polya. Although more practical for solving computation-based mathematics and physics problems, anyone could extract its principles for other domains.
A more relevant book for programming is How to Solve by Computer by R. G. Dromey. It takes the principles of the Polya book and shows how to use them for programming.
https://www.quora.com/Which-books-are-the-best-for-starters-in-programming-world
ETA: Another gem I found that has good reviews is Introduction to Algorithms: A Creative Approach by Udi Manber
Thanks!!! For applying to FCC as a writer, you can find all the details here - https://www.freecodecamp.org/news/how-to-write-for-freecodecamp/
I don't think freeCodeCamp is too "hand-holdy" but I can see how some people get that impression. In practice, if you just drop new learners into a certification project (like the Tribute Page) without teaching any of the concepts first, most people will be overwhelmed. Our solution is to make the lessons optional, so people who don't want to do them can instead jump straight to the projects, and then still earn the certifications.
In the next version of the freeCodeCamp curriculum, we are distributing these certification projects evenly through out, so that people start encountering them much earlier in the process. You can read more about the upcoming curriculum improvements here: https://www.freecodecamp.org/news/building-a-data-science-curriculum-with-advanced-math-and-machine-learning/
And one other thing to keep in mind – the core curriculum is just that – core. We have more than 7,000 tutorials on other math, programming, and computer science concepts. If you are the kind of person who likes to learn in a non-linear manner, you can learn almost any technology topic on freeCodeCamp, for free and at your own pace.
I personally don't know the minimax thing.
I simply went from memory on how to never lose at tic tac toe, this post describes it well.
Just make that into your algorithm. If I start here and later starts here do x, if poster starts elsewhere do y.
Every time it's the AI's turn, check if it can win by finishing a line, if not check if it needs to block the opponent from winning, and if not continue with the algorithm.
If you do so you can make a simple yet unbeatable tic tac toe AI. Hope that helps even though it wasn't what you asked for. ^^;
I think you should search for something called PWA(Progressive Web Apps). These allow you to convert your website into an app kind of thing without the need to be installed from any app Store. You should go through this article as it completely explains about PWAs. PWA
I hope this might answer your question.
Don't use libs like bootstrap and jquery. You're trying to learn, not save time.
Don't use id's for styling - use classes.
The second background image is a bit blurry on big screens - use one with a higher resolution.
The social icons don't look like the official icons and are different sizes. Also they are images. Use svg's or fonts for icons. Check this out - https://icomoon.io/app/
Order styling in order of importance
#contactMe { color: #9c9c9e; background-color: #2a2c2d; text-align: center; height: 300px; }
#contactMe {
height: 300px;
text-align: center;
background-color: #2a2c2d;
color: #9c9c9e;
}
Try and make the navbar switch it's active element as the user scrolls.
Other than that - good job. Much better than my first portfolio page.
freeCodeCamp is built largely by volunteers, but they do have a small staff.
For new curriculum that they are still building, freeCodeCamp was able to raise enough money to pay professional educators in relevant fields to help design the curriculum.
If you would like to be part of the community that builds freeCodeCamp, you can check out contribute.freecodecamp.org
Quincy often suggests people start off by applying for jobs locally, but I see that doesn't seem to apply in remote Oregon. Are you willing/planning to move once you get a job, or are you looking to work from home. Quincy has said several times that working from home isn't a good idea because telecommuters get less promotions and laid off more frequently. Something about its easier to give promotion to friends and lay off people you don't know. Anyways, a lot of people in your situation feel that doing freelance jobs online is the way to go. I haven't tried this personally, but I haven't gotten far enough into FCC to feel confident enough to do a job yet.
Hopefully this will help: https://www.quora.com/How-can-I-make-money-by-coding-and-programming-from-home-while-I-am-in-college-If-theres-a-way-what-is-the-best-way-to-learn-programming-as-a-beginner
We are a not a non-profit.
At the moment we don't have much overhead. We pay less than 200 dollars for servers. That is our only cost at the moment. https://www.quora.com/How-does-FreeCodeCamp-pay-for-servers
We are Open Source/Creative Commons. The campers themselves help us get better at what we do. They help build curriculum, features, and help with support and bug fixes. In return, they help the community grow, support other campers, and make it easier for us to grow. This is one of our biggest strengths.
While we are working to get to the point where we can pay for our servers and pay ourselves, we have made certain promises that will never be broken. We will NEVER charge our campers, we will NEVER charge the non-profits that work with our campers, and we will NEVER put content behind a paywall.
We intend to get to the point where it would be impossible for Free Code Camp to disappear (I think we may already be there). Worst case scenario, development would slow down, but I don't see that happening anytime within the next couple of years.
Happy Coding!
What's up man. So you're pretty close, here's what I would do.
For each of your <li> elements that you want to have the medal as the bullet point, set the CSS style for the <ul> to none (which you've already done), and then add the icon in directly into the HTML using the fontawesome code.
Then target the <i> element from fontawesome with your CSS and set the padding-right to whatever you want! That will put some spacing between the medal icon and the text, giving you the look that the medals are actually the bullet points.
I created a fork that gets the Unknown author working as expected and demonstrates what I say above. Also, you should move the function definition of generateQuote out of $(document).ready() and just leave the function call itself in there. My pen also shows this, in case my description doesn't make sense. Otherwise, keep up the good work! I look forward to seeing your future projects!
Honestly depending on your software skill set currently (and the market you are competing in) the nano degree might be a better option because they have the job guarantee https://www.udacity.com/nanodegree look at the bottom of the FAQ's.
If your javascript skills are up to par (you can do the algorithms and front end projects without much hassle) just start applying for jobs and keep on the FCC route.
If you your java script skills are like mine or most people jumping into FCC and not very good for your specific situation/desired resolution you might lean towards the nano degree.
This is just my opinion from having started the nano degree and than jumping into FCC since the cost was a deal breaker for me on the nano degree
The creator of this piece is Vincent Maglione, here is his full codepen profile.
It looks like he's been doing web development for over a decade, so nobody should feel like they should be producing this quality of stuff right off the bat. However, I still think it is cool to see how creative you can get with any of the FCC projects:)
You should really optimize the photo of yourself.
It's nearly 2.5 megabytes, there's really no reason for it to be more than 20-30kb.
Reduce the size in pixels (currently 4272x2848 and only displayinng at 310x290) and run it though https://tinyjpg.com/ or optimize it locally yourself.
Hi Alando, I see what you're trying to create here. I think you'll benefit from putting some images and resizing text etc. items. You can find beautiful and legally usable photos from https://www.pexels.com/. Also, your portfolio images are your crowning achievements, so make sure those circles are MUCH bigger than contact buttons/circles at the bottom. In your portfolio page, you want to highlight your work, not just how to contact you. Beyond those two small suggestions, I think rest of it is a good start! I like the color scheme. Blue, gray, and white make a good combo. Well done on a good start. Good luck with rest of the FCC journey!
If you have node and npm installed then there's a ton of neat tools that you can use to improve your workflow.
For example in the terminal:
mkdir new-project cd new-project yo <generator for framework of of choice>
Then wait while a boilerplate file structure and files are automatically placed in the new-project
directory for whatever I want. Could be a basic html/css layout, or an angular application ready to go, or a react/redux application, or a node/express app. There's boilerplate generators for everything.
Hey, I don't have any feedback for your portfolio but you don't necessarily need to make a cloud9 account to do backend. I host all my projects on a site called Glitch, and it can do Node.js stuff as well (all the api's I've built are hosted via it).
I think you could use Glitch.com instead of Cloud9 but I'm not 100% sure. But you should be able to do the backend stuff locally on your machine too. Look for Node.js tutorials online, they often show you how to install and use node locally :-)
Thank you for sharing!
Hahah, I posted a similar thread just with way more anger here. I got a ton of great advice.
The gist of it is that it's certainly okay to take a peek at other pages to get ideas, and it's 100% necessary to google the shit out of everything you want to do, particularly when starting out. I literally had to google how to put a caption under that image.
My tribute page didn't end up looking exactly how I wanted it to, but I figure the more I do the better I'll get so I just moved on. Then I created my Portfolio page as well, which is also painfully boring and not exactly how I'd like it to look but I think I'll return to it in a bit and make it look nice.
A good idea is to create a few divs and give them random background-color values to see what they look like and how they react etc. Should give you an idea of where to start. Once you get that figured out it's more or less just putting text & pictures where you want.
That's more of a text editor with syntax highlighting than an IDE. I would recommend Atom for a good text editor. It has an easy to use package manager and UI. You won't need a fully-fledged IDE until you're making bigger projects with lots of moving parts. When that times comes I'd recommend Webstorm.
You say
>because I can't make my project looks aesthetically pleasing
Why is that? Is it a code thing, or is it because you don't have an eye for design? If it's the latter, as /u/hutxhy says, you would normally get a designer to tell you what it looks like in a work setting. If you're working on personal projects, just try coding nice designs from dribbble.com (or/and get inspiration from there).
​
freeCodeCamp tends not to include material that is specific to local environment in their main curriculum. There are several articles and how-tos on freeCodeCamp News though.
Is it important to get super familiar with an IDE right now? Eh. Not really. You'll probably _want_ one as you advance, because you'll be working on larger projects and probably get benefit out of working locally. The basics are pretty straightforward and extremely googlable.
VSCode is generally a good recommendation for somewhere to start. It's free, it works on all operating systems, and it's widely used. The basic editor used in freeCodeCamp is based on VSCode and lots of other online software - like GitHub and Stackblitz - use variations on the VSCode online editor.
Mostly just doing the Free Code Camp certification projects. They're pretty well self contained and require specific skills to complete. Additionally, our "Take Home Projects" are excellent. Most of them used to be part of the curriculum.
Beyond that, you can always come up with your own projects. I was forever solving problems large and small at work that I could automate with Visual Basic for Applications (VBA, the Microsoft Macro Language), or in Google Sheet's scripting tool (in Javascript).
It doesn't really matter the language, as long as you're solving real problems.
Why do you have header
in your section
?
HTML attributes should be lowercase and separated by dashes. For example carouselVideo
is bad practice
A switch-case would be more tidy than:
if (this.className === 'carouselImage nextToSelectedLeft') {
$imagesCarousel.flickity('playLeftSlowPlayer');
} else if (this.className === 'carouselImage nextToSelectedLeft2') {
$imagesCarousel.flickity('playLeftFastPlayer');
} else if (this.className === 'carouselImage nextToSelectedRight') {
$imagesCarousel.flickity('playRightSlowPlayer');
} else if (this.className === 'carouselImage nextToSelectedRight2') {
$imagesCarousel.flickity('playRightFastPlayer');
}
Why not ES6/7?
Why are you storing all those variables at the top of resizeCells
. Wouldn't it be better if they were in the globals scope? Why do you put $ in your variable names
There wasn't much effort put into browser support in your CSS, apart from the random webkit prefix. Decided which browser your support and be more consisent. Don't half ass two things, whole ass one thing.
Your CSS especially needs more formatting. Consider splitting it up into different files as well
// SOURCE: https://codepen.io/carlosalvarez91/pen/Mowdyv THIS IS NOT MINE!
Then why did you use it?
Looks nice in big screens. Nice background
You can use CodePen Analyze HTML, Analyze CSS to check your code.
Use your browser or view the code in your mobile device to check if it's working well.
Share full screen of your pages: https://codepen.io/mrtstephenson/full/qMWVLr
I had asked this once before. I was told that it is best to review them unless you work with the lesson material frequently. Waypoints are optional, so they are not necessary to get the certification.
Here is a Quora link where Quincy answers what is necessary and what is optional. https://www.quora.com/Is-it-possible-to-skip-the-waypoints-at-FreeCodeCamp
The simplest way would be to put top and bottom padding only on the .nav-link
class, so the height of the navbar is determined by the height of those links. Right now you have padding on the nav
which will put space around the links. Also note that inline-block
is misspelled in the .nav-link
block.
Hi!
I wouldn't recommend using text over a gradient for an entire section, it's kinda tiring for readers when it doesn't have that much contrast and you have to read more than 3-5 sentences, that's why that effect its almost kept to headers/titles or short things like that, there are however, some workarounds!
I did notice you changed the color halfway to keep it readable but it's confusing changing the format in the same section, I say keep the same font color and try to use it most of the time.
The font is kinda heavy on the eyes and I lose myself in the radio & checkboxes because there isn't all that difference between question and answers (I notice I made the same error! so thx!), try changing the font-weight.
This selector too:
.input-container input
Try using the type selector first and then the class one like this:
input .input-container when you are by yourself it isn't all that of a problem, but when you're working with others this can be a bothersome detail.
I made a fork and changed some things, have a look!
Also, thanks a lot! I'm redoing my survey form tomorrow and seeing yours gave me a lot to think about.
From your settings you need to agree to the Academic Honesty pledge. Then you can claim the certificate. Whether it shows up on your profile or not depends on your privacy settings.
I wasn't part of that discussion, so I can't say for sure. Maybe part of the problem came from not wanting to associate freeCodeCamp with a particular platform. freeCodeCamp groups started out on Facebook, which has the obvious problems. Then most freeCodeCamp groups were on Meetup. Then this happened: https://www.freecodecamp.org/news/the-wework-meetup-debacle-and-a-new-chapter/
The last I heard, members of the freeCodeCamp community were working on building a free and open source platform for managing community groups. That's presumably going to replace the tool that we used to have.
The TypeScript documentation is pretty excellent and has links to a few different tutorials and courses, as well as code sandboxes to try it out in the docs. I can't really add more myself as I'm actually a product guy rather than an engineer and my direct skills are crap (hence why I started doing some of the FCC stuff on the side and lurk in this sub), but hopefully that'll help!
I do and for me it helps so much, I would recommend it. When I first started I was not taking notes and then I got to the Tribute Page..... lets just say I had no clue what to do. So I went back and wrote down everything which helped A LOT.
It all depends on your learning style though. I use pencil and paper, others will put it in Word or Google Docs. Either way I still do recommend it.
Also I would add that it is good practice to put notes in your code. It helps other people know what is going on, also helps you figure out what is happening. You might come back to it one day and have forgotten how a particular project works.
Here is my Pomodoro Timer for an example of notes in my code. I possibly put to much, but I rather that then not enough.
Quick follow up:
I did it!! Thanks for the help! Tweet button working and everything!!
https://codepen.io/dbrudner/full/LzMgJG/
Learned a bunch! Followed it up by making the weather app too!
https://codepen.io/dbrudner/full/GMYLpJ/
Thanks so much for the help!!
I'm not sure if I'm understanding you right, but I think you're asking why the blue button doesn't run the click animation 1 second after clicking the green button?
Because right now the way you have it, the blue button is "being clicked" 1 second after clicking the green, but the animation is not showing. I do not believe you can apply pseudoclasses (in this case, ':active'), via jQuery.
What I did was created a new class called '.active-button', that does the same thing as 'button:active', and then used jQuery's addClass method in the clickColor function, and then a timeout to remove that class shortly after.
Let me know if you have any questions. Link: https://codepen.io/anon/pen/ZXvxPp?editors=0111
The UI looks great, but if the user presses on the same button too fast, there is no audible or visual feedback that the button has been pressed again, but as long as the game expected that button twice, it is accepted as a correct input.
You could solve this either by stopping the previous animation and sound to start a new one, with a tiny delay, or you could prevent additional user input until the previous animation has been processed.
If you want to mimic the original Simon game, have the button light up and sound on click down, and stop the light and sound as soon as the click is lifted (not before). This allows the user to go as fast as they like without any action collisions.
You can see how I did this in my pen You can also use the keyboard in mine, which is nice, though my UI is crap compared to yours.
The white space isn't bad. It was just enough that I thought maybe something was supposed to be there. Normally people have a jumbotron, or a title with a subtitle there with an image behind it.
Like this one: https://getbootstrap.com/docs/5.0/examples/album/
To be honest, I wouldn't have thought about 2K either. I just happened to move it over to that screen so I could look something up... figured it was worth mentioning. :)
Have a great day, and keep on building!
It's a good question. The best way to apply what you learn is to build the certification projects at the end of each section. They are designed to get you thinking and working with large, ambiguous (but not too ambiguous) problems. Then, after you finish those, build some more projects. There's no shortage of ideas out there. Florin Pop has a list of 100 of them he built here: https://www.freecodecamp.org/news/how-i-built-100-projects-in-100-days/
I searched around a bit and it seems like it pulls data from the OpenWeatherMap API. I'm not 100% sure but the ID from my test responses match and it also returns the same icons.
Read up on it here https://pages.github.com/, but it's super easy. You basically just create a new repo called your-username.github.io. Then you can push content into it and it's hosted.
They can run on Jekyll, which is a static site generator and can make it easier to add/manage content, might be of interest a bit further down the line.
This guy http://html5up.net/ has built a lot of pretty good templates to gloss over if you need something to imitate. He's really good: I'm done with all front end and most of backend, with months of exp and still don't really match him imho.
My best tip for you is to learn and install Github now in your computer and use Github Pages. Once you have a repo up, make a HTML file and begin linking CSS and JS files as you please and practice with that. You'll get used to stuff. :)
It's a good start! It looks like you know what you're doing with HTML on that page, but I'd recommend working on the coloration and font choice.
For learning more about mixing colors, I've been learning a lot from https://material.google.com/
For fonts, check out https://fonts.google.com/
Your code 'works' in the sense that everything functions and displays without throwing an error, but the design could use some work.
Design can be tricky and tedious, though. It's something I struggle with a lot. Don't take that as a hard critique, but merely as something that could be great with some more practice.
I had the same problem, after looking around it turns out that for some reasons images uploaded to imgur are blocked by codepen.
There are two solutions to this, either load the source image in your browser once using its link or just try using another website for uploads Cloudinary worked great for me.
Hey! Fellow UC Student!! I'm from UC Davis yeeee!
Awesome start here on your portfolio. Pretty dope that you included a download link to your resume!
Suggestions
Adding some header text to the project, and each section would be amazing so user's can understand quickly what the website is and what each section is.
Some your name / brand name next to your branding logo might be a good touch.
A monochromatic or triad color scheme would bring a little more life to the portfolio. I often use Paletton to help decide colors.
Maybe try using bootstrap's .img-rounded / .img-thumbnail for your portfolio items and .img-circle for your profile pic.
Awesome stuff man. I look forward to seeing more of you work!
Hmmm, how about trying to go with a similar color scheme set by FCC by using white as the background and green to replace those black bars.
You can also try using a tool like http://paletton.com/ to help you with colors.
For future projects, I recommend using a monochromatic or triad color scheme! =]
Also, it's cool if you don't want to follow the css convention. It's all personal preference! You just gotta be able to adapt when your future team selects specific conventions to follow.
I encourage everyone to at least try unit testing at some point with their language of choice. Any project that you will end up maintaining will benefit from unit tests. Or at least integration tests.
I know the article went over Mocha but there is also Jasmine. The basic syntax is very similar.
Try Prepros - it have infinite trial and sometimes offer to buy itself like Sublime. You add project in Prepros, press 'Preview' -> 'Open live preview' and it updates page automatically every time when you save any file from project.
I did this bonfire yesterday, OP. I don't think you're going to get a much better explanation than this one without it crossing the border of hand-holding!
I will add this link about 'falsies', which are what you're trying to filter for - http://www.sitepoint.com/javascript-truthy-falsy/
And also give a hint that it's not always enough to filter explicitly against a falsy value as shown at the top of Bdenzer's post. This might give you a problem, or it did for me at least (cough NaN cough)... so try to think of other ways to return true/false for more/all at once.
To start with, just try and get as many of the tests passing as possible, and then you'll start to see what else is needed, plus any flaws in your current methods. If you're struggling, just copy/paste the similar true/false tests next to each other, and you'll soon see why something should be returning false.
Wouldn't have noticed, 2.954px × 3.292px indeed is impressive :D
But well fixable. I'm surprised by how it still gets mostly good numbers on pagespeed insights, even though the start page loads a simulated 22.35 seconds (implying mobile network speed) on that single file. I wouldn't take their advice on "modern" image formats, though, there seems to be none working on all major browsers, so you would be left with some JavaScript solution and all your assets in multiple formats.
I'm not beginner in programming, I'm beginner in JavaScript. I've practiced a lot at hackerrank, but always in Python. If you don't know this site I recommend it, there is a lot of challenging stuff.
Thank you for your answers. I hope they get more challenging, I like challenging stuff.
I've fixed the collision problem but now I'm having a problem with the remove method. Neither the uncommented nor the commented version passes the test. https://repl.it/JToi/4
Edit: Nevermind, I got it.
Hey, first of all congrats on finishing your first project. As far as i can tell, i like the NHL and like that you did it on a sports team or a player in this case. i was close to make mine about the ny knicks, but then i realized theres nothing to tribute when it comes to this franchise :D
as constructive criticism i can say, work a little more with font sizes and maybe even different fonts. The color in the header, of sundins quote, makes it tough to read on my pc because of the leaves. and as caption for images i like it a little smaller.
also i would adjust the image sizes and maybe take a better portrait pic, the resolution of the picture is a tad too low for the size you chose.
other than that. good job on the button and topic ;)
//edit
https://codepen.io/Zup/full/XadeRP/
this is my tribute page i finished a couple days ago. Working on my portfolio now, everything in there are just placeholders, as i am playing around with css styling at the moment. i only learend from FCC aswell, and i rly love how they go about teaching to code. keep it up my friend
oh and you have a typo in the headline in his name
Hey, so I didn't want come off as being mean. So... take a look at this codepen where I rewrote your JS to take advantage of the jQuery you were already including, and some of things I was talking about in my earlier reply.
Open a browser's console - there is an error message:
> Mixed Content: The page at 'https://codepen.io/ecntlr/pen/wJaRNg' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ipinfo.io/'. This request has been blocked; the content must be served over HTTPS.
You cannot retrieve information from insecure (http) external sources if your page hosted on secure server and delivered via https protocol
What a coincidence, I made a tribute page for Bruce too! https://codepen.io/systemallica/full/GrXRXr/
I would suggest you to take this tribute page project as a way of getting used to the tools(HTML, CSS, JQuery, Bootstrap) and then try to make something more professional with your portfolio. I think that your project looks just fine. Just add some colour and some kind of graphical separations between paragraphs if you want. Anyway, take this advice with a grain of salt, because I'm just learning, same as you.
Hmmm, i guess I was basing my answers on the FCC "Calculator" that is linked on the FCC page: https://codepen.io/freeCodeCamp/full/rLJZrA
doing 4+6*2 on that gets 20. Im actually thinking that most cheap calculators do NOT use Order of Operations, but instead go step by step, however ones like TI-83 and such do use them. (im not saying your wrong im just noting what i've noticed in other codepen calculators)
and yeah I know about the overflow problems (thanks for reminding me, i keep forgetting to fix it lol)
The gap thing is weird, i've tried pushing them closer but it doesn't seem to respond to margin fixes. Any suggestion?
That's because you set col-xs-3 and col-sm-3 , that means that there will be four movies showed in one row on small and extra small screen. If you want bigger pictures set those to 6 and there will be two movies in one row.
Second,remove margin from dvds id (btw this should be class because you are using it in more places) and set padding instead . Because margin will increase column size .
And last , you should use div for column and then put img inside div, also you should use img-fluid to keep image aspect ratio. Like this.
<div class="col-xs-6 col-sm-6 col-md-3 d-flex align-items-center justify-content-center" id="dvds"> <img class="img-fluid" src="http://i.imgur.com/hojqOq1.jpg"></div>
That makes more sense. It look like the focus was on design. It just felt weird not being able to click on stuff on the google page :D.
On the weather api I used https://www.wunderground.com/ Here is my awful looking implementation in codepen if you want an example: https://codepen.io/Locrin/pen/GjQKrX
Happy coding.
Hello, your quote API does not serve over HTTPS -- required for codepen.io --, so it's nothing you could do, except... get a site that has a quote API that serves over https like in this forked example of your project
https://codepen.io/anon/pen/kXpQrJ
*Edit:
Or even better, make your own quotes locally, this challenge has nothing to do with using API's
Nice job.
It's tricky, but there is a way to load the profile picture of offline users.
Design-wise, I found it odd that when you hover over an online user that it switches to a color that blends in with the rest of the page.
I also just finished the Twitch project. It'd be great if you could give me some feedback too. https://codepen.io/mattgwater/full/dXmQxV/
Are they? These are the ones listed on the challenge's page:
I can't comment on production systems, but you can take a templating approach with Angular: https://docs.angularjs.org/guide/templates
I've also come across them in Jekll which uses Shopify's Liquid templating system.
Sure, that's a nice approach! Just don't forget to create a way of backlinking things. If you like to keep info in GitHub, which is perfect for devs, give the foam a try. You can also analyze possible unexpected relations by looking at the foam graph! :muscle
Was going to make a smart ass remark about the 360p quality, but realized it's from 2007.
So in lieu of that; for those unaware Douglas Crockford is a well respected person in relation to JavaScript and his book, JavaScript: The Good Parts, is highly recommended by almost everyone.
I'd add the "The Non-Designer's Design Book" by Robin Williams as another brilliant resource for programmers trying to make their designs look a bit more professional.
Thanks a lot for your feedback. I added a Google font, border-radius, and changed the colors. This is version 5 of my tribute page. I got some inspiration in the color scheme by looking at this David Bowie tribute page on Dribbble.
Do you think I'm "getting there," or are there some major changes that should be made? Thanks again.
Yeah so for example, I might want to display some cards, so I'd have a look at dribbble, then maybe take this - it looks nice, it's just some cards (rather than a whole sophisticated landing page), then I'd try to reproduce it. I'd also do the same with actual code on the site.
“Having a couple projects you can show off speak more that you are a capable coder than showing off a bunch of certificates.”
This. So much this. Really great advice right here.
Having the “knowledge” with certs is one thing, but employers look for “skills”, which can only be demonstrated through the things you’ve actually built.
If I could make one recommendation, other than continuing your studies with https://www.freecodecamp.org/ , try building some of the projects on https://www.frontendmentor/
The projects they provide will really hone what you’ve learned, and more importantly, it’s a great way to show your skills to future employers!
Here is a great blog post from Quincy Larson, founder of fCC, about why he created the site:
https://www.freecodecamp.org/news/a-cautionary-tale-of-learning-to-code-my-own-eddb24d9d5a7/#.hz9rrdd0r
I think the key thing is not to be distracted by the next shiny new "hot" language/technology. The programming (the thought process behind writing code) as opposed to the "coding" (the process of taking your thoughts and turning them into something the computer can understand) is the more challenging thing to learn. Changing the language you are trying to learn in (code in) adds complexity to the large challenge of learning to program.
Programming vs. Coding vs. Development
https://www.freecodecamp.org/news/programming-coding-developement-whats-the-difference/
so FCC gives quite a few in this blog post. Although you may have already gone through these.
Then it really depends on what you are looking for. Just take whatever concept you are trying to learn. Usually the title of whatever section you are working on in FCC. Search that and add keywords like tutorials, examples, etc.
This may help you: https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/
tldr: add text-align: center; in #img-div
love that you can take criticisim on board.
keep in mind though, that I kind of think the difficulty level still needs to be challenging - I actually found out about you guys because you are developing a reputation out there that achieving certifications through your website are legitimately challenging and rigorous... It would be good if it stays that way :-) (not even kidding, check this thread out! https://www.quora.com/Does-a-certificate-from-W3Schools-com-have-any-weight)
Personally, I've been very much a 'hobby' coder for a while and decided to take the plunge and study to take it to a more professional level --- I've been LOVING your waypoints so far, and nothing beats the satisfaction of finding the missing link to complete your challenges!
Keep up the awesome work, I cannot understate how grateful I am for your website!!
Something else I feel worth pointing out: the training you get a FreeCodeCamp is legitimately developing a reputation.
How I found FreeCodeCamp?
This thread here. Give it a read before complaining about how hard FreeCodeCap is... because if you go ahead and dumb it down you're going to do damage to this budding reputation...
https://www.quora.com/Does-a-certificate-from-W3Schools-com-have-any-weight
I know this isn't what you're looking for, but I had a similar problem. What I found that really helped was doing drills; practicing really helped me see how it all fit together. There's a book called A Smarter Way to Learn Javascript that has an accompanying website where you can do drills. It's not a replacement for FCC, but it worked well for me as an enhancement.
Context? Is this from the freeCodeCamp Python video course?
Here is the code typed out, it runs accurately imo. What part looked suspicious or incorrect to you? I added in an additional print statements so you can see what is happening with the "meat: of the function: https://repl.it/repls/StrictHardtofindMacrolanguage
Absent any code, I was not sure how you were adding a handler, but I was able to make it work.
Here is a Repl I made: https://repl.it/@SaintPeter/YummyHuskyCommand
Here is my Javascript:
// Fetch the first element with a classname 'header-country' var header = document.getElementsByClassName('header-country')[0];
// Add an event listener for 'click' to the header header.addEventListener('click', headerClickHandler);
// Event listener handler to display an alert when the // event is triggered function headerClickHandler(event) { alert('Header Clicked'); }
UPDATE: I took the advice below and moved everything to one single react component. So I'm good now. It surprisingly wasn't too hard to rearrange all of the code. Here is the updated version in-case anyone is curious.
Heads up, you can wrap code in the code block syntax to make it nicer to read! (More Info)
This explanation may help:
https://forum.freecodecamp.org/t/profile-lookup-exercise-confusion/459415
name
is referring to the firstName
of a contact.
prop
is referring to the name of a property a contact can have.
For example, contacts[0]['number']
would return '0543236543'
.
If prop
is the value likes
, then it hasOwnProperty(prop)
is the same as hasOwnProperty('likes')
, so it's checking does the object have a property named likes
.
Does that make sense, or is it still unclear?
I agree that it could be done much more simply. Everything was done in order to meet the requirements of the project on this page: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page
This is a subreddit about freecodecamp after all :)
It doesn't really matter what language you start with. Most languages are fairly samey. The prime differences, for a novice, have to do with the setup required to write in them. HTML, CSS, and Javascript are great because you can edit them with any old text editor and view the results in your browser.
The much more important thing is that you choose one language/technology and stick with it, rather than haring off after "the next cool thing" that you most recently heard someone talk about.
Quincy Larson, founder of Free Code Camp, has a great article he wrote about the inspiration behind his creation of fCC: https://www.freecodecamp.org/news/a-cautionary-tale-of-learning-to-code-my-own-eddb24d9d5a7/#.hz9rrdd0r