1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

[Expert in One Year] Week #0 - Introduction

Discussion in 'Introductions' started by Hiago Lucas Cardeal, May 27, 2016.

0
  1. #1
    Week #0



    Hi everyone! My name is Hiago Lucas, I’m from São Paulo, Brazil. It is my first post here.

    Some years ago I saw videos about web design and I got interested in this topic. The possibility to work in a funny and creativity area like it get my attention. However, I’ve never start to study web development really hard. I used to give up after 2 weeks. I was not inspired enough to really enter in the web development’s world. I needed some motivation.

    Some weeks ago I saw a video in youtube named: “Expert in one year”. The video shows the progress of a guy which has practiced table tennis every day during one year. You can see, week by week, how good the guy was getting. It inspired me.


    So I decided to start my own Expert in One Year Project, not about table tennis, but about web design. Each week I will post some page with all the content learnt during the seven days. Besides that, I will share the bibliography used.


    My objective is to inspire other beginners like me. Sometimes is hard keeping walking when you don’t know how much time the journey will get. So, I want to show to beginners where they will get after exactly one year.


    I don’t have money for a paid course. The things are really really expensive here in my country. So, I will be an autodidact. My studies will be based in books and free material from the internet.


    I’ll probably spend about 2-4 hour per day, every day.


    I CAN’T promise I will post every week. We all know how hard is create a habit. But I promise that I will try to do my best.


    It would be good if you guys evaluate my development. Tell me what to study for the next week, if I need to review some topic or even if I’m in the wrong way.


    Your first help could be telling me some good material to start. Books, sites, link from this forum or even help me to make a schedule for the first month or the whole year. It would help me a lot.


    I’ve start with the book “HTML 5 and CSS 3 for dummies, all in one”. What do you guys think?


    And the mainly question: What do you guys think about this project?


    I will post my fist web page soon.

    Thank you bros!!
     
    Last edited: May 27, 2016
    Hiago Lucas Cardeal, May 27, 2016 IP
  2. karjen

    karjen Active Member

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    73
    #2
    http://www.w3schools.com/ - That's all you need if you are a beginner...
     
    karjen, May 27, 2016 IP
  3. Hiago Lucas Cardeal

    Hiago Lucas Cardeal Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thank you, karjean!!
    I gave a look in the link and it is really good. Probaly i'll set up my early schedule in it.
    Thank you for the suggestion
     
    Hiago Lucas Cardeal, May 27, 2016 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Oh, my, God. No, do NOT use w3schools. Seriously. They're a horrible place to learn, with misunderstood semantics, wrong use of elements and generally bad advice. If you know what you're doing, it's nice for a quick look up of an attribute, not much more.

    If you want to learn web development the right way, I would have a look at www.cutcodedown.com as a start. Then you find @deathshadow on this forum, and go through his post in both this group and the PHP programming group.

    There are so many ways of doing web development wrong, and unfortunately most sources do it wrong on some level. Popular CMSes like WordPress produce horrible code, frameworks like Bootstrap pisses all over semantic markup and so on.

    What you should start with when designing a site is the content. That is the important bit. When you have content, you can start with learning HTML. That's the first step. No CSS, no javascript. Just content, and minimalistic HTML.
     
    PoPSiCLe, May 27, 2016 IP
    sarahk likes this.
  5. Hiago Lucas Cardeal

    Hiago Lucas Cardeal Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    Thank you for the suggestion @PoPSiCLe ! I have just started to read the @deathshadow contribuition!
     
    Last edited: May 28, 2016
    Hiago Lucas Cardeal, May 28, 2016 IP
  6. Hiago Lucas Cardeal

    Hiago Lucas Cardeal Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #6
    Hi bros!

    It's been seven days since I started the project and this is my first progress review.
    My tasks this week were:
    1. Read about 100 pages from “HTML5 and CSS3 for dummies”. In these pages I’ve learnt the HTML5’s basic codes, and I’ve understood its function in a site.
    2. I read some pages from www.cutcodedown.com and now I know how to create a site by the "Progressive Enhancement" method.
    3. Make my first page

    My first page
    [​IMG]
    [​IMG] 
    <!DOCTYPE HTML>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Expert in one Year</title>
        </head>
  
   
        <body>
            <table border="1">
                <tr>
                    <th width="1366" height="140" colspan="3" ><h1>Expert in one year</h1> a web design challenge </th>
                </tr>
               
                <tr>
                    <td width="227" height="615">
                        <!-- Menu 1 - Weeks-->
                        <h2>Weeks</h2>
                        <ul>
                            <li><a href="week0/week0.html">Week #0 - Introduction</a></li>
                            <li>Week #1 - The first web page </li>
                            <li>Week #2 - (Coming soon) </li>
                        </ul>
                       
                       
                    </td>
                    
                    <td width="910" height="615">
                       <!-- Center column -->
                        <table border="1">
                            <tr>
                                <td width="910" height="461">
                                    <!-- Introduction -->
                                    <h2> Introduction</h2>
                                    <h3> Hi Everyone!</h3>
                                    <p>Did you always want to be a web designer, but didn't know how long it
would take? Expert in one year - a web design challenge will show you how good you can be after 1 year of
pure practice. I'm a WD beginner and every week I'll write a new post telling you my progress in the web design studies.
                                    </p>
                                </td>
                            </tr>
                           
                            <tr>
                                <td width="910" height="154">
                                    <!-- Contact -->
                                    <p>Email me: hiago _hq@hotmail.com</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                   
                    <td width="227" height="615">
                        <!-- Right Column -->
                        <table border="1">
                            <tr>
                                <td width="227" height="304">
                                    <!-- Right Column 1-->
                                    <h2> Other Informations</h2>
                                    <ul>
                                        <li>Bibliography</li>
                                        <li>Who am I?</li>
                                        <li>Forum</li>
                                        <li>Other Projects</li>
                                        <li>Progressive Enhancement</li>
                                    </ul>
                                </td>
                            </tr>
                           
                            <tr>
                                <td width="227" height="304">
                                    <!-- Right Column 2 -->
                                    <h2>Objective</h2>
                                    <p>
                                        My objective with this project is to show how good you can be after 1 year of practice.
                                    </p>
                                   
                                </td>
                            </tr>
                           
                        </table>
                    </td>
                   
                </tr>
               
            </table>
        </body>
    </html>
    HTML:
    I KNOW table isn't maked for layout! It's not its function. I just used it like that to organize the ideas till I learn how to make layouts with css.

    What do you guys think about the first page?
    What is your recommendation for next week? What is the next step?
    In the book tha I'm using the next step is to start CSS. What do you think?
     
    Hiago Lucas Cardeal, May 29, 2016 IP
  7. karjen

    karjen Active Member

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    73
    #7
    You should not use Table as container of your content, you should use <div>. Table is only use for containing data.. but this is only my opinion which I have read on some article as well... In my experience table cannot be responsive as well..
     
    karjen, May 29, 2016 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    While I can understand the use of table in this case, to get a "feel" for the layout, it's still not really a good idea. A better suggestion would be to follow more closely along the cutcodedown idea - start with plain text, noting what are headings and making lists and such with for instance 1,2,3 or * * * to note each listitem - then when you have all the content you want on the page (doesn't have to be all the actual content, of course, but at least some facsimile of what you want), then start using the semantically correct elements to contain them. Headings, paragraphs, lists and so on. Disregard any styling at all at this point.

    Granted, this might be easier when you get the hang of CSS, but to me, it seems a little like a backwards step to add code that you're not really gonna use. Apart from that, the code seems simple enough.
     
    PoPSiCLe, May 29, 2016 IP
  9. Hiago Lucas Cardeal

    Hiago Lucas Cardeal Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #9
    @PoPSiCLe Thank you for the support.
    I did something like the cutcodedown idea before start. Check it out! Have I got the idea?
    Content:
    Expert in one Year - a web design challnge

    Introduction
        Did you always want to be a web designer, but didn't know how long it would take? Expert in one year - a web design challenge will show you how good you can be after 1 year of pure practice. I'm a WD beginner and every week I'll write a new post telling you my progress in the web design studies. 

    Menu 1
        Week #0 - Introduction
        Week #1 - The first web page
        Week #2 - (Coming soon)
        Week #3
        .... and so on

    Menu 2

        Bibliography
        Who am I?
        Forum
        Other projects


    Objective
        My objective with this project is to show how good you can be after 1 year of practice.
    Code (markup):
    Markup semantic
    <h1><a href="index.html">Expert in one Year</a></h1> a web design challnge

    <h2>Introduction</h2>
        <h3>Hi Everyone!</h3>
            <p>Did you always want to be a web designer, but didn't know how long it

would take? Expert in one year - a web design challenge will show you how good you can be after 1

year of pure practice. I'm a WD beginner and every week I'll write a new post telling you my

progress in the web design studies. </p>

    <h2> Weeks </h2>
        <ul>
            <li><a href="week0.html"> Week #0 - Introduction </a></li>
            <li>Week #1 - The first web page</li>
            <li>Week #2 - (Coming soon)</li>
        </ul>

    <h2>Other informations</h2>
        <ul>
            <li>Bibliography</li>
            <li>Who am I?</li>
            <li>Forum</li>
            <li>Other projects</li>
            <li>Progressive Enhancement</li>
        </ul>


    <h2>Objective<h2>
        <p>My objective with this project is to show how good you can be after 1 year of

practice.</p>
    Code (markup):
     
    Hiago Lucas Cardeal, May 29, 2016 IP
  10. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #10
    Yup. I think you have a very good grasp for a beginner, and I'm looking forward to seeing what you come up with.

    As a sidenote, there are new elements in HTML 5, which for most purposes are redundant. Therefore there are quite a few tutorials and how-to guides that makes things more complicated than it need be. Some of those are things like header, footer, article, section etc. Granted, I use header and footer, but that's just because I think it makes my code look simpler.
     
    PoPSiCLe, May 29, 2016 IP
  11. Noledge.in

    Noledge.in Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #11
    HOW TO DESIGN A NICE WEB PAGE YOURSELF? STEP BY STEP GUIDANCE. VIDEO TUTORIAL
     
    Noledge.in, May 31, 2016 IP
  12. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #12
    Are you retarded? That is not a webpage design - it's a Photoshop file. Yes, I'm aware that quite a few of the retarded idiots calling themselves webdesigners start in Photoshop - that doesn't mean it's the right thing to do. It's actually completely opposite from "the right thing to do". It's starting backwards, and the design in that video is set width, set height, in pixels, nonetheless (because that makes perfect sense on the web). Also, I could do that design in actual code in less time that it takes watching that video. Which would give you the opportunity to see the page in action, in different sizes, and so on.

    No, sorry, but that is not "webdesign" - it's graphic design, and those two have almost nothing in common.
     
    PoPSiCLe, May 31, 2016 IP
    deathshadow likes this.
  13. Hiago Lucas Cardeal

    Hiago Lucas Cardeal Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #13
    Hi everyone!
    So, i spend this week studying CSS.
    I've learn to give a basic style to the elements...things like background-color, font-family etc. Such as, I learnt the structure of div's, id's and classes. I think I really get the idea of this tools.

    So, In this week's page , I decided to create a simple page with some of this elements.
    [​IMG]
    There is no layout(I didn't learn it yet), but maybe, you can imagine what I tried to do. The idea was to do a mix of the three divs (puzzle, top 5 players, Last news) in a single div.
    What do you guys think?
    I created this page using the cutcodedown method.
    Here is the final version of the code.
    <!DOCTYPE HTML>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <style type="text/css">
                .rodape{
                    text-align:center;
                }
                body{
                    background-color:#F9FCFF;
                    font-size:60%;
                }
                small{
                    font-size:50%;
                }
                .head{
                    text-align:center;
                    background-color:#CCCCB3;
                    font-size:100%;
                   
                }
                .head a{
                   
                    color:#422322;
                }
                .head a:hover{
                    background-color:#B1B24C;
                }
                .puzzle{
                    background-color:#CCCCB3;
                    text-align:right;
                  
                }
                h2,h3{
                    color:#422322;
                }
                .rating{
                    background-color:#CCCCB3;
                    text-align:left;
                   
                }
                .odd{
                    background-color:#B1B24C;
                }
                .news{
                    text-align:center;
                }
              
               
               
            </style>
            <title>Chess Data Base</title>
        </head>
        <body>
            <div class="head"> <!-- Head -->
                <h1><img src="Images/logo2.png" alt="Chess data baase"></h1><small>The best games in one place</small>
                <ul>
                    <li><a href="#"  id="play_b">Play</a></li>
                    <li><a href="#" >News</a></li>
                    <li><a href="#" >Games</a></li>
                    <li><a href="#" >Players</a></li>
                    <li><a href="#" >Share</a></li>
                </ul>               
            </div>  <!-- end head -->
           
           
            <div><!-- content -->
           
                <!--Puzzle -->
                  <div class="puzzle">
                    <h2>Puzzle of the day</h2>
                    <img src="Images/Iceland.png" alt="Icleand">
                    <p>What is the best move for white?</p>
                  </div>
                <!--end Puzzle -->
               
                <!-- rating -->
                <div class="rating">
                    <h2>Top 5 Players</h2>
                    <table>
                        <tr>
                            <th>Player</th><th>Rating</th>
                        </tr>
                        <tr class="odd">
                            <td>Carlsen,Magnus</td><td>2855</td>
                        </tr>
                        <tr>
                            <td>Kramnik, Vladimir</td><td>2812</td>
                        </tr>
                        <tr class="odd">
                            <td>caruana, Fabiano</td><td>2804</td>
                        </tr>
                        <tr>
                            <td>Aronia, Levon</td><td>2792</td>
                        </tr>
                        <tr class="odd">
                            <td>Vachier-Lagrave,Maxime</td><td>1990</td>
                        </tr>
                    </table>
                </div>
                <!-- end rating -->
               
                <!-- news -->
                  <div class="news">
                    <h2>Last News</h2>
                    <h3>Garry Kasparov On Viktor Korchoni</h3>
                    <img src="Images/Korchnoi.png" alt="Korchnoi">
                    <p>The great Viktor Lvovich Korchnoi died Tuesday in Switzerland at the age of 85. His longevity as a top-level player

and his fighting spirit were such that it was easy to hope that he might trick Death himself in a rook endgame and live forever!

Instead, we have our memories of “Viktor the Terrible” and his unmatched lifetime of games that will indeed live forever. I’...</p> <a href="#">read more</a>

                   
                  </div>
                <!-- end news-->
                 
            </div><!-- end content -->
            <div class="rodape">
                It's a site for the Expert in One year project.
            </div>
        </body>
    </html>
    HTML:
    Maybe, It would be interesting if you guys made me some challenges like: "make a site very similar to this one"...or something like that
     
    Hiago Lucas Cardeal, Jun 8, 2016 IP
  14. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #14
    Hi,

    How is you journey going? Don't give up man, keep on going. My progress is in my thread. By reading your thread you are a little in front of me. I'll be learning about CSS and DIVS ect.. from today.

    All the best on your endeavour,
    Chris
     
    Web_Dev_Chris, Jun 16, 2016 IP
  15. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #15
    Also, you might get more relevant feedback/comments if you post it in the HTML/CSS section.
     
    Web_Dev_Chris, Jun 16, 2016 IP