₦airaland Forum

Grandlord:
I get it that MDN can make you bang your head against the wall several times but I sort of like learning the hard way

I just figured out this is your first time learning an actual programming language because HTML and CSS are not really programming languages, so yes, you'll have some difficulty catching up. Well, JS is a good language but I started with python and I'd say it was easier understanding the basics of programming(variables, data types, conditionals, loops, functions, objects, classes etc) with it.

RemiAbdulSamad:
Yea, the dude didn't answered the question but at least he provided some helpful learning resources. I was about referring you to Brad video about web development roadmap for 2020 when I saw your post. You can also check out CodeStackr Web Development Practical Roadmap 2020.

As for me, am a self taught front end web developer and here is how I got started.

Right from onset, I love design and I knew I wanted to be a front end web developer building and designing sites and web apps.

I searched online for how to become a front end web developer and I was welcomed by answers suggesting that I learn HTML, CSS and JS. I also meet some pro wen developers during a particular Google Developers Fest I attended and I was told to learn HTML, CSS and JS if I want to be a front end web developer.

Now, having know what I need to learn, the next thing is to get learning resources. Coming from a non-computer science background and with no cash for coding bootcamp, I decided to teach myself coding.

I start by downloading w3schools offline version, ebooks and some video tutorials and courses on HTML, CSS and JS worth over 300GB.

After getting the learning resources, the next thing is to get my hands dirty and start learning.

Firstly, I started with HTML. HTML is f**king, oh sorry, I mean pretty simple. In less than 2 weeks I was done with HTML. Note: if you are about to learn HTML, just focus on the basics, understand them and build some simple stuff. Even if it look shitty, just put your HTML knowledge to practice.

Secondly, after I was done with HTML, I was eager to lay my hands on CSS. And yes, CSS is super awesome and beautiful. It brought life and energy to my shitty HTML pages. HTML is super big and it took me sometime to master it, but it was fun and interesting. CSS including advanced CSS and Responsive Design took me 3months.

While learning CSS well enough I started building some projects including replicating some designs I saw on dribbble.

After learning CSS, I proceeded to learning a CSS preprocessor (Stylus, Less and Sass, I chose Sass, don't ask me why). A CSS preprocessor makes your CSS super dope and it also adds superpower to it and in fact, it can make your CSS fly, yes it give them wings.

Not only did I learn a CSS preprocessor, I also choose a CSS framework too and that's where bootstrap comes in. Bootstrap is cool, I love it. It make my CSS a while lot better and it's easier to learn. Actually, there are many CSS frameworks but I decided to chose bootstrap due to it's popularity and a while lot of coys and developers are using it and not only that, most front end developer jobs I have seen so far requires knowing it.

After completing my CSS journey, I moved to learning JS. I just started learning JS and it ain't funny but am trying to grab it. I have some some courses and ebooks am going through and I hope I get better at it. Recently, I read it somewhere online that jQuery too ain't bad so I after am done learning JS. So once am dome with JS, I will be learning jQuery and then i will proceed to learn a JS framework but for now I really want to sit my ass down and master JS and also build some mouth breaking and eye popping (am not sure if those words exist, you can google sha) projects.

Resources:::

YouTube Channela

1. Brad Traversy (me and Dev Ed call him daddy, he is the web development daddy on YouTube)

2. DevEd - This dude has a playful way of teaching. His videos are good. Sometimes, I think he is too playful

3. Web Development Simplified - His tutorials are simple and straight to the point.

4. NetNinja - This guy sabi break tutorials down. Most of his videos are in series and are very educative.

5. 6. 7. & 8. AcadeMind, Julio Codes, Easy Tutorials and Online Tutorials


Books

1. You Don't Know JS by one Kylier Something like that. The book is in series and up to 5 I think

2. You don't know JS. (can't remember the author's name

3. HTML & CSS: Build and design websites by john duckett.

4. HTML and CSS by Shay Howe.

You can get all these books in PDF version on pdfdrive.com

Udemy Courses

1. Web Development Courses By Jonas Scehedemant

2.JS Course by Wes Bos and

3. Complete CSS course by Acade Mind.

Other resources::::

Codecademy, Scrimba.com, Css-tricks.com


Thanks. If you've got any questions or front web development gigs for me just quote me.

Thanks.

***drops mics and wait for other comments and quotes***

Taofeekdboy:
To get started, I am a Graphic Designer and was tired of doing one skill, I venture into programming.

I started learning Python which took me 3 weeks to master all the basics, then I was like is that all?. I made a research on mobile development and web development, opted for web development, decided to go for Django because of its heavyweight and full stack development over flask. Well it has been 6 months of learning Django, the learning curve gets deeper everyday and have built alot of projects with Django such as; functional blogs, Super Heros websites I built for my company, colleague management system I built for my company as well.

In between, I was learning Javascript, mastered the basics within a week because of my Python knowledge, I started learning React, I built some websites with Django as my backend, React as my frontend, apps like where you can search for player and team details in the world.

My Learning Curve
Python(Advance python)
Django
JavaScript
React
Angular(little knowledge)
Java(intermediate)

Right now, I am working on an ecommerce website integrated with stripe payment, music app with React and Django.
It was not that easy combining all of this with my job but dedication, passion have made it possible.

All courses I took are from Udemy and Mosh Hamedani, the latter is a guru and a good mentor.

RemiAbdulSamad:
I swear MDN frustrates me sometimes and that what led me to settle down with w3schools in the first place.

And bro you are goddam right, am actually new to programming language and am really having a tough time. Now how long did it took you to understand JS

crownedrookie:
Front end had never come easy for me so I've pretty much ignored it. Recently got a project to build an e-commerce website for a perfumery company though so I decided to attempt using bootstrap for the first time.
Design is not my forte so don't worry about giving me input on design ideas but since you've learnt bootstrap I thought to ask
This is what I wanted to go with and I'm satisfied with the look on desktop. On mobile though, the section I positioned the card and the product details in reverse stacks with product details above the card.
Any idea how I can make the product details for the middle section also appear below the card in small screens and below?
Also how can I reduce the size of the card and product details in small screens and below? Its taking up all 12 cols and I don't like that its too oppresive. Col-sm-* obviously isn't working
Sorry for poor picture quality. Airtel network is poor I had to compress first

RemiAbdulSamad:
Bro, you guys should please stop. I dey beg.

Grandlord:
Like I said, I started with Python and I'm now learning JS while doing projects in Python. JS is not really challenging for me though because I've had the basics down with Python. It's just basically the same thing so I kind of sped through it to get to the unique parts of JS; Events, DOM, etc.

For you though, you'd have to take your time to understand the basics. There's no point rushing. You listed all those amazing resources earlier. I'd say follow them religiously. Learn and relearn. If you cannot handle JS at first, you should maybe look into python because it's the language mostly recommended for beginners as it's easier to learn the core concepts with it.

RemiAbdulSamad:
Hey bro am just seeing this now. Am also using airtel network, no qualms. Here are my suggestions.

1. The reason why the text is coming above the picture is because in your codes it's obvious the text comes before the image. Now to make the text come after the image you need to float the text to right and after floating ensure to clear your float. Because by default the text is being floated to the left. This is what I mean--

Target the paragraph containing the text, you can give it a class name. e.g sample-text. Now create a CSS rule like >>>

Now apply the above rule with media queries. like this

@media screen and (max-width: 600px) {
.sample-text {float:right;}

This means that once the width becomes 600px like the size of a smartphone, the text will automatically float to the right, coming under the image.

And yes, don't forget to clear your float.

2. Regarding the size. Using media queries you can use also reduce the size of the card. I believe both the card and product details are in a container, all you need to do is to reduce the container size and also don't use px when setting width, try and use percentages.

e.g

Assuming the container housing the image and product details has a class of container-div. You can also use media queries, something like

create the CSS rule for the class.

@media screen and (max-width: 600px) {
.container-div {
width:70%;
add some margin and padding to make it look dope. and yes, don't forget to use box-sizing:border-box;


Hope I answered your questions. If you don't understand, I can write the codes in my editor, see how it work and send it to you.

Grandlord:
Like I said, I started with Python and I'm now learning JS while doing projects in Python. JS is not really challenging for me though because I've had the basics down with Python. It's just basically the same thing so I kind of sped through it to get to the unique parts of JS; Events, DOM, etc.

For you though, you'd have to take your time to understand the basics. There's no point rushing. You listed all those amazing resources earlier. I'd say follow them religiously. Learn and relearn. If you cannot handle JS at first, you should maybe look into python because it's the language mostly recommended for beginners as it's easier to learn the core concepts with it.

Grandlord:
Cool.

I've watched Brad do something like this in his CSS crash course video

RemiAbdulSamad:
Hey bro am just seeing this now. Am also using airtel network, no qualms. Here are my suggestions.

1. The reason why the text is coming above the picture is because in your codes it's obvious the text comes before the image. Now to make the text come after the image you need to float the text to right and after floating ensure to clear your float. Because by default the text is being floated to the left. This is what I mean--

Target the paragraph containing the text, you can give it a class name. e.g sample-text. Now create a CSS rule like >>>

Now apply the above rule with media queries. like this

@media screen and (max-width: 600px) {
.sample-text {float:right;}

This means that once the width becomes 600px like the size of a smartphone, the text will automatically float to the right, coming under the image.

And yes, don't forget to clear your float.

2. Regarding the size. Using media queries you can use also reduce the size of the card. I believe both the card and product details are in a container, all you need to do is to reduce the container size and also don't use px when setting width, try and use percentages.

e.g

Assuming the container housing the image and product details has a class of container-div. You can also use media queries, something like

create the CSS rule for the class.

@media screen and (max-width: 600px) {
.container-div {
width:70%;
add some margin and padding to make it look dope. and yes, don't forget to use box-sizing:border-box;


Hope I answered your questions. If you don't understand, I can write the codes in my editor, see how it work and send it to you.

EngtTemmy:
Please can I get udemy Django courses from you

RemiAbdulSamad:
Hey bro am just seeing this now. Am also using airtel network, no qualms. Here are my suggestions.

1. The reason why the text is coming above the picture is because in your codes it's obvious the text comes before the image. Now to make the text come after the image you need to float the text to right and after floating ensure to clear your float. Because by default the text is being floated to the left. This is what I mean--

Target the paragraph containing the text, you can give it a class name. e.g sample-text. Now create a CSS rule like >>>

Now apply the above rule with media queries. like this

@media screen and (max-width: 600px) {
.sample-text {float:right;}

This means that once the width becomes 600px like the size of a smartphone, the text will automatically float to the right, coming under the image.

And yes, don't forget to clear your float.

2. Regarding the size. Using media queries you can use also reduce the size of the card. I believe both the card and product details are in a container, all you need to do is to reduce the container size and also don't use px when setting width, try and use percentages.

e.g

Assuming the container housing the image and product details has a class of container-div. You can also use media queries, something like

create the CSS rule for the class.

@media screen and (max-width: 600px) {
.container-div {
width:70%;
add some margin and padding to make it look dope. and yes, don't forget to use box-sizing:border-box;


Hope I answered your questions. If you don't understand, I can write the codes in my editor, see how it work and send it to you.

crownedrookie:
As a rule in what type of situations do you use bootstrap and what type do you write your designs from scratch?

soleexx:
I was a fan of Web Development for decades now.. I finally study Computer Science and I got all the chance and motive I needed to be a developer...

Firstly I knew I couldn't do these alone.. So I search all around for an expert and mentor... I got one..
Then I started with HTML for a month
CSS for a month
JavaScript for 2weeks
Graphics design for 3weeks
PHP for months
Database for months..

Now I'm a certified FrontEnd Web Developer
And I'm proud of my Digital skills


I will advice if you wanna learn web Development

Try to always build from scratch

RemiAbdulSamad:
Free Online Courses With Coupons Applied!!!

1. React Native Mobile App - design, code and publish

https://www.udemy.com/course/react-native-mobile-app-design-code-and-publish/?couponCode=FIGHT_COVID19

2. JavaScript Modern ES6 - 2020 - The Complete Course

https://www.udemy.com/course/javascript-tharunshiv/?ranMID=39197&ranEAID=Z*nNMT6UOvY&ranSiteID=Z.nNMT6UOvY-7VGkj9sv3cIpkJ.8uT7_IA&LSNPUBID=Z*nNMT6UOvY&couponCode=JS_FREE

3. Java Programming Fundamentals

https://www.udemy.com/course/java-programming-fundamental/?couponCode=STAYHOME

4. Build Portfolio Website Using HTML5,CSS3,jQuery & Bootstrap

https://www.udemy.com/course/build-portfolio-website-using-html5-css3-jquery-bootstrap4/?couponCode=F5352AE9821B36FC62C9

5. Complete Guide To Learn Excel: Go From Beginner To Pro

https://www.udemy.com/course/complete-guide-to-learn-excel-go-from-beginner-to-pro/?couponCode=MSERT8911

6. JavaScript & front-end (not only) for back-end developers

https://www.udemy.com/course/fe4be-en/?couponCode=FREE_FRONTEND

7. Practical Web Development: 22 Courses in 1

https://www.udemy.com/course/the-complete-web-development-course/?couponCode=FREEWEBDEV2020

8. Programming with Python : HandsOn Introduction for Beginners

https://www.udemy.com/course/python-programming-beginners/?couponCode=COVID19

9. Python Flask for Beginners: Build a CRUD web app using Flask

https://www.udemy.com/course/python-flask-beginners/?couponCode=COVID19


All coupon codes are working as of this time.

cc::: grandlord et al

Grandlord:
Cool pages

Your graphic design expertise came into play here, I guess?

soleexx:
Absolutely Bro! I will always advice any one new to Web Development to try and learn The web program 100℅ and also Graphics 100℅... That's the only way you can bring out a creativity in your designs...


Web design is all about Creativity!

Grandlord:
I agree.
Graphic design is really powerful, not just in web dev but also in apps, games, and even data visualization. UX/UI designers do a lot of work and earn a lot as well.

RemiAbdulSamad:
Yea, the dude didn't answered the question but at least he provided some helpful learning resources. I was about referring you to Brad video about web development roadmap for 2020 when I saw your post. You can also check out CodeStackr Web Development Practical Roadmap 2020.

As for me, am a self taught front end web developer and here is how I got started.

Right from onset, I love design and I knew I wanted to be a front end web developer building and designing sites and web apps.

I searched online for how to become a front end web developer and I was welcomed by answers suggesting that I learn HTML, CSS and JS. I also meet some pro wen developers during a particular Google Developers Fest I attended and I was told to learn HTML, CSS and JS if I want to be a front end web developer.

Now, having know what I need to learn, the next thing is to get learning resources. Coming from a non-computer science background and with no cash for coding bootcamp, I decided to teach myself coding.

I start by downloading w3schools offline version, ebooks and some video tutorials and courses on HTML, CSS and JS worth over 300GB.

After getting the learning resources, the next thing is to get my hands dirty and start learning.

Firstly, I started with HTML. HTML is f**king, oh sorry, I mean pretty simple. In less than 2 weeks I was done with HTML. Note: if you are about to learn HTML, just focus on the basics, understand them and build some simple stuff. Even if it look shitty, just put your HTML knowledge to practice.

Secondly, after I was done with HTML, I was eager to lay my hands on CSS. And yes, CSS is super awesome and beautiful. It brought life and energy to my shitty HTML pages. HTML is super big and it took me sometime to master it, but it was fun and interesting. CSS including advanced CSS and Responsive Design took me 3months.

While learning CSS well enough I started building some projects including replicating some designs I saw on dribbble.

After learning CSS, I proceeded to learning a CSS preprocessor (Stylus, Less and Sass, I chose Sass, don't ask me why). A CSS preprocessor makes your CSS super dope and it also adds superpower to it and in fact, it can make your CSS fly, yes it give them wings.

Not only did I learn a CSS preprocessor, I also choose a CSS framework too and that's where bootstrap comes in. Bootstrap is cool, I love it. It make my CSS a while lot better and it's easier to learn. Actually, there are many CSS frameworks but I decided to chose bootstrap due to it's popularity and a while lot of coys and developers are using it and not only that, most front end developer jobs I have seen so far requires knowing it.

After completing my CSS journey, I moved to learning JS. I just started learning JS and it ain't funny but am trying to grab it. I have some some courses and ebooks am going through and I hope I get better at it. Recently, I read it somewhere online that jQuery too ain't bad so I after am done learning JS. So once am dome with JS, I will be learning jQuery and then i will proceed to learn a JS framework but for now I really want to sit my ass down and master JS and also build some mouth breaking and eye popping (am not sure if those words exist, you can google sha) projects.

Resources:::

YouTube Channela

1. Brad Traversy (me and Dev Ed call him daddy, he is the web development daddy on YouTube)

2. DevEd - This dude has a playful way of teaching. His videos are good. Sometimes, I think he is too playful

3. Web Development Simplified - His tutorials are simple and straight to the point.

4. NetNinja - This guy sabi break tutorials down. Most of his videos are in series and are very educative.

5. 6. 7. & 8. AcadeMind, Julio Codes, Easy Tutorials and Online Tutorials


Books

1. You Don't Know JS by one Kylier Something like that. The book is in series and up to 5 I think

2. You don't know JS. (can't remember the author's name

3. HTML & CSS: Build and design websites by john duckett.

4. HTML and CSS by Shay Howe.

You can get all these books in PDF version on pdfdrive.com

Udemy Courses

1. Web Development Courses By Jonas Scehedemant

2.JS Course by Wes Bos and

3. Complete CSS course by Acade Mind.

Other resources::::

Codecademy, Scrimba.com, Css-tricks.com


Thanks. If you've got any questions or front web development gigs for me just quote me.

Thanks.

***drops mics and wait for other comments and quotes***